/* ===================================================================
   John's Joyful Gifts — Shop Console
   A utilitarian business tool: scannable tables, clear status pills,
   fast forms. Typography carries hierarchy without slowing the app
   down on an older shop PC or tablet.
=================================================================== */
:root{
  --bg:#f2f4f8;
  --surface:#ffffff;
  --surface-2:#eef0f6;
  --surface-3:#e4e8f1;
  --border:#dde1ea;
  --text:#1b2030;
  --text-muted:#606a7d;
  --accent:#3a55d9;
  --accent-ink:#28399e;
  --accent-soft:#e8ecfd;
  --good:#1f8a5f; --good-soft:#e2f5ec;
  --warn:#a8710f; --warn-soft:#fdf1dc;
  --bad:#c0392b; --bad-soft:#fbe6e3;
  --neutral-soft:#eceef3;
  --shadow: 0 1px 2px rgba(20,25,40,.06), 0 1px 1px rgba(20,25,40,.04);
  --radius: 10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12141b; --surface:#1a1e29; --surface-2:#20242f; --surface-3:#282d3b;
    --border:#333949; --text:#e7e9f2; --text-muted:#9aa3b8;
    --accent:#8296ff; --accent-ink:#b6c1ff; --accent-soft:#242a4a;
    --good:#4fd19a; --good-soft:#173428;
    --warn:#e3ac4c; --warn-soft:#3a2c12;
    --bad:#f0776a; --bad-soft:#3a1c19;
    --neutral-soft:#262b38;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#12141b; --surface:#1a1e29; --surface-2:#20242f; --surface-3:#282d3b;
  --border:#333949; --text:#e7e9f2; --text-muted:#9aa3b8;
  --accent:#8296ff; --accent-ink:#b6c1ff; --accent-soft:#242a4a;
  --good:#4fd19a; --good-soft:#173428;
  --warn:#e3ac4c; --warn-soft:#3a2c12;
  --bad:#f0776a; --bad-soft:#3a1c19;
  --neutral-soft:#262b38;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Manrope","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14.5px; line-height:1.45;
}
h1,h2,h3{ font-family:"Manrope",ui-sans-serif,system-ui,sans-serif; font-weight:800; text-wrap:balance; margin:0; }
h2{ font-size:1.25rem; } h3{ font-size:1rem; margin:1.1rem 0 .5rem; }
code{ font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; background:var(--surface-3); padding:.1rem .35rem; border-radius:5px; font-size:.85em; }
button{ font-family:inherit; }
a{ color:var(--accent); }
::selection{ background:var(--accent); color:#fff; }
input,select,textarea{
  font-family:inherit; font-size:.92rem; padding:.5rem .6rem; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); width:100%;
}
textarea{ min-height:4.5em; resize:vertical; }
input:focus,select:focus,textarea:focus,button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* ---------------- shell ---------------- */
#app{ min-height:100vh; }
.shell{ display:flex; flex-direction:column; min-height:100vh; }
.topbar{
  display:flex; align-items:center; gap:1.2rem; padding:.6rem 1rem;
  background:var(--surface); border-bottom:1px solid var(--border); flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
.brand-mini{ display:flex; flex-direction:column; line-height:1.15; }
.brand-mark{ font-weight:800; font-size:1rem; }
.brand-sub{ font-size:.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.tabbar{ display:flex; gap:.15rem; overflow-x:auto; flex:1; scrollbar-width:thin; }
.tab-btn{
  display:flex; align-items:center; gap:.4rem; padding:.5rem .7rem; border:none; background:transparent;
  color:var(--text-muted); border-radius:8px; cursor:pointer; white-space:nowrap; font-size:.83rem; font-weight:600;
}
.tab-btn:hover{ background:var(--surface-2); color:var(--text); }
.tab-btn.active{ background:var(--accent-soft); color:var(--accent-ink); }
.tab-btn .icon{ width:16px; height:16px; }
.who{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.who-name{ font-weight:600; font-size:.85rem; }
.content-area{ flex:1; padding:1.2rem clamp(.8rem,3vw,2rem) 3rem; max-width:1400px; width:100%; margin:0 auto; }

.icon{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------- login ---------------- */
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; background:var(--bg); }
.login-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2rem; width:100%; max-width:380px; box-shadow:var(--shadow); }
.login-brand{ font-family:"Manrope",sans-serif; font-weight:800; font-size:1.4rem; text-align:center; }
.login-sub{ text-align:center; color:var(--text-muted); font-size:.82rem; margin-bottom:1.4rem; text-transform:uppercase; letter-spacing:.06em; }
.login-error{ color:var(--bad); font-size:.85rem; margin-top:.6rem; }
.login-hint{ color:var(--text-muted); font-size:.82rem; margin-top:1rem; }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem .9rem; border-radius:8px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); font-weight:600; font-size:.85rem; cursor:pointer;
}
.btn:hover{ background:var(--surface-2); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ background:var(--bad); border-color:var(--bad); color:#fff; }
.btn-block{ width:100%; }
.btn-lg{ padding:.75rem 1rem; font-size:.95rem; }
.btn.sm{ padding:.3rem .55rem; font-size:.78rem; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.icon-btn{ background:transparent; border:none; color:var(--text-muted); font-size:1.1rem; line-height:1; cursor:pointer; padding:.15rem .4rem; border-radius:6px; }
.icon-btn:hover{ background:var(--surface-2); color:var(--bad); }

/* ---------------- tab head / toolbar ---------------- */
.tab-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap; }
.toolbar{ display:flex; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap; }
.search-input{ max-width:320px; }
.seg{ display:inline-flex; gap:.2rem; background:var(--surface-2); padding:.25rem; border-radius:10px; margin-bottom:1rem; flex-wrap:wrap; }
.seg-btn{ border:none; background:transparent; padding:.4rem .8rem; border-radius:8px; font-weight:600; font-size:.82rem; color:var(--text-muted); cursor:pointer; }
.seg-btn.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }

/* ---------------- tiles / dashboard ---------------- */
.dash-section{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; margin-bottom:1rem; }
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; }
.tile{ background:var(--surface-2); border-radius:10px; padding:.8rem .9rem; }
.tile-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; }
.tile-value{ font-size:1.35rem; font-weight:800; margin-top:.2rem; font-variant-numeric:tabular-nums; }
.tile-sub{ font-size:.74rem; color:var(--text-muted); margin-top:.15rem; }
.tile.accent{ background:var(--accent-soft); }
.tile.accent .tile-value{ color:var(--accent-ink); }
.tile.good .tile-value{ color:var(--good); }
.tile.bad .tile-value{ color:var(--bad); }
.tile.warn .tile-value{ color:var(--warn); }
.mini-list{ margin-top:.8rem; border-top:1px solid var(--border); padding-top:.6rem; }
.mini-list-title{ font-size:.75rem; text-transform:uppercase; color:var(--text-muted); font-weight:700; margin-bottom:.3rem; }
.mini-row{ display:flex; justify-content:space-between; font-size:.85rem; padding:.28rem 0; border-bottom:1px dashed var(--border); }
.mini-row:last-child{ border-bottom:none; }

/* ---------------- tables ---------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.data-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.data-table th{ text-align:left; background:var(--surface-2); color:var(--text-muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:.55rem .7rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td{ padding:.5rem .7rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr:hover{ background:var(--surface-2); }
.data-table td.num, .data-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.text-warn{ color:var(--warn); font-weight:700; }
.empty-state{ padding:2rem 1rem; text-align:center; color:var(--text-muted); background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); }
.empty-state.error{ color:var(--bad); }
.loading{ padding:2rem; text-align:center; color:var(--text-muted); }

/* ---------------- pills / status ---------------- */
.pill{ display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.pill-good{ background:var(--good-soft); color:var(--good); }
.pill-warn{ background:var(--warn-soft); color:var(--warn); }
.pill-bad{ background:var(--bad-soft); color:var(--bad); }
.pill-neutral{ background:var(--neutral-soft); color:var(--text-muted); }
.pill-role{ background:var(--accent-soft); color:var(--accent-ink); text-transform:none; }

/* ---------------- forms / modal ---------------- */
.field{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:.7rem; }
.field label{ font-size:.74rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 1rem; }
.form-grid .span2{ grid-column:span 2; }
.static-value{ padding:.5rem .6rem; background:var(--surface-2); border-radius:8px; font-weight:700; }

.modal-overlay{ position:fixed; inset:0; background:rgba(15,18,28,.5); display:flex; align-items:flex-start; justify-content:center; padding:4vh 1rem; z-index:100; overflow-y:auto; }
.modal{ background:var(--surface); border-radius:14px; width:100%; max-width:520px; box-shadow:0 12px 40px rgba(10,15,30,.25); margin-bottom:2rem; }
.modal-wide{ max-width:820px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid var(--border); }
.modal-head h3{ font-size:1.05rem; }
.modal-body{ padding:1.2rem; }
.modal-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }
.confirm-msg{ font-size:.95rem; }
.confirm-detail{ color:var(--text-muted); font-size:.83rem; }
.detail-meta{ background:var(--surface-2); border-radius:8px; padding:.7rem .9rem; margin-bottom:.8rem; font-size:.85rem; display:flex; flex-direction:column; gap:.25rem; }
.check-row{ display:flex; align-items:center; gap:.5rem; padding:.35rem 0; font-size:.9rem; }

/* ---------------- POS ---------------- */
.pos-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:1rem; align-items:start; }
.pos-left, .pos-right{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.pos-summary{ background:var(--surface-2); border-radius:8px; padding:.7rem .9rem; margin:.7rem 0; font-size:.88rem; }
.pos-summary > div{ display:flex; justify-content:space-between; padding:.15rem 0; }
.pos-summary-grand{ font-weight:800; font-size:1.05rem; border-top:1px solid var(--border); margin-top:.3rem; padding-top:.4rem !important; }
.pay-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:.4rem; margin-bottom:.4rem; align-items:center; }
#payBalance{ margin:.5rem 0; }
.num-input{ width:100%; }
.num-input.sm{ max-width:80px; }
.cart-table input{ padding:.3rem .4rem; }

/* ---------------- pickers ---------------- */
.picker{ position:relative; margin-bottom:.7rem; }
.picker-input{ width:100%; }
.picker-results{ position:absolute; z-index:30; top:calc(100% + 2px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); max-height:260px; overflow-y:auto; }
.picker-item{ padding:.5rem .7rem; cursor:pointer; display:flex; flex-direction:column; border-bottom:1px solid var(--border); }
.picker-item:last-child{ border-bottom:none; }
.picker-item:hover{ background:var(--surface-2); }
.picker-name{ font-weight:600; font-size:.86rem; }
.picker-meta{ font-size:.74rem; color:var(--text-muted); }
.picker-empty{ padding:.6rem .7rem; color:var(--text-muted); font-size:.82rem; }

/* ---------------- toast ---------------- */
#toastHost{ position:fixed; bottom:1rem; right:1rem; display:flex; flex-direction:column; gap:.5rem; z-index:200; }
.toast{
  background:var(--text); color:var(--bg); padding:.6rem 1rem; border-radius:8px; font-size:.85rem;
  opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; box-shadow:var(--shadow); max-width:320px;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast-error{ background:var(--bad); color:#fff; }
.toast-success{ background:var(--good); color:#fff; }
.toast-warn{ background:var(--warn); color:#fff; }

/* ---------------- receipts / print docs ---------------- */
.receipt{ font-family:ui-monospace,Menlo,monospace; font-size:.82rem; max-width:320px; margin:0 auto; }
.receipt-head{ text-align:center; margin-bottom:.5rem; }
.receipt-meta{ text-align:center; color:var(--text-muted); margin-bottom:.6rem; font-size:.78rem; }
.receipt-table{ width:100%; border-collapse:collapse; margin-bottom:.5rem; }
.receipt-table th, .receipt-table td{ text-align:left; padding:.2rem 0; font-size:.8rem; }
.receipt-table th:last-child, .receipt-table td:last-child{ text-align:right; }
.receipt-totals > div{ display:flex; justify-content:space-between; padding:.1rem 0; }
.receipt-grand{ font-weight:800; border-top:1px dashed var(--text); margin-top:.3rem; padding-top:.3rem !important; }
.receipt-foot{ text-align:center; margin-top:.6rem; color:var(--text-muted); }

/* ---------------- settings ---------------- */
.settings-lists{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; }
.list-editor{ display:flex; flex-direction:column; gap:.4rem; }
.list-row{ display:flex; gap:.4rem; align-items:center; }
.archive-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1rem; }
.archive-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }

/* ---------------- print mode ---------------- */
#printArea{ display:none; }
body.print-mode > *:not(#printArea){ display:none !important; }
body.print-mode #printArea{ display:block; }
@media print{
  body.print-mode{ background:#fff; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 860px){
  .pos-layout{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .span2{ grid-column:span 1; }
  .tabbar span{ display:none; } /* icon-only tabs on small screens */
  .tab-btn{ padding:.5rem; }
  /* The topbar's brand block and user/logout block have fixed,
     non-shrinkable content widths; without this, flexbox gives
     whatever's left to the tabbar, which on a phone can be a sliver a
     few pixels wide (all 15 tabs technically present but physically
     unreachable). Forcing the tabbar onto its own full-width row keeps
     every tab visible and reachable via its existing horizontal
     scroll, on any screen narrow enough for this breakpoint. */
  .tabbar{ flex-basis:100%; order:2; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .who{ order:3; }
}
@media (max-width: 480px){
  .content-area{ padding:.8rem .6rem 3rem; }
  .who-name{ display:none; }
}