/* =========================================================
   Aurelia Jewellery CRM — luxury palette: deep burgundy + charcoal
   sidebar, burnished gold accent, ivory page. Playfair Display for
   display type, Inter for body.
   ========================================================= */
:root {
  color-scheme: light;
  --surface-1: #ffffff;
  --page: #faf6ee;
  --ink: #2b2523;
  --ink-2: #5f5048;
  --muted: #9a8b7c;
  --hairline: #eadfcc;
  --border: rgba(43,37,35,.08);
  --accent: #b8892b;            /* burnished gold */
  --accent-2: #d9b45a;
  --accent-deep: #8f6a1c;
  --accent-soft: #f7efdc;
  --burgundy: #4a1526;
  --burgundy-2: #6b1f37;
  --charcoal: #2b2523;
  --good: #16a34a;
  --good-text: #15803d;
  --warning: #f59e0b;
  --critical: #d24848;
  --blue: #3b6fd6;
  --wa: #128c7e;
  --sidebar-bg: linear-gradient(170deg, #5a1a2e 0%, #3a1220 45%, #2b2523 100%);
  --sidebar-ink: #f6ebe4;
  --shadow: 0 6px 22px rgba(74,21,38,.08);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--sans);
  background: radial-gradient(1200px 500px at 80% -10%, #f3e7cf 0%, transparent 60%), linear-gradient(180deg, #f8f1e4 0%, #faf6ee 50%, #fbf8f2 100%) fixed;
  color: var(--ink);
  display: flex; min-height: 100vh; font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h4, .t-value, .r-val, .amt-hero, .v-amt, .lb-price { font-family: var(--serif); letter-spacing:-.01em; }

/* ---------- Sidebar ---------- */
aside {
  width: 224px; background: var(--sidebar-bg); color: var(--sidebar-ink);
  padding: 22px 12px; flex-shrink: 0; display:flex; flex-direction:column; gap:2px;
  position: sticky; top: 0; height: 100vh;
}
.logo { padding: 2px 10px 20px; }
.logo a { color:inherit; text-decoration:none; display:flex; align-items:center; gap:10px; }
.logo-mark { width:30px; height:30px; border-radius:50%; background: conic-gradient(from 210deg, #e6c26a, #a8781c, #f1d78a, #b8892b); box-shadow: 0 0 0 3px rgba(230,194,106,.18); position:relative; flex-shrink:0; }
.logo-mark::after { content:""; position:absolute; left:11px; top:6px; width:8px; height:18px; background:#fff; opacity:.9; clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); }
.logo-text { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing:.2px; }
.logo-text span { color: #e9c56f; }
.logo small { display:block; font-weight:400; font-size:10.5px; opacity:.55; margin-top:6px; letter-spacing:.6px; text-transform:uppercase; }
a.nav-btn {
  display:flex; align-items:center; gap:10px; width:100%;
  color:inherit; text-decoration:none; font-weight:500;
  padding: 9px 12px; border-radius: 9px; cursor:pointer; opacity:.82;
  transition: background .15s, opacity .15s;
}
a.nav-btn:hover { background: rgba(255,255,255,.08); opacity:1; }
a.nav-btn.active { background: linear-gradient(135deg, #d9b45a, #a8781c); color:#2b1a10; opacity:1; font-weight:600; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
a.nav-btn .ico { width:18px; text-align:center; }
.sidebar-foot { margin-top:auto; padding: 12px; font-size: 11px; opacity:.6; line-height:1.5; }
.sidebar-foot button { background:none; border:1px solid rgba(255,255,255,.28); color:inherit; font:inherit; font-size:11px; border-radius:6px; padding:3px 8px; cursor:pointer; margin-top:6px;}
.sidebar-foot button:hover { border-color:#e9c56f; color:#e9c56f; }

/* ---------- Main ---------- */
main { flex:1; padding: 26px 30px 48px; max-width: 1260px; min-width:0; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
h1 { font-size: 26px; font-weight: 600; color: var(--burgundy); }
.sub { color: var(--ink-2); font-size: 13px; margin-top:4px; }
.h-note { font-weight:400; color:var(--muted); font-size:11.5px; }

/* ---------- Cards / tiles ---------- */
.tiles { display:grid; grid-template-columns: repeat(auto-fit,minmax(165px,1fr)); gap:12px; margin-bottom:20px; }
.tile { background: var(--surface-1); border-radius:14px; padding:14px 16px; box-shadow: var(--shadow); border:1px solid rgba(184,137,43,.10); position:relative; overflow:hidden; }
.tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient(180deg, var(--accent-2), var(--accent-deep)); }
.tile .t-label { font-size:11.5px; color: var(--ink-2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.tile .t-value { font-size:26px; font-weight:600; line-height:1.1; color: var(--charcoal); }
.tile .t-note { font-size:11.5px; color: var(--muted); margin-top:5px; }
.tile .t-note.up { color: var(--good-text); }

.card { background: var(--surface-1); border-radius:14px; padding:16px 18px; margin-bottom:16px; box-shadow: var(--shadow); border:1px solid rgba(184,137,43,.10); }
.card h3 { font-size:14px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-2 > * { min-width:0; }
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr;} }

/* ---------- Tables ---------- */
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--hairline); font-weight:600;}
td { padding:10px; border-bottom:1px solid var(--hairline); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; font-variant-numeric: tabular-nums; }
tr.dim td { opacity:.62; }
.rowlink { cursor:pointer; }
.rowlink:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.table-wrap { overflow-x:auto; }
.who { display:flex; align-items:center; gap:10px; min-width:0; }
.who > div { min-width:0; }

/* ---------- Avatars ---------- */
.avatar {
  --h: 30; width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; letter-spacing:.3px;
  background: hsl(var(--h) 45% 92%); color: hsl(var(--h) 45% 32%); border:1px solid hsl(var(--h) 40% 82%);
}
.avatar.lg { width:48px; height:48px; font-size:16px; }

/* ---------- Chips / status pills ---------- */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px 3px 7px; border-radius:99px; border:1px solid transparent; white-space:nowrap; line-height:1.3; }
.chip svg { flex-shrink:0; }
.c-booked   { color:var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); border-color: color-mix(in srgb, var(--blue) 18%, transparent); }
.c-arrived  { color:#8a6200; background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.c-inconsult{ color:var(--accent-deep); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.c-done     { color:var(--good-text); background: color-mix(in srgb, var(--good) 10%, transparent); border-color: color-mix(in srgb, var(--good) 22%, transparent); }
.c-noshow   { color:var(--critical); background: color-mix(in srgb, var(--critical) 9%, transparent); border-color: color-mix(in srgb, var(--critical) 25%, transparent); }
.c-hold     { color:#6d3d94; background:#f1e7f8; border-color:#e2d2ef; }
.c-cancel   { color:var(--ink-2); background: #f1ece3; border-color:#e6dfd2; }
.delta { font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.delta.up { color: var(--good-text); } .delta.down { color: var(--critical); } .delta.flat { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn { font:inherit; font-size:12.5px; font-weight:600; border-radius:9px; padding:7px 13px; cursor:pointer; border:1px solid var(--hairline); background:var(--surface-1); color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:6px; justify-content:center; transition: border-color .15s, color .15s, transform .1s, box-shadow .15s; }
.btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, #cfa24a, #a8781c); border:none; color:#fff; box-shadow: 0 3px 10px rgba(168,120,28,.28); }
.btn.primary:hover { filter: brightness(1.06); color:#fff; }
.btn.ghost { border:none; background:none; color:var(--accent-deep); padding:6px 8px; box-shadow:none; }
.btn.sm { padding:5px 10px; font-size:12px; }
.btn.danger { color:var(--critical); }
.btn.danger:hover { border-color: var(--critical); color: var(--critical); }
.btn.danger-solid { background: var(--critical); border-color: var(--critical); color:#fff; }
.btn.wa { background:#e9f8f3; border-color:#bfe8da; color:#0f7a6d; }
.btn.wa:hover { background:#d8f3ea; border-color:var(--wa); color:var(--wa); }
.btn.disabled, .btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }

/* ---------- Forms & modal ---------- */
label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin:10px 0 4px; }
label small { font-weight:400; color:var(--muted); }
input, select, textarea {
  font:inherit; width:100%; padding:8px 10px; border-radius:9px; border:1px solid var(--hairline);
  background:#fffdf9; color:var(--ink);
}
input[readonly] { background:#f4efe6; color:var(--ink-2); }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color:var(--accent); }
.row { display:flex; gap:10px; } .row > * { flex:1; min-width:0; }
.search { max-width:260px; }
.search.scan { max-width:190px; font-family: ui-monospace, "SF Mono", Menlo, monospace; border-style:dashed; border-color:var(--accent); background: var(--accent-soft); }
.check-row { display:flex; align-items:center; gap:8px; margin-top:12px; cursor:pointer; }
.check-row input { width:auto; accent-color: var(--accent); }
.check-row.voucher { background: var(--accent-soft); border:1px dashed var(--accent); border-radius:10px; padding:9px 12px; flex-wrap:wrap; }
.sub-box { background: #fbf7ef; border:1px solid var(--hairline); border-radius:10px; padding:4px 12px 12px; margin-top:6px; }
.readout { padding:8px 10px; border-radius:9px; background:#f4efe6; font-weight:700; font-variant-numeric:tabular-nums; }
.readout, .notice { font-size:13px; }
.notice { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff4e0; border:1px solid #f2d9a6; color:#6b4a00; border-radius:10px; padding:9px 12px; margin:8px 0; }
.notice.gold { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-deep); }
.notice a { color:inherit; font-weight:600; }
.wide-notice { grid-column: 1 / -1; }

.overlay {
  display:none; position:fixed; inset:0; background:rgba(43,37,35,.5); backdrop-filter: blur(2px); z-index:50;
  align-items:flex-start; justify-content:center; padding:5vh 16px;
}
.overlay.open { display:flex; animation: fadeIn .18s ease; }
.modal {
  background:var(--surface-1); border-radius:16px; width:100%; max-width:500px;
  padding:22px; border:1px solid rgba(184,137,43,.18); max-height:88vh; overflow:auto;
  box-shadow: 0 24px 60px rgba(43,37,35,.28);
}
.overlay.open .modal { animation: pop .24s cubic-bezier(.2,.9,.3,1.2); }
.modal.wide { max-width:760px; }
.modal h2 { font-size:20px; margin-bottom:4px; color: var(--burgundy); font-weight:600; }
.modal .m-sub { font-size:12.5px; color:var(--ink-2); margin-bottom:8px; }
.m-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { opacity:0; transform: translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.confirm-ico { width:48px; height:48px; border-radius:50%; margin:4px auto 10px; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:24px; font-weight:700; background:var(--accent-soft); color:var(--accent-deep); }
.confirm-ico.danger { background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical); }
.item-head { display:flex; gap:12px; align-items:center; margin-bottom:6px; }
.item-head .thumb-svg, .item-head .thumb-img { width:56px; height:56px; }

.opt-list { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.opt { display:flex; align-items:center; gap:11px; border:1px solid var(--hairline); border-radius:10px; padding:10px 12px; cursor:pointer; margin:0; font-weight:400; }
.opt:hover { border-color: var(--accent); }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt input { width:auto; accent-color: var(--accent); }

/* ---------- Payment collection ---------- */
.amt-hero { font-size:34px; font-weight:600; text-align:center; margin:10px 0 4px; color:var(--charcoal); }
.amt-hero small { display:block; font-family:var(--sans); font-size:12px; color:var(--muted); font-weight:500; margin-top:2px; }
.mode-pills { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:10px 0 12px; }
.mode { font:inherit; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:99px; border:1px solid var(--hairline); background:#fff; cursor:pointer; color:var(--ink-2); }
.mode.sel { background: var(--charcoal); color:#fff; border-color: var(--charcoal); }
.qr-wrap { display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--hairline); border-radius:12px; padding:12px; }
.qr { width:150px; flex-shrink:0; background:#fff; padding:4px; border-radius:8px; border:1px solid var(--hairline); }
.qr svg, .qr-mini svg, .lb-qr svg, .v-qr svg { width:100%; height:auto; display:block; }
.qr-meta { display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink-2); }
.qr-meta b { font-size:20px; color:var(--charcoal); font-family:var(--serif); }
.qr-meta small { color:var(--muted); }
.qr-fallback { font-size:11px; color:var(--muted); padding:10px; text-align:center; word-break:break-all; }
.qr-inline { margin:4px 0 10px; }
.pay-row { display:grid; grid-template-columns: 1.1fr .9fr 1.2fr auto auto; gap:8px; align-items:center; margin-bottom:8px; }
.pay-row input, .pay-row select { padding:7px 9px; font-size:13px; }
.pay-row.ok input { border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.pay-ok { font-size:12px; color:var(--muted); text-align:center; }
.pay-foot { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:600; }
.pay-foot .ok { color: var(--good-text); } .pay-foot .warn { color: var(--critical); }

/* ---------- Print sheets: invoice / slip / passbook ---------- */
.inv-box { border:1px dashed var(--hairline); border-radius:10px; padding:12px 14px; margin-top:12px; font-variant-numeric: tabular-nums; }
.inv-box.tight { margin-top:0; }
.inv-line { display:flex; justify-content:space-between; padding:4px 0; font-size:13.5px; gap:10px; }
.inv-line.total { border-top:1px solid var(--hairline); margin-top:6px; padding-top:8px; font-weight:700; font-size:15px; }
.hint { font-size:11.5px; color:var(--muted); margin-top:4px; }

.sheet { border:1px solid var(--hairline); border-radius:12px; padding:20px; background:#fffdf9; }
.sheet-head { display:flex; justify-content:space-between; gap:10px; border-bottom:2px solid var(--accent); padding-bottom:12px; margin-bottom:12px; flex-wrap:wrap; }
.sheet-head h4 { font-size:19px; color:var(--burgundy); font-weight:600; }
.sheet-head small { color:var(--muted); display:block; margin-top:1px; font-size:11px; }
.brand { display:flex; gap:12px; align-items:center; }
.sheet-doc { text-align:right; font-size:12.5px; }
.sheet-doc b { letter-spacing:1.5px; color: var(--charcoal); }
.bill-to { display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:10px; flex-wrap:wrap; }
.bill-to small { display:block; color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; }
.inv-table td { padding:7px 8px; font-size:12.5px; }
.inv-table th { font-size:10.5px; padding:6px 8px; }
.inv-table small { color:var(--muted); font-size:11px; }
.inv-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap:14px; margin-top:12px; align-items:start; }
.inv-note { font-size:12px; color:var(--ink-2); margin-bottom:8px; line-height:1.45; }
.inv-words { font-size:12.5px; font-weight:600; margin:6px 0 8px; }
.inv-words small { display:block; font-weight:500; color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; }
.inv-marks { display:flex; gap:14px; align-items:center; margin-top:6px; }
.qr-mini { width:72px; text-align:center; font-size:9.5px; color:var(--muted); }
.inv-foot { display:flex; justify-content:space-between; gap:16px; margin-top:16px; align-items:flex-end; flex-wrap:wrap; }
.terms { font-size:10.5px; color:var(--muted); max-width:62%; line-height:1.45; }
.sign { border-top:1px solid var(--ink); padding-top:5px; font-size:11.5px; min-width:150px; text-align:center; margin-top:28px; }
.sign span { display:block; color:var(--muted); font-size:10.5px; }
.pb-due td { background:#fff1f1; } .pb-future td { color:var(--muted); } .pb-bonus td { background: var(--accent-soft); font-weight:600; }

/* tag label */
.label-wrap { display:flex; justify-content:center; padding:10px 0; }
.label { display:flex; gap:10px; width:300px; border:1px solid var(--ink); border-radius:6px; padding:8px; background:#fff; }
.lb-qr { width:92px; flex-shrink:0; }
.lb-body { flex:1; min-width:0; font-size:11px; line-height:1.35; }
.lb-shop { font-family: var(--serif); font-weight:700; font-size:11px; letter-spacing:.5px; text-transform:uppercase; }
.lb-name { font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row { display:flex; justify-content:space-between; gap:6px; font-family: ui-monospace, Menlo, monospace; font-size:10.5px; }
.lb-price { font-size:16px; font-weight:700; margin-top:3px; }
.lb-price small { font-family: var(--sans); font-weight:500; font-size:9.5px; color:var(--muted); }

/* voucher */
.voucher { border:2px solid var(--accent); border-radius:14px; padding:18px; text-align:center; background: linear-gradient(160deg, #fffdf8, #f8efdc); position:relative; }
.v-head { display:flex; gap:10px; align-items:center; justify-content:center; text-align:left; }
.v-head small { display:block; color:var(--muted); font-size:11px; }
.v-amt { font-size:40px; font-weight:700; color:var(--burgundy); margin:10px 0 0; }
.v-code { font-family: ui-monospace, Menlo, monospace; font-size:15px; letter-spacing:2px; font-weight:700; color:var(--accent-deep); margin-bottom:10px; }
.v-qr { width:110px; margin:0 auto 10px; background:#fff; padding:4px; border-radius:8px; }
.v-meta { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-2); align-items:center; }
.v-words { font-size:11.5px; color:var(--muted); margin-top:8px; font-style:italic; }

/* reminders */
.rem-sec { margin-top:14px; }
.rem-h { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--hairline); padding-bottom:6px; margin-bottom:6px; }
.rem-h small { color:var(--muted); }
.rem-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--hairline); }
.rem-row:last-child { border-bottom:none; }
.rem-row > div { flex:1; min-width:0; } .rem-row small { display:block; color:var(--muted); font-size:11.5px; }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--hairline); margin-bottom:14px; flex-wrap:wrap; }
.tab { border:none; background:none; font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); padding:8px 14px; cursor:pointer; border-bottom:2px solid transparent; display:flex; align-items:center; gap:6px; }
.tab.active { color:var(--accent-deep); border-bottom-color:var(--accent); }
.tab-count { font-size:10.5px; background:#efe8da; color:var(--ink-2); border-radius:99px; padding:1px 7px; }
.tab.active .tab-count { background: var(--accent-soft); color: var(--accent-deep); }

/* ---------- Charts ---------- */
.chart-svg { width:100%; height:auto; display:block; font-family: var(--sans); }
.chart-svg .grid { stroke: var(--hairline); stroke-width:1; }
.chart-svg .ax { font-size:10.5px; fill: var(--muted); }
.chart-svg .val { font-size:10.5px; fill: var(--ink-2); font-weight:600; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:8px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.legend small { color:var(--muted); }
.legend.col { flex-direction:column; gap:7px; }
.legend.col span { display:flex; width:100%; }
.legend.col span b { margin-left:auto; font-variant-numeric:tabular-nums; }
.legend.col span small { width:36px; text-align:right; }
.donut-wrap { display:flex; gap:18px; align-items:center; }
.donut { width:160px; flex-shrink:0; }
.donut-c { font-family: var(--serif); font-size:15px; font-weight:600; fill: var(--charcoal); }
.donut-s { font-size:8.5px; fill: var(--muted); }
.donut-wrap .legend.col { flex:1; min-width:0; }
.hbars { display:flex; flex-direction:column; gap:9px; padding-top:4px; }
.hbar { display:grid; grid-template-columns: 170px 1fr 90px; gap:10px; align-items:center; font-size:12.5px; }
.hb-l { display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-track { height:12px; background:#f1ece3; border-radius:99px; overflow:hidden; }
.hb-track i { display:block; height:100%; border-radius:99px; }
.hbar b { text-align:right; font-variant-numeric:tabular-nums; }
.spark { display:block; }

/* ---------- Empty states ---------- */
.empty-state { text-align:center; padding:22px 10px; color:var(--muted); }
.empty-state .es-ico { width:46px; height:46px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:20px; background: var(--accent-soft); }
.empty-state b { display:block; color:var(--ink-2); font-size:13.5px; }
.empty-state small { display:block; margin-top:2px; font-size:12px; }

/* ---------- Toast ---------- */
.toast {
  position:fixed; bottom:22px; right:22px; background:var(--charcoal); color:#fff8ee;
  padding:11px 16px; border-radius:10px; font-size:13px; font-weight:600; z-index:99; max-width:min(420px, 90vw);
  opacity:0; transform:translateY(8px); transition:.25s; box-shadow: 0 10px 30px rgba(0,0,0,.25); border-left:3px solid var(--accent-2);
}
.toast.show { opacity:1; transform:none; }

/* ---------- Rate board ---------- */
.rate-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:20px; }
.rate-card { background: linear-gradient(160deg, #fffaf0, #f4e7cd); border:1px solid rgba(184,137,43,.22); box-shadow: 0 4px 14px rgba(120,80,30,.10); border-radius:14px; padding:13px 16px; }
.rate-card .r-top { display:flex; justify-content:space-between; align-items:center; }
.rate-card .r-metal { font-size:11.5px; font-weight:700; color:#8a6a2a; letter-spacing:.6px; text-transform:uppercase; }
.rate-card .r-val { font-size:26px; font-weight:600; color:#5b4010; margin-top:4px; }
.rate-card .r-unit { font-family: var(--sans); font-size:12px; color:#9c8a76; font-weight:500; margin-left:3px; }
.rate-card .r-foot { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.rate-card .r-foot small { color:#9c8a76; font-size:11px; }
.rate-table td { padding:8px 10px; }
.rate-table .rt-in { width:104px; padding:6px 8px; text-align:right; font-weight:700; }
.rt-delta { margin-top:3px; }
.rt-today td { background: var(--accent-soft); }
@keyframes flashGold { 0% { background-color: rgba(217,180,90,.55); box-shadow: 0 0 0 4px rgba(217,180,90,.35); } 100% { background-color: transparent; box-shadow:none; } }
.flash { animation: flashGold 1.6s ease-out; }
td.flash { animation: flashGold 1.6s ease-out; border-radius:6px; }
.tile.flash, .rate-card.flash { animation: flashGold 1.6s ease-out; }

/* ---------- Stock page ---------- */
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.toolbar select { width:auto; min-width:140px; }
.counts { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.cnt { display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.cnt b { font-variant-numeric:tabular-nums; }
.view-toggle { display:flex; border:1px solid var(--hairline); border-radius:9px; overflow:hidden; }
.view-btn { font:inherit; font-size:14px; padding:5px 11px; border:none; background:#fff; cursor:pointer; color:var(--muted); }
.view-btn.active { background: var(--charcoal); color:#fff; }
.thumb-svg, .thumb-img { width:40px; height:40px; border-radius:10px; flex-shrink:0; object-fit:cover; }
.pgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.pcard { background:#fff; border-radius:14px; box-shadow: var(--shadow); border:1px solid rgba(184,137,43,.12); overflow:hidden; cursor:pointer; transition: transform .15s, box-shadow .15s; display:flex; flex-direction:column; }
.pcard:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(74,21,38,.14); }
.pcard.dim { opacity:.72; }
.pthumb { position:relative; aspect-ratio: 1 / .85; background: #f7f1e6; }
.pthumb .thumb-svg, .pthumb .thumb-img { width:100%; height:100%; border-radius:0; }
.pthumb .chip { position:absolute; top:8px; left:8px; }
.pbody { padding:10px 12px 4px; }
.pname { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmeta { font-size:11.5px; color:var(--muted); margin:3px 0 6px; }
.pprice { font-size:14px; border-radius:6px; }
.pact { display:flex; justify-content:space-between; padding:6px 10px 10px; gap:6px; margin-top:auto; }
.tagno { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11px; background:var(--accent-soft); color:#7c5a12; padding:1px 7px; border-radius:6px; }
.scheme-badge { display:inline-block; background:#f1e7f8; color:#6d3d94; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; }
.cat-pill { display:inline-block; background:#f4ede1; color:#6b543f; font-size:11px; font-weight:600; padding:2px 9px; border-radius:99px; }

/* ---------- Gold Saver card (customer profile) ---------- */
.scheme-card { background: linear-gradient(160deg, #fffaf0, #f6ebd3); border:1px solid rgba(184,137,43,.25); border-radius:12px; padding:12px 14px; margin-top:8px; }
.sc-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.sc-top small { display:block; color:var(--muted); font-size:11.5px; }
.sc-bar { height:8px; background:#efe3c8; border-radius:99px; margin:10px 0; overflow:hidden; }
.sc-bar i { display:block; height:100%; background: linear-gradient(90deg, var(--accent-2), var(--accent-deep)); border-radius:99px; }
.sc-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:8px; }
.sc-grid small { display:block; color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; }
.sc-grid b { font-size:14px; }

/* ---------- Print: only the open modal ---------- */
@media print {
  body { display:block; background:#fff; }
  body > *:not(#overlay) { display:none !important; }
  #overlay { position:static; display:block !important; padding:0; background:none; backdrop-filter:none; }
  #overlay .modal { border:none; max-width:100%; max-height:none; box-shadow:none; animation:none; }
  .m-actions, .modal > h2, .modal > .m-sub { display:none !important; }
  .sheet, .voucher, .label { break-inside: avoid; }
  .label-wrap { padding:0; justify-content:flex-start; }
  body.print-page > *:not(#overlay) { display:none !important; }
}
/* reports print: whole page */
@media print {
  body:has(#rp-tiles) > main { display:block !important; }
  body:has(#rp-tiles) aside, body:has(#rp-tiles) .m-topbar, body:has(#rp-tiles) .page-head .btn { display:none !important; }
  body:has(#rp-tiles) #overlay:not(.open) { display:none !important; }
}

/* ---------- Mobile ---------- */
.m-topbar { display:none; }
.m-backdrop { display:none; }

@media (max-width: 860px){
  body { display:block; }
  .m-topbar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:60; background: var(--sidebar-bg); color: var(--sidebar-ink); padding: 12px 14px; }
  .m-topbar .m-title { font-family: var(--serif); font-size:18px; font-weight:600; letter-spacing:.2px; }
  .m-topbar .m-title span { color:#e9c56f; }
  .m-menu-btn { background:none; border:1px solid rgba(255,255,255,.25); color:inherit; font-size:18px; line-height:1; border-radius:8px; padding:6px 10px; cursor:pointer; }
  aside { position:fixed; top:0; left:0; bottom:0; height:100dvh; z-index:80; width:min(260px, 82vw); transform:translateX(-100%); transition:transform .25s ease; box-shadow:4px 0 24px rgba(0,0,0,.35); overflow-y:auto; }
  aside.open { transform:translateX(0); }
  .m-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:70; }
  .m-backdrop.show { display:block; }
  main { max-width:100%; padding:16px 14px 40px; }
  h1 { font-size:22px; }
  .card { overflow-x:auto; }
  .card table { min-width:560px; }
  .row { flex-wrap:wrap; }
  .row > * { flex:1 1 140px; }
  .search, .search.scan { max-width:100%; }
  .toolbar select { flex:1; }
  .counts { margin-left:0; }
  .overlay { padding:3vh 10px; }
  .toast { left:14px; right:14px; bottom:14px; text-align:center; }
  .pay-row { grid-template-columns: 1fr 1fr; }
  .pay-row > :nth-child(3) { grid-column: 1 / 2; }
  .inv-grid { grid-template-columns: 1fr; }
  .terms { max-width:100%; }
  .qr-wrap { flex-direction:column; text-align:center; }
  .donut-wrap { flex-direction:column; align-items:stretch; }
  .hbar { grid-template-columns: 120px 1fr 80px; }
  .modal { padding:16px; }
}

@media (max-width: 420px){
  .tiles { grid-template-columns:repeat(2, 1fr); gap:9px; }
  .tile { padding:12px; }
  .tile .t-value { font-size:20px; }
  .rate-strip { grid-template-columns: 1fr 1fr; }
  .rate-card .r-val { font-size:20px; }
  .pgrid { grid-template-columns: 1fr 1fr; gap:10px; }
}

/* rate board fits two-up on small phones */
.rate-strip > * { min-width:0; }
@media (max-width: 420px){ .rate-card { padding:11px 12px; } .rate-card .r-val { font-size:20px; } .rate-card .r-top { flex-wrap:wrap; gap:4px; } }

/* =========================================================
   Store website ↔ CRM (reservations, appointments, designs, leads)
   ========================================================= */
aside { overflow-y:auto; scrollbar-width:thin; }
.nav-sec { font-size:10px; letter-spacing:.9px; text-transform:uppercase; opacity:.5; padding:14px 12px 4px; font-weight:600; }
.nav-count { margin-left:auto; min-width:20px; text-align:center; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:99px; background:#e9c56f; color:#3a1220; }
a.nav-btn.active .nav-count { background:#3a1220; color:#f6ebe4; }
.sidebar-foot .site-link { display:block; color:#e9c56f; text-decoration:none; font-weight:600; font-size:11.5px; margin-bottom:8px; }
.sidebar-foot .site-link:hover { text-decoration:underline; }
@media (min-width: 861px) and (max-height: 780px){ a.nav-btn { padding:7px 12px; } .logo { padding-bottom:12px; } .nav-sec { padding-top:8px; } }

.web-badge { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700; color:#1d5fa8; background:#e8f1fc; border:1px solid #cfe0f6; padding:1px 7px; border-radius:99px; white-space:nowrap; vertical-align:1px; text-decoration:none; margin-left:4px; }
.kind { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; padding:1px 8px; border-radius:99px; white-space:nowrap; }
.kind.store { background:#f4ede1; color:#6b543f; }
.kind.video { background:#efe7fa; color:#6d3d94; }
.cd { font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:600; }
.cd.soon { color:var(--critical); }
.sec-label { font-family:var(--serif); font-size:16px; color:var(--burgundy); font-weight:600; margin:2px 0 10px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.sec-label small { font-family:var(--sans); font-size:11.5px; font-weight:400; color:var(--muted); }
a.tile.link { text-decoration:none; color:inherit; transition: transform .15s, box-shadow .15s; }
a.tile.link:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(74,21,38,.14); }
.web-tiles .tile::before { background: linear-gradient(180deg, #7fb0ea, #1d5fa8); }

/* pieces to keep ready */
.pieces { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.piece { display:flex; align-items:center; gap:8px; font-size:12.5px; border:1px solid var(--hairline); border-radius:10px; padding:6px 8px; background:#fffdf9; }
.piece > span:not(.chip) { flex:1; min-width:0; }
.piece small { color:var(--muted); }
.piece .thumb-svg, .piece .thumb-img { width:34px; height:34px; }
.piece.gone { opacity:.6; text-decoration:line-through; }
.appt .pieces { flex-direction:row; flex-wrap:wrap; gap:4px; }
.appt .piece { padding:2px 6px; font-size:11.5px; border-radius:8px; }
.appt .piece .chip { display:none; }

/* appointments */
.day-strip { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:8px; scrollbar-width:thin; }
.day { flex:0 0 auto; min-width:76px; font:inherit; border:1px solid var(--hairline); background:#fff; border-radius:12px; padding:7px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px; color:var(--ink); }
.day small { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.day b { font-family:var(--serif); font-size:20px; line-height:1.1; }
.day i { font-style:normal; font-size:10.5px; color:var(--ink-2); }
.day:hover { border-color:var(--accent); }
.day.sel { background: linear-gradient(135deg, #d9b45a, #a8781c); border-color:transparent; color:#2b1a10; }
.day.sel small, .day.sel i { color:#3a2a10; }
.ap-grid { grid-template-columns: 1.25fr 1fr; }
@media (max-width: 900px){ .ap-grid { grid-template-columns:1fr; } }
.slots { display:flex; flex-direction:column; }
.slot { display:grid; grid-template-columns:72px 1fr; gap:10px; padding:6px 0; border-bottom:1px dashed var(--hairline); align-items:start; }
.slot:last-child { border-bottom:none; }
.slot .s-t { font-size:12px; font-weight:600; color:var(--ink-2); padding-top:6px; font-variant-numeric:tabular-nums; }
.slot .s-b { display:flex; flex-direction:column; gap:6px; min-width:0; }
.slot.past .s-t { opacity:.5; text-decoration:line-through; }
.s-free { align-self:flex-start; font:inherit; font-size:11.5px; color:var(--muted); background:none; border:1px dashed var(--hairline); border-radius:8px; padding:4px 10px; cursor:pointer; }
.s-free:hover { border-color:var(--accent); color:var(--accent-deep); }
.appt { border:1px solid rgba(184,137,43,.22); border-left:4px solid var(--accent); background:#fffdf8; border-radius:10px; padding:8px 10px; cursor:pointer; margin-bottom:6px; min-width:0; }
.appt.is-video { border-left-color:#8b5cc4; }
.appt.dim { opacity:.6; }
.appt:hover { box-shadow: var(--shadow); }
.appt .ap-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.appt > small { display:block; color:var(--muted); font-size:11.5px; margin-top:2px; }
.ap-act { display:flex; gap:6px; justify-content:flex-end; margin-top:6px; flex-wrap:wrap; }

/* design requests */
.dgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
.dcard { background:#fff; border-radius:14px; box-shadow: var(--shadow); border:1px solid rgba(184,137,43,.14); padding:14px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.dcard.dim { opacity:.75; }
.dc-head { display:flex; gap:10px; align-items:center; }
.dc-head .thumb-svg { width:48px; height:48px; }
.dc-head small { color:var(--muted); }
.spec { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:6px; }
.spec span { background:#fbf7ef; border:1px solid var(--hairline); border-radius:8px; padding:5px 8px; font-size:12.5px; overflow-wrap:anywhere; }
.spec small { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.dc-est { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; border-top:1px dashed var(--hairline); padding-top:8px; }
.dc-est span { font-size:12px; color:var(--ink-2); }
.dc-est b { font-family:var(--serif); font-size:20px; color:var(--charcoal); }
.dc-est small { flex-basis:100%; color:var(--muted); font-size:11.5px; }
.dc-act { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-top:auto; }

/* leads */
.ltype { display:inline-block; font-size:11px; font-weight:600; padding:1px 8px; border-radius:99px; background:#f4ede1; color:#6b543f; margin-top:3px; white-space:nowrap; }
.ltype.exchange { background:#fff2dc; color:#8a5a00; }
.ltype.scheme { background:#f1e7f8; color:#6d3d94; }
.ltype.contact { background:#e8f1fc; color:#1d5fa8; }
.ltype.wishlist { background:#fde8ee; color:#a3264f; }
.steps { display:inline-flex; gap:3px; margin-top:5px; }
.steps i { width:16px; height:4px; border-radius:99px; background:#eadfcc; }
.steps i.on { background: linear-gradient(90deg, var(--accent-2), var(--accent-deep)); }
.ld-detail { max-width:320px; font-size:12.5px; color:var(--ink-2); }
td a { color:var(--accent-deep); }

/* website activity feed */
.feed { display:flex; flex-direction:column; }
.feed-row { display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px dashed var(--hairline); text-decoration:none; color:inherit; font-size:12.5px; }
.feed-row:last-child { border-bottom:none; }
.feed-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.feed-row > span:nth-child(2) { flex:1; min-width:0; }
.feed-row small { display:block; color:var(--muted); font-size:11px; }
.f-ico { width:30px; height:30px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* stock: website listing */
.web-line { display:block; font-size:11px; color:#1d5fa8; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.web-line.off { color:var(--muted); }
.web-panel { border:1px solid #cfe0f6; background:#f5f9fe; border-radius:10px; padding:10px 12px; margin-top:10px; font-size:12.5px; display:flex; flex-direction:column; gap:6px; }
.web-panel.off { border-color:var(--hairline); background:#faf7f1; }
.web-panel small { color:var(--muted); }
.wp-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.wp-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:6px 12px; }
.wp-grid small { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.4px; }
.wp-story { font-style:italic; color:var(--ink-2); }
.switch { display:inline-flex; align-items:center; gap:7px; margin:0; cursor:pointer; font-size:12px; position:relative; }
.switch input { position:absolute; opacity:0; width:1px; height:1px; }
.switch .sw { width:34px; height:20px; border-radius:99px; background:#d9d0c2; position:relative; transition:background .15s; }
.switch .sw::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.switch input:checked + .sw { background:#1d5fa8; }
.switch input:checked + .sw::after { transform:translateX(14px); }
.switch input:focus-visible + .sw { outline:2px solid var(--accent); outline-offset:2px; }
.occ-pick { display:flex; flex-wrap:wrap; gap:4px 14px; }
.occ-pick .check-row { margin-top:2px; font-weight:500; }

@media (max-width: 860px){
  .slot { grid-template-columns:58px 1fr; }
  .dgrid { grid-template-columns:1fr; }
  .ld-detail { max-width:220px; }
  .card #dash-appt table, .card #dash-inbox table { min-width:0; }
  #dash-appt td, #dash-inbox td { padding:8px 4px; }
  #dash-appt td:first-child { width:56px !important; }
}
@media (max-width: 420px){
  .web-tiles { grid-template-columns:1fr 1fr; }
  .day { min-width:64px; padding:6px 8px; }
}
@media (prefers-reduced-motion: reduce){
  a.tile.link, .pcard, .switch .sw, .switch .sw::after { transition:none; }
  .overlay.open, .overlay.open .modal, .flash, .tile.flash, .rate-card.flash, td.flash { animation:none; }
}