/* ==========================================================================
   Clinic UI theme — shared skin for staff pages (added 2026-11-05)
   Loaded AFTER each page's own <style>, so it refines without changing layout.
   Pages: assistant_dashboard, doctor_dashboard, admin_settings, appointment
   ========================================================================== */
:root{
  --cx-ink:#0f1b2d; --cx-ink-2:#334155; --cx-muted:#64748b; --cx-faint:#94a3b8;
  --cx-line:#e3e8ef; --cx-line-2:#eef2f6; --cx-bg:#f4f6fa; --cx-card:#fff;
  --cx-navy:#0a1220; --cx-navy-2:#101b2d;
  --cx-brand:#0e7490; --cx-brand-2:#0b5f76; --cx-brand-soft:#e7f4f7; --cx-brand-line:#bfe0e8;
  --cx-amber:#b45309; --cx-amber-soft:#fef6e7; --cx-amber-line:#f6d79b;
  --cx-green:#15803d; --cx-green-soft:#ecf8f0; --cx-green-line:#b7e2c4;
  --cx-red:#b42318; --cx-red-soft:#fef3f2; --cx-red-line:#fecdca;
  --cx-violet:#6d28d9;
  --cx-r:14px; --cx-r-sm:10px;
  --cx-shadow:0 1px 2px rgba(15,27,45,.04),0 4px 14px rgba(15,27,45,.05);
  --cx-font:'Inter','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── Base ── */
html body{font-family:var(--cx-font);background:var(--cx-bg);color:var(--cx-ink);-webkit-font-smoothing:antialiased;letter-spacing:-.003em}
body .num,body .stat-value,body .stat-val,body .kpi-val,body .token-stat-val{font-variant-numeric:tabular-nums}

/* ── App header (all staff pages) ── */
body .app-header,body .clinic-header{background:var(--cx-navy)!important;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.06);padding:.7rem 1.25rem}
body .app-header img[src*="logo"],body .app-header-logo,body .clinic-logo{width:44px!important;height:44px!important;border-radius:11px!important;background:#fff!important;padding:4px;object-fit:contain;flex-shrink:0}
body .app-header-logo img{border-radius:0!important}
body .clinic-logo{font-size:0!important;background:#fff url(../logo.png) center/80% no-repeat!important}
body .app-header-doc,body .clinic-doctor-name{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;color:#fff}
body .app-header-desig,body .clinic-designation{font-size:.8rem;color:#8a9bb2;opacity:1;font-weight:500}
body .clinic-name-line,body .clinic-meta{color:#8a9bb2;opacity:1}
body .app-header-center{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#e2e8f0;font-weight:600;font-size:.8rem;letter-spacing:.02em;padding:6px 16px}
body .app-header-right #openReportsBtn,body .app-header-right a[href*="logout"],body .app-header-right .logout-btn{
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;color:#e2e8f0!important;
  border-radius:9px!important;padding:6px 14px!important;font-size:.8rem!important;font-weight:600!important;box-shadow:none!important}
body .app-header-right #openReportsBtn:hover,body .app-header-right a[href*="logout"]:hover{background:rgba(255,255,255,.14)!important;transform:none!important}
body .clinic-meta .btn{border-radius:9px;font-weight:600}
body .refresh-badge{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#cbd5e1;font-variant-numeric:tabular-nums}
body .app-header .live-dot{background:#3ecf8e}

/* Date / status strip under the header */
body .date-banner,body .date-bar{background:#fff!important;color:var(--cx-ink-2)!important;border-bottom:1px solid var(--cx-line);font-weight:500;font-size:.84rem;padding:8px 1.25rem}
body .date-banner strong,body .date-bar strong{color:var(--cx-brand)}
body .date-banner.sunday,body .date-bar.sunday{box-shadow:inset 3px 0 0 var(--cx-amber)}
body .top-nav{box-shadow:none;border-bottom:1px solid var(--cx-line)}

/* ── Stat cards ── */
body .stat-card{background:#fff;border:1px solid var(--cx-line)!important;border-radius:var(--cx-r);box-shadow:var(--cx-shadow);padding:14px 16px;text-align:left;position:relative;overflow:hidden}
body .stat-card::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--cx-faint)}
body .stat-card.waiting-card::before,body .stat-card.s-wait::before{background:var(--cx-amber)}
body .stat-card.inprogress-card::before,body .stat-card.s-prog::before{background:var(--cx-brand)}
body .stat-card.completed-card::before,body .stat-card.s-done::before{background:var(--cx-green)}
body .stat-card.total-card::before,body .stat-card.s-total::before{background:var(--cx-violet)}
body .stat-card:hover{transform:none}
body .stat-icon{display:none}
body .stat-label{font-size:.72rem;font-weight:600;color:var(--cx-muted);letter-spacing:.04em}
body .stat-value,body .stat-val{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;margin-top:2px}
body .stat-card.waiting-card .stat-value,body .stat-card.s-wait .stat-val{color:var(--cx-amber)!important}
body .stat-card.inprogress-card .stat-value,body .stat-card.s-prog .stat-val{color:var(--cx-brand)!important}
body .stat-card.completed-card .stat-value,body .stat-card.s-done .stat-val{color:var(--cx-green)!important}
body .stat-card.total-card .stat-value,body .stat-card.s-total .stat-val{color:var(--cx-ink)!important}

/* ── Cards / sections ── */
body .form-card,body .queue-card,body .card,body .section-card,body .card-box,body .now-consulting-card,body .report-table-card{background:#fff;border:1px solid var(--cx-line);border-radius:var(--cx-r);box-shadow:var(--cx-shadow)}
body .form-card-header{background:#fff!important;color:var(--cx-ink)!important;border-bottom:1px solid var(--cx-line);font-weight:700;font-size:.95rem;padding:14px 18px}
body .form-card-header.edit-mode{background:var(--cx-amber-soft)!important;color:var(--cx-amber)!important;border-bottom-color:var(--cx-amber-line)}
body .form-card-body{padding:18px}
body .queue-header,body .card-head{background:#fff!important;border-bottom:1px solid var(--cx-line);padding:12px 16px}
body .queue-title,body .card-head{color:var(--cx-ink)!important;font-weight:700}
body .card-head{font-size:.74rem;letter-spacing:.08em}
body .section-title{color:var(--cx-ink);font-weight:700;border-bottom:1px solid var(--cx-line)}
body .queue-header-count,body .queue-title .badge{background:var(--cx-ink)!important;color:#fff;border-radius:7px;font-variant-numeric:tabular-nums}

/* ── Forms ── */
body .form-label{color:var(--cx-ink-2);font-size:.74rem;font-weight:600;letter-spacing:.03em}
body .form-control,body .form-select,body .rf-field input,body .rf-field select{border:1px solid #d5dde7;border-radius:var(--cx-r-sm);font-size:.92rem;padding:.5rem .75rem;color:var(--cx-ink);background-color:#fff}
body .form-control:focus,body .form-select:focus,body .rf-field input:focus,body .rf-field select:focus{border-color:var(--cx-brand);box-shadow:0 0 0 3px rgba(14,116,144,.14);outline:none}
body .form-control::placeholder{color:#a3b0c0}
body .input-group-text{background:#f8fafc;border-color:#d5dde7;color:var(--cx-muted);border-radius:var(--cx-r-sm)}
body .field-hint{color:var(--cx-faint)}

/* ── Primary buttons ── */
body .btn-add,body .btn-call,body .btn-book,body .rf-btn-primary,body .btn-primary{background:var(--cx-brand)!important;border:0;border-color:var(--cx-brand)!important;color:#fff!important;border-radius:var(--cx-r-sm);font-weight:600;box-shadow:none}
body .btn-add:hover,body .btn-call:hover,body .btn-book:hover,body .rf-btn-primary:hover,body .btn-primary:hover{background:var(--cx-brand-2)!important;opacity:1;transform:none}
body .btn-edit-save{background:var(--cx-amber)!important;border-radius:var(--cx-r-sm);font-weight:600}
body .btn-complete{background:var(--cx-green);border-radius:var(--cx-r-sm);font-weight:600}
body .btn-defer,body .q-btn-defer,body .btn-defer-q{background:var(--cx-amber-soft);color:var(--cx-amber);border:1px solid var(--cx-amber-line);border-radius:var(--cx-r-sm)}
body .btn-recall,body .q-btn-recall,body .btn-recall-q{background:var(--cx-brand-soft);color:var(--cx-brand-2);border:1px solid var(--cx-brand-line);border-radius:var(--cx-r-sm)}
body .q-btn{border-radius:8px;font-weight:600;font-size:.7rem}
body .q-btn-call{background:var(--cx-brand)}
body .q-btn-call:hover{background:var(--cx-brand-2)}

/* Small action pills on queue cards */
body .btn-action,body .btn-wa-rec-q,body .btn-wa-receipt{border-radius:8px;font-weight:600;font-size:.72rem;padding:4px 10px;border-width:1px}
body .btn-edit-q,body .btn-print-q{border-color:var(--cx-line)!important;color:var(--cx-ink-2)!important;background:#fff!important}
body .btn-edit-q:hover,body .btn-print-q:hover{border-color:var(--cx-brand)!important;color:var(--cx-brand)!important;background:var(--cx-brand-soft)!important}
body .btn-delete-q{border-color:var(--cx-red-line);color:var(--cx-red)}
body .btn-delete-q:hover{background:var(--cx-red);color:#fff}

/* ── Queue items ── */
body .patient-card,body .q-item{background:#fff;border:1px solid var(--cx-line);border-radius:12px;box-shadow:none}
body .patient-card:hover,body .q-item:hover{border-color:#cdd6e1;background:#fbfcfe;box-shadow:none}
body .patient-card.first-card,body .q-item.next-item{border-color:var(--cx-brand-line);background:var(--cx-brand-soft);box-shadow:inset 3px 0 0 var(--cx-brand)}
body .token-bubble,body .q-token,body .token-sq,body .done-token{border-radius:10px;font-variant-numeric:tabular-nums;font-weight:700;box-shadow:none}
body .token-bubble{background:var(--cx-ink)}
body .token-bubble.first,body .q-token.q-next{background:var(--cx-brand)!important;color:#fff}
body .q-token{background:#f1f5f9;color:var(--cx-ink)}
body .token-sq{background:var(--cx-brand)}
body .token-circle{background:var(--cx-brand);box-shadow:0 6px 18px rgba(14,116,144,.28)}
body .patient-name,body .q-name,body .current-name,body .next-name{color:var(--cx-ink)}
body .patient-meta,body .q-meta,body .current-meta,body .next-meta{color:var(--cx-muted)}
body .next-wrap{background:var(--cx-green-soft);border:1px solid var(--cx-green-line);border-radius:12px}
body .reason-box{background:#f8fafc;border-left-color:var(--cx-brand)}
body .cat-new,body .badge-new{background:var(--cx-brand-soft)!important;color:var(--cx-brand-2)!important}
body .cat-followup,body .cat-fu,body .badge-followup{background:var(--cx-amber-soft)!important;color:var(--cx-amber)!important}
body .token-time-pill{background:#f8fafc;border-color:var(--cx-line);color:var(--cx-muted)}

/* Now-consulting panel (assistant) */
body .now-consulting-card{background:#fff}
body .now-consulting-label{color:var(--cx-brand)}
body .now-consulting-head h3{color:var(--cx-ink);font-weight:700;letter-spacing:-.01em}
body .live-pulse{background:var(--cx-green-soft);border-color:var(--cx-green-line);color:var(--cx-green)}
body .consulting-token{background:var(--cx-ink);box-shadow:none;border-radius:10px}
body .consulting-item{background:#f8fafc;border-color:var(--cx-line-2)}
body .now-consulting-empty{background:#f8fafc;border:1px dashed #cfd8e3;color:var(--cx-muted)}
body .now-consulting-empty strong,body .now-consulting-empty b{color:var(--cx-ink-2)}
body .now-consulting-empty .empty-icon{background:#fff;border:1px solid var(--cx-line)}
body .ongoing-marquee-strip{background:var(--cx-navy);border-radius:10px;box-shadow:none}
body .ongoing-marquee-label{background:var(--cx-brand)}

/* Live badges */
body .queue-live-badge{background:var(--cx-green-soft);border-color:var(--cx-green-line);color:var(--cx-green)}

/* ── Tables / reports ── */
body .table > :not(caption) > * > *{border-color:var(--cx-line-2)}
body .report-table th,body .detail-table th,body .modal-patient-table th,body .table thead th{background:#f8fafc!important;color:var(--cx-muted)!important;font-weight:600;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
body .report-stat{border-color:var(--cx-line);box-shadow:none;border-radius:12px}
body .report-stat .val{font-weight:700;color:var(--cx-ink)}
body .rf-preset{border-color:var(--cx-line);color:var(--cx-ink-2);border-radius:8px}
body .rf-preset.active{background:var(--cx-ink);border-color:var(--cx-ink);color:#fff}
body .report-filter-grid{background:#f8fafc;border-color:var(--cx-line)}
body .reports-modal,body .del-modal,body .modal-content{border:1px solid var(--cx-line);border-radius:16px;box-shadow:0 24px 60px rgba(15,27,45,.22)}
body .reports-modal-head{background:#fff;border-bottom:1px solid var(--cx-line)}
body .reports-modal-title{color:var(--cx-ink)}
body .reports-close{background:#f1f5f9;color:var(--cx-ink-2)}
body .detail-table-wrap,body .modal-patient-table-wrap{border-color:var(--cx-line)}

/* ── Admin ── */
body .admin-tabs{border-bottom:1px solid var(--cx-line)}
body .admin-tabs .nav-link{color:var(--cx-muted);font-weight:600;border:0;border-bottom:2px solid transparent;border-radius:0;background:none}
body .admin-tabs .nav-link.active{color:var(--cx-ink);background:none;border-bottom-color:var(--cx-brand)}
body .day-check label{border:1px solid var(--cx-line);color:var(--cx-ink-2);border-radius:8px;background:#fff}
body .day-check input:checked+label{background:var(--cx-brand);border-color:var(--cx-brand);color:#fff}
body .token-stat{background:#f8fafc;border-color:var(--cx-line)}
body .kpi-card{border:1px solid var(--cx-line);box-shadow:var(--cx-shadow);border-radius:var(--cx-r)}
body .kpi-val{font-weight:700;letter-spacing:-.02em}

/* ── Alerts / toasts ── */
body .alert{border-radius:var(--cx-r-sm);border-width:1px;font-size:.88rem}
body .alert-success{background:var(--cx-green-soft);border-color:var(--cx-green-line);color:#14532d}
body .alert-danger{background:var(--cx-red-soft);border-color:var(--cx-red-line);color:var(--cx-red)}
body .del-toast{background:var(--cx-ink);border-radius:10px}

/* ── Public appointment page ── */
body .header-bar{background:var(--cx-navy)!important;color:#fff;box-shadow:none}
body .header-bar p{color:#8a9bb2}
body .tab-btn{border-radius:10px;font-weight:600}
body .tab-btn.active{background:var(--cx-ink)!important;color:#fff!important;border-color:var(--cx-ink)!important}
body .window-pill{border-radius:8px;font-weight:600}
body .token-result,body .appt-result-card{border-radius:var(--cx-r);border:1px solid var(--cx-line)}

/* Scrollbars */
body ::-webkit-scrollbar{width:8px;height:8px}
body ::-webkit-scrollbar-thumb{background:#cfd8e3;border-radius:8px;border:2px solid transparent;background-clip:padding-box}

/* ── Avatars next to patient names (2026-11-05) ── */
body .nm{display:flex;align-items:center;gap:10px;min-width:0}
body .nm > span{min-width:0;overflow-wrap:anywhere}
body .q-name.nm,body .mq-name.nm{gap:8px}
body .done-name.nm{gap:6px}
body .nv-av{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--cx-line);background:#fff}
body .patient-card .nv-av{margin-top:-1px}
body .ongoing-marquee-track .nv-av{box-shadow:none;vertical-align:middle}
