/* ==========================================================================
   AR CRETE POS — Design System
   Light is default; dark is a selected theme (OS setting + manual toggle).
   ========================================================================== */

:root{
  color-scheme: light;

  /* Surfaces & ink */
  --bg:            #f4f5f3;
  --surface-1:     #fcfcfb;
  --surface-2:     #f0efec;
  --surface-3:     #e6e5e1;
  --border:        #dcdbd6;
  --border-strong: #c4c3bd;
  --text-primary:  #14140f;
  --text-secondary:#52514e;
  --text-muted:    #7a7975;

  /* Brand */
  --brand:         #2b2723;
  --brand-ink:     #ffffff;
  --accent:        #eb6834;   /* series-2 orange — CTA */
  --accent-hover:  #d95926;
  --accent-ink:    #ffffff;
  --accent-soft:   #fdece5;

  /* Categorical series (validated: all-pairs PASS light & dark) */
  --series-1:      #2a78d6;
  --series-2:      #eb6834;
  --series-3:      #1baf7a;

  /* Status (fixed, never themed) */
  --good:          #0ca30c;
  --warning:       #fab219;
  --serious:       #ec835a;
  --critical:      #d03b3b;
  --good-soft:     #e7f6e7;
  --warning-soft:  #fdf3dd;
  --critical-soft: #fbeaea;

  /* Geometry */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;
  --shadow-1: 0 1px 2px rgba(20,20,15,.06), 0 1px 3px rgba(20,20,15,.05);
  --shadow-2: 0 2px 6px rgba(20,20,15,.07), 0 8px 24px rgba(20,20,15,.07);
  --shadow-3: 0 10px 36px rgba(20,20,15,.16);
  --ring: 0 0 0 3px rgba(42,120,214,.28);

  --sidebar-w: 248px;
  --font: "Segoe UI", system-ui, -apple-system, Inter, Roboto, Arial, sans-serif;
}

/* ---- Dark: OS preference (loses to an explicit light stamp) ---- */
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --bg:            #121211;
    --surface-1:     #1a1a19;
    --surface-2:     #232322;
    --surface-3:     #2e2e2c;
    --border:        #383835;
    --border-strong: #4c4c48;
    --text-primary:  #ffffff;
    --text-secondary:#c3c2b7;
    --text-muted:    #94938b;
    --brand:         #1d1a17;
    --accent:        #eb6834;
    --accent-hover:  #f4794a;
    --accent-soft:   #3a2018;
    --series-1:      #3987e5;
    --series-2:      #d95926;
    --series-3:      #199e70;
    --good-soft:     #14280f;
    --warning-soft:  #332a10;
    --critical-soft: #331616;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
    --shadow-3: 0 10px 36px rgba(0,0,0,.6);
  }
}
/* ---- Dark: manual toggle (wins both ways) ---- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:            #121211;
  --surface-1:     #1a1a19;
  --surface-2:     #232322;
  --surface-3:     #2e2e2c;
  --border:        #383835;
  --border-strong: #4c4c48;
  --text-primary:  #ffffff;
  --text-secondary:#c3c2b7;
  --text-muted:    #94938b;
  --brand:         #1d1a17;
  --accent:        #eb6834;
  --accent-hover:  #f4794a;
  --accent-soft:   #3a2018;
  --series-1:      #3987e5;
  --series-2:      #d95926;
  --series-3:      #199e70;
  --good-soft:     #14280f;
  --warning-soft:  #332a10;
  --critical-soft: #331616;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  --shadow-3: 0 10px 36px rgba(0,0,0,.6);
}

/* ========================= Base ========================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text-primary);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; line-height:1.25; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:1.25rem; } h2{ font-size:1.05rem; } h3{ font-size:.95rem; }
p{ margin:0; }
a{ color:var(--series-1); text-decoration:none; }
a:hover{ text-decoration:underline; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }

.muted{ color:var(--text-secondary); }
.dim{ color:var(--text-muted); }
.xs{ font-size:.72rem; } .sm{ font-size:.82rem; } .lg{ font-size:1.1rem; }
.bold{ font-weight:700; } .num{ font-variant-numeric:tabular-nums; }
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:26px}
.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}
.w-full{ width:100%; } .center{ text-align:center; } .right{ text-align:right; }
.row{ display:flex; gap:10px; align-items:center; } .row-wrap{ flex-wrap:wrap; }
.spacer{ flex:1; }
.hide{ display:none !important; }
.nowrap{ white-space:nowrap; }

/* ========================= Layout ========================= */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--brand); color:#f2f1ee;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; z-index:40;
}
.brand{ display:flex; align-items:center; gap:10px; padding:16px 14px; border-bottom:1px solid rgba(255,255,255,.09); }
.brand-logo{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; overflow:hidden; background:var(--accent); display:grid; place-items:center; }
.brand-logo svg{ width:100%; height:100%; display:block; }
.brand-logo img{ width:100%; height:100%; object-fit:cover; }
.logo-img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-text{ display:flex; flex-direction:column; min-width:0; }
.brand-text strong{ font-size:1rem; letter-spacing:.06em; }
.brand-text span{ font-size:.68rem; color:rgba(242,241,238,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand .sidebar-close{ display:none; margin-left:auto; color:#fff; }

.nav{ flex:1; overflow-y:auto; padding:10px 8px; display:flex; flex-direction:column; gap:2px; }
.nav-group{ font-size:.63rem; text-transform:uppercase; letter-spacing:.11em; color:rgba(242,241,238,.4); padding:14px 10px 5px; font-weight:700; }
.nav a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm);
  color:rgba(242,241,238,.8); font-size:.88rem; font-weight:500; text-decoration:none;
  border-left:3px solid transparent;
}
.nav a .ic{ width:19px; text-align:center; font-size:1rem; flex:0 0 19px; }
.nav a:hover{ background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.nav a.active{ background:rgba(235,104,52,.16); color:#fff; border-left-color:var(--accent); font-weight:600; }
.nav a .badge{ margin-left:auto; }
.sidebar-foot{ padding:12px; border-top:1px solid rgba(255,255,255,.09); }
.sidebar-foot .btn-ghost{ color:#f2f1ee; border-color:rgba(255,255,255,.2); }
.sidebar-foot .btn-ghost:hover{ background:rgba(255,255,255,.1); }
.sidebar-foot .muted{ color:rgba(242,241,238,.45); }

.scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:39; }
.scrim.on{ display:block; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px; padding:11px 20px;
  background:var(--surface-1);
  border-bottom:1px solid var(--border);
}
.topbar-title{ min-width:0; }
.topbar-title h1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.menu-btn{ display:none; }
.content{ flex:1; padding:20px; max-width:1500px; width:100%; }
.appfoot{ padding:14px 20px 26px; }

/* ========================= Buttons ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--r-sm); border:1px solid transparent;
  background:var(--surface-2); color:var(--text-primary);
  font-size:.88rem; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .13s, border-color .13s, transform .05s;
}
.btn:hover{ background:var(--surface-3); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ background:var(--accent-hover); }
.btn-primary{ background:var(--series-1); color:#fff; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-good{ background:var(--good); color:#fff; } .btn-good:hover{ filter:brightness(1.08); }
.btn-danger{ background:var(--critical); color:#fff; } .btn-danger:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; border-color:var(--border-strong); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-sm{ padding:6px 11px; font-size:.8rem; }
.btn-lg{ padding:13px 22px; font-size:1rem; }
.btn-xl{ padding:16px 24px; font-size:1.05rem; border-radius:var(--r-md); }
.icon-btn{
  display:inline-grid; place-items:center; width:36px; height:36px; flex:0 0 36px;
  border:none; background:transparent; border-radius:var(--r-sm);
  cursor:pointer; font-size:1.1rem; color:inherit;
}
.icon-btn:hover{ background:var(--surface-2); }

/* ========================= Cards / panels ========================= */
.card{
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
}
.card-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.card-head h2{ font-size:.98rem; }
.card-body{ padding:18px; }
.card-body.tight{ padding:12px; }
.card-body.flush{ padding:0; }
.card-foot{ padding:14px 18px; border-top:1px solid var(--border); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); }

.grid{ display:grid; gap:16px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-auto{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.g-kpi{ grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); }

/* Guidance strip — Roman Urdu step help */
.hint{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:var(--r-md); padding:12px 14px; font-size:.86rem; color:var(--text-primary);
}
.hint .hint-ic{ font-size:1.05rem; line-height:1.3; }
.hint b{ font-weight:700; }
.hint-blue{ background:color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); border-color:color-mix(in srgb, var(--series-1) 32%, transparent); }
.hint-good{ background:var(--good-soft); border-color:color-mix(in srgb, var(--good) 34%, transparent); }
.hint-warn{ background:var(--warning-soft); border-color:color-mix(in srgb, var(--warning) 45%, transparent); }

.steps{ display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; list-style:none; counter-reset:s; }
.steps li{
  counter-increment:s; display:flex; align-items:center; gap:7px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:100px;
  padding:5px 13px 5px 6px; font-size:.78rem; color:var(--text-secondary);
}
.steps li::before{
  content:counter(s); display:grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:var(--accent); color:#fff; font-size:.68rem; font-weight:700;
  flex:0 0 20px;
}

/* ========================= KPI stat tiles ========================= */
.kpi{
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:15px 17px; box-shadow:var(--shadow-1); position:relative; overflow:hidden;
}
.kpi::after{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--kc,var(--series-1)); }
.kpi .kpi-label{ font-size:.76rem; color:var(--text-secondary); font-weight:600; display:flex; align-items:center; gap:6px; }
.kpi .kpi-value{ font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin-top:5px; font-variant-numeric:tabular-nums; }
.kpi .kpi-sub{ font-size:.75rem; color:var(--text-muted); margin-top:3px; }
.kpi.k-good{ --kc:var(--good); } .kpi.k-warn{ --kc:var(--warning); }
.kpi.k-bad{ --kc:var(--critical); } .kpi.k-accent{ --kc:var(--accent); }
.kpi.k-aqua{ --kc:var(--series-3); }

/* ========================= Forms ========================= */
.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.field > label{ font-size:.8rem; font-weight:600; color:var(--text-secondary); }
.field .help{ font-size:.72rem; color:var(--text-muted); }
.inp, select.inp, textarea.inp{
  width:100%; padding:10px 12px; background:var(--surface-1);
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  font-size:.92rem; transition:border-color .13s;
}
.inp:hover{ border-color:var(--text-muted); }
.inp:focus{ border-color:var(--series-1); box-shadow:var(--ring); outline:none; }
input[type=number].inp{ -moz-appearance:textfield; font-variant-numeric:tabular-nums; }
input[type=number].inp::-webkit-outer-spin-button,
input[type=number].inp::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
textarea.inp{ min-height:70px; resize:vertical; }
.inp-big{ padding:14px; font-size:1.25rem; font-weight:700; }
.inp-group{ display:flex; }
.inp-group .inp{ border-radius:0; }
.inp-group > *:first-child{ border-radius:var(--r-sm) 0 0 var(--r-sm); }
.inp-group > *:last-child{ border-radius:0 var(--r-sm) var(--r-sm) 0; }
.inp-group select.inp{ flex:0 0 120px; background:var(--surface-2); border-left:none; }
.prefix{
  display:grid; place-items:center; padding:0 11px; background:var(--surface-2);
  border:1px solid var(--border-strong); border-right:none;
  font-size:.85rem; color:var(--text-secondary); font-weight:600; white-space:nowrap;
}
.form-grid{ display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:3px; gap:3px; flex-wrap:wrap; }
.seg button{ border:none; background:transparent; padding:7px 13px; border-radius:6px; font-size:.82rem; font-weight:600; cursor:pointer; color:var(--text-secondary); }
.seg button.on{ background:var(--surface-1); color:var(--text-primary); box-shadow:var(--shadow-1); }

/* ========================= Tables ========================= */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tbl{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.tbl th{
  text-align:left; font-size:.71rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-muted); font-weight:700; padding:9px 12px;
  border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-1);
}
table.tbl td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.tbl tbody tr:hover{ background:var(--surface-2); }
table.tbl tbody tr:last-child td{ border-bottom:none; }
table.tbl td.r, table.tbl th.r{ text-align:right; font-variant-numeric:tabular-nums; }
table.tbl tfoot td{ padding:11px 12px; font-weight:700; border-top:2px solid var(--border-strong); background:var(--surface-2); }
.empty{ padding:42px 20px; text-align:center; color:var(--text-muted); }
.empty .big{ font-size:2rem; display:block; margin-bottom:8px; opacity:.6; }

/* ========================= Chips & badges ========================= */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:100px;
  background:var(--surface-2); border:1px solid var(--border);
  font-size:.74rem; font-weight:600; color:var(--text-secondary); white-space:nowrap;
}
.chip-date{ background:transparent; }
.badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:100px; font-size:.7rem; font-weight:700; }
.b-good{ background:var(--good-soft); color:var(--good); }
.b-warn{ background:var(--warning-soft); color:#8a6100; }
.b-bad{ background:var(--critical-soft); color:var(--critical); }
.b-neutral{ background:var(--surface-3); color:var(--text-secondary); }
:root[data-theme="dark"] .b-warn{ color:var(--warning); }
@media (prefers-color-scheme:dark){ :root:where(:not([data-theme="light"])) .b-warn{ color:var(--warning); } }

/* ========================= POS product boxes ========================= */
.pos-layout{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start; }
.pgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.pbox{
  position:relative; text-align:left; cursor:pointer; font-family:inherit; color:inherit;
  background:var(--surface-1); border:2px solid var(--border-strong); border-radius:var(--r-lg);
  padding:0; overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform .12s, box-shadow .12s, border-color .12s;
  min-height:152px; display:flex; flex-direction:column;
}
.pbox:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--accent); }
.pbox:active{ transform:translateY(0); }
.pbox-swatch{ height:58px; position:relative; }
.pbox-swatch svg{ width:100%; height:100%; display:block; }
.pbox-main{ padding:11px 13px 13px; display:flex; flex-direction:column; gap:3px; flex:1; }
.pbox-name{ font-weight:700; font-size:.97rem; line-height:1.25; }
.pbox-rate{ font-size:1.05rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.pbox-rate small{ font-size:.68rem; font-weight:600; color:var(--text-muted); }
.pbox-stock{ margin-top:auto; padding-top:7px; font-size:.74rem; display:flex; align-items:center; gap:5px; }
.pbox-add{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center; font-size:1.15rem;
  font-weight:700; box-shadow:var(--shadow-1); line-height:1;
}
.pbox-qty{
  position:absolute; top:8px; left:8px; background:var(--good); color:#fff;
  border-radius:100px; padding:2px 9px; font-size:.72rem; font-weight:700; box-shadow:var(--shadow-1);
}
.pbox-new{ border-style:dashed; background:var(--surface-2); align-items:center; justify-content:center; text-align:center; color:var(--text-muted); }
.pbox-new:hover{ color:var(--accent); }
.pbox-new .pbox-main{ align-items:center; justify-content:center; }

/* Cart */
.cart{ position:sticky; top:74px; }
.cart-items{ max-height:44vh; overflow-y:auto; }
.citem{ display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); align-items:flex-start; }
.citem-dot{ width:11px; height:11px; border-radius:3px; margin-top:5px; flex:0 0 11px; }
.citem-main{ flex:1; min-width:0; }
.citem-name{ font-weight:600; font-size:.87rem; }
.citem-meta{ font-size:.75rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.citem-amt{ font-weight:700; font-variant-numeric:tabular-nums; font-size:.9rem; white-space:nowrap; }
.citem-x{ border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:1rem; padding:0 2px; }
.citem-x:hover{ color:var(--critical); }
.totals{ display:flex; flex-direction:column; gap:7px; font-size:.87rem; }
.totals .t-row{ display:flex; justify-content:space-between; align-items:center; font-variant-numeric:tabular-nums; gap:10px; }
.totals .t-grand{ font-size:1.5rem; font-weight:700; padding-top:9px; border-top:2px dashed var(--border-strong); }
.totals .t-grand span:last-child{ color:var(--accent); }

/* Live conversion readout in modals */
.readout{
  background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--r-md);
  padding:11px 13px; font-size:.83rem; display:flex; flex-wrap:wrap; gap:6px 20px;
}
.readout b{ font-variant-numeric:tabular-nums; }
.calc-row{ display:flex; justify-content:space-between; font-size:.85rem; padding:5px 0; font-variant-numeric:tabular-nums; gap:12px; }
.calc-row.total{ border-top:1px solid var(--border); margin-top:6px; padding-top:9px; font-weight:700; font-size:.95rem; }

/* ========================= Charts ========================= */
.chart svg{ display:block; width:100%; overflow:visible; }
.chart .axis-line{ stroke:var(--border); stroke-width:1; }
.chart .grid-line{ stroke:var(--border); stroke-width:1; stroke-dasharray:2 4; }
.chart .tick{ font-size:10.5px; fill:var(--text-muted); font-family:var(--font); }
.chart .vlabel{ font-size:10.5px; fill:var(--text-secondary); font-family:var(--font); font-weight:600; font-variant-numeric:tabular-nums; }
.chart .bar{ transition:opacity .12s; }
.chart .bar:hover{ opacity:.75; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--text-secondary); }
.legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }
.tip{
  position:fixed; z-index:200; pointer-events:none; background:var(--surface-1);
  border:1px solid var(--border-strong); border-radius:var(--r-sm); box-shadow:var(--shadow-2);
  padding:8px 11px; font-size:.78rem; min-width:130px;
}
.tip .tip-t{ font-weight:700; margin-bottom:3px; }
.tip .tip-r{ display:flex; justify-content:space-between; gap:14px; font-variant-numeric:tabular-nums; }

/* Horizontal bar rows (label-first, always direct-labeled) */
.hbars{ display:flex; flex-direction:column; gap:11px; }
.hbar-row{ display:grid; grid-template-columns:minmax(96px,auto) 1fr minmax(84px,auto); gap:11px; align-items:center; font-size:.83rem; }
.hbar-track{ height:9px; background:var(--surface-3); border-radius:100px; overflow:hidden; }
.hbar-fill{ display:block; height:100%; border-radius:100px; background:var(--series-1); }
.hbar-val{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }

/* ========================= Modal ========================= */
.modal-root{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; }
.modal-root[hidden]{ display:none; }
.modal-scrim{ position:absolute; inset:0; background:rgba(10,10,8,.55); }
.modal{
  position:relative; width:min(640px,100%); max-height:92vh; display:flex; flex-direction:column;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-3);
  animation:pop .16s ease-out;
}
.modal.wide{ width:min(1000px,100%); }
@keyframes pop{ from{ opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1;transform:none;} }
.modal-head{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--border); }
.modal-head h2{ flex:1; font-size:1.02rem; }
.modal-body{ padding:18px; overflow-y:auto; flex:1; }
.modal-foot{ padding:13px 18px; border-top:1px solid var(--border); display:flex; gap:9px; justify-content:flex-end; background:var(--surface-2); border-radius:0 0 var(--r-xl) var(--r-xl); flex-wrap:wrap; }
.modal-foot .spacer{ flex:1; }

/* ========================= Toasts ========================= */
.toasts{ position:fixed; bottom:18px; right:18px; z-index:300; display:flex; flex-direction:column; gap:9px; max-width:min(380px,92vw); }
.toast{
  display:flex; gap:10px; align-items:flex-start; padding:12px 15px;
  background:var(--surface-1); border:1px solid var(--border-strong); border-left:4px solid var(--series-1);
  border-radius:var(--r-md); box-shadow:var(--shadow-2); font-size:.86rem; animation:pop .16s ease-out;
}
.toast.ok{ border-left-color:var(--good); } .toast.warn{ border-left-color:var(--warning); }
.toast.err{ border-left-color:var(--critical); }
.toast b{ display:block; }

/* ========================= Responsive ========================= */
@media (max-width:1150px){
  .pos-layout{ grid-template-columns:1fr; }
  .cart{ position:static; }
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:var(--shadow-3);
  }
  .sidebar.open{ transform:none; }
  .brand .sidebar-close{ display:inline-grid; }
  .menu-btn{ display:inline-grid; }
  .content{ padding:14px; }
  .topbar{ padding:10px 12px; }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .pgrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; }
  .pbox{ min-height:134px; }
  .kpi .kpi-value{ font-size:1.35rem; }
  .topbar-actions .chip-date{ display:none; }
  .modal-root{ padding:0; place-items:end stretch; }
  .modal{ width:100%; max-height:94vh; border-radius:var(--r-xl) var(--r-xl) 0 0; }
  .toasts{ left:12px; right:12px; bottom:12px; max-width:none; }
}
@media (max-width:430px){
  .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .btn{ padding:9px 12px; }
  .hbar-row{ grid-template-columns:minmax(76px,auto) 1fr minmax(70px,auto); font-size:.78rem; }
}

/* ========================= Print ========================= */
.print-area{ display:none; }

/* Kaghaz ka size — body par class lag jati hai (paper-a4 / paper-t80 ...) */
@page{ size:A4; margin:12mm; }
@media print{
  body.paper-a5 { }
  body.paper-t80, body.paper-t58 { }
}
@media print{
  @page{ size:A4; margin:12mm; }
  body{ background:#fff; color:#000; font-size:12px; }
  .app,.modal-root,.toasts{ display:none !important; }
  .print-area{ display:block; }
  .inv-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:14px; }
  .inv-head h1{ font-size:22px; letter-spacing:.08em; margin:0; }
  .inv-meta{ text-align:right; font-size:11px; }
  .inv table{ width:100%; border-collapse:collapse; margin-top:10px; }
  .inv th,.inv td{ border:1px solid #666; padding:6px 8px; font-size:11.5px; }
  .inv th{ background:#eee; text-align:left; }
  .inv td.r,.inv th.r{ text-align:right; }
  .inv tfoot td{ font-weight:bold; }
  .inv-note{ margin-top:16px; font-size:10.5px; border-top:1px dashed #666; padding-top:8px; }
  .inv-sign{ display:flex; justify-content:space-between; margin-top:42px; font-size:11px; }

  /* ---------- Thermal roll ki raseed (80mm / 58mm) ---------- */
  .rcpt{
    width:100%; font-family:"Segoe UI", Arial, sans-serif; color:#000;
    font-size:12px; line-height:1.35;
  }
  .rcpt .ctr{ text-align:center; }
  .rcpt .logo{ width:44px; height:44px; object-fit:contain; display:block; margin:0 auto 4px; }
  .rcpt .big{ font-size:16px; font-weight:bold; letter-spacing:.06em; }
  .rcpt .sm{ font-size:11px; }
  .rcpt .hr{ border-top:1px dashed #000; margin:5px 0; }
  .rcpt table{ width:100%; border-collapse:collapse; }
  .rcpt td{ padding:1px 0; vertical-align:top; border:none; font-size:11.5px; }
  .rcpt td.r{ text-align:right; white-space:nowrap; }
  .rcpt .itm .nm{ font-weight:bold; padding-top:3px; }
  .rcpt .itm .q{ padding-left:6px; }
  .rcpt .tot .grand td{ font-size:14px; font-weight:bold; border-top:1px solid #000; padding-top:3px; }
}

/* Thermal par koi margin nahi — roll ki poori chaurai kaam aaye */
@media print{
  body.paper-t80{ width:80mm; }
  body.paper-t58{ width:58mm; }
  body.paper-t80 .print-area, body.paper-t58 .print-area{ padding:2mm 3mm; }
  body.paper-t58 .rcpt{ font-size:10.5px; }
  body.paper-t58 .rcpt .big{ font-size:13px; }
  body.paper-t58 .rcpt td{ font-size:10px; }
  body.paper-t58 .rcpt .logo{ width:32px; height:32px; }
}