:root{
  --bg:#06121a; --surface:#0f1f2b; --text:#f8fafc; --muted:#94a3b8; --border:#1e2e3e;
  --primary:#d4af37; --primary-600:#c9a84c; --danger:#ef4444; --ok:#10b981;
  /* Gold accent tokens — the values templates previously hardcoded as
     var(--accent,#c9a84c) fallbacks. Defined here so the attendance module
     (attendance.css) can override them to blue; unchanged everywhere else. */
  --accent:#c9a84c; --accent-soft:#e8d48b; --on-accent:#1a1300;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow:0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.5);
  --radius:12px;
  --gold-glow:0 0 20px rgba(212,175,55,0.15);
}

/* Light mode override */
body.light{
  --bg:#f3fafd; --surface:#ffffff; --text:#102033; --muted:#5d6a7d; --border:#e2e8f0;
  --primary:#b8922e; --primary-600:#a67f1a; --danger:#dc2626; --ok:#059669;
  --shadow-sm:0 1px 2px rgba(15,23,42,0.04);
  --shadow:0 2px 8px rgba(15,23,42,0.06);
  --shadow-lg:0 8px 24px rgba(15,23,42,0.08);
  --gold-glow:0 0 20px rgba(184,146,46,0.1);
}

body.light .header{background:rgba(255,255,255,0.85)}
body.light .card{background:#fff;backdrop-filter:none}
body.light .table thead th{background:#f8fafc;color:#334155}
body.light .table tbody tr:hover{background:#f8fafc}
body.light .sug-item:hover,body.light .sug-item.active{background-color:#f1f5f9}
body.light .sug-name{color:#111827}
body.light input,body.light select,body.light textarea{background:#fff;color:#1e293b;border-color:#cbd5e1}
body.light input::placeholder{color:#94a3b8}
body.light select option{background:#fff;color:#1e293b}

/* ── 2026-05-28 audit fixes: light-theme overrides for components that
   were hard-coded to dark colors. Without these the avatar/help-box/CSV
   import preview header stay dark on a light page. ───────────────── */
body.light .tcbar-userbtn .u-avatar{
  background:linear-gradient(135deg,#94a3b8,#475569) !important;
  color:#fff;
}
body.light .help-box{
  background:rgba(15,23,42,.04) !important;
  color:var(--muted);
}
body.light .help-box b{color:var(--text)}
body.light .help-box code{
  background:rgba(15,23,42,.06);
  color:#a16207;
}
body.light .preview thead th{
  background:#f1f5f9 !important;
  color:#475569 !important;
}
body.light .preview tbody tr.invalid{background:rgba(239,68,68,.05)}
body.light .summary-bar{background:rgba(15,23,42,.03) !important}
body.light .bulk-bar{box-shadow:0 4px 14px rgba(15,23,42,.08)}
body.light .row-status.ok{color:#059669}
body.light .row-status.bad{color:#dc2626}
body.light .err{color:#dc2626}
body.light .pill.ok{background:rgba(16,185,129,.1);color:#047857;border-color:rgba(16,185,129,.4)}
body.light .pill.bad{background:rgba(239,68,68,.08);color:#b91c1c;border-color:rgba(239,68,68,.4)}
body.light .pill.muted{background:rgba(15,23,42,.05);color:#64748b}
body.light .cell-input{background:#fff !important;color:#0f172a !important;border-color:#cbd5e1}
body.light .modal-backdrop{background:rgba(15,23,42,.5)}
body.light .banner.ok{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.3);color:#065f46}
body.light .banner.bad{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.3);color:#991b1b}

/* ── 2026-05-28 audit fixes: mobile responsive tweaks ───────────────── */
/* iPhone-SE-ish (<400px): tighten the center hero + topbar so they fit */
@media(max-width:400px){
  .center-hero{padding:6px 0 4px;gap:8px}
  .center-hero .ch-logo,
  .center-hero .ch-logo-placeholder{width:36px;height:36px;border-radius:9px}
  .center-hero .ch-name{font-size:.92rem}
  .center-hero .ch-name-en{display:none}
}

/* Generic numeric cell — replaces the dozens of inline
   style="direction:ltr;text-align:left" duplicated across templates. */
.numeric, .num-cell{direction:ltr;text-align:left;font-variant-numeric:tabular-nums;font-family:Menlo,Consolas,monospace}

/* Universal disabled state — applies to all button variants that don't
   already have their own disabled rule. */
button[disabled],.btn[disabled],.btn:disabled{
  opacity:.55!important;cursor:not-allowed!important;
  filter:saturate(.5);
  box-shadow:none!important;
  transform:none!important;
}

/* Focus visibility for keyboard nav (accessibility audit gap) */
.btn-dept:focus-visible,.btn-pay:focus-visible,.btn-print:focus-visible,
.tcbar-tab:focus-visible,.tcbar-userbtn:focus-visible,
.tcbar-icon-btn:focus-visible,.tcbar-dd-item:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* Theme toggle button */
.theme-toggle{
  position:fixed; top:14px; left:14px; z-index:9999;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:var(--shadow);
  transition:all .2s ease;
}
.theme-toggle:hover{ transform:scale(1.1); box-shadow:var(--shadow-lg); }

/* Inline variant — used after common.js relocates the button into nav-bar */
.theme-toggle.theme-toggle-inline{
  position:static; width:34px; height:34px;
  margin:0 2px; box-shadow:none; font-size:16px;
}
.theme-toggle.theme-toggle-inline:hover{
  transform:scale(1.08); background:rgba(212,175,55,0.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Kill page-level horizontal scroll (the sideways jitter on mobile). 'clip' (not
   'hidden') does NOT create a scroll container, so the sticky topbar still works.
   Wide tables stay reachable — they scroll inside their own .table-wrap box. */
html{overflow-x:clip}
/* Mobile (≤820px): hide scrollbars for a native-app feel — the visible grey
   tracks felt "in the way" on phones (2026-06-13). Scrolling still works
   (overflow is untouched); desktop keeps its normal scrollbars. */
@media (max-width: 820px), (pointer: coarse) and (max-width: 1240px){
  *{scrollbar-width:none;-ms-overflow-style:none}
  *::-webkit-scrollbar{display:none;width:0;height:0}
}
body{
  background-color:var(--bg);
  color:var(--text);
  font-family:'Cairo',"IBM Plex Sans Arabic",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  min-height:100vh;
}
/* A2 Ocean — three large blurred radial blobs (teal top-right, blue
   bottom-left, cyan center). Painted on a fixed compositor layer
   (body::before) instead of a background-attachment:fixed body image,
   so scrolling never forces a full-viewport gradient repaint
   (perf fix 2026-07-27 — the "heavier on PC" symptom on iGPUs).
   Same stack, same geometry: the pseudo is viewport-sized, so the
   blobs sit exactly where the fixed-attachment version put them and
   stay put while content scrolls. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse 1000px 800px at 100% 0%, rgba(20,184,166,0.22), transparent 60%),
    radial-gradient(ellipse 800px 700px at 0% 100%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(ellipse 700px 600px at 50% 50%, rgba(6,182,212,0.12), transparent 65%);
  background-repeat:no-repeat;
}
body.light::before{
  background-image:
    radial-gradient(ellipse 1000px 800px at 100% 0%, rgba(20,184,166,0.16), transparent 60%),
    radial-gradient(ellipse 800px 700px at 0% 100%, rgba(59,130,246,0.11), transparent 60%),
    radial-gradient(ellipse 700px 600px at 50% 50%, rgba(6,182,212,0.09), transparent 65%);
}
/* The attendance module (attendance.css) paints its own blue blobs
   directly on body.att-mod with !important — before this change they
   REPLACED the Ocean stack there. Keep that: no Ocean layer under the
   att-mod skin. */
body.att-mod::before{ display:none; }

.container{max-width:1100px;margin:20px auto;padding:0 16px}

/* -------------------- */
/* Header */
/* -------------------- */
.header{
  background:rgba(21,27,43,0.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:0;
  z-index:100;
}
.header .wrap{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{display:flex;align-items:center;gap:14px}
.logoimg{
  width:52px;
  height:52px;
  border-radius:var(--radius);
  object-fit:contain;
  background:var(--surface);
  border:1px solid var(--border);
  padding:5px;
  box-shadow:var(--shadow-sm);
}
.brand .title{display:flex;flex-direction:column}
.brand .ar{font-weight:800;font-size:1.15rem;color:var(--text)}
.brand .en{font-size:.82rem;color:var(--muted);letter-spacing:0.02em}
.nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.nav-spacer{flex:1}
.nav-hamburger{
  display:none;font-size:1.5rem;background:none;border:1px solid var(--border);
  color:var(--text);cursor:pointer;padding:4px 10px;border-radius:8px;
  transition:all .3s;
}
.nav-hamburger:hover{border-color:var(--primary);color:var(--primary)}
.nav-hamburger.open{background:rgba(212,175,55,0.1);border-color:var(--primary);color:var(--primary)}

/* -------------------- */
/* Cards & layout */
/* -------------------- */
.card{
  background:rgba(21,27,43,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}

.flash{
  background:rgba(212,175,55,0.12);border:1px solid rgba(212,175,55,0.3);color:var(--primary);margin:12px 0;padding:10px 14px;border-radius:10px;
  font-weight:600;font-size:.9rem;
}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

/* -------------------- */
/* Forms */
/* -------------------- */
.form-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin:8px 0;
  flex-wrap:wrap;
  position:relative;
}
.form-row label{min-width:120px;color:var(--muted);font-weight:600;font-size:.9rem}

input,select,textarea{
  background:rgba(21,27,43,0.8);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
  outline:none;
  font-family:inherit;
  font-size:.9rem;
  color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(212,175,55,.15)
}
input::placeholder{color:var(--muted)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
select:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px rgba(21,27,43,0.95) inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text) !important;
  transition:background-color 5000s ease-in-out 0s;
}
body.light input:-webkit-autofill,body.light input:-webkit-autofill:hover,body.light input:-webkit-autofill:focus,
body.light select:-webkit-autofill,body.light textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:#1e293b !important;
}
select option{background:var(--surface);color:var(--text)}
textarea{width:100%;min-height:84px}

/* -------------------- */
/* Tables */
/* -------------------- */
/* Horizontal-scroll wrapper for wide tables — applies at ALL widths (scrollbar
   only shows when the table actually overflows). _topbar.html auto-wraps any
   unwrapped <table> in this, so no data table overflows the viewport. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:right}
.table thead th{background:rgba(30,41,59,0.6);color:var(--muted);font-weight:800;font-size:.85rem}
.table tbody tr:hover{background:rgba(212,175,55,0.04)}
.table tfoot td{font-weight:800;border-top:2px solid var(--border)}

/* Category blocks */
.cat{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cat>h4{margin:0;padding:10px 14px;background:rgba(30,41,59,0.6);border-bottom:1px solid var(--border);font-size:1rem;font-weight:800;color:var(--text)}
.cat table{width:100%;border-collapse:collapse}
.cat td,.cat th{padding:8px 10px;border-bottom:1px dashed var(--border)}

.actions{display:flex;gap:8px;margin-top:12px}

/* -------------------- */
/* Badges / status pills */
/* -------------------- */
.status-ready{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(16,185,129,0.12);color:#34d399;border:1px solid rgba(16,185,129,0.3);
  padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:700;
}
.status-notready{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.3);
  padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:700;
}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(212,175,55,0.1);color:var(--primary);border:1px solid rgba(212,175,55,0.25);
  padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:700;
}

.kv{display:flex;gap:12px;flex-wrap:wrap}
.kv .item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px}

/* -------------------- */
/* Receipt */
/* -------------------- */
.receipt{max-width:720px;margin:0 auto;padding:22px 26px;border:1px dashed var(--border);border-radius:10px;background:var(--surface)}
.receipt-header{display:flex;align-items:center;gap:12px}
.receipt-header .clinic{display:flex;flex-direction:column;text-align:right}
.receipt-header .clinic .ar{font-size:1.25rem;font-weight:800;color:var(--text)}
.receipt-header .clinic .en{font-size:.9rem;color:var(--muted)}
.receipt-meta{display:flex;gap:22px;justify-content:flex-start;margin:12px 0 6px}
.receipt-meta div{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
#lists{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
#lists h4{margin:0 0 6px 0;font-size:1rem;font-weight:800;color:var(--text);border-bottom:1px dashed var(--border);padding-bottom:6px}
#lists ul{margin:0;padding-inline-start:18px}

/* -------------------- */
/* Copyright badge */
/* -------------------- */
.copyright-badge {
  position: fixed;
  bottom: 10px;
  left: 10px;
  font-size: 11px;
  color: var(--primary);
  opacity: 0.7;
  z-index: 999;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Utility */
.no-print{}

/* -------------------- */
/* Print styles */
/* -------------------- */
@media print{
  body{background:#fff;color:#000}
  /* the Ocean blob layer lives on body::before now — the old
     `background:#fff` shorthand used to reset it; keep print clean */
  body::before{display:none!important}
  .header, header, .actions, .flash, .no-print{display:none!important}
  form>.cat, form>.table{display:none!important}
  .print-only{display:block!important;box-shadow:none;border:none}
  .copyright-badge{display:none!important}
  .card{background:#fff;border-color:#ddd}
  .table thead th{background:#f0f0f0;color:#333}
}

/* -------------------- */
/* Buttons */
/* -------------------- */
/* ══════════════════════════════════════
   BUTTONS — Creative glassmorphism style
   ══════════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(21,27,43,0.7);
  /* backdrop-filter:blur(12px) removed 2026-07-27 — 80+ blurred buttons
     on a busy reviews page were a measured paint cost; the solid-ish
     rgba background carries the look on its own. */
  color:var(--text);
  font-weight:700;
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
/* Shimmer sweep on hover */
.btn::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition:left .5s ease;
}
.btn:hover::before{left:100%}
/* Soft inner glow line at top */
.btn::after{
  content:'';
  position:absolute;
  top:0;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  opacity:0;
  transition:opacity .3s ease;
}
.btn:hover::after{opacity:1}
.btn:hover{
  background:rgba(30,41,59,0.85);
  border-color:rgba(255,255,255,.12);
  color:#f1f5f9;
  transform:translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0,0,0,.2),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.06) inset;
}
.btn:active{
  transform:translateY(0) scale(0.97);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition-duration:.1s;
}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none;filter:grayscale(.3)}

/* Primary — Gold with animated glow pulse */
.btn.primary{
  background:linear-gradient(135deg, #d4af37 0%, #c9a84c 40%, #b8922e 100%);
  color:#0b0f19;
  border:none;
  font-weight:800;
  box-shadow:0 4px 16px rgba(212,175,55,.3), 0 0 0 1px rgba(232,212,139,.2) inset;
  text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.btn.primary::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.btn.primary::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.btn.primary:hover{
  background:linear-gradient(135deg, #e8d48b 0%, #d4af37 40%, #c9a84c 100%);
  transform:translateY(-3px);
  box-shadow:
    0 8px 32px rgba(212,175,55,.4),
    0 0 60px rgba(212,175,55,.08),
    0 0 0 1px rgba(232,212,139,.3) inset;
}
.btn.primary:active{
  transform:translateY(0) scale(0.97);
  box-shadow:0 2px 10px rgba(212,175,55,.3);
}

/* Secondary — Subtle muted */
.btn.secondary{
  background:rgba(15,23,42,0.5);
  border-color:rgba(148,163,184,.12);
  color:var(--muted);
}
.btn.secondary:hover{
  color:var(--text);
  background:rgba(30,41,59,0.7);
  border-color:rgba(148,163,184,.2);
}

/* Danger — Red glass */
.btn.danger{
  background:rgba(239,68,68,0.08);
  color:#f87171;
  border-color:rgba(239,68,68,.18);
}
.btn.danger::after{
  background:linear-gradient(90deg, transparent, rgba(239,68,68,.15), transparent);
}
.btn.danger:hover{
  background:rgba(239,68,68,0.15);
  color:#fca5a5;
  border-color:rgba(239,68,68,.3);
  box-shadow:0 6px 20px rgba(239,68,68,.12), 0 0 0 1px rgba(239,68,68,.1) inset;
}
.btn.danger:active{background:rgba(239,68,68,0.2)}

/* OK — Green glass */
.btn.ok{
  background:rgba(16,185,129,0.08);
  color:#34d399;
  border-color:rgba(16,185,129,.18);
}
.btn.ok::after{
  background:linear-gradient(90deg, transparent, rgba(16,185,129,.15), transparent);
}
.btn.ok:hover{
  background:rgba(16,185,129,0.15);
  color:#6ee7b7;
  border-color:rgba(16,185,129,.3);
  box-shadow:0 6px 20px rgba(16,185,129,.12), 0 0 0 1px rgba(16,185,129,.1) inset;
}
.btn.ok:active{background:rgba(16,185,129,0.2)}

/* Optional variants */
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-secondary{background:rgba(30,41,59,0.6);border-color:var(--border);color:var(--muted)}
.btn-danger{background:rgba(239,68,68,0.12);color:#f87171;border-color:rgba(239,68,68,0.3)}
.btn-danger:hover{background:rgba(239,68,68,0.2);color:#fca5a5}

/* ── Light mode button overrides ── */
body.light .btn{
  background:rgba(255,255,255,.75);
  /* backdrop-filter removed 2026-07-27 (paint cost) — see .btn above */
  border-color:rgba(0,0,0,.06);
  color:#334155;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
body.light .btn:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(0,0,0,.1);
  color:#0f172a;
  box-shadow:0 6px 20px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.02) inset;
}
body.light .btn::before{
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.03), transparent);
}
body.light .btn::after{
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.04), transparent);
}
body.light .btn.primary{
  background:linear-gradient(135deg, #c9a84c 0%, #b8922e 100%);
  color:#1a1300;border:none; /* dark-on-gold ink (matches the dark theme's gold-button convention) */
  box-shadow:0 4px 16px rgba(184,146,46,.2);
}
body.light .btn.primary:hover{
  background:linear-gradient(135deg, #d4af37 0%, #c9a84c 100%);
  box-shadow:0 8px 28px rgba(184,146,46,.3);
}
body.light .btn.secondary{background:rgba(248,250,252,.8);color:#64748b;border-color:rgba(0,0,0,.06)}
body.light .btn.danger{background:rgba(239,68,68,0.05);color:#dc2626;border-color:rgba(239,68,68,.15)}
body.light .btn.danger:hover{background:rgba(239,68,68,0.1);box-shadow:0 4px 16px rgba(239,68,68,.08)}
body.light .btn.ok{background:rgba(16,185,129,0.05);color:#059669;border-color:rgba(16,185,129,.15)}
body.light .btn.ok:hover{background:rgba(16,185,129,0.1);box-shadow:0 4px 16px rgba(16,185,129,.08)}

/* Status button */
.btn-status.unready{
  background:rgba(212,175,55,0.1);
  color:var(--primary);
  border-color:rgba(212,175,55,0.25);
}
.btn-status.unready:hover{
  background:rgba(212,175,55,0.18);
  color:#e8d48b;
  border-color:rgba(212,175,55,0.4);
}
.btn-status.ready{
  background:rgba(16,185,129,0.1);
  color:#34d399;
  border-color:rgba(16,185,129,0.25);
}
.btn-status.ready:hover{
  background:rgba(16,185,129,0.18);
  color:#6ee7b7;
  border-color:rgba(16,185,129,0.4);
}
/* Paid pill is a static <span> — don't let it look clickable */
.btn-status.ready{pointer-events:none}
/* Light-theme overrides — body.light .btn otherwise out-specifies these states
   (mirrors the body.light .btn.ok/.danger pattern) */
body.light .btn-status.unready{
  background:rgba(184,146,46,.10);
  color:#8a690f;
  border-color:rgba(184,146,46,.35);
}
body.light .btn-status.ready{
  background:rgba(16,185,129,.08);
  color:#047857;
  border-color:rgba(16,185,129,.3);
}

/* Action cell buttons */
td.actions .btn{margin-inline-start:6px}

/* -------------------- */
/* Patient suggestions/autocomplete */
/* -------------------- */
.suggestions-box,
.suggestions{
  position:absolute;
  top:calc(100% + 2px);
  right:0;
  left:0;
  background:var(--surface);
  border:1px solid var(--border);
  max-height:260px;
  overflow-y:auto;
  z-index:1000;
  box-shadow:var(--shadow-lg);
  border-radius:10px;
  display:none;
}

.sug-item{
  padding:8px 12px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
  transition:background-color 0.12s ease-in-out;
  border-top:1px solid rgba(30,41,59,0.5);
}
.sug-item:first-child{border-top:none}
.sug-item:hover,.sug-item.active{background-color:rgba(212,175,55,0.08)}

.sug-name{font-weight:700;color:var(--text);font-size:13px}
.sug-meta{
  font-size:11px;
  color:var(--muted);
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.sug-label{font-size:10px;color:#64748b;margin-left:2px}

/* -------------------- */
/* Responsive tweaks */
/* -------------------- */
@media (max-width:900px){
  .header .wrap{flex-direction:column;gap:10px}
  .nav{justify-content:center}
  .grid{grid-template-columns:1fr}
  .receipt-meta{flex-wrap:wrap}
  #lists{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .dept-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

@media (max-width:768px){
  .nav-hamburger{display:block}
  .nav{
    display:none;flex-direction:column;width:100%;gap:4px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:10px;margin-top:6px;box-shadow:var(--shadow-lg);
  }
  .nav.open{display:flex}
  .nav .btn{width:100%;text-align:center;justify-content:center}
  .nav-spacer{display:none}
  .header .wrap{flex-direction:row;flex-wrap:wrap}
  .brand{flex:1}
}

@media (max-width:600px){
  .container{padding:0 10px;margin:12px auto}
  .header .wrap{padding:10px 12px}
  .brand .ar{font-size:1rem}
  .brand .logoimg{width:40px;height:40px}
  .nav .btn{font-size:12px;padding:8px 12px}
  .card{padding:14px}
  .table th,.table td{padding:8px 8px;font-size:.82rem}
  .form-row{flex-direction:column;align-items:stretch}
  .form-row label{min-width:auto;margin-bottom:2px}
  input,select,textarea{font-size:.9rem;padding:10px 12px}
  .receipt{padding:14px 16px;max-width:100%}
  .receipt-header .clinic .ar{font-size:1.05rem}
  .stats-row{grid-template-columns:1fr 1fr;gap:8px}
  .kv{flex-direction:column}
  .actions{flex-wrap:wrap}
  /* Make tables horizontally scrollable on mobile */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* -------------------- */
/* Confirmation Modal */
/* -------------------- */
.confirm-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); z-index:10000; justify-content:center; align-items:center; }
.confirm-overlay.open { display:flex; }
.confirm-modal { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2rem; max-width:380px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.confirm-modal .confirm-icon { font-size:2.5rem; margin-bottom:0.5rem; }
.confirm-modal h3 { font-size:1.1rem; font-weight:800; margin:0 0 8px; color:var(--text); }
.confirm-modal p { font-size:.9rem; color:var(--muted); margin:0 0 1.5rem; }
.confirm-actions { display:flex; gap:8px; justify-content:center; }
.btn-confirm-yes { background:#ef4444; color:#fff; border:none; padding:10px 24px; border-radius:10px; font-weight:800; font-size:.9rem; cursor:pointer; font-family:inherit; transition:background .2s; }
.btn-confirm-yes:hover { background:#dc2626; }
.btn-confirm-no { background:var(--surface); color:var(--text); border:1px solid var(--border); padding:10px 24px; border-radius:10px; font-weight:700; font-size:.9rem; cursor:pointer; font-family:inherit; }

/* -------------------- */
/* Toast Notifications */
/* -------------------- */
.toast-container { position:fixed; bottom:20px; inset-inline-start:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { padding:12px 20px; border-radius:10px; background:var(--surface); border:1px solid var(--border); border-right:4px solid var(--primary); color:var(--text); font-size:.88rem; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,0.2); animation:toastIn .3s ease; min-width:250px; font-family:'Cairo',sans-serif; }
.toast.success { border-right-color:#10b981; }
.toast.error { border-right-color:#ef4444; }
.toast.warning { border-right-color:#eab308; }
.toast.fadeout { animation:toastOut .3s ease forwards; }
/* RTL app: toasts anchor at the inline-start (right) edge and slide in from it */
@keyframes toastIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut { from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:0} }

/* -------------------- */
/* Loading spinner */
/* -------------------- */
.spinner { display:inline-block; width:20px; height:20px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* -------------------- */
/* Breadcrumbs */
/* -------------------- */
.breadcrumb-bar { display:flex; align-items:center; gap:6px; margin-bottom:16px; font-size:.82rem; flex-wrap:wrap; }
.breadcrumb-bar a { color:var(--muted); text-decoration:none; transition:color .2s; }
.breadcrumb-bar a:hover { color:var(--primary); }
.bc-sep { color:var(--muted); opacity:0.3; }
.bc-current { font-weight:700; color:var(--text); }

/* -------------------- */
/* Toggle switches (2026-06-01) */
/* -------------------- */
/* All checkboxes render as pill toggles for a more polished feel. "On" fills
   with --primary (gold in the app, blue inside the نظام الحضور att-mod skin →
   auto-matches the active module). RTL: off = knob at the right (start);
   on = track filled + knob slides to the left (end). !important on size beats
   per-page inline width:16/18px/auto. Hidden (display:none) "picks" checkboxes
   behind procedure cards keep display:none, so they stay invisible. */
input[type="checkbox"]{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  box-sizing:border-box;
  position:relative;
  flex:0 0 auto;
  width:42px !important; height:24px !important;
  min-width:42px; padding:0;
  margin:0 2px;
  border:none !important;
  border-radius:999px !important;
  background:var(--border);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  vertical-align:middle;
  cursor:pointer;
  transition:background-color .2s ease;
}
input[type="checkbox"]::before{
  content:"";
  position:absolute;
  top:3px; right:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:right .2s ease;
}
/* Light theme: --border (#e2e8f0) is ~invisible on white cards — use a mid-gray
   OFF track so unchecked toggles stay visible; checked state unchanged */
body.light input[type="checkbox"]:not(:checked){
  background:#aeb9c9;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.12);
}
input[type="checkbox"]:checked{ background:var(--primary); box-shadow:none; }
input[type="checkbox"]:checked::before{ right:21px; }
input[type="checkbox"]:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
input[type="checkbox"]:disabled{ opacity:.5; cursor:not-allowed; }

/* -------------------- */
/* Flash toasts (2026-06-02) */
/* -------------------- */
/* Phone-style notifications: flash messages slide DOWN from the top-center,
   linger ~2s, then auto-dismiss. Replaces the old static .flash banners
   (the per-page banners are consumed in _topbar.html and re-fired as these). */
#flashToasts{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:14px;pointer-events:none}
.flash-toast{pointer-events:auto;min-width:230px;max-width:92vw;padding:13px 20px;border-radius:14px;font-weight:700;font-size:.94rem;color:#fff;background:var(--primary);box-shadow:0 12px 32px rgba(0,0,0,.20);display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-130%);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.85,.25,1)}
.flash-toast.show{opacity:1;transform:translateY(0)}
.flash-toast.success{background:linear-gradient(180deg,#16a34a,#15803d)}
.flash-toast.error{background:linear-gradient(180deg,#dc2626,#b91c1c)}
.flash-toast.warn{background:linear-gradient(180deg,#f59e0b,#d97706)}
.flash-toast .ft-ic{font-size:1.05rem;line-height:1}