/* ========================================================================== DESMA FoodPro — 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 (muted, accessible) */ --green:#1f7a55; --green-d:#15583f; --green-ink:#ffffff; /* primary / success */ --brand:#1f7a55; --brand-d:#15583f; --brand-wash:#e7f2ec; --purple:#356c98; --purple-d:#28567b; --purple-ink:#ffffff; /* info (muted blue) */ --info:#356c98; --info-wash:#e9eff4; --amber:#9a6c10; --amber-wash:#f6efdd; --red:#bf463a; --red-wash:#f6e6e4; --radius:12px; --sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --tap:46px; /* light surface scale */ --bg:#f4f7f5; --panel:#ffffff; --panel2:#eef2ef; --line:#e3e8e4; --ink:#1b2620; --muted:#586860; --soft:#8a978f; --topbar:rgba(255,255,255,.9); --hover:rgba(27,38,32,.05); --check:transparent; --shadow:0 1px 2px rgba(27,38,32,.05),0 8px 24px rgba(27,38,32,.06); --ring:rgba(31,122,85,.30); /* navigation rail (the signature: a calm deep-green operational spine) */ --rail:#16261d; --rail-2:#1c3026; --rail-ink:#cddcd3; --rail-soft:#8fa89a; --rail-line:rgba(255,255,255,.08); --rail-active:#2a8f63; --sidebar-w:248px; --sidebar-cw:72px; --appbar-h:60px; } [data-theme="light"]{ --bg:#f4f7f5; --panel:#ffffff; --panel2:#eef2ef; --line:#e3e8e4; --ink:#1b2620; --muted:#586860; --soft:#8a978f; --topbar:rgba(255,255,255,.9); --hover:rgba(27,38,32,.05); --shadow:0 1px 2px rgba(27,38,32,.05),0 8px 24px rgba(27,38,32,.06); --ring:rgba(31,122,85,.30); } [data-theme="dark"]{ color-scheme:dark; --bg:#0f1c16; --panel:#15241c; --panel2:#122019; --line:#27402f; --ink:#eef7f1; --muted:#a9c6b6; --soft:#7e9c8b; --topbar:rgba(15,28,22,.92); --hover:rgba(255,255,255,.06); --shadow:0 12px 32px rgba(0,0,0,.45); --ring:rgba(95,200,150,.35); --green:#3fa372; --green-d:#338a5f; --brand:#3fa372; --brand-wash:rgba(63,163,114,.16); --purple:#69a3d4; --purple-d:#5a8fbd; --info:#69a3d4; --info-wash:rgba(105,163,212,.16); --amber:#d6a64a; --amber-wash:rgba(214,166,74,.16); --red:#e08a80; --red-wash:rgba(224,138,128,.15); --rail:#0c1712; --rail-2:#14241b; --rail-ink:#d3e6da; --rail-soft:#8fb0a0; --rail-line:rgba(255,255,255,.07); --rail-active:#3fa372; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} [data-theme="dark"] a{color:#7fe3ad} h1{font-size:1.6rem;font-weight:750;letter-spacing:-.01em;margin:0 0 .2rem} h2{font-size:1.18rem;font-weight:700;letter-spacing:-.01em} h3{font-size:1.05rem;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:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh} .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:.95rem 1rem;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:.7rem .55rem 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 .7rem .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:.7rem;padding:.6rem .7rem;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 #bff0d6} .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;min-width:0;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(31,122,85,.18)} [data-theme="dark"] .env-pill{color:#a7ebc8} .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} .kicker{color:var(--brand-d);font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-size:.7rem} [data-theme="dark"] .kicker{color:#8fe3b6} .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:var(--tap);padding:.7rem 1.3rem;border:1.5px solid transparent;border-radius:10px; font:inherit;font-weight:700;font-size:.97rem;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)} .btn.purple:hover,.btn.blue:hover,.btn.info:hover{background:var(--purple-d)} .btn.amber{background:var(--amber);color:#fff}.btn.amber:hover{filter:brightness(1.06)} .btn.danger{background:var(--red);color:#fff}.btn.danger:hover{filter:brightness(1.06)} .btn.ghost,.btn.btn-out,.btn.secondary{background:transparent;border:1.5px solid var(--line);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:38px;padding:.45rem .85rem;font-size:.88rem;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(31,122,85,.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:#8fe3b6} [data-theme="dark"] .pill.onion,[data-theme="dark"] .pill.staged,[data-theme="dark"] .pill.info{color:#a9cdef} [data-theme="dark"] .pill.bad,[data-theme="dark"] .pill.critical{color:#f0a59c} /* ========================================================================== 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:#a7ebc8} .flash.error{background:var(--red-wash);border-color:var(--red);color:#a83a2f} [data-theme="dark"] .flash.error{color:#f3aaa1} .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(63,163,114,.4)} [data-theme="dark"] .card > h3:first-child{border-bottom-color:rgba(63,163,114,.35)} [data-theme="dark"] .kpi{border-color:rgba(63,163,114,.35)} [data-theme="dark"] thead th{color:#eafff5} /* ========================================================================== 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}}