/* App shell for the interactive system demos: sidebar, panes, data tables,
   KPI tiles, toasts, charts and print layouts. Skinned per demo through the
   same --brand tokens everything else uses. */

.app{
  display:grid;
  grid-template-columns:224px 1fr;
  min-height:70vh;
  border-top:1px solid var(--line);
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
}

/* ---------- sidebar ---------- */

.app-side{
  background:var(--dark);
  color:var(--dark-muted);
  padding:20px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.app-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 8px 16px;margin-bottom:8px;
  border-bottom:1px solid var(--dark-line);
  color:var(--dark-ink);font-weight:700;font-size:17px;
}
.app-brand .mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:var(--brand);color:var(--brand-on);
  display:grid;place-items:center;font-size:15px;
}
.app-side button{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 12px;border-radius:9px;
  color:var(--dark-muted);font-size:15.5px;font-weight:500;text-align:left;
  transition:background .15s ease, color .15s ease;
}
.app-side button:hover{background:rgba(255,255,255,.06);color:var(--dark-ink)}
.app-side button[aria-current="true"]{
  background:var(--brand);color:var(--brand-on);font-weight:600;
}
.app-side .side-ico{font-size:17px;line-height:1}
.side-badge{
  margin-left:auto;min-width:22px;padding:1px 7px;border-radius:999px;
  background:var(--bad);color:#fff;
  font-family:var(--font-lat);font-size:12px;font-weight:700;text-align:center;
}
.app-side button[aria-current="true"] .side-badge{background:rgba(0,0,0,.35)}
.side-foot{
  margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--dark-line);
  font-size:13px;line-height:1.6;color:var(--dark-muted);
}

@media (max-width:860px){
  .app-side{flex-direction:row;flex-wrap:wrap;padding:12px;gap:6px}
  .app-brand{width:100%;padding-bottom:12px}
  .app-side button{width:auto;padding:8px 12px;font-size:14.5px}
  .side-foot{width:100%;margin-top:6px}
}

/* ---------- main ---------- */

.app-main{padding:22px clamp(16px,3vw,28px) 40px;background:var(--bg-alt);min-width:0}
.app-top{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-bottom:20px;
}
.app-top h2{font-size:clamp(21px,3vw,27px);margin-right:auto}
.app-top .sub{width:100%;margin-top:-4px;font-size:15px;color:var(--muted)}

.panel{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;margin-bottom:18px;
}
.panel h3{font-size:18px;margin-bottom:14px}
.panel-flush{padding:0;overflow:hidden}

.split{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
@media (max-width:980px){ .split{grid-template-columns:1fr} }

/* ---------- KPI tiles ---------- */

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media (max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
}
.kpi b{
  display:block;font-family:var(--font-lat);font-size:26px;font-weight:700;
  color:var(--ink);line-height:1.2;
}
.kpi span{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.kpi.warn b{color:var(--bad)}
.kpi.good b{color:var(--ok)}

/* ---------- data tables ---------- */

.dtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.dtable{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.dtable th,.dtable td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable th:first-child,.dtable td:first-child{text-align:left;white-space:normal}
.dtable th{
  position:sticky;top:0;z-index:1;
  background:var(--bg-sunk);color:var(--muted);
  font-size:13px;font-weight:600;
}
.dtable tbody tr:hover{background:var(--bg-alt)}
.dtable tr:last-child td{border-bottom:0}
.dtable tr[data-low="1"] td{background:color-mix(in srgb, var(--bad) 7%, transparent)}
.dtable .empty-row td{text-align:center;color:var(--muted);padding:28px 14px}

.badge{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:13px;font-weight:600;white-space:nowrap;
}
.badge-ok{background:color-mix(in srgb, var(--ok) 15%, transparent);color:#14532d}
.badge-due{background:color-mix(in srgb, var(--bad) 13%, transparent);color:#7f1d1d}
.badge-wait{background:var(--bg-sunk);color:var(--muted)}
.badge-now{background:var(--brand);color:var(--brand-on)}

/* ---------- controls ---------- */

.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px}
.bar .field{margin:0}
.bar .field label{font-size:13px;margin-bottom:4px}
.bar input,.bar select{padding:9px 12px}
.bar .grow{flex:1 1 220px}

.iconbtn{
  padding:6px 12px;border-radius:8px;border:1px solid var(--line-strong);
  font-size:14px;font-weight:600;color:var(--ink);background:var(--card);
}
.iconbtn:hover{background:var(--bg-sunk)}
.iconbtn-danger{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 35%, var(--line))}

.pick{
  display:flex;gap:6px;
}
.pick button{
  padding:6px 12px;border-radius:8px;border:1px solid var(--line-strong);
  font-size:14px;font-weight:600;color:var(--muted);background:var(--card);
}
.pick button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-on)}

/* ---------- POS-style product grid ---------- */

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pcard{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);padding:12px;text-align:left;
  display:flex;flex-direction:column;gap:3px;
  transition:border-color .15s ease, transform .12s ease;
}
.pcard:hover{border-color:var(--brand);transform:translateY(-2px)}
.pcard:disabled{opacity:.45;cursor:not-allowed;transform:none}
.pcard b{font-size:15px;font-weight:600;line-height:1.4}
.pcard .p-price{font-family:var(--font-lat);font-weight:700;color:var(--brand-ink)}
.pcard .p-stock{font-size:12.5px;color:var(--muted)}
.pcard .p-stock.low{color:var(--bad);font-weight:600}

/* ---------- cart / line list ---------- */

.lines{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto;margin-bottom:14px}
.line{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px dashed var(--line);
}
.line b{display:block;font-size:14.5px;font-weight:600}
.line small{color:var(--muted);font-family:var(--font-lat);font-size:12.5px}
.line .amt{font-family:var(--font-lat);font-weight:700;min-width:72px;text-align:right}
.stepper{display:flex;align-items:center;gap:7px}
.stepper button{
  width:25px;height:25px;border-radius:7px;border:1px solid var(--line-strong);
  display:grid;place-items:center;font-weight:700;line-height:1;color:var(--ink);
}
.stepper button:hover{background:var(--bg-sunk)}
.stepper span{font-family:var(--font-lat);min-width:18px;text-align:center}

.sumline{display:flex;justify-content:space-between;padding:5px 0;font-size:15px;color:var(--muted)}
.sumline.total{
  margin-top:8px;padding-top:12px;border-top:1px solid var(--line);
  font-size:20px;font-weight:700;color:var(--ink);
}
.sumline .num{font-family:var(--font-lat)}

/* ---------- charts ---------- */

.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .c-val{font-family:Inter,sans-serif;font-size:11px;font-weight:600;fill:var(--muted)}
.chart .c-lab{font-family:"Hind Siliguri",sans-serif;font-size:12px;fill:var(--muted)}
.chart-scroll{overflow-x:auto}

/* ---------- table floor plan ---------- */

.floor{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.tbtn{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);padding:14px 12px;text-align:left;
  display:flex;flex-direction:column;gap:4px;
  transition:border-color .15s ease, transform .12s ease;
}
.tbtn:hover{transform:translateY(-2px);border-color:var(--brand)}
.tbtn[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.tbtn b{font-size:16px}
.tbtn small{color:var(--muted);font-size:13px}
.tbtn[data-state="busy"]{background:color-mix(in srgb, var(--brand) 9%, var(--card))}
.tbtn[data-state="billed"]{background:color-mix(in srgb, var(--ok) 11%, var(--card))}

/* ---------- phone frame ---------- */

/* The rider app is the only proof for the Android line on the price list, so it
   is shown inside a handset rather than as another desktop pane. */
.phone{
  width:330px;max-width:100%;margin:0 auto;
  border:11px solid #10151f;border-radius:34px;
  background:var(--bg);overflow:hidden;
  box-shadow:var(--shadow-2);
}
.phone-notch{
  height:26px;background:#10151f;
  display:grid;place-items:center;
}
.phone-notch span{width:88px;height:6px;border-radius:99px;background:#39414f}
.phone-top{
  background:var(--brand);color:var(--brand-on);
  padding:12px 16px;
}
.phone-top b{display:block;font-size:16px}
.phone-top small{opacity:.85;font-size:12.5px}
.phone-body{height:430px;overflow-y:auto;padding:12px;background:var(--bg-alt)}
.phone-empty{padding:40px 12px;text-align:center;color:var(--muted);font-size:14.5px}
.task{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px;margin-bottom:10px;
}
.task b{display:block;font-size:14.5px}
.task small{display:block;color:var(--muted);font-size:12.5px;line-height:1.6}
.task .task-actions{display:flex;gap:6px;margin-top:9px}
.task .btn{padding:7px 13px;font-size:13.5px}

/* ---------- toasts ---------- */

.toast-host{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:max-content;max-width:92vw;
}
.toast{
  padding:11px 20px;border-radius:999px;
  background:#111827;color:#f9fafb;font-size:15px;font-weight:500;
  box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(10px);transition:opacity .25s ease, transform .25s ease;
}
.toast.in{opacity:1;transform:none}
.toast-warn{background:#7f1d1d}
.toast-info{background:#1f2937}

/* ---------- print ---------- */

#print-area{display:none}

@media print{
  body > *:not(#print-area){display:none !important}
  #print-area{display:block;padding:0;color:#000;background:#fff}
  @page{margin:14mm}
}

.receipt{
  font-family:"Hind Siliguri",sans-serif;
  max-width:76mm;margin:0 auto;color:#000;font-size:13px;line-height:1.55;
}
.receipt.wide{max-width:100%}
.receipt h1{font-size:19px;text-align:center;margin-bottom:2px}
.receipt .r-sub{text-align:center;font-size:12px;margin-bottom:10px}
.receipt hr{border:0;border-top:1px dashed #000;margin:9px 0}
.receipt table{width:100%;border-collapse:collapse;font-size:12.5px}
.receipt th,.receipt td{padding:3px 0;text-align:right;vertical-align:top}
.receipt th:first-child,.receipt td:first-child{text-align:left}
.receipt .r-total{font-size:15px;font-weight:700}
.receipt .r-note{margin-top:12px;text-align:center;font-size:11px}
.receipt .r-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:12.5px}
.receipt .r-sign{margin-top:34px;display:flex;justify-content:space-between;font-size:12px}
.receipt .r-sign span{border-top:1px solid #000;padding-top:4px;min-width:150px;text-align:center}