/* TERP Portal — hand-authored stylesheet. No build step.
Brand: navy #0A2540, amber #E8A726, cream #FAF6EE.
Display: Space Grotesk · Body: Inter · Figures: JetBrains Mono. */
:root{
--navy:#0B1F38; --navy-700:#102a48; --navy-600:#17385c;
--gold:#F5B400; --gold-600:#DB9E00; --gold-700:#B98300; --gold-50:#FFF7E0;
--amber:#F5B400; --amber-600:#DB9E00;
--cream:#F4F6F9; --cream-100:#EAEEF3;
--ink:#16202C; --ink-soft:#3a4757; --muted:#677686; --line:#E3E8EE;
--ok-bg:#ecfdf5; --ok:#047857; --warn-bg:#fff7e0; --warn:#B98300;
--bad-bg:#fff1f2; --bad:#be123c; --info-bg:#eff6ff; --info:#0369a1;
--mono:"JetBrains Mono",ui-monospace,monospace;
--radius:14px; --radius-sm:10px;
--shadow:0 1px 2px rgba(16,32,52,.05),0 10px 30px -16px rgba(16,32,52,.22);
--shadow-sm:0 1px 2px rgba(16,32,52,.06);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--cream);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;margin:0;letter-spacing:-.01em}
.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.cur{font-size:.7em;font-weight:500;opacity:.6;margin-right:.25em}
.accent{color:var(--amber-600)}
.muted{color:var(--muted)}
/* ---- App shell ---- */
.shell{min-height:100%;display:grid;grid-template-columns:1fr}
@media(min-width:1024px){.shell{grid-template-columns:260px 1fr}}
.side{display:none;background:var(--navy);color:rgba(250,246,238,.9);flex-direction:column}
@media(min-width:1024px){.side{display:flex}}
.side .brand{padding:28px 24px}
.side .brand b{font-family:"Space Grotesk";font-size:20px;font-weight:700;color:var(--cream);display:block}
.side .brand span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-top:2px;display:block}
.side nav{flex:1;padding:0 12px;display:flex;flex-direction:column;gap:4px}
.side nav a{padding:10px 12px;border-radius:12px;font-size:14px;font-weight:500;color:rgba(250,246,238,.65);transition:background .15s,color .15s}
.side nav a:hover{background:rgba(250,246,238,.06);color:var(--cream)}
.side nav a.on{background:rgba(250,246,238,.1);color:var(--cream)}
.side .foot{padding:20px 24px;border-top:1px solid rgba(250,246,238,.1);font-size:12px;color:rgba(250,246,238,.45)}
.main{display:flex;flex-direction:column;min-height:100%}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(250,246,238,.85);backdrop-filter:blur(8px)}
@media(min-width:1024px){.top{padding:14px 32px}}
.top .who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.content{flex:1;padding:24px 16px}
@media(min-width:1024px){.content{padding:32px}}
/* mobile nav */
.mnav{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff}
@media(min-width:1024px){.mnav{display:none}}
.mnav a{padding:6px 12px;border-radius:10px;font-size:13px;font-weight:500;color:var(--muted)}
.mnav a.on{background:rgba(10,37,64,.06);color:var(--navy)}
/* ---- Cards / grid ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
@media(min-width:640px){.grid.c2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.grid.c4{grid-template-columns:repeat(4,1fr)}}
.stat{padding:20px}
.stat.hl{box-shadow:var(--shadow),0 0 0 1px rgba(232,167,38,.35)}
.stat .l{font-size:14px;font-weight:500;color:var(--muted)}
.stat .v{margin-top:8px;font-size:26px;font-weight:600;letter-spacing:-.02em}
.stat .h{margin-top:4px;font-size:12px;color:var(--muted)}
/* ---- Tables ---- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:500;padding:12px 20px;background:var(--cream-100)}
.tbl tbody td{padding:12px 20px;border-top:1px solid var(--line)}
.tbl tbody tr:hover{background:var(--cream)}
.tbl .r{text-align:right}
.tbl .empty{text-align:center;color:var(--muted);padding:48px 20px}
.link{font-weight:500}
.link:hover{color:var(--amber-600)}
/* section header inside a card */
.sec{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.rowlist a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line)}
.rowlist a:first-child{border-top:0}
.rowlist a:hover{background:var(--cream)}
/* ---- Pills ---- */
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500;text-transform:capitalize}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.neutral{background:rgba(10,37,64,.05);color:var(--muted)}
/* ---- Forms / buttons ---- */
.field{width:100%;border:1px solid rgba(10,37,64,.15);background:#fff;border-radius:12px;padding:10px 14px;font:inherit;color:var(--ink)}
.field:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(232,167,38,.35)}
.label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 16px;font:inherit;font-weight:500;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--navy);color:var(--cream);width:100%}
.btn-primary:hover{background:var(--navy-700)}
.btn-ghost{background:#fff;border-color:rgba(10,37,64,.15);color:var(--ink)}
.btn-ghost:hover{background:rgba(10,37,64,.04)}
.err{margin-top:6px;font-size:13px;color:var(--bad)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.toolbar .field{width:auto;padding:8px 12px}
/* segmented control */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:rgba(10,37,64,.05);border-radius:12px;padding:4px}
.seg button{border:0;background:transparent;border-radius:8px;padding:8px;font:inherit;font-weight:500;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(10,37,64,.1)}
/* ---- Pagination ---- */
.pager{margin-top:20px;display:flex;gap:4px;flex-wrap:wrap}
.pager a,.pager span{border-radius:10px;padding:6px 12px;font-size:14px;color:var(--muted)}
.pager a:hover{background:rgba(10,37,64,.05)}
.pager .on{background:var(--navy);color:var(--cream)}
.pager .off{color:rgba(10,37,64,.3)}
/* ---- Login ---- */
.auth{min-height:100%;display:grid;grid-template-columns:1fr}
@media(min-width:1024px){.auth{grid-template-columns:1fr 1fr}}
.auth .panel{display:none;background:var(--navy);color:var(--cream);padding:48px;flex-direction:column;justify-content:space-between}
@media(min-width:1024px){.auth .panel{display:flex}}
.auth .panel .big{font-family:"Space Grotesk";font-size:30px;font-weight:600;line-height:1.25;max-width:24rem}
.auth .form{display:flex;align-items:center;justify-content:center;padding:24px}
.auth .form .box{width:100%;max-width:24rem}
.alert{margin-bottom:20px;border-radius:12px;padding:12px 16px;font-size:14px;background:var(--bad-bg);color:var(--bad)}
.stack>*+*{margin-top:20px}
.totals{width:100%;max-width:20rem;margin-left:auto;font-size:14px}
.totals .row{display:flex;justify-content:space-between;padding:4px 0}
.totals .grand{border-top:1px solid rgba(10,37,64,.12);margin-top:4px;padding-top:8px;font-size:16px;font-weight:600}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
/* ---- Admin accents (distinguish back-office from customer portal) ---- */
.side.admin{background:#07182b}
.side.admin .brand span{color:#fff;opacity:.5}
.badge-admin{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--amber);color:var(--navy);padding:2px 8px;border-radius:999px;font-weight:600}
.kpi{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
/* ---- ERP shell + forms ---- */
.side.erp{background:#0c2e4e}
.flash{margin-bottom:20px;border-radius:12px;padding:12px 16px;font-size:14px;background:#ecfdf5;color:#047857}
.btn-amber{background:var(--amber);color:var(--navy);font-weight:600}
.btn-amber:hover{background:var(--amber-600)}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:10px}
.btn-danger{background:#fff;border:1px solid #fecdd3;color:#be123c}
.btn-danger:hover{background:#fff1f2}
.formgrid{display:grid;gap:18px;max-width:640px}
.formrow{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.formrow{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{width:16px;height:16px}
.matrix{width:100%;border-collapse:collapse;font-size:14px}
.matrix th,.matrix td{padding:10px 14px;border-top:1px solid var(--line);text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:left}
.matrix thead th{background:var(--cream-100);font-size:12px;text-transform:uppercase;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
/* ---- accounts subnav + voucher entry ---- */
.subnav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:0}
.subnav a{padding:8px 14px;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--navy)}
.subnav a.on{color:var(--navy);font-weight:600;border-bottom-color:var(--amber)}
.vlines{width:100%;border-collapse:collapse;font-size:14px}
.vlines th,.vlines td{padding:8px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.vlines thead th{background:var(--cream-100);font-size:12px;text-transform:uppercase;color:var(--muted)}
.vlines .field{margin:0}
.vtot{display:flex;gap:24px;justify-content:flex-end;margin-top:14px;font-size:14px}
.vtot b{font-family:'JetBrains Mono'}
.bad-bal{color:#be123c}.ok-bal{color:#047857}
/* ============================================================
ERP shell — menu tree (scoped to .side.erp; portal/admin untouched)
============================================================ */
.side.erp{background:var(--navy);height:100vh;position:sticky;top:0;overflow:hidden;padding:0}
.side.erp .brand{display:block;padding:22px 22px 16px}
.side.erp .brand b{font-family:"Space Grotesk";font-size:22px;font-weight:700;color:var(--cream);display:block;line-height:1}
.side.erp .brand span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-top:5px;display:block}
.side.erp .tree{flex:1;overflow-y:auto;padding:6px 10px 14px;display:flex;flex-direction:column;gap:1px}
.side.erp .tree::-webkit-scrollbar{width:6px}
.side.erp .tree::-webkit-scrollbar-thumb{background:rgba(250,246,238,.14);border-radius:3px}
.side.erp .ti{width:18px;height:18px;flex:none;opacity:.9}
.side.erp .tree-top,.side.erp .tree-head{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;color:rgba(250,246,238,.74);cursor:pointer}
.side.erp .tree-top{font-weight:500}
.side.erp .tree-head{font-weight:600;list-style:none}
.side.erp .tree-head::-webkit-details-marker{display:none}
.side.erp .tree-top:hover,.side.erp .tree-head:hover{background:rgba(250,246,238,.07);color:var(--cream)}
.side.erp .tree-top.on{background:var(--amber);color:var(--navy);font-weight:600}
.side.erp .tree-top.on .ti{opacity:1}
.side.erp .chev{width:15px;height:15px;margin-left:auto;opacity:.5;transition:transform .15s ease}
.side.erp details[open]>.tree-head .chev{transform:rotate(90deg)}
.side.erp details[open]>.tree-head{color:var(--cream)}
.side.erp .tree-items{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px;padding-left:14px;border-left:1px solid rgba(250,246,238,.1);margin-left:21px}
.side.erp .tree-link{padding:8px 12px;border-radius:8px;font-size:13px;color:rgba(250,246,238,.6)}
.side.erp .tree-link:hover{background:rgba(250,246,238,.06);color:var(--cream)}
.side.erp .tree-link.on{background:rgba(232,167,38,.16);color:var(--amber);font-weight:600}
.side.erp .tree-group.disabled .tree-head{color:rgba(250,246,238,.32);cursor:default}
.side.erp .tree-group.disabled .tree-head:hover{background:transparent}
.side.erp .soon{margin-left:auto;font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;background:rgba(250,246,238,.08);color:rgba(250,246,238,.5);padding:2px 7px;border-radius:20px}
.side.erp .foot{display:flex;align-items:center;gap:11px;padding:14px 18px;border-top:1px solid rgba(250,246,238,.1)}
.side.erp .foot .av{width:34px;height:34px;border-radius:9px;background:var(--amber);color:var(--navy);display:grid;place-items:center;font-weight:700;font-family:"Space Grotesk";flex:none}
.side.erp .foot .meta{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.side.erp .foot .meta b{color:var(--cream);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side.erp .foot .meta span{color:rgba(250,246,238,.5);font-size:11.5px}
/* top bar breadcrumb */
.top .crumb{display:flex;align-items:center;gap:9px;font-size:15px}
.top .crumb .sep{color:var(--line);color:rgba(10,37,64,.25)}
.top .crumb strong{font-family:"Space Grotesk";font-weight:600;color:var(--navy)}
.top .who .uname{display:none}
@media(min-width:768px){.top .who .uname{display:inline}}
/* ---- ERP mobile menu drawer ---- */
.navtoggle{display:none;background:none;border:0;color:var(--navy);padding:6px;cursor:pointer;border-radius:8px}
.navtoggle:hover{background:rgba(10,37,64,.06)}
.nav-backdrop{display:none}
@media screen and (max-width:1023px){
.navtoggle{display:inline-flex;align-items:center}
.side.erp{display:flex;position:fixed;top:0;left:0;bottom:0;width:280px;height:100vh;z-index:60;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 50px rgba(0,0,0,.35)}
body.navopen .side.erp{transform:none}
body.navopen .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(10,37,64,.45);z-index:55}
}
/* ---- POS terminal ---- */
.pos-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pos-wrap{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
.pos-left{padding:16px}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:64vh;overflow:auto}
.pos-prod{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:74px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;text-align:left;font:inherit;transition:.12s}
.pos-prod:hover{border-color:var(--amber);box-shadow:0 4px 14px rgba(232,167,38,.18)}
.pos-prod span{font-size:13px;font-weight:500;line-height:1.25;color:var(--navy)}
.pos-prod em{font-style:normal;font-weight:700;color:var(--amber);font-family:var(--mono,monospace)}
.pos-right{padding:16px;position:sticky;top:16px}
.pos-tot{margin:12px 0;border-top:1px solid var(--line);padding-top:12px}
.pos-tot>div{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink-soft)}
.pos-tot .grand{font-size:20px;font-weight:700;color:var(--navy);border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.qbtn{border:1px solid var(--line);background:#fff;border-radius:7px;min-width:26px;height:26px;cursor:pointer;font-weight:600;color:var(--navy)}
.qbtn:hover{background:var(--cream-100)}
@media(max-width:900px){.pos-wrap{grid-template-columns:1fr}.pos-right{position:static}}
/* ======================================================================
PROFESSIONAL REFRESH (v2) — overrides above; gold-on-navy TERP identity
====================================================================== */
body{background:var(--cream)}
h1,h2,h3{color:var(--ink)}
/* Sidebar: gold brand + gold active accent */
.side .brand b{color:#fff}
.side .brand span{color:var(--gold);letter-spacing:.2em}
.side nav a{position:relative;color:rgba(255,255,255,.66);border-radius:10px}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.on{background:rgba(245,180,0,.14);color:#fff}
.side nav a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--gold)}
.side .ti,.side.erp .ti{opacity:.95}
/* Top bar */
.top{background:rgba(255,255,255,.9)}
.top .crumb{font-weight:600;color:var(--ink)}
/* Buttons — primary navy, gold CTA, refined ghosts */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:14px;line-height:1;
padding:10px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap;font-family:inherit}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-700)}
.btn-amber{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-amber:hover{background:var(--gold-600);box-shadow:0 6px 16px -6px rgba(245,180,0,.6)}
.btn-ghost{background:#fff;color:var(--ink-soft);border-color:var(--line)}
.btn-ghost:hover{background:var(--cream-100);color:var(--ink);border-color:#d4dae2}
.btn-danger{background:#fff;color:var(--bad);border-color:#f3c4cb}
.btn-danger:hover{background:var(--bad);color:#fff}
/* Inputs — crisp, gold focus ring */
.field{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;font-family:inherit;color:var(--ink);transition:.15s}
.field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,180,0,.18)}
.field::placeholder{color:#9aa7b4}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23677686' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
.label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
textarea.field{line-height:1.5}
/* Cards */
.card{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow)}
/* Tables — professional list look */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
padding:12px 20px;border-bottom:1px solid var(--line);background:var(--cream-100);white-space:nowrap}
.tbl thead th.r,.tbl td.r{text-align:right}
.tbl tbody td{padding:13px 20px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--gold-50)}
.tbl .empty{text-align:center;color:var(--muted);padding:40px 20px}
.link{color:var(--gold-700);font-weight:600}
.link:hover{color:var(--gold-600);text-decoration:underline}
/* Status pills */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;text-transform:capitalize;letter-spacing:.01em}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.neutral{background:#eef1f5;color:var(--muted)}
/* Page header */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Flash */
.flash{background:var(--ok-bg);color:var(--ok);border:1px solid #b8e6d2;border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14px;font-weight:500}
/* Stat cards */
.stat .v,.stat .value{letter-spacing:-.02em}
.stat.hl{box-shadow:var(--shadow),0 0 0 1px rgba(245,180,0,.4)}
/* ---- List toolbar + instant search ---- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.search{position:relative;flex:1;min-width:220px;max-width:380px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input{width:100%;padding:10px 12px 10px 38px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff;transition:.15s}
.search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,180,0,.18)}
.toolbar .filter{min-width:150px}
.toolbar .spacer{flex:1}
.filter-empty td{text-align:center;color:var(--muted);padding:32px}
/* Brand logo + wordmark in sidebar */
.side .brand, .side.erp .brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:16px 18px}
.brand-logo{width:32px;height:32px;border-radius:8px;flex:none;background:#fff;padding:3px;object-fit:contain}
.side .brand .brand-txt, .side.erp .brand .brand-txt{display:flex;flex-direction:column;letter-spacing:normal;text-transform:none}
.side .brand .brand-txt b, .side.erp .brand .brand-txt b{font-family:"Space Grotesk";font-size:18px;font-weight:700;color:#fff;line-height:1.1;display:block}
.side .brand .brand-txt span, .side.erp .brand .brand-txt span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:2px;display:block}
/* Desktop sidebar show/hide toggle */
.sidetoggle{display:none;background:none;border:0;color:var(--ink-soft);padding:6px;cursor:pointer;border-radius:8px;transition:.15s}
.sidetoggle:hover{background:rgba(16,32,52,.06);color:var(--ink)}
@media(min-width:1024px){
.sidetoggle{display:inline-flex;align-items:center}
body.sidehidden .shell{grid-template-columns:1fr}
body.sidehidden .side{display:none}
}
/* Dashboard two-column → stack on narrow screens */
@media(max-width:860px){ .dash-2col{grid-template-columns:1fr !important} }
/* ===== Auto module sub-navigation bar ===== */
.subnav-bar{background:#fff;border-bottom:1px solid var(--line)}
.subnav-scroll{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
@media(min-width:1024px){.subnav-scroll{padding:10px 32px}}
.subnav-scroll::-webkit-scrollbar{height:6px}
.subnav-scroll::-webkit-scrollbar-thumb{background:#cdd5de;border-radius:6px}
.subnav-btn{display:inline-block;white-space:nowrap;padding:7px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--navy);background:#eceff3;text-decoration:none;transition:background .15s,color .15s}
.subnav-btn:hover{background:#e0e5ec}
.subnav-btn.on{background:var(--navy);color:#fff}
/* ===== Module hub (tile grid) ===== */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
@media(min-width:1024px){.hub-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
.hub-tile{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--navy);box-shadow:0 1px 2px rgba(11,31,56,.04);transition:transform .12s,box-shadow .12s,border-color .12s}
.hub-tile:hover{border-color:var(--navy);box-shadow:0 8px 22px rgba(11,31,56,.12);transform:translateY(-2px)}
.hub-ic{width:42px;height:42px;border-radius:11px;background:var(--cream-100,#f5f1e8);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.hub-ic svg{width:22px;height:22px}
.hub-lbl{font-weight:600;font-size:15px;line-height:1.25}
.hub-title-ic{display:inline-flex;width:34px;height:34px;border-radius:9px;background:var(--cream-100,#f5f1e8);align-items:center;justify-content:center;color:var(--navy)}
.hub-title-ic svg{width:20px;height:20px}
/* slim back-to-hub bar */
.subnav-back{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--navy);background:#eceff3;text-decoration:none}
.crumb-back{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:6px;border-radius:7px;background:#eceff3;color:var(--navy);font-size:18px;font-weight:700;text-decoration:none;line-height:1;flex:none}
.crumb-back:hover{background:#e0e5ec}
.subnav-back:hover{background:#e0e5ec}
/* ===== Overrides: compact hub tiles, sidebar tree link, denser forms ===== */
/* Smaller hub tiles → fit more per window */
.hub-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}
@media(min-width:1024px){.hub-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}}
.hub-tile{gap:8px;padding:12px;border-radius:11px}
.hub-tile:hover{transform:translateY(-1px)}
.hub-ic{width:32px;height:32px;border-radius:9px}
.hub-ic svg{width:18px;height:18px}
.hub-lbl{font-size:13px;font-weight:600}
/* Sidebar: module name links to hub, chevron toggles tree */
.tree-group>.tree-head{display:flex;align-items:center;gap:0}
.tree-head-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none}
.tree-head-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Denser, windows-style forms */
.field{padding:6px 10px;font-size:13.5px;border-radius:8px}
.label{font-size:12px;margin-bottom:3px}
.formrow{gap:12px}
textarea.field{padding:7px 10px}
select.field{padding-top:5px;padding-bottom:5px}
.btn{padding:8px 14px}
.btn-sm{padding:6px 11px;font-size:12.5px}
.page-head{margin-bottom:14px}
.content{padding:18px 14px}
@media(min-width:1024px){.content{padding:22px 26px}}
/* tighten the inline padding many form cards use */
.card form,.card>form{margin:0}
/* ===== Global menu search (top bar, command-style) ===== */
.menusearch{position:relative;flex:1 1 auto;max-width:460px;margin:0 10px}
.menusearch .ms-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
#menuSearch{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13.5px;color:var(--ink);font-family:inherit;transition:.15s}
#menuSearch::placeholder{color:#9aa7b4}
#menuSearch:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,31,56,.08)}
.ms-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(11,31,56,.18);overflow:hidden auto;z-index:60;display:none;max-height:62vh}
.ms-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 14px;text-decoration:none;color:var(--navy);border-bottom:1px solid #f0f2f5}
.ms-item:last-child{border-bottom:none}
.ms-item:hover,.ms-item.on{background:var(--cream-100,#f5f1e8)}
.ms-item span{font-weight:600;font-size:14px}
.ms-item em{font-style:normal;font-size:11.5px;color:var(--muted);background:#eef1f5;padding:2px 8px;border-radius:20px;white-space:nowrap}
.ms-none{padding:16px;color:var(--muted);font-size:14px;text-align:center}
@media(max-width:820px){.menusearch{max-width:none;margin:0 6px}.crumb{display:none}.who .uname{display:none}}
/* ===== Hub polish + filter ===== */
.hub-wrap{max-width:1180px}
.hub-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.hub-bar h1{font-size:22px;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.hub-find{position:relative;flex:1;min-width:200px;max-width:360px}
.hub-find .hf-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.hub-find input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;font-family:inherit;color:var(--ink)}
.hub-find input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,31,56,.08)}
.hub-tile{position:relative}
.hub-tile.hide{display:none}
.hub-empty{display:none;padding:30px;text-align:center;color:var(--muted)}
/* ===== Tighter sidebar: smaller items, less gap → fit more ===== */
.side.erp .tree{padding:4px 8px 10px;gap:1px}
.side.erp .tree-top,.side.erp .tree-head{padding:5px 11px;font-size:13.5px;gap:10px}
.side.erp .tree-top svg,.side.erp .tree-head svg{width:18px;height:18px;flex:0 0 auto}
.side.erp .tree-items{margin:1px 0 4px;padding-left:12px;margin-left:19px}
.side.erp .tree-link{padding:5px 11px;font-size:12.5px}
/* nudge Help to sit a touch apart at the bottom */
.side.erp .tree>a.tree-top:last-child{margin-top:6px;border-top:1px solid rgba(250,246,238,.08);padding-top:9px}
/* r181 — sub-menu item icons */
.side.erp .tree-link{display:flex;align-items:center;gap:8px}
.side.erp .tree-link .ti{width:15px;height:15px;flex:none;opacity:.65;stroke-width:1.9}
.side.erp .tree-link.on .ti{opacity:1}
.side.erp .tree-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* r183 — dashboard quick actions */
.qa{transition:transform .15s,box-shadow .15s}
.qa:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,31,56,.10)}
.qa .ti{width:17px;height:17px;opacity:.8}
/* r184 — notifications bell */
.bell{position:relative}
.bell-btn{position:relative;background:none;border:none;cursor:pointer;color:var(--navy,#0B1F38);padding:6px;border-radius:8px;display:flex}
.bell-btn:hover{background:rgba(0,0,0,.05)}
.bell-badge{position:absolute;top:-1px;right:-1px;background:#be123c;color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.bell-menu{position:absolute;right:0;top:42px;width:290px;background:#fff;border:1px solid var(--line,#e8ebf0);border-radius:12px;box-shadow:0 18px 50px rgba(11,31,56,.18);padding:6px;display:none;z-index:60}
.bell.open .bell-menu{display:block}
.bell-head{font-size:12px;font-weight:700;color:var(--muted,#5b6b7b);text-transform:uppercase;letter-spacing:.5px;padding:8px 10px 6px}
.bell-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink,#16202c);font-size:13.5px}
.bell-item:hover{background:rgba(0,0,0,.04)}
.bell-dot{width:8px;height:8px;border-radius:50%;flex:none}
.bell-lbl{flex:1}
.bell-cnt{color:#fff;font-size:11px;font-weight:700;border-radius:9px;min-width:18px;text-align:center;padding:1px 6px}
.bell-empty{padding:18px 10px;text-align:center;color:var(--muted,#5b6b7b);font-size:13.5px}
.bell-foot{display:block;text-align:center;padding:9px;margin-top:4px;border-top:1px solid var(--line,#e8ebf0);color:var(--navy,#0B1F38);text-decoration:none;font-size:13px;font-weight:600}
/* r201 — command palette */
.cmdk-overlay{position:fixed;inset:0;background:rgba(11,31,56,.45);backdrop-filter:blur(2px);z-index:200;display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.cmdk-overlay.on{display:flex}
.cmdk-box{width:min(560px,92vw);background:#fff;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden}
.cmdk-box input{width:100%;border:none;padding:16px 18px;font-size:16px;outline:none;border-bottom:1px solid var(--line,#e8ebf0)}
.cmdk-list{max-height:46vh;overflow:auto;padding:6px}
.cmdk-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink,#16202c)}
.cmdk-item small{color:var(--muted,#5b6b7b);font-size:12px}
.cmdk-item.sel,.cmdk-item:hover{background:var(--cream,#FAF6EE)}
.cmdk-empty{padding:18px;text-align:center;color:var(--muted,#5b6b7b)}
.cmdk-foot{display:flex;gap:16px;justify-content:center;padding:9px;border-top:1px solid var(--line,#e8ebf0);color:var(--muted,#5b6b7b);font-size:11.5px}
/* Shared data tables — consistent padding, header, borders, numeric alignment */
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table thead th{text-align:left;padding:10px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#64748b;background:#f8fafc;border-bottom:1px solid var(--line);white-space:nowrap}
.data-table tbody td{padding:10px 16px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:#fafcff}
.data-table th.num,.data-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table th.ctr,.data-table td.ctr{text-align:center}
.data-table .muted{color:#94a3b8}
/* Default padding for simple content cards; full-bleed cards (tables / .card-h headers)
and any card with its own inline padding are left untouched. */
.card:not(:has(> .card-h)):not(:has(> table)):not(:has(> .data-table)):not(:has(> thead)){padding:16px}
/* R921 — fallback cell padding for .tbl tables whose header row is a bare |
(not wrapped in ) and rows not wrapped in |
|---|
. Several module views
(Institute, Vehicle Rental, Biometric) build tables this way, so the thead/tbody-
scoped padding above never matched their header cells, leaving columns cramped.
This pads every .tbl th/td regardless of section; value matches the rules above,
so tables that DO use thead/tbody are visually unchanged. */
.tbl th,
.tbl td{padding:12px 20px}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.tbl td{border-top:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:var(--cream,#faf8f3)}
/* ======================================================================
R1790 — A PHONE-SHAPED SHELL (generalised to the ERP in R1793)
The bar and the sheet are plain classes so both shells share one
implementation; only body.adm rules below are admin-specific.
.tbl is styled globally above and used by every module in the product,
so an unscoped card rule would silently restyle several hundred tenant
screens to fix one admin one.
====================================================================== */
/* The old .mnav printed all 25 links flat and wrapped them over six rows,
which filled the screen before any content. Gone; the tab bar replaces it. */
body.adm .mnav{display:none}
/* Never over a POS till or an embedded/printed page. */
body.embed-mode .tabbar,body.embed-mode .msheet,body.embed-mode .msheet-back{display:none !important}
@media print{.tabbar,.msheet,.msheet-back{display:none !important}}
/* ---- Bottom tab bar ---- */
.tabbar{display:none}
@media screen and (max-width:1023px){
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
position:fixed;left:0;right:0;bottom:0;z-index:50;
background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(12px);
border-top:1px solid var(--line);
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
box-shadow:0 -2px 18px -10px rgba(16,32,52,.5)}
.tabbar a,
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:6px 2px;border:0;background:none;font:inherit;cursor:pointer;border-radius:12px;
color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.01em;min-height:52px}
.tabbar svg{width:21px;height:21px;stroke-width:1.9}
.tabbar .on{color:var(--navy);background:var(--gold-50)}
/* Room for the bar, plus Safari's own floating address bar on top of it. */
body.hastabs .content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* ---- "More" sheet: the sidebar's own sections, not a flat list ---- */
.msheet,.msheet-back{display:none}
@media screen and (max-width:1023px){
body.msheet-open{overflow:hidden}
.msheet-back{display:none;position:fixed;inset:0;z-index:60;background:rgba(11,31,56,.45)}
body.msheet-open .msheet-back{display:block}
.msheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:61;
max-height:82vh;overflow:hidden;background:#fff;
border-radius:20px 20px 0 0;box-shadow:0 -10px 40px -12px rgba(16,32,52,.45);
transform:translateY(102%);transition:transform .22s ease}
body.msheet-open .msheet{transform:none}
.msheet-grab{height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.msheet-grab::before{content:"";width:42px;height:4px;border-radius:4px;background:#cfd6df}
.msheet-body{max-height:calc(82vh - 22px);overflow-y:auto;
padding:4px 16px calc(20px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.msheet-sec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);margin:14px 0 6px}
.msheet-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.msheet-links a{padding:11px 12px;border:1px solid var(--line);border-radius:11px;
font-size:13.5px;font-weight:500;color:var(--ink-soft);background:#fff}
.msheet-links a.on{border-color:var(--gold);background:var(--gold-50);color:var(--navy);font-weight:700}
}
/* ---- Tables become cards (R1790 · R1792 · R1794) ----
Applies to any table carrying .tblcard, which public/js/terp-mobile.js adds at run time after
checking the table is a plain read-only list. Opt-in, not opt-out: a table the script never
reaches, or is unsure about, keeps the layout it has today.
!important on the layout properties, because a great many views set padding and text-align
INLINE on their cells (Online Orders → Customers puts style="padding:10px 12px;text-align:right"
on every td). Inline beats a stylesheet, so without this the row would go half-converted —
stacked but still right-aligned and still padded for columns, which looks broken rather than
different. Only the properties that decide the layout are forced; colour and content are the
view's business. */
@media screen and (max-width:720px){
.tblcard,
.tblcard tbody{display:block !important}
.tblcard thead{display:none !important}
.tblcard tbody tr{display:block !important;padding:12px 14px !important;border:0;
border-bottom:1px solid var(--line) !important}
.tblcard tbody tr:last-child{border-bottom:0 !important}
.tblcard tbody tr:hover{background:none}
.tblcard tbody tr:hover td{background:none}
.tblcard tbody td{display:flex !important;align-items:baseline;justify-content:space-between;
gap:16px;padding:4px 0 !important;border:0 !important;text-align:right !important}
.tblcard tbody td::before{content:attr(data-th);flex:0 0 auto;text-align:left;
font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* The first cell is the row's name — it reads as the card's title, not a labelled field. */
.tblcard tbody td:first-child{display:block !important;text-align:left !important;
font-size:15.5px;font-weight:700;color:var(--ink);padding-bottom:6px !important}
.tblcard tbody td:first-child::before{display:none}
/* An action cell has a blank header, and a "no rows" cell spans the table.
Neither wants a label or a right edge to line up against. */
.tblcard tbody td[data-th=""]{display:block !important;text-align:left !important;padding-top:10px !important}
.tblcard tbody td[data-th=""]::before{display:none}
.tblcard tbody td[colspan]{display:block !important;text-align:center !important}
.tblcard tbody td[colspan]::before{display:none}
/* A table the script refused must still not be cut off at the screen edge. The script marks
its container; the card it sits in usually has overflow:hidden set inline, hence !important. */
.tblscroll{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
}
/* ======================================================================
R1791 — STOP iOS ZOOMING IN WHEN A FIELD IS FOCUSED
Mobile Safari zooms the page whenever a focused control's text is under
16px, and .field is 13.5px. The page then stays zoomed with half the form
off the right edge — which is what it looks like, though the form itself
is fine. 16px exactly is the threshold. It is not a design preference,
and anything below it brings the zoom straight back.
NOT scoped to body.adm, deliberately: the bug is on every tenant screen
with a form, not only the admin panel, and it is the same one rule.
====================================================================== */
@media(max-width:820px){
.field,
select.field,
textarea.field,
.search input,
.hub-find input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input:not([type]),
select,
textarea{font-size:16px}
/* Ninety views set a font-size inline on a control, and an inline
declaration beats a media query. Those need !important — but ONLY the
ones that are too small: a POS amount box deliberately set to 20px or
22px does not zoom and must not be shrunk to 16. Hence matching on the
size itself rather than forcing every control. Prefixes 9-15 catch
12px and 12.5px alike and cannot touch 16px and up. */
input[style*="font-size:9"], select[style*="font-size:9"], textarea[style*="font-size:9"],
input[style*="font-size:10"],select[style*="font-size:10"],textarea[style*="font-size:10"],
input[style*="font-size:11"],select[style*="font-size:11"],textarea[style*="font-size:11"],
input[style*="font-size:12"],select[style*="font-size:12"],textarea[style*="font-size:12"],
input[style*="font-size:13"],select[style*="font-size:13"],textarea[style*="font-size:13"],
input[style*="font-size:14"],select[style*="font-size:14"],textarea[style*="font-size:14"],
input[style*="font-size:15"],select[style*="font-size:15"],textarea[style*="font-size:15"]{font-size:16px !important}
}
/* ---- R1793 — tab-bar extras (icon badge, and room for the bar) ---- */
@media screen and (max-width:1023px){
.tabbar .tab-ic{position:relative;display:inline-flex}
.tabbar .tab-dot{position:absolute;top:-5px;inline-size:auto;min-width:15px;height:15px;
inset-inline-start:11px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;
font-size:9.5px;font-weight:800;font-style:normal;line-height:15px;text-align:center}
/* The class is added by terp-mobile.js. The :has() rule is the same thing for a browser that
never runs it — written as its own rule because an unsupported selector inside a list
invalidates the whole list, which would take the working one down with it. */
body.hastabs .content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
body:has(.tabbar) .content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* ---- R1794 — the help bubble sits above the tab bar, not on it ----
Its position is written inline in the layout, so only !important moves it. Lifted by the bar's
height plus the safe-area inset; on desktop, where there is no bar, it does not move. */
@media screen and (max-width:1023px){
body.hastabs #terpHelpBubble{bottom:calc(80px + env(safe-area-inset-bottom)) !important}
}
/* ======================================================================
R1795 — what nine screens of Online Orders showed
====================================================================== */
@media screen and (max-width:720px){
/* A header written as a bare | lives in the implicit tbody, where the thead rule cannot
reach it. It was printing as a stray line of column names above the first card. */
.tblcard tbody tr.tblcard-head{display:none !important}
/* Bulk-select lists (Orders, Dispatch). The tick is not the card's title — it floats beside it,
and the row's real name is the next cell. */
.tblcard-sel tbody tr{overflow:hidden}
.tblcard-sel tbody td:first-child{float:inline-start;display:block !important;
width:auto;padding:1px 10px 0 0 !important;text-align:left !important}
.tblcard-sel tbody td:first-child::before{display:none}
.tblcard-sel tbody td:nth-child(2){display:block !important;text-align:left !important;
font-size:15.5px;font-weight:700;color:var(--ink);padding:0 0 6px !important}
.tblcard-sel tbody td:nth-child(2)::before{display:none}
/* …and with a select column the SECOND cell is the title, so the first-cell title rule must not
also fire. It is re-stated here rather than made conditional above, because the plain rule
has to keep working for every table without a select column. */
.tblcard-sel tbody td:first-child{font-size:inherit;font-weight:400}
}
/* A big figure in a small card was being cut off — "COD to collect LKR 42,250.00" lost its last
digits, which on a money screen is the worst possible thing to trim silently. .num is nowrap by
design so a figure never breaks mid-column on a desktop table; on a phone, wrapping is strictly
better than losing the end of the number. */
@media screen and (max-width:520px){
.card .num{white-space:normal}
}
/* ======================================================================
R1796 — the two-column squeeze, everywhere at once
173 views hard-code style="display:grid;grid-template-columns:1fr 1fr" and 34 more use
repeat(3,1fr) or repeat(4,1fr). Inline beats a media query, so not one of them has ever
collapsed on a phone: Customer detail put Address book and Orders side by side at half a
screen each, and its three figures were cut off mid-number.
Matching on the declaration itself is the only thing that reaches an inline style without
editing 173 files — and it is precise: "columns:1fr 1fr" cannot match "columns:2fr 1fr", so
an intentionally lopsided grid is untouched. Screen only: printed pages keep their columns.
====================================================================== */
@media screen and (max-width:720px){
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns:repeat(2,1fr)"],
[style*="grid-template-columns:2fr 1fr"],
[style*="grid-template-columns:1fr 2fr"]{grid-template-columns:1fr !important}
/* Three or four equal columns become two rather than one — these are nearly always small KPI
cards, and one per row wastes the screen. Written AFTER the rule above on purpose: the
substring "1fr 1fr" also matches "1fr 1fr 1fr", and with equal specificity the later rule
wins, so a three-column grid lands on two columns and not on one. */
[style*="grid-template-columns:repeat(3,1fr)"],
[style*="grid-template-columns:repeat(4,1fr)"],
[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:repeat(2,1fr) !important}
/* And the reason the figures were CUT rather than wrapped: a grid column is minmax(auto,1fr),
and `auto` will not shrink below its content's minimum — so a card holding "LKR 27,600.00"
forced the column wide, the grid grew past the viewport, and the third card left the screen.
min-width:0 lets the column shrink and the text wrap instead. This is the classic grid
blowout and it is why "make it two columns" alone would not have been enough. */
[style*="display:grid"] > *{min-width:0}
}
/* A page's own Save/Create button is the last thing on it, and the tab bar is fixed over the
bottom of the screen. The reserve was the same height as the bar, which left the button
touching it — "Create order" on the New order screen looked like it was behind the bar.
Bar is 64px + inset; this leaves a clear 40px under the last element. */
@media screen and (max-width:1023px){
body.hastabs .content{padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important}
}
/* ======================================================================
R1797 — the tab bar's own column count
It used to be written inline, which R1796's sweep then matched: a four-tab bar carries
style="grid-template-columns:repeat(4,1fr)", the sweep rewrites that to two columns on a
phone, and the bar folded onto two rows. A rule that reaches every inline grid in the product
reaches the ones we wrote ourselves too — so the count moves to an attribute instead.
====================================================================== */
@media screen and (max-width:1023px){
.tabbar[data-tabs="3"]{grid-template-columns:repeat(3,1fr)}
.tabbar[data-tabs="4"]{grid-template-columns:repeat(4,1fr)}
.tabbar[data-tabs="5"]{grid-template-columns:repeat(5,1fr)}
}
/* ======================================================================
R1798 — the two layouts a phone cannot honour
====================================================================== */
@media screen and (max-width:720px){
/* 1. A filter bar is a |
|---|