/* Aliso Stock PWA — Aliso Dermatology palette (matches Daily Checklist) */
:root {
  --navy:#0C447C; --blue:#378ADD; --blue-bg:#E6F1FB;
  --green:#1D9E75; --green-bg:#E1F5EE;
  --amber:#BA7517; --amber-bg:#FAEEDA;
  --red:#C23B3B; --red-bg:#FCEAEA;
  --ink:#1c1c1e; --muted:#6e6e73; --line:#e3e3e8;
  --bg:#f2f2f7; --card:#ffffff;
  --radius:12px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y:none; }

/* ── Top bar ── */
#topbar { position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding:calc(8px + var(--safe-top)) 16px 8px;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.brand-name { font-weight:800; letter-spacing:.12em; color:var(--navy); font-size:14px; }
.sync-status { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.sync-status .dot { width:7px; height:7px; border-radius:50%; background:#bbb; }
.sync-status.ok .dot { background:var(--green); }
.sync-status.err .dot { background:var(--red); }
.sync-status.pending .dot { background:var(--amber); }
#walk-progress-wrap { flex:1; max-width:420px; margin:0 auto; }
#walk-progress-label { font-size:11px; font-weight:700; color:var(--navy); text-align:center; margin-bottom:3px; }
.progress-track { height:5px; background:var(--line); border-radius:3px; overflow:hidden; }
#walk-progress-bar { height:100%; width:0%; background:var(--blue); border-radius:3px; transition:width .3s; }
#walk-progress-bar.done { background:var(--green); }
.icon-btn { border:0; background:var(--blue-bg); color:var(--navy); font-size:18px;
  width:38px; height:38px; border-radius:50%; cursor:pointer; }

/* ── Main / tab bar ── */
#view { padding:78px 14px calc(84px + var(--safe-bottom)); max-width:980px; margin:0 auto; }
#tabbar { position:fixed; bottom:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-around;
  padding:6px 8px calc(6px + var(--safe-bottom));
  background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); }
.tab { position:relative; border:0; background:none; color:var(--muted); font-size:12px; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 14px;
  border-radius:10px; cursor:pointer; }
.tab-icon { font-size:20px; }
.tab.active { color:var(--navy); background:var(--blue-bg); }
.badge { position:absolute; top:0; right:2px; background:var(--red); color:#fff;
  font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 4px; }
.badge[hidden] { display:none; }

/* ── Cards & sections ── */
.section-title { font-size:16px; font-weight:700; color:var(--navy); margin:22px 4px 8px; }
.card { background:var(--card); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05); }
.hint { font-size:12px; color:var(--muted); margin:8px 4px; line-height:1.45; }

/* Walk header card */
.walk-header { display:flex; gap:18px; align-items:center; padding:14px 16px; flex-wrap:wrap; }
.walk-header .col .label { font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--muted); }
.walk-header .col .value { font-size:19px; font-weight:800; }
.walk-header .spacer { flex:1; }
.walk-header .count-big { font-size:22px; font-weight:800; color:var(--navy); text-align:right; }
.walk-header .count-big.done { color:var(--green); }
.walk-header .sub { font-size:10px; color:var(--muted); text-align:right; }

/* Item rows */
.row { display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-top:1px solid var(--line); }
.card .row:first-child { border-top:0; }
.row.checked-ok { background:var(--green-bg); }
.row.checked-low { background:var(--red-bg); }
.row .pace { width:30px; flex:none; font-size:9px; letter-spacing:1px; color:var(--muted); }
.row .pace.fast { color:var(--red); }
.row .info { flex:1; min-width:0; }
.row .name { font-weight:600; font-size:15px; line-height:1.25; }
.row .meta { font-size:11px; color:var(--muted); margin-top:2px;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row .meta .sku { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.row .meta .by { color:var(--green); font-weight:600; }
.row .controls { flex:none; display:flex; align-items:center; gap:6px; }
.subgroup { padding:8px 14px 2px; font-size:10px; font-weight:800; letter-spacing:.08em;
  color:var(--muted); border-top:1px solid var(--line); background:#fafafc; }

/* Status pills */
.pill { border:0; border-radius:999px; padding:9px 14px; font-size:13px; font-weight:800;
  background:#e9e9ee; color:var(--ink); cursor:pointer; }
.pill.sel-ok { background:var(--green); color:#fff; }
.pill.sel-low { background:var(--amber); color:#fff; }
.pill.sel-out { background:var(--red); color:#fff; }

/* Inputs */
.qty-input { width:74px; padding:9px 6px; font-size:16px; text-align:center;
  border:1px solid var(--line); border-radius:9px; background:#fff; }
.qty-input:focus { outline:2px solid var(--blue); border-color:transparent; }
.unit { font-size:11px; color:var(--muted); min-width:44px; }
.date-chip { border:1px solid var(--line); background:#fff; border-radius:9px;
  padding:8px 10px; font-size:12px; color:var(--muted); cursor:pointer; white-space:nowrap; }
.date-chip.set-ok { color:var(--green); border-color:var(--green); }
.date-chip.set-warn { color:var(--amber); border-color:var(--amber); }
.date-chip.set-bad { color:var(--red); border-color:var(--red); font-weight:700; }

/* Buttons */
.btn { border:0; border-radius:11px; padding:13px 18px; font-size:15px; font-weight:700;
  cursor:pointer; background:var(--blue-bg); color:var(--navy); }
.btn.primary { background:var(--navy); color:#fff; }
.btn.green { background:var(--green); color:#fff; }
.btn.danger { background:var(--red-bg); color:var(--red); }
.btn.block { display:block; width:100%; margin:16px 0; }
.btn.small { padding:8px 12px; font-size:13px; border-radius:9px; }

/* Analytics */
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.tile { border:0; border-radius:var(--radius); padding:12px 4px; text-align:center; cursor:pointer; }
.tile .n { font-size:24px; font-weight:800; }
.tile .t { font-size:11px; font-weight:600; }
.tile.now { background:var(--red-bg); color:var(--red); }
.tile.soon { background:var(--amber-bg); color:var(--amber); }
.tile.healthy { background:var(--green-bg); color:var(--green); }
.tile.unknown { background:#e9e9ee; color:var(--muted); }
.tile.sel { outline:2.5px solid currentColor; }
.urgency-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.spark { flex:none; }
.a-right { text-align:right; min-width:76px; }
.a-right .q { font-weight:800; font-size:14px; }
.a-right .r { font-size:11px; color:var(--muted); }

/* Order */
.order-head { display:flex; gap:18px; padding:14px 16px; flex-wrap:wrap; }
.src-badge { font-size:9px; font-weight:800; letter-spacing:.04em; padding:2px 7px; border-radius:999px; }
.src-low { background:var(--red-bg); color:var(--red); }
.src-predicted { background:var(--amber-bg); color:var(--amber); }
.src-manual { background:var(--blue-bg); color:var(--navy); }
.recv-circle { width:30px; height:30px; border-radius:50%; border:2px solid #c7c7cc;
  background:none; cursor:pointer; font-size:16px; color:#fff; flex:none; }
.recv-circle.done { background:var(--green); border-color:var(--green); }
.row.received { opacity:.55; }

/* Modals */
#modal-root:not(:empty) { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.modal { background:var(--card); border-radius:16px; width:100%; max-width:560px;
  max-height:86vh; overflow:auto; padding:20px; }
.modal h2 { margin:0 0 14px; font-size:19px; }
.modal .field { margin:12px 0; }
.modal label { display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px; }
.modal input[type=text], .modal input[type=number], .modal input[type=date], .modal select {
  width:100%; padding:11px; font-size:15px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.modal .actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.modal .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.staff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin:14px 0; }
.staff-btn { padding:16px 8px; border:0; border-radius:11px; background:var(--blue-bg);
  color:var(--navy); font-weight:700; font-size:15px; cursor:pointer; }

/* Detail modal chart */
.chart-wrap { margin:10px 0; }
.kv { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kv .k { color:var(--muted); }
.kv .v { font-weight:600; text-align:right; }

/* Expiration chips */
.exp-chip { font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap; }
.exp-ok { background:var(--green-bg); color:var(--green); }
.exp-warn { background:var(--amber-bg); color:var(--amber); }
.exp-bad { background:var(--red-bg); color:var(--red); }
.exp-none { background:#e9e9ee; color:var(--muted); }

/* Print — only the order sheet */
#print-root { display:none; }
@media print {
  #topbar, #tabbar, #view, #toast, #modal-root { display:none !important; }
  #print-root { display:block; padding:24px; font-size:13px; }
  #print-root h1 { font-size:20px; margin:0 0 4px; }
  #print-root p { color:#555; margin:0 0 16px; }
  #print-root table { width:100%; border-collapse:collapse; }
  #print-root th, #print-root td { border:1px solid #999; padding:7px 9px; text-align:left; }
  #print-root th { background:#eee; }
  #print-root .mono { font-family:ui-monospace, Menlo, monospace; }
}

/* Toast */
#toast { position:fixed; bottom:calc(96px + var(--safe-bottom)); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:11px; font-size:14px;
  z-index:60; max-width:88vw; text-align:center; }
#toast.err { background:var(--red); }

/* Empty state */
.empty { text-align:center; color:var(--muted); padding:50px 20px; font-size:14px; }
.empty .big { font-size:40px; margin-bottom:10px; }

@media (max-width:760px) {
  .tab { padding:6px 7px; font-size:10px; }
  .tiles { grid-template-columns:repeat(2,1fr); }
  .row .controls { flex-wrap:wrap; justify-content:flex-end; }
}