:root{
  /* Dark defaults */
  --bg:#0a0a0a; --fg:#f7f7f7; --muted:#a1a1a1; --card:#111; --border:#242424;
  --blue:#1676d8; --green:#06a06b; --red:#c3122b; --amber:#c28816;

  /* Sizing & density */
  --fs: clamp(12px, 1.8vw, 14px);
  --fs-sm: clamp(11px, 1.6vw, 13px);
  --pad: 10px;
  --gap: 12px;
  --radius: 14px;
  --row-h: 38px;
  --cell-pad: 6px 8px;

  /* Theme-mapped bits */
  --input-bg:#121212;
  --input-border:#262626;
  --btn-bg:#141414;
  --btn-text:#ffffff;
  --elev:#1e1e1e;
  --shadow:0 4px 16px rgba(0,0,0,.35);

  /* header height (JS sets this) */
  --headerH: 56px;
}

/* Light-blue theme */
body.theme-light{
  --bg:#e9f4ff; --fg:#000; --muted:#334155; --card:#f5faff; --border:#c7e0ff; --elev:#bdd6ff;
  --input-bg:#fff; --input-border:#a7cffd; --btn-bg:#fff; --btn-text:#0b1324;
  --shadow:0 4px 16px rgba(11,19,36,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font: var(--fs)/1.45 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  /* Keep page itself fixed; panels will scroll internally */
  overflow:hidden;
}

/* ===== Shell uses dynamic viewport height for Chrome/iOS Safari ===== */
.app{
  display:grid;
  grid-template-rows:auto 1fr;
  height:100dvh;                 /* key: dvh not vh */
}

/* Topbar */
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:10px var(--pad);border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#0d0d0d,#0a0a0a);
}
body.theme-light .topbar{ background:linear-gradient(180deg,#f1f7ff,#e9f4ff); }
.topbar h1{margin:0;font-size:clamp(16px,2.2vw,22px)}
.topbar .spacer{flex:1}
.toolbar .tag{border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:var(--fs-sm)}

/* ===== Main layout: height computed from dvh - header ===== */
.layout{
  /* JS sets --headerH; this keeps layout height correct on Chrome’s URL bar changes */
  height: calc(100dvh - var(--headerH));
  width:100%;
  display:grid; gap:var(--gap);
  grid-template-columns: minmax(360px, 2fr) minmax(280px, 1fr);
  padding: var(--gap);
  min-height:0;                 /* let children shrink */
}

/* Critical for Chrome: direct grid children must be shrinkable */
.layout > *{ min-height:0; min-width:0; }

/* Stack panels under 980px, allow main to scroll (internal scroll still used inside cards) */
@media (max-width:980px){
  .layout{
    grid-template-columns:1fr;
    overflow:auto;
  }
}

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--pad); min-width:0; box-shadow:var(--shadow);
}

/* Inputs/Buttons */
input,select,textarea{
  width:100%; background:var(--input-bg); border:1px solid var(--input-border); border-radius:10px;
  color:var(--fg); padding:8px 10px; height: var(--row-h); font-size:var(--fs);
  -webkit-appearance:none; appearance:none;
}
input::placeholder, textarea::placeholder{color:var(--muted)}
.btn{
  display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--btn-bg); color:var(--btn-text); cursor:pointer; height: var(--row-h); white-space:nowrap
}
.btn.primary{background:var(--blue); color:#fff; border-color:transparent}
.btn.green{background:var(--green); color:#fff; border-color:transparent}
.btn.red{background:var(--red); color:#fff; border-color:transparent}
.btn.amber{background:var(--amber); color:#000; border-color:transparent}

.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.right{justify-content:flex-end}
.grid{display:grid; gap:var(--gap)}
.cols-2{grid-template-columns:1fr 1fr}
@media (max-width:640px){ .cols-2{grid-template-columns:1fr} }
.compact-controls label{font-size:var(--fs-sm); color:var(--muted); display:block; margin-bottom:4px}

/* ===== Cart pane: header auto, table fills, totals auto ===== */
.cart-pane{
  display:grid; gap:var(--gap);
  grid-template-rows:auto 1fr auto;
  min-height:0;                 /* important */
}

/* Internal scroll containers */
.table-wrap{
  min-height:0;                 /* allow to shrink */
  overflow:auto;                /* internal scroll if needed */
  border:1px solid var(--elev); border-radius:12px;
}

/* Table */
table{width:100%; border-collapse:collapse; table-layout:fixed}
.cart-table thead th{
  position:sticky; top:0; background:var(--card); z-index:1;
  font-weight:600; text-align:left; border-bottom:1px solid var(--border);
  padding:8px; font-size:var(--fs-sm);
}
.cart-table td{border-bottom:1px solid var(--elev); padding: var(--cell-pad); vertical-align:middle}
.cart-table td input{height:32px}
.c-qty{width:92px} .c-unit{width:92px} .c-discpct{width:90px} .c-discfix{width:105px} .c-total{width:110px}

.tag{font-size:var(--fs-sm); padding:2px 6px; border:1px solid var(--border);
  border-radius:999px; display:inline-block; color:var(--muted)}

.totals{font-size:clamp(13px,2vw,16px)}

/* Autocomplete */
.ac{position:relative}
.ac-list{
  position:absolute; left:0; right:0; top:100%; z-index:30;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  max-height:45vh; overflow:auto; box-shadow:var(--shadow);
}
.ac-item{padding:8px 10px; border-bottom:1px solid var(--elev); cursor:pointer}
.ac-item:hover{filter:brightness(1.06)}

/* Right pane: its cards can scroll inside */
.right-pane{
  display:grid; gap:var(--gap);
  grid-template-rows:auto auto 1fr auto;
  min-height:0;                 /* critical */
}
.right-pane > *{ min-height:0; min-width:0; } /* defensive */

/* Payments section grows */
.payments{display:grid; grid-template-rows:auto 1fr auto; min-height:0}
.payments .table-wrap{min-height:0;}

/* Holds list */
.holds-list{max-height:24vh; overflow:auto; margin-top:8px}

/* Hide less-important columns on narrow screens */
@media (max-width:1100px){ .c-discpct, .c-discfix { display:none; } }
@media (max-width:880px){ .c-unit { display:none; } }

/* Print */
@media print{ body{background:#fff;color:#000} .no-print{display:none} }

/* Dense mode (optional) */
body.dense{
  --fs: clamp(11px,1.6vw,13px);
  --row-h: 34px;
  --cell-pad: 4px 6px;
  --gap: 10px;
  --pad: 10px;
}
input:disabled { opacity: .6; cursor: not-allowed; }
/* Toggle buttons (Refund/Delivery) */
.btn.toggle{
  position:relative;
  border:1px solid var(--border);
  transition:transform .04s ease;
}
.btn.toggle[aria-pressed="true"]{
  background: var(--blue);
  color:#fff;
  border-color: transparent;
}
.btn.toggle[aria-pressed="true"].danger{
  background: var(--red);
}
.btn.toggle:active{ transform:scale(.98); }

/* Optional: disabled look for delivery info when off */
input:disabled { opacity:.6; cursor:not-allowed; }


/* === Mini summary card (cash tendered + balance) === */
.summary-wrap{ display:flex; gap:12px; align-items:center; }
.summary-card{
  min-width:230px; background:var(--elev); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; box-shadow:var(--shadow);
}
.summary-card .row{ display:flex; justify-content:space-between; align-items:center; margin:4px 0; }
.summary-card .row span{ font-size:var(--fs-sm); color:var(--muted); }
.summary-card .row strong{ font-variant-numeric: tabular-nums; letter-spacing:.3px; }

/* Status color accents */
.summary-card.owing{ border-left:6px solid var(--amber); }
.summary-card.paid{ border-left:6px solid var(--green); }
.summary-card.change{ border-left:6px solid var(--blue); }

/* Balance color emphasis */
.summary-card.owing #balanceValue{ color:var(--amber); font-weight:700; }
.summary-card.paid  #balanceValue{ color:var(--green); font-weight:700; }
.summary-card.change #balanceValue{ color:var(--blue);  font-weight:700; }

.ac-item.active { background: var(--elev); outline: 1px solid var(--border); }