/* DIMA Fone Store — base styles.
   MOBILE-FIRST: phone layout is the default; min-width queries add the laptop.
   LOGICAL PROPERTIES ONLY (inline-start/end, never left/right) — the app flips to RTL.
   All colour lives in the variables below; never a hex in JS or in another file. */

:root{
  --bg:#EEF0F4;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --ink:#151A23;
  --ink-soft:#1E2530;
  --text:#20262F;
  --muted:#6A7280;
  --border:#E4E7EC;
  --border-strong:#D3D8E0;

  --primary:#4B4DED;
  --primary-weak:#ECEDFE;

  /* semantic money colours */
  --income:#12805C;  --income-bg:#DCFBEE;   /* green = income            */
  --expense:#D3453C; --expense-bg:#FDE7E5;  /* red   = expense / debt    */
  --warn:#B26B08;    --warn-bg:#FCF0D6;     /* amber = warning / low     */

  /* surfaces that sit ON the dark sidebar, and the white used on coloured fills.
     Tokens rather than literals so every colour in the app has exactly one home
     (rule 13) — nothing below this block should contain a raw hex. */
  --on-dark:#FFFFFF;
  --on-dark-soft:#C7CDD8;
  --on-dark-muted:#AEB6C4;
  --on-dark-faint:#818A99;
  --on-dark-dim:#6C7484;
  --on-dark-hover:#EAEDF2;
  --sidebar-hover:rgba(255,255,255,.05);
  --sidebar-rule:rgba(255,255,255,.07);
  --brand-grad-from:#5B5DF0;
  --brand-grad-to:#8E4BEA;
  --scrim:rgba(20,26,35,.45);

  --radius:12px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,26,35,.04), 0 4px 14px rgba(20,26,35,.05);
  --shadow-lift:0 10px 30px rgba(0,0,0,.3);
  --shadow-sheet:0 -10px 40px rgba(0,0,0,.2);
  --font:'Cairo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --side-w:248px;
  --tabbar-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  text-align:start;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
[hidden]{display:none !important}
.muted{color:var(--muted)}

/* Numbers, prices, phones, SKUs stay LTR even in Arabic. */
input[type="email"],input[type="password"],input[type="tel"],input[type="number"],
.num,.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- brand mark ---------- */
.brand-mark{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-grad-from),var(--brand-grad-to));color:var(--on-dark);font-weight:800;font-size:17px;
}
.brand-mark.lg{width:52px;height:52px;border-radius:15px;font-size:23px}

/* ---------- boot splash ---------- */
.boot{
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:var(--muted);font-size:.85rem;font-weight:600;
}

/* ---------- login ---------- */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:26px 22px;width:100%;max-width:400px;
}
.login-head{text-align:center;margin-bottom:22px;display:grid;justify-items:center;gap:9px}
.login-head h1{font-size:1.2rem;font-weight:800}
.login-head p{font-size:.82rem}

.field{display:block;margin-bottom:14px}
.field > span{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-block-end:6px}
.field input{
  width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:1rem;background:var(--surface);color:var(--text);
}
.field input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}

.form-error{
  background:var(--expense-bg);color:var(--expense);border-radius:var(--radius-sm);
  padding:10px 13px;font-size:.82rem;font-weight:600;margin-block-end:12px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 16px;border-radius:var(--radius-sm);background:var(--primary);color:var(--on-dark);
  font-weight:700;font-size:.92rem;transition:filter .12s;
}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.65;cursor:default}
.btn.block{width:100%}

.login-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-block-start:18px;padding-block-start:14px;border-block-start:1px solid var(--border);
}
.lang-btn{
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
  padding:7px 15px;font-size:.8rem;font-weight:700;color:var(--muted);
}
.lang-btn:hover{background:var(--border)}
.lang-btn.ghost{background:transparent}

.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  font-size:.75rem;font-weight:700}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pill-checking{background:var(--warn-bg);color:var(--warn)}
.pill-ok{background:var(--income-bg);color:var(--income)}
.pill-fail{background:var(--expense-bg);color:var(--expense)}

/* ---------- app shell (phone first) ---------- */
.app{min-height:100dvh;display:flex;flex-direction:column}
.sidebar{display:none}
.main{display:flex;flex-direction:column;min-width:0;flex:1}

.topbar{
  background:var(--surface);border-block-end:1px solid var(--border);
  padding:0 14px;min-height:58px;display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:20;
}
.titles{min-width:0}
.page-title{font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-sub{display:none;font-size:.76rem;color:var(--muted);font-weight:500}
.spacer{flex:1}
.user-chip{display:flex;align-items:center;gap:8px}
.user-meta{display:none}
.avatar{
  width:32px;height:32px;border-radius:9px;background:var(--primary-weak);color:var(--primary);
  display:grid;place-items:center;font-weight:800;font-size:.82rem;flex:none;
}
.user-name{font-size:.8rem;font-weight:700;line-height:1.15}
.user-role{font-size:.7rem;color:var(--muted);font-weight:600}
.icon-btn{
  width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;
  color:var(--muted);flex:none;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:19px;height:19px}

.content{
  flex:1;width:100%;max-width:1180px;
  padding:16px 14px calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom));
}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-block-end:14px;
}
.card h2{font-size:1.02rem;font-weight:700;margin-block-end:7px}
.card p{color:var(--muted);font-size:.86rem;line-height:1.65}

/* ---------- bottom tab bar (phone) ---------- */
.bottom-nav{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:30;
  background:var(--surface);border-block-start:1px solid var(--border);
  display:flex;align-items:stretch;
  padding-block-end:env(safe-area-inset-bottom);
}
.tab{
  flex:1;min-height:var(--tabbar-h);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--muted);font-size:.66rem;font-weight:700;
  padding:8px 2px;border-block-start:2px solid transparent;
}
.tab svg{width:21px;height:21px}
.tab.active{color:var(--primary);border-block-start-color:var(--primary)}

/* ---------- "more" sheet ---------- */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end}
.sheet-backdrop{position:absolute;inset:0;background:var(--scrim)}
.sheet-panel{
  position:relative;width:100%;background:var(--surface);
  border-start-start-radius:18px;border-start-end-radius:18px;
  padding:10px 14px calc(18px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-sheet);
}
.sheet-grip{width:42px;height:4px;border-radius:3px;background:var(--border-strong);margin:0 auto 12px}
.sheet-items{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.sheet-item{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);
  font-size:.74rem;font-weight:700;color:var(--text);
}
.sheet-item svg{width:21px;height:21px;color:var(--muted)}
.sheet-item.active{border-color:var(--primary);background:var(--primary-weak);color:var(--primary)}
.sheet-item.active svg{color:var(--primary)}

/* ---------- tabs, toolbars, lists ---------- */
.tabs{display:flex;gap:6px;margin-block-end:14px;overflow-x:auto}
.tab-btn{
  padding:8px 14px;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);white-space:nowrap;
}
.tab-btn.on{background:var(--primary-weak);color:var(--primary);border-color:var(--primary)}

.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-block-end:12px}
.search{
  display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 12px;flex:1;min-width:150px;
}
.search input{border:none;outline:none;background:none;font-size:.88rem;flex:1;color:var(--text);width:100%}
.check{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--muted)}
.btn.sm{padding:8px 13px;font-size:.82rem}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.link{
  background:none;color:var(--primary);font-size:.8rem;font-weight:700;padding:4px 2px;border-radius:6px;
}
.link.danger{color:var(--expense)}
.link.block{display:block;width:100%;text-align:center;padding:10px;margin-block-start:8px;color:var(--muted)}
.pad{padding:18px 4px}
.hint{font-size:.78rem;color:var(--muted);line-height:1.6;margin-block-end:12px}
.hint.amber{color:var(--warn)}
.income{color:var(--income)}
.expense{color:var(--expense)}

.list{display:flex;flex-direction:column;gap:9px}
.row-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:13px 15px;display:grid;gap:8px;
  grid-template-columns:1fr auto;align-items:center;
}
.row-card.dim{opacity:.6}
.rc-title{font-size:.9rem;font-weight:700}
.rc-sub{font-size:.76rem;color:var(--muted);font-weight:500;margin-block-start:2px}
.rc-side{text-align:end;display:grid;gap:5px;justify-items:end}
.rc-price{font-size:.95rem;font-weight:800;color:var(--primary)}
.rc-actions{grid-column:1 / -1;display:flex;gap:14px;padding-block-start:8px;border-block-start:1px solid var(--border)}

.tag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px}
.tag.gray{background:var(--surface-2);color:var(--muted)}
.tag.amber{background:var(--warn-bg);color:var(--warn)}
.tag.green{background:var(--income-bg);color:var(--income)}
.tag.red{background:var(--expense-bg);color:var(--expense)}

/* ---------- modal ---------- */
.overlay{
  position:fixed;inset:0;background:var(--scrim);z-index:50;
  display:flex;align-items:flex-end;justify-content:center;padding:0;
}
.modal{
  background:var(--surface);width:100%;max-width:460px;max-height:92dvh;overflow-y:auto;
  border-start-start-radius:18px;border-start-end-radius:18px;
}
.modal-h{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;border-block-end:1px solid var(--border);position:sticky;top:0;background:var(--surface);
}
.modal-h h3{font-size:1rem;font-weight:700}
.modal-x{width:32px;height:32px;border-radius:8px;color:var(--muted);font-size:1.2rem;line-height:1}
.modal-x:hover{background:var(--surface-2)}
.modal-b{padding:18px}
.modal-f{display:flex;gap:9px;margin-block-start:16px}
.modal-f .btn{flex:1}
.field select{
  width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:1rem;background:var(--surface);color:var(--text);font-family:inherit;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid3{display:grid;grid-template-columns:1fr;gap:0 12px}
.grid3.end{align-items:end}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-block-end:1px solid var(--border);font-size:.86rem}
.kv:last-of-type{border-block-end:none}
.mini-list{margin-block:10px;max-height:190px;overflow-y:auto}

/* ---------- POS ---------- */
.pos-grid{display:grid;gap:14px;grid-template-columns:1fr}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.prod-btn{
  background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px 11px;
  text-align:start;box-shadow:var(--shadow);display:grid;gap:6px;justify-items:start;
}
.prod-btn:active{transform:translateY(1px)}
.prod-emoji{font-size:1.45rem;line-height:1}
.rc-emoji{margin-inline-end:6px}
.emoji-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin-block-end:8px}
.emoji-opt{
  font-size:1.2rem;padding:6px 0;border-radius:9px;background:var(--surface-2);
  border:1px solid var(--border);
}
.emoji-opt.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.prod-n{font-size:.78rem;font-weight:700;line-height:1.3}
.prod-p{font-size:.82rem;font-weight:800;color:var(--primary)}

.cart-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-block-end:1px solid var(--border)}
.ci-main{flex:1;min-width:0}
.ci-n{font-size:.82rem;font-weight:700}
.ci-controls{display:flex;align-items:center;gap:7px;margin-block-start:6px}
.qty-btn{
  width:28px;height:28px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);
  font-weight:800;color:var(--text);line-height:1;
}
.disc-input{
  width:72px;padding:5px 8px;border:1px solid var(--border-strong);border-radius:7px;font-size:.78rem;
}
.ci-p{font-size:.85rem;font-weight:700;white-space:nowrap}
.ci-q{font-size:.78rem;color:var(--muted);font-weight:600}
.cart-empty{text-align:center;color:var(--muted);font-size:.82rem;padding:22px 0}
.cart-line{display:flex;justify-content:space-between;font-size:.85rem;padding:5px 0}
.cart-tot{
  display:flex;justify-content:space-between;font-size:1.05rem;font-weight:800;
  padding:10px 0;border-block-start:1px solid var(--border);margin-block-start:6px;
}
.pay-opts{display:flex;gap:7px;margin:12px 0}
.pay-opt{
  flex:1;padding:9px 4px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:.78rem;font-weight:700;color:var(--muted);text-align:center;
}
.pay-opt.on{border-color:var(--primary);background:var(--primary-weak);color:var(--primary)}

/* ---------- wallet: float tiles ---------- */
.float-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;margin-block-end:16px}
.fcard{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:13px;text-align:start;display:block;width:100%;
}
.fcard:hover{border-color:var(--primary)}
.fcard-h{display:flex;align-items:center;gap:9px;margin-block-end:11px}
.fcard-logo{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  color:var(--on-dark);font-weight:800;font-size:.82rem;background:var(--brand-0);
}
.fcard-t{min-width:0;display:block}
.fcard-n{display:block;font-size:.82rem;font-weight:700}
.fcard-type{display:block;font-size:.68rem;color:var(--muted);font-weight:600}
.fcard-lab{font-size:.68rem;color:var(--muted);font-weight:600}
.fcard-val{font-size:1.1rem;font-weight:800;letter-spacing:-.4px}
.fcard-drift{margin-block-start:7px;font-size:.66rem}

/* Provider brand colours. Declared here as variables so no hex ever appears in
   JS (rule 13) — js/wallet.js only picks a class name. */
:root{
  --brand-vodafone:#E60000;
  --brand-orange:#F36A21;
  --brand-etisalat:#7AB800;
  --brand-we:#652D86;
  --brand-fawry:#00A5B5;
  --brand-0:#4B4DED;
  --brand-1:#0E8A6A;
  --brand-2:#C2410C;
  --brand-3:#7C3AED;
  --brand-4:#0369A1;
  --brand-5:#B45309;
}
.brand-vodafone{background:var(--brand-vodafone)}
.brand-orange{background:var(--brand-orange)}
.brand-etisalat{background:var(--brand-etisalat)}
.brand-we{background:var(--brand-we)}
.brand-fawry{background:var(--brand-fawry)}
.brand-0{background:var(--brand-0)}
.brand-1{background:var(--brand-1)}
.brand-2{background:var(--brand-2)}
.brand-3{background:var(--brand-3)}
.brand-4{background:var(--brand-4)}
.brand-5{background:var(--brand-5)}

.effect-box{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px 13px;margin-block-start:12px;
}
.effect-box .kv{border-block-end-color:var(--border-strong)}
.filter-select{
  padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.85rem;background:var(--surface);color:var(--text);flex:1;
}
.num.amber{color:var(--warn)}

/* ---------- repairs: stacked on phone, kanban board on laptop ---------- */
.kanban{display:flex;flex-direction:column;gap:16px}
.kcol{display:flex;flex-direction:column;gap:8px}
.kcol-h{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.82rem;font-weight:700;padding-block-end:2px;
}
.kcol-h .cnt{
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:1px 9px;font-size:.7rem;color:var(--muted);
}
.kcol-empty{font-size:.76rem;color:var(--muted);padding:6px 2px}
.jcard{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px 14px;cursor:pointer;display:block;width:100%;text-align:start;
}
.jcard:hover{border-color:var(--primary)}
.jcard:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.jc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-end:6px}
.jc-no{font-size:.72rem;font-weight:700;color:var(--muted)}
.jc-dev{font-size:.88rem;font-weight:700}
.jc-iss{font-size:.76rem;color:var(--muted);margin:3px 0 9px}
.jc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.jc-cust{font-size:.72rem;color:var(--muted);font-weight:600}
.jc-price{font-size:.85rem;font-weight:800;color:var(--primary)}

.sec-h{font-size:.82rem;font-weight:700;color:var(--muted);margin:18px 0 8px}
.status-row{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.status-row .pay-opt{flex:1 1 auto;min-width:92px}
.detail-actions{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-block-start:18px;padding-block-start:14px;border-block-start:1px solid var(--border);
}

/* ---------- dashboard ---------- */
.kpi-card{text-align:center}
.kpi-lab{font-size:.76rem;color:var(--muted);font-weight:700}
.kpi-val{font-size:1.9rem;font-weight:800;letter-spacing:-.6px;margin-block:4px}
.kpi-sub{font-size:.72rem;color:var(--muted);font-weight:600}

.barline{display:flex;align-items:center;gap:10px;margin-block-end:11px}
.barline:last-child{margin-block-end:0}
.bl-name{width:84px;flex:none;font-size:.76rem;font-weight:700}
.bl-track{flex:1;height:9px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.bl-fill{height:100%;border-radius:6px;background:var(--line-merchandise);transition:width .4s}
.bl-val{width:78px;flex:none;text-align:end;font-size:.78rem;font-weight:700}

:root{
  --line-merchandise:#4B4DED;
  --line-repairs:#7C3AED;
  --line-wallet:#0E8A6A;
  --line-charging:#B26B08;
}
.line-merchandise{background:var(--line-merchandise)}
.line-repairs{background:var(--line-repairs)}
.line-wallet{background:var(--line-wallet)}
.line-charging{background:var(--line-charging)}

/* Tables scroll inside their own box; the page itself never scrolls sideways. */
.table-wrap{overflow-x:auto;margin-inline:-4px}
table{width:100%;border-collapse:collapse}
th{
  text-align:start;font-size:.7rem;color:var(--muted);font-weight:700;
  padding:9px 10px;border-block-end:1px solid var(--border);white-space:nowrap;
}
td{padding:10px;border-block-end:1px solid var(--border);font-size:.78rem;font-weight:500;white-space:nowrap}
tr:last-child td{border-block-end:none}

/* ---------- cash session ---------- */
.count-input{
  width:100%;padding:13px 14px;border:1px solid var(--border-strong);border-radius:10px;
  font-size:1.15rem;font-weight:800;text-align:center;
}
.diff-box{border-radius:11px;padding:15px;text-align:center;margin-block:12px}
.diff-box.ok{background:var(--income-bg);color:var(--income)}
.diff-box.bad{background:var(--warn-bg);color:var(--warn)}
.db-lab{font-size:.76rem;font-weight:700;margin-block-end:3px}
.db-val{font-size:1.5rem;font-weight:800}
.adv-check{
  display:flex;align-items:center;gap:9px;padding:9px 0;
  border-block-end:1px solid var(--border);font-size:.82rem;color:var(--text);
}
.adv-check:last-child{border-block-end:none}

/* ---------- update bar (offered, never forced) ---------- */
.update-bar{
  position:fixed;inset-block-end:calc(var(--tabbar-h) + 14px);inset-inline:14px;z-index:70;
  background:var(--ink);color:var(--on-dark);border-radius:11px;
  padding:11px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.8rem;font-weight:600;box-shadow:var(--shadow-lift);
}
.update-bar span{flex:1;min-width:120px}
.update-bar .link{color:var(--on-dark-soft)}

/* ---------- toast ---------- */
.toast{
  position:fixed;inset-block-end:calc(var(--tabbar-h) + 14px);inset-inline:14px;
  background:var(--ink);color:var(--on-dark);padding:12px 16px;border-radius:11px;
  font-size:.82rem;font-weight:600;box-shadow:var(--shadow-lift);z-index:60;
  opacity:0;transform:translateY(14px);transition:.2s;pointer-events:none;text-align:center;
}
.toast.show{opacity:1;transform:translateY(0)}

/* ---------- laptop: sidebar replaces the tab bar ---------- */
@media (min-width:900px){
  .app{display:grid;grid-template-columns:var(--side-w) 1fr}
  .sidebar{
    display:flex;flex-direction:column;background:var(--ink);color:var(--on-dark-soft);
    position:sticky;top:0;height:100dvh;
  }
  .brand{
    display:flex;align-items:center;gap:11px;padding:20px 18px 18px;
    border-block-end:1px solid var(--sidebar-rule);
  }
  .brand-name{font-weight:700;color:var(--on-dark);font-size:.92rem;line-height:1.2}
  .brand-sub{font-size:.72rem;color:var(--on-dark-faint);font-weight:500}
  .nav{padding:12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
  .nav-item{
    display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:9px;
    color:var(--on-dark-muted);font-weight:600;font-size:.84rem;text-align:start;
    border-inline-start:2px solid transparent;transition:background .12s,color .12s;
  }
  .nav-item:hover{background:var(--sidebar-hover);color:var(--on-dark-hover)}
  .nav-item.active{background:var(--ink-soft);color:var(--on-dark);border-inline-start-color:var(--primary)}
  .nav-item svg{width:19px;height:19px;flex:none}
  .nav-foot{padding:12px 14px;border-block-start:1px solid var(--sidebar-rule)}
  .version{font-size:.7rem;color:var(--on-dark-dim);padding:8px 12px 0;direction:ltr;unicode-bidi:isolate}

  .topbar{padding:0 22px;min-height:62px}
  .page-sub{display:block}
  .user-meta{display:block}
  .content{padding:22px 22px 50px}
  .bottom-nav,.sheet{display:none}

  /* roomier versions of the same screens */
  .row-card{grid-template-columns:1fr auto auto;gap:16px}
  .rc-actions{grid-column:auto;border-block-start:none;padding-block-start:0}
  .pos-grid{grid-template-columns:1fr 330px;align-items:start}
  .cart{position:sticky;top:80px}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .overlay{align-items:center;padding:20px}
  .modal{border-radius:16px;max-height:86dvh}
  .grid3{grid-template-columns:2fr 1fr 1fr}

  /* the same columns, side by side, scrolling horizontally if they run out of room */
  .kanban{
    flex-direction:row;align-items:flex-start;gap:13px;
    overflow-x:auto;padding-block-end:6px;
  }
  .kcol{
    flex:1 0 210px;background:var(--surface-2);border:1px solid var(--border);
    border-radius:11px;padding:10px;max-height:calc(100dvh - 190px);overflow-y:auto;
  }
  .kcol-h{position:sticky;top:0;background:var(--surface-2);padding-block:2px 8px}
  .toast{inset-block-end:22px;inset-inline-start:auto;inset-inline-end:22px;max-width:360px}
  .update-bar{inset-block-end:22px;inset-inline-start:auto;inset-inline-end:22px;max-width:420px}
}