/* ============================================================
   Ayurvedic GST POS — design tokens & components
   Palette: kwath-dark green, fresh leaf, turmeric accent, paper white
   Type:   Cormorant Garamond (wordmark) / Jost (UI) / IBM Plex Mono (figures)
   ============================================================ */

:root{
  --forest:#0F3D2E;
  --forest-2:#164D3A;
  --leaf:#1E8E5A;
  --leaf-soft:#E8F5EE;
  --haldi:#C08A2E;
  --haldi-soft:#FBF3E2;
  --ink:#0D1512;
  --muted:#5F7269;
  --line:#DCE7E1;
  --paper:#FFFFFF;
  --surface:#F5F9F6;
  --danger:#B3261E;
  --danger-soft:#FDECEA;
  --warn:#9A6700;
  --warn-soft:#FFF6E0;
  --radius:14px;
  --shadow:0 1px 2px rgba(13,21,18,.06), 0 8px 24px -12px rgba(13,21,18,.18);
}

html.dark{
  --forest:#0B2A20;
  --forest-2:#123B2C;
  --leaf:#35B87A;
  --leaf-soft:#12241C;
  --haldi:#E0AC53;
  --haldi-soft:#2A2013;
  --ink:#E7F0EA;
  --muted:#8FA79A;
  --line:#1E332A;
  --paper:#0E1815;
  --surface:#0A120F;
  --danger:#F2685E;
  --danger-soft:#2A1512;
  --warn:#E5B23C;
  --warn-soft:#2A2213;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{ -webkit-tap-highlight-color: transparent; }

body{
  background:var(--surface);
  color:var(--ink);
  font-family:'Jost',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}

.wordmark{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  letter-spacing:.01em;
}

.num{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ---------- Surfaces ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad{ padding:16px; }

.stat{
  position:relative;
  overflow:hidden;
  padding:16px;
  border-radius:var(--radius);
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.stat:active{ transform:scale(.985); }
.stat::after{                      /* thin leaf rule that ties cards to the brand */
  content:'';
  position:absolute; inset:auto auto 0 0;
  height:3px; width:44px;
  background:var(--leaf);
  border-radius:0 3px 0 0;
}
.stat .label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.stat .value{ font-size:24px; font-weight:600; margin-top:6px; }

/* ---------- Controls ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px;             /* 44px = comfortable thumb target */
  border-radius:12px; font-weight:500; font-size:15px;
  border:1px solid transparent; cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--forest); color:#fff; }
.btn-primary:hover{ filter:brightness(1.15); }
.btn-leaf{ background:var(--leaf); color:#fff; }
.btn-gold{ background:var(--haldi); color:#231903; }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--leaf-soft); }
.btn-danger{ background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.btn-sm{ min-height:36px; padding:0 12px; font-size:14px; border-radius:10px; }

.field{ display:block; margin-bottom:14px; }
.field > label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.input, .select, .textarea{
  width:100%; min-height:44px; padding:10px 12px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  font-size:16px;                              /* 16px stops iOS zoom-on-focus */
  font-family:inherit;
}
.textarea{ min-height:90px; }
.input:focus, .select:focus, .textarea:focus{
  outline:2px solid var(--leaf); outline-offset:1px; border-color:transparent;
}

.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500;
}
.badge-ok{ background:var(--leaf-soft); color:var(--leaf); }
.badge-warn{ background:var(--warn-soft); color:var(--warn); }
.badge-bad{ background:var(--danger-soft); color:var(--danger); }

/* ---------- Table that becomes cards on mobile ---------- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{
  text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tbody tr:hover{ background:var(--leaf-soft); }

@media (max-width:768px){
  .tbl.responsive thead{ display:none; }
  .tbl.responsive tr{
    display:block; margin-bottom:10px; background:var(--paper);
    border:1px solid var(--line); border-radius:var(--radius); padding:6px 10px;
  }
  .tbl.responsive td{ display:flex; justify-content:space-between; gap:12px; border:0; padding:7px 0; }
  .tbl.responsive td::before{
    content:attr(data-l); color:var(--muted); font-size:12px;
    text-transform:uppercase; letter-spacing:.05em;
  }
  .tbl.responsive td:last-child{ border-top:1px solid var(--line); padding-top:10px; margin-top:4px; }
}

/* ---------- Shell ---------- */
.sidebar{
  background:var(--forest); color:#DCEBE2;
  width:250px; position:fixed; inset:0 auto 0 0; z-index:60;
  transform:translateX(-100%); transition:transform .25s ease;
  display:flex; flex-direction:column;
}
.sidebar.open{ transform:none; }
@media (min-width:1024px){ .sidebar{ transform:none; } .shell{ margin-left:250px; } }

.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-radius:10px; margin:2px 10px;
  color:#BBD5C7; font-size:15px;
}
.nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-link.active{ background:var(--leaf); color:#fff; font-weight:500; }
.nav-section{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#6E9484; padding:16px 20px 6px;
}

.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.scrim{ position:fixed; inset:0; background:rgba(6,20,14,.5); z-index:50; }

/* Bottom bar: only on phones, POS always one thumb away */
.tabbar{
  position:fixed; inset:auto 0 0 0; z-index:45;
  background:var(--paper); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{ display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 0 7px; font-size:11px; color:var(--muted); }
.tabbar a.active{ color:var(--leaf); font-weight:500; }
@media (min-width:1024px){ .tabbar{ display:none; } }

/* ============================================================
   SIGNATURE ELEMENT — the live bill tape
   The cart panel is drawn as a real thermal receipt: torn top and
   bottom edge, monospace figures, so the operator is reading the
   same shape of document the customer will be handed.
   ============================================================ */
.tape{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  position:relative;
  box-shadow:var(--shadow);
}
.tape::before, .tape::after{
  content:''; position:absolute; left:0; right:0; height:8px;
  background:
    linear-gradient(45deg, transparent 33%, var(--paper) 34%) repeat-x,
    linear-gradient(-45deg, transparent 33%, var(--paper) 34%) repeat-x;
  background-size:12px 8px;
}
.tape::before{ top:-8px; transform:scaleY(-1); }
.tape::after{ bottom:-8px; }

.tape-row{
  display:grid; grid-template-columns:1fr auto;
  gap:4px 10px; padding:10px 14px; border-bottom:1px dashed var(--line);
}
.tape-row .meta{ font-size:12px; color:var(--muted); }
.tape-total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px; border-top:2px solid var(--ink);
}
.tape-total .amt{ font-size:26px; font-weight:600; }

.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.qty-stepper button{ width:34px; height:34px; font-size:18px; line-height:1; background:var(--leaf-soft); color:var(--forest); }
.qty-stepper input{ width:48px; height:34px; text-align:center; border:0; background:transparent; color:var(--ink); font-family:'IBM Plex Mono',monospace; }

/* Product search results */
.result{
  display:flex; gap:12px; align-items:center; padding:11px 12px;
  border-bottom:1px solid var(--line); cursor:pointer;
}
.result:hover, .result.hl{ background:var(--leaf-soft); }
.result .thumb{
  width:42px; height:42px; border-radius:10px; flex:none;
  background:var(--leaf-soft); color:var(--leaf);
  display:grid; place-items:center; font-weight:600; font-size:15px;
  object-fit:cover;
}

/* Toast */
#toasts{ position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:90;
  display:flex; flex-direction:column; gap:8px; width:min(92vw,420px); }
.toast{
  padding:12px 16px; border-radius:12px; color:#fff; background:var(--forest);
  box-shadow:var(--shadow); font-size:14px;
  animation:toastIn .25s ease;
}
.toast.bad{ background:var(--danger); }
.toast.warn{ background:var(--warn); color:#231903; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* Page entrance — one quiet motion, not a carnival */
.fade-up{ animation:fadeUp .3s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   PRINT — 58mm / 80mm thermal and A4 GST invoice
   ============================================================ */
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; color:#000; font-size:12px; }
  .card{ box-shadow:none; border:0; }
  a[href]::after{ content:none !important; }
}

@page { margin:10mm; }

.paper-58{ width:58mm; }
.paper-80{ width:80mm; }
.paper-a4{ width:210mm; min-height:297mm; }

.paper-58, .paper-80{
  font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:1.45;
  color:#000; background:#fff; margin:0 auto; padding:6px;
}
.paper-58 *, .paper-80 *{ max-width:100%; }
.thermal-hr{ border-top:1px dashed #000; margin:5px 0; }

.paper-a4{
  background:#fff; color:#000; margin:0 auto; padding:12mm;
  font-family:'Jost',sans-serif; font-size:12px;
}
.inv-table{ width:100%; border-collapse:collapse; }
.inv-table th, .inv-table td{ border:1px solid #444; padding:5px 6px; font-size:11px; }
.inv-table th{ background:#EFF6F1; text-align:left; }

@media print{
  .paper-58{ width:58mm; } @page size58 { size:58mm auto; }
  .paper-80{ width:80mm; }
  .paper-a4{ width:auto; padding:0; }
}