/* ========================================================================== FSMS design system Enterprise SaaS reskin. Theme via . All legacy component class names are preserved; only the chrome (sidebar + app bar) and tokens were re-architected, so every page inherits the new look. ========================================================================== */ :root { /* brand + status (warm, muted, accessible) */ --green: #2d6a4f; --green-d: #1f5038; --green-ink: #ffffff; /* primary / success */ --brand: #2d6a4f; --brand-d: #1f5038; --brand-wash: #e6efe8; --purple: #3f6f8a; --purple-d: #2f5266; --purple-ink: #ffffff; /* info (muted slate-blue) */ --info: #3f6f8a; --info-wash: #e9eef1; --amber: #9a6c10; --amber-wash: #f4ecd9; --red: #b3402f; --red-wash: #f6e7e2; --radius: 11px; --sans: "Work Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --tap: 46px; /* warm light surface scale (parchment / cream) */ --bg: #f1ece1; --panel: #fffdf8; --panel2: #f3eee3; --line: #e4ddcd; --ink: #322e26; --muted: #615c4e; --soft: #7d7768; --topbar: rgba(255, 253, 248, .9); --hover: rgba(51, 47, 39, .05); --check: transparent; --shadow: 0 1px 2px rgba(51, 40, 25, .05), 0 8px 24px rgba(51, 40, 25, .07); --ring: rgba(45, 106, 79, .30); /* navigation rail (warm espresso operational spine) */ --rail: #2a2520; --rail-2: #39332b; --rail-ink: #ece6d8; --rail-soft: #a89f8c; --rail-line: rgba(255, 255, 255, .09); --rail-active: #2d6a4f; --rail-accent: #e6c79a; --sidebar-w: 248px; --sidebar-cw: 72px; --appbar-h: 60px; } [data-theme="light"] { --bg: #f1ece1; --panel: #fffdf8; --panel2: #f3eee3; --line: #e4ddcd; --ink: #322e26; --muted: #615c4e; --soft: #7d7768; --topbar: rgba(255, 253, 248, .9); --hover: rgba(51, 47, 39, .05); --shadow: 0 1px 2px rgba(51, 40, 25, .05), 0 8px 24px rgba(51, 40, 25, .07); --ring: rgba(45, 106, 79, .30); } [data-theme="dark"] { color-scheme: dark; --bg: #191510; --panel: #231e18; --panel2: #1e1914; --line: #3a332a; --ink: #f3eee3; --muted: #c2b9a7; --soft: #9c937f; --topbar: rgba(25, 21, 16, .92); --hover: rgba(255, 255, 255, .06); --shadow: 0 12px 32px rgba(0, 0, 0, .45); --ring: rgba(120, 200, 150, .35); --green: #4f9e76; --green-d: #3d7e5c; --brand: #4f9e76; --brand-wash: rgba(79, 158, 118, .16); --purple: #6f9fbe; --purple-d: #5b88a6; --info: #6f9fbe; --info-wash: rgba(111, 159, 190, .16); --amber: #d6a64a; --amber-wash: rgba(214, 166, 74, .16); --red: #e08a7c; --red-wash: rgba(224, 138, 124, .15); --rail: #15110c; --rail-2: #241e16; --rail-ink: #e8e1d2; --rail-soft: #a89f8c; --rail-line: rgba(255, 255, 255, .07); --rail-active: #4f9e76; --rail-accent: #e6c79a; } * { box-sizing: border-box } html { -webkit-text-size-adjust: 100%; font-size: 15px } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 100%; } a { color: var(--brand); text-decoration: none } a:hover { text-decoration: underline } [data-theme="dark"] a { color: #7fd6a6 } h1 { font-size: 1.5rem; font-weight: 750; letter-spacing: -.015em; margin: 0 0 .2rem } h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em } h3 { font-size: 1rem; font-weight: 700 } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 8px } .mono, .batchno { font-family: var(--mono); font-feature-settings: "tnum" 1 } .muted { color: var(--muted) } .small { font-size: .85rem } .skip-link { position: absolute; left: -999px; top: 0; background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 0 0 10px 0; z-index: 200 } .skip-link:focus { left: 0 } /* ========================================================================== App shell — left sidebar + app bar + content ========================================================================== */ .app-shell { display: flex; min-height: 100vh; width: 100%; } .app-shell.collapsed { grid-template-columns: var(--sidebar-cw) 1fr } .sidebar { position: sticky; top: 0; height: 100vh; background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; border-right: 1px solid var(--rail-line); z-index: 60; overflow: hidden } .side-brand { display: flex; align-items: center; gap: .6rem; padding: .85rem .8rem; min-height: var(--appbar-h); border-bottom: 1px solid var(--rail-line) } .side-brand .logo { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(150deg, var(--rail-active), var(--green-d)); color: #fff; font-weight: 800; font-size: 1.05rem } .side-brand .bx { display: flex; flex-direction: column; line-height: 1.1; min-width: 0 } .side-brand .bx b { font-size: .95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .side-brand .bx small { font-size: .62rem; letter-spacing: .16em; color: var(--rail-soft); text-transform: uppercase } .app-shell.collapsed .side-brand .bx { display: none } .side-nav { flex: 1; overflow-y: auto; padding: .6rem .3rem 1rem; scrollbar-width: thin } .side-nav::-webkit-scrollbar { width: 8px } .side-nav::-webkit-scrollbar-thumb { background: var(--rail-line); border-radius: 8px } .nav-group { margin: .5rem 0 .15rem } .nav-group .gl { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rail-soft); padding: .4rem .5rem .25rem; font-weight: 700 } .app-shell.collapsed .nav-group .gl { text-align: center; font-size: .5rem; padding: .4rem 0 .2rem; border-top: 1px solid var(--rail-line); margin-top: .4rem; color: transparent; height: 8px; overflow: hidden } /* nav links live in .side-nav .nav a (re-uses the legacy .nav a hook) */ .side-nav .nav { display: flex; flex-direction: column; gap: 2px } .side-nav .nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .5rem; border-radius: 9px; color: var(--rail-ink); font-weight: 550; font-size: .9rem; line-height: 1.2; white-space: nowrap; transition: background .12s ease, color .12s ease } .side-nav .nav a:hover { background: var(--rail-2); color: #fff; text-decoration: none } .side-nav .nav a.active { background: var(--rail-active); color: #fff; font-weight: 650; box-shadow: inset 3px 0 0 var(--rail-accent) } .side-nav .nav a .ico { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; opacity: .95 } .side-nav .nav a .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7 } .side-nav .nav a .lab { min-width: 0; overflow: hidden; text-overflow: ellipsis } .app-shell.collapsed .side-nav .nav a { justify-content: center; padding: .6rem 0 } .app-shell.collapsed .side-nav .nav a .lab { display: none } .app-shell.collapsed .side-nav .nav a.active { box-shadow: none } .side-foot { border-top: 1px solid var(--rail-line); padding: .6rem .6rem .8rem; display: flex; flex-direction: column; gap: .4rem } .side-foot .who { display: flex; flex-direction: column; color: var(--rail-soft); font-size: .78rem; line-height: 1.25; padding: .35rem .55rem; border-radius: 9px } .side-foot .who b { color: #fff; font-size: .86rem } .side-foot .who:hover { background: var(--rail-2); text-decoration: none } .side-foot .btn-out { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem; border: 1px solid var(--rail-line); border-radius: 9px; color: var(--rail-ink); font-weight: 600; font-size: .85rem; background: transparent } .side-foot .btn-out:hover { background: var(--rail-2); color: #fff; text-decoration: none } .app-shell.collapsed .side-foot .who b, .app-shell.collapsed .side-foot .who span { display: none } .app-shell.collapsed .side-foot .btn-out span { display: none } /* app bar */ .app-main { display: flex; flex-direction: column; width: 100%; overflow-x: clip } .appbar { position: sticky; top: 0; z-index: 40; height: var(--appbar-h); display: flex; align-items: center; gap: .6rem; padding: 0 1rem; background: var(--topbar); backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid var(--line) } .appbar .icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto } .appbar .icon-btn:hover { border-color: var(--brand); background: var(--hover) } .appbar .icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8 } .appbar .ab-brand { display: none; align-items: center; gap: .5rem; font-weight: 750 } .appbar .ab-brand .logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(150deg, var(--rail-active), var(--green-d)); color: #fff; font-weight: 800 } .appbar .spacer { flex: 1 } .env-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border-radius: 999px; background: var(--brand-wash); color: var(--brand-d); font-weight: 700; font-size: .76rem; white-space: nowrap } .env-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(45, 106, 79, .18) } [data-theme="dark"] .env-pill { color: #9fdcb8 } .appbar .hamb { display: none } .wrap { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.4rem 4rem } /* ========================================================================== Page header ========================================================================== */ .page-head { margin-bottom: 1.3rem; border-left: 3px solid var(--brand); padding-left: .85rem } .page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem } .page-actions .btn { margin-top: 0 } .dashtabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--line); margin: 0 0 1.3rem; overflow-x: auto; -webkit-overflow-scrolling: touch } .dashtabs .dtab { padding: .6rem .95rem; font-size: .9rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; margin-bottom: -1px; transition: color .12s ease, border-color .12s ease } .dashtabs .dtab:hover { color: var(--ink); text-decoration: none } .dashtabs .dtab.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700 } [data-theme="dark"] .dashtabs .dtab.on { color: #86d6a8; border-bottom-color: #86d6a8 } .kicker { color: var(--brand-d); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: .7rem } [data-theme="dark"] .kicker { color: #86d6a8 } .page-head h1 { margin: .12rem 0 0 } .page-head p { color: var(--muted); margin: .25rem 0 0; max-width: 68ch } /* ========================================================================== Cards / KPI / grid / tiles ========================================================================== */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow) } .card+.card { margin-top: 1.1rem } .card h3 { margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 700 } .card>h3:first-child { border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-bottom: 1rem } .grid { display: grid; gap: 1.1rem } @media(min-width:720px) { .grid.two { grid-template-columns: 1fr 1fr } .grid.three { grid-template-columns: repeat(3, 1fr) } .grid.four { grid-template-columns: repeat(4, 1fr) } .grid.side { grid-template-columns: 340px 1fr } } .kpi { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius); padding: 1.05rem 1.15rem; box-shadow: var(--shadow); position: relative } .kpi .lab { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em } .kpi .num { font-size: 2.05rem; font-weight: 800; margin: .25rem 0 .1rem; font-variant-numeric: tabular-nums; color: var(--ink) } .kpi .num span { font-size: 1rem; color: var(--muted); font-weight: 600 } .kpi .split { color: var(--soft); font-size: .82rem; margin-top: .35rem } .kpi.raw { border-top-color: var(--amber) } .kpi.packed { border-top-color: var(--brand) } .kpi.staged { border-top-color: var(--purple) } .kpi.bad { border-top-color: var(--red) } .kpi.info { border-top-color: var(--info) } .tile { display: flex; flex-direction: column; gap: .25rem; transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease } .tile:hover { transform: translateY(-2px); border-color: var(--brand); text-decoration: none; box-shadow: var(--shadow) } .tile-num { font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums } .tile-lbl { color: var(--muted); font-size: .88rem; font-weight: 600 } .tile.bad .tile-num { color: var(--red) } /* ========================================================================== Forms ========================================================================== */ label { display: block; font-size: .9rem; color: var(--ink); font-weight: 650; margin: .8rem 0 .3rem } label .req { color: var(--red); margin-left: .15rem } input, select, textarea { width: 100%; min-height: var(--tap); padding: .7rem .85rem; background: var(--panel); border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .12s ease, box-shadow .12s ease } textarea { min-height: 5.5rem; line-height: 1.5 } input::placeholder, textarea::placeholder { color: var(--soft) } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring) } input:disabled, select:disabled, textarea:disabled { background: var(--panel2); color: var(--muted); cursor: not-allowed } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red) } .field-hint { font-size: .8rem; color: var(--muted); margin-top: .25rem } .field-error { font-size: .8rem; color: var(--red); margin-top: .25rem; font-weight: 600 } select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem } .row { display: grid; gap: .8rem } @media(min-width:560px) { .row.two { grid-template-columns: 1fr 1fr } .row.three { grid-template-columns: 1fr 1fr 1fr } } fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1.1rem } legend { font-weight: 700; font-size: .95rem; padding: 0 .4rem; color: var(--ink) } .yn { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem } .yn .yn-r { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none } .yn label { display: flex; align-items: center; justify-content: center; margin: 0; min-height: var(--tap); padding: .6rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--panel); font-weight: 700; font-size: 1rem; color: var(--muted); cursor: pointer; user-select: none; transition: all .1s ease } .yn label:hover { border-color: var(--brand) } .yn .yn-r:focus-visible+label { box-shadow: 0 0 0 3px var(--ring) } .yn .yn-r:checked+label.yn-yes { background: var(--brand); border-color: var(--brand); color: #fff } .yn .yn-r:checked+label.yn-no { background: var(--red); border-color: var(--red); color: #fff } /* ========================================================================== Buttons — primary / secondary(ghost) / tertiary(link) / danger ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 42px; padding: .52rem 1.05rem; border: 1.5px solid var(--green-d); border-radius: 10px; font: inherit; font-weight: 700; font-size: .9rem; line-height: 1; cursor: pointer; background: var(--brand); color: var(--green-ink); margin-top: 1rem; transition: background .12s ease, transform .04s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent } .btn:hover { background: var(--brand-d); text-decoration: none } .btn:active { transform: translateY(1px) } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring) } .btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; transform: none } .btn.purple, .btn.blue, .btn.info { background: var(--purple); color: var(--purple-ink); border-color: var(--purple-d) } .btn.purple:hover, .btn.blue:hover, .btn.info:hover { background: var(--purple-d) } .btn.amber { background: var(--amber); color: #fff; border-color: #7a5409 } .btn.amber:hover { filter: brightness(1.06) } .btn.danger { background: #b83a2f; color: #fff; border-color: #8f2820 } .btn.danger:hover { filter: brightness(1.08) } [data-theme="dark"] .btn.danger { background: #c0392b; border-color: #8f2820 } .btn.ghost, .btn.btn-out, .btn.secondary { background: transparent; border: 1.5px solid var(--soft); color: var(--ink) } .btn.ghost:hover, .btn.secondary:hover { border-color: var(--brand); background: var(--hover) } .btn.tertiary { background: transparent; border-color: transparent; color: var(--brand); padding-left: .6rem; padding-right: .6rem } .btn.tertiary:hover { background: var(--brand-wash) } .btn.ghost[disabled] { opacity: .45; cursor: default } .btn.sm { min-height: 34px; padding: .4rem .8rem; font-size: .82rem; margin-top: 0 } .btn.full { width: 100% } .btn.loading { position: relative; color: transparent !important; pointer-events: none } .btn.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: spin .6s linear infinite } .btn.ghost.loading::after { border-color: rgba(45, 106, 79, .35); border-top-color: var(--brand) } @keyframes spin { to { transform: rotate(360deg) } } /* ========================================================================== Tables — sticky head, sortable, search + pagination (via [data-enhance]) ========================================================================== */ .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; border: 1px solid var(--line) } .tablewrap table { border: 0 } table { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--panel) } th, td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap } thead th { position: sticky; top: 0; z-index: 1; background: var(--panel2); color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800 } tbody tr:nth-child(even) td { background: rgba(27, 38, 32, .02) } [data-theme="dark"] tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03) } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums } tr:hover td { background: var(--hover) } table.grid { display: table } /* guard: a must stay a table */ .empty { color: var(--soft); padding: 1.6rem; text-align: center } .tbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .7rem } .tbar .search { position: relative; flex: 1 1 240px; max-width: 340px } .tbar .search input { padding-left: 2.2rem; min-height: 40px } .tbar .search svg { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: var(--soft); fill: none; stroke-width: 1.8 } th.sortable { cursor: pointer; user-select: none } th.sortable:hover { color: var(--ink) } th.sortable::after { content: "\2195"; opacity: .35; margin-left: .35rem; font-size: .85em } th.sortable.asc::after { content: "\2191"; opacity: .9 } th.sortable.desc::after { content: "\2193"; opacity: .9 } .tpage { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; margin-top: .7rem; font-size: .85rem; color: var(--muted); flex-wrap: wrap } .tpage button { min-height: 34px; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; font-weight: 600 } .tpage button:disabled { opacity: .4; cursor: default } /* ========================================================================== Badges / pills ========================================================================== */ .pill { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.5 } .pill.sm { font-size: .68rem; padding: .12rem .5rem } .pill.potato, .pill.instock, .pill.ok, .pill.approved { background: var(--brand-wash); color: var(--brand-d) } .pill.onion, .pill.staged, .pill.info { background: var(--info-wash); color: var(--purple-d) } .pill.dispatched { background: var(--hover); color: var(--muted) } .pill.warn, .pill.pending { background: var(--amber-wash); color: var(--amber) } .pill.bad, .pill.critical { background: var(--red-wash); color: var(--red) } [data-theme="dark"] .pill.ok, [data-theme="dark"] .pill.instock, [data-theme="dark"] .pill.potato, [data-theme="dark"] .pill.approved { color: #86d6a8 } [data-theme="dark"] .pill.onion, [data-theme="dark"] .pill.staged, [data-theme="dark"] .pill.info { color: #a6c6dd } [data-theme="dark"] .pill.bad, [data-theme="dark"] .pill.critical { color: #eaa99b } /* ========================================================================== Alerts / flash ========================================================================== */ .flash { padding: .85rem 1.05rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 600; font-size: .94rem; border: 1px solid var(--line); border-left-width: 4px; display: flex; gap: .5rem; align-items: flex-start } .flash.ok { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-d) } [data-theme="dark"] .flash.ok { color: #9fdcb8 } .flash.error { background: var(--red-wash); border-color: var(--red); color: #9a3526 } [data-theme="dark"] .flash.error { color: #eaa99b } .flash.warn { background: var(--amber-wash); border-color: var(--amber); color: var(--amber) } .flash.info { background: var(--info-wash); border-color: var(--info); color: var(--purple-d) } /* dialogs / dropdowns (design-system primitives) */ dialog, .dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; max-width: 520px; width: calc(100% - 2rem); background: var(--panel); color: var(--ink); box-shadow: var(--shadow) } dialog::backdrop { background: rgba(15, 28, 22, .45) } .dropdown { position: relative; display: inline-block } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: .35rem; z-index: 30 } .dropdown-menu a { display: block; padding: .55rem .7rem; border-radius: 8px; color: var(--ink) } .dropdown-menu a:hover { background: var(--hover); text-decoration: none } /* ========================================================================== Login ========================================================================== */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(1200px 500px at 50% -10%, var(--brand-wash), var(--bg)) } .login-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 2.2rem 1.8rem; box-shadow: var(--shadow); position: relative } .login-card .brand { display: flex; align-items: center; gap: .6rem; justify-content: center; margin-bottom: 1.2rem; font-size: 1.2rem; font-weight: 750 } .login-card .brand .logo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(150deg, var(--rail-active), var(--green-d)); color: #fff; font-weight: 800 } .demo { margin-top: 1.2rem; font-size: .8rem; color: var(--soft); line-height: 1.7 } .demo code { background: var(--panel2); padding: .1rem .35rem; border-radius: 5px; color: var(--muted) } /* checklists / misc */ .checklist { display: grid; gap: .45rem; max-height: 360px; overflow: auto; padding-right: .3rem } .checkrow { display: flex; gap: .7rem; align-items: center; padding: .65rem .8rem; min-height: var(--tap); background: var(--panel); border: 1px solid var(--line); border-radius: 10px } .checkrow input { width: auto; min-height: 0; width: 22px; height: 22px } .checkrow .meta { flex: 1; font-size: .9rem } .checkrow .meta small { color: var(--muted) } .bar { height: 9px; background: var(--panel2); border-radius: 6px; overflow: hidden; margin-top: .3rem } .bar>span { display: block; height: 100%; background: var(--brand) } input[type=checkbox], input[type=radio] { accent-color: var(--brand); width: 22px; height: 22px; min-height: 0 } [data-theme="dark"] .card { border-color: rgba(79, 158, 118, .4) } [data-theme="dark"] .card>h3:first-child { border-bottom-color: rgba(79, 158, 118, .35) } [data-theme="dark"] .kpi { border-color: rgba(79, 158, 118, .35) } [data-theme="dark"] thead th { color: #efe8da } /* ========================================================================== Responsive — drawer sidebar + bottom nav on small screens ========================================================================== */ .scrim { position: fixed; inset: 0; background: rgba(15, 28, 22, .5); z-index: 55; opacity: 0; visibility: hidden; transition: opacity .2s ease } .bottom-nav { display: none } @media(max-width:920px) { .app-shell, .app-shell.collapsed { grid-template-columns: 1fr } .sidebar { position: fixed; left: 0; top: 0; width: min(82vw, 300px); transform: translateX(-100%); transition: transform .22s ease } .app-shell.drawer-open .sidebar { transform: translateX(0) } .app-shell.drawer-open .scrim { opacity: 1; visibility: visible } /* never collapse-to-icons on mobile; the drawer shows full labels */ .app-shell.collapsed .side-brand .bx, .app-shell.collapsed .side-nav .nav a .lab, .app-shell.collapsed .side-foot .who b, .app-shell.collapsed .side-foot .who span, .app-shell.collapsed .side-foot .btn-out span { display: revert } .app-shell.collapsed .side-nav .nav a { justify-content: flex-start; padding: .6rem .7rem } .appbar .hamb { display: grid } .appbar .collapse-btn { display: none } .appbar .ab-brand { display: flex } .appbar .ab-brand span { display: none } .env-pill { font-size: .72rem; padding: .3rem .55rem } .wrap { padding: 1.1rem .9rem 5.5rem } } @media(min-width:921px) { .appbar .hamb { display: none } } @media(max-width:920px) { .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--panel); border-top: 1px solid var(--line); padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 16px rgba(27, 38, 32, .08) } .bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .35rem .2rem; min-height: 54px; justify-content: center; background: none; border: 0; color: var(--muted); font-size: .66rem; font-weight: 650; cursor: pointer; border-radius: 10px } .bottom-nav a.active { color: var(--brand) } .bottom-nav a:hover { text-decoration: none; background: var(--hover) } .bottom-nav svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8 } } @media(max-width:680px) { body { font-size: 16px } h1 { font-size: 1.4rem } h2 { font-size: 1.08rem } .card { padding: 1.05rem } .card [style*="grid-template-columns"] { grid-template-columns: 1fr !important } table { font-size: .9rem } th, td { white-space: normal; padding: .6rem .6rem } .btn { width: 100% } .btn.sm { width: auto } .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr } } @media(prefers-reduced-motion:reduce) { * { transition: none !important; animation: none !important } } /* --- Login two-panel (B14 design pass) --- */ .login-shell { width: 100%; max-width: 760px; display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; position: relative } .login-shell .ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto } .login-shell .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round } .login-aside { flex: 0 0 42%; background: linear-gradient(160deg, var(--rail-active), var(--green-d)); color: #fff; padding: 2rem 1.7rem; display: flex; flex-direction: column; gap: 1.3rem } .login-aside .brand { justify-content: flex-start; align-items: center; margin: 0; color: #fff; font-size: 1.12rem } .login-aside .brand small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .09em; color: #bfe3d2; margin-top: 2px } .login-aside .logo { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--green-d); font-weight: 800; font-size: 1.05rem } .login-lead { font-size: .96rem; line-height: 1.5; color: #eaf6f0; margin: 0 } .login-trust { display: flex; flex-direction: column; gap: .7rem; margin-top: auto } .login-trust>div { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: #eaf6f0 } .login-trust .ic { color: #a7ebc8 } .login-main { flex: 1; padding: 2rem 1.85rem; position: relative } .login-main h1 { font-size: 1.4rem; margin: 0 0 .15rem; font-weight: 750 } .login-sub { color: var(--muted); font-size: .9rem; margin: 0 0 1.25rem } .login-main .field { margin-bottom: .85rem } .login-main .field label { display: block; font-size: .83rem; color: var(--muted); margin-bottom: .32rem } .login-main .field .lf-w { position: relative; display: flex; align-items: center } .login-main .field .lf-w input { flex: 1 } .login-main .field .lf-w>.ic { position: absolute; left: .72rem; top: 50%; transform: translateY(-50%); color: var(--soft); pointer-events: none } .login-main .field input { padding-left: 2.35rem } .login-main .eye { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--muted); padding: .4rem; min-height: auto; width: auto } .login-main .eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round } .login-sep { display: flex; align-items: center; gap: .65rem; margin: 1.15rem 0 .3rem; color: var(--soft); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em } .login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--line) } @media(max-width:620px) { .login-shell { flex-direction: column; max-width: 420px } .login-aside { flex: none; gap: 1rem } .login-trust { margin-top: .4rem } } /* --- KPI RAG dots (B16) --- */ .kpi-dot { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; vertical-align: middle; margin-left: .2rem } .kpi-dot.green { background: var(--green) } .kpi-dot.amber { background: var(--amber) } .kpi-dot.red { background: var(--red) } .kpi-dot.na { background: var(--soft) } /* --- Audit compliance-criteria popover (interpretation) --- */ .critbtn { font-size: .72rem; padding: .12rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--brand-wash); color: var(--brand-d); cursor: pointer; margin-left: .45rem; white-space: nowrap; font-weight: 600 } .critbtn:hover { border-color: var(--brand) } .critbox { display: none; position: fixed; z-index: 60; width: 360px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 38px rgba(0, 0, 0, .20); padding: .85rem 1rem } .critbox.open { display: block } .critbox-h { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .3rem } .critbox-h b { font-size: .92rem; line-height: 1.25 } .critx { cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--muted); padding: 0 .15rem } .critx:hover { color: var(--ink) } .critbox-s { margin: .5rem 0 } .critlbl { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-d); font-weight: 700; margin-bottom: .18rem } .critbox-s p { margin: 0; font-size: .85rem; line-height: 1.4; color: var(--ink) } .critbox-f { margin-top: .55rem; border-top: 1px solid var(--line); padding-top: .45rem; line-height: 1.3 } /* --- criteria popover: dark-mode contrast + drag affordance --- */ .critbox-h { cursor: move } [data-theme="dark"] .critbtn { color: #86d6a8; border-color: rgba(79, 158, 118, .5) } [data-theme="dark"] .critbtn:hover { border-color: #4f9e76 } [data-theme="dark"] .critlbl { color: #86d6a8 } /* Floating tooltip: reveal the full text whenever a label is clipped by ellipsis (system-wide) */ .dz-tip { position: absolute; z-index: 9999; max-width: 360px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; font: 500 .8rem/1.35 var(--sans); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); pointer-events: none; display: none; white-space: normal; word-break: break-word }