/* VQ Clinic Manager — styles. Offline, no external assets. */
:root{
  --accent:#d9a441;
  --bg:#0b0b0e;
  --brand:#d9a441;
  --brand-dark:#b9862f;
  --brand-soft:rgba(217,164,65,.14);
  --card:#141417;
  --danger:#e5484d;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --ink:#ece7db;
  --line:rgba(236,231,219,.12);
  --muted:#a39e93;
  --panel:#141417;
  --panel2:#1c1c21;
  --radius:3px;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:var(--font-body);
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45;
}
header.topbar {
  background:var(--brand); color:var(--ink); padding:12px 18px;
  display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:50;
}
header.topbar .logo { font-size:20px; font-weight:700; }
header.topbar .logo small { display:block; font-size:11px; font-weight:400; opacity:.85; }
header.topbar .clinic-name { margin-left:auto; font-size:13px; opacity:.9; text-align:right; }
nav.tabs {
  display:flex; gap:4px; background:var(--brand-dark); padding:0 12px;
  overflow-x:auto; position:sticky; top:57px; z-index:49;
}
nav.tabs button {
  background:none; border:none; color:#d7ece8; padding:12px 16px; font-size:14px;
  cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap;
}
nav.tabs button.active { color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }
main { max-width:1100px; margin:0 auto; padding:18px 14px 60px; }
.view { display:none; }
.view.active { display:block; }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:14px; box-shadow:none;
}
.card h2, .card h3 { margin:0 0 10px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.grid4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
@media (max-width: 720px) { .grid2, .grid3, .grid4 { grid-template-columns:1fr; } }
.stat { text-align:center; padding:14px 8px; }
.stat .num { font-size:30px; font-weight:700; color:var(--brand); }
.stat .lbl { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
tr:hover td { background:var(--panel2); }
input, select, textarea {
  font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:3px;
  background:var(--panel); width:100%;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand-soft); border-color:var(--brand); }
textarea { min-height:90px; resize:vertical; }
label.f { display:block; margin-bottom:10px; }
label.f > span { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:600; }
button, .btn {
  font:inherit; cursor:pointer; border:none; border-radius:3px;
  padding:9px 16px; background:var(--brand); color:var(--ink); font-weight:600;
}
button:hover, .btn:hover { background:var(--brand-dark); }
button.secondary { background:color-mix(in srgb, #e8efed 16%, transparent); color:var(--ink); }
button.secondary:hover { background:color-mix(in srgb, #dbe6e3 16%, transparent); }
button.danger { background:var(--danger); }
button.warn { background:var(--accent); color:color-mix(in srgb, #3d2b00 55%, #ece7db); }
button.small { padding:5px 10px; font-size:13px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.pill {
  display:inline-block; padding:3px 10px; border-radius:3px; font-size:12px; font-weight:600;
}
.pill.scheduled { background:var(--panel2); color:color-mix(in srgb, #3730a3 55%, #ece7db); }
.pill.waiting { background:var(--panel2); color:color-mix(in srgb, #92400e 55%, #ece7db); }
.pill.in-consult { background:var(--panel2); color:color-mix(in srgb, #1e40af 55%, #ece7db); }
.pill.done { background:color-mix(in srgb, #d1fae5 16%, transparent); color:color-mix(in srgb, #065f46 55%, #ece7db); }
.pill.cancelled, .pill.no-show { background:var(--panel2); color:color-mix(in srgb, #991b1b 55%, #ece7db); }
.pill.overdue { background:var(--panel2); color:color-mix(in srgb, #991b1b 55%, #ece7db); }
.pill.due-today { background:var(--panel2); color:color-mix(in srgb, #92400e 55%, #ece7db); }
.pill.upcoming { background:var(--panel2); color:color-mix(in srgb, #3730a3 55%, #ece7db); }
.pill.paid { background:color-mix(in srgb, #d1fae5 16%, transparent); color:color-mix(in srgb, #065f46 55%, #ece7db); }
.pill.unpaid { background:var(--panel2); color:color-mix(in srgb, #991b1b 55%, #ece7db); }
.pill.partial { background:var(--panel2); color:color-mix(in srgb, #92400e 55%, #ece7db); }
.searchbar { display:flex; gap:10px; margin-bottom:12px; }
.searchbar input { flex:1; font-size:16px; padding:10px 14px; }
.timeline { border-left:3px solid var(--brand-soft); margin-left:6px; padding-left:16px; }
.timeline .titem { margin-bottom:14px; position:relative; }
.timeline .titem::before {
  content:""; position:absolute; left:-23px; top:4px; width:11px; height:11px;
  border-radius:50%; background:var(--brand);
}
.muted { color:var(--muted); font-size:13px; }
.empty { text-align:center; color:var(--muted); padding:28px 10px; }
/* modal */
#modal-root { position:fixed; inset:0; display:none; z-index:100; }
#modal-root.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal {
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  background:var(--panel); border-radius:3px; width:min(680px, 94vw); max-height:90vh;
  overflow-y:auto; padding:20px;
}
.modal.wide { width:min(880px, 96vw); }
.modal h2 { margin-top:0; }
.modal .actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.rx-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:8px; margin-bottom:8px; align-items:center; }
@media (max-width: 720px) { .rx-row { grid-template-columns:1fr 1fr; } }
.toast {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--ink); padding:10px 20px; border-radius:3px;
  font-size:14px; z-index:200; display:none;
}
.toast.show { display:block; }
#print-area { display:none; }

/* ============ PRINT: prescription & invoice letterhead ============ */
@media print {
  body.printing #app, body.printing .toast { display:none !important; }
  body.printing #print-area { display:block !important; }
  @page { size:A4; margin:14mm; }
}
.doc { font-family:var(--font-body); color:#111; }
.doc .letterhead { text-align:center; border-bottom:3px double #0e7c66; padding-bottom:10px; margin-bottom:14px; }
.doc .letterhead h1 { margin:0; font-size:26px; color:#0e7c66; }
.doc .letterhead .dr { font-size:15px; font-weight:bold; margin-top:4px; }
.doc .letterhead .meta { font-size:12px; color:#444; }
.doc .pgrid { display:flex; justify-content:space-between; font-size:13px; margin-bottom:10px; }
.doc table { width:100%; border-collapse:collapse; font-size:14px; }
.doc table th, .doc table td { border:1px solid #999; padding:7px 8px; }
.doc table th { background:#f0f0f0; }
.doc .rx-symbol { font-size:26px; font-weight:bold; margin:10px 0 4px; }
.doc .advice { margin-top:12px; font-size:13px; }
.doc .sig { margin-top:46px; display:flex; justify-content:flex-end; }
.doc .sig .box { text-align:center; border-top:1px solid var(--panel); padding-top:4px; width:220px; font-size:13px; }
.doc .totals { width:260px; margin-left:auto; font-size:14px; }
.doc .totals td { border:none; padding:3px 6px; }
.doc .totals tr.grand td { font-weight:bold; border-top:2px solid var(--panel); }

/* ===== vq reskin normalization (auto-generated) ===== */
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);}
h1,h2,h3,h4,.brand,.logo{font-family:var(--font-body);}
button{font-family:var(--font-body);}