/* ============================================================
   DENTALOS — Master Stylesheet v2 (Famdent-Ready)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── PALETTE SYSTEM ────────────────────────────────────────── */
:root {
  /* Base palette — Ocean Teal (default) */
  --accent: #14b8a6; --accent-dark: #0d9488; --accent-glow: rgba(20,184,166,0.25);
  --highlight: #f59e0b;
  --bg: #0a0e17; --card: #111827; --surface: #1a2235; --border: #1e293b; --border2: #2a3450;
  --text: #e2e8f0; --dim: #64748b; --dim2: #94a3b8;
  --red: #ef4444; --blue: #3b82f6; --green: #22c55e; --purple: #a855f7;
  --fg: #e2e8f0; --surface2: #0f172a;
  /* Legacy aliases */
  --teal: var(--accent); --teal-dark: var(--accent-dark); --gold: var(--highlight);
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.45);
  /* Radius */
  --radius: 8px; --radius-lg: 12px;
}
/* Palette: Royal Blue */
body.palette-royal { --accent: #3b82f6; --accent-dark: #2563eb; --accent-glow: rgba(59,130,246,0.25); --highlight: #93c5fd; --bg: #0c1525; --card: #101d33; --surface: #162544; --border: #1e3050; --border2: #2a4060; --surface2: #0c1a2e; }
/* Palette: Forest Clinic */
body.palette-forest { --accent: #10b981; --accent-dark: #059669; --accent-glow: rgba(16,185,129,0.25); --highlight: #fcd34d; --bg: #0a130e; --card: #111f17; --surface: #19291f; --border: #1e3528; --border2: #2a4535; --surface2: #0e1a12; }
/* Palette: Burgundy */
body.palette-burgundy { --accent: #e11d48; --accent-dark: #be123c; --accent-glow: rgba(225,29,72,0.25); --highlight: #f59e0b; --bg: #130a0e; --card: #1f1115; --surface: #29191f; --border: #351e28; --border2: #452a35; --surface2: #1a0e12; }
/* Palette: Slate Violet */
body.palette-violet { --accent: #8b5cf6; --accent-dark: #7c3aed; --accent-glow: rgba(139,92,246,0.25); --highlight: #94a3b8; --bg: #100e17; --card: #1a1625; --surface: #221e30; --border: #2e2840; --border2: #3a3450; --surface2: #14101f; }

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
input,button,select,textarea{font-family:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}

/* Auto-capitalize display for names */
.name-display{text-transform:capitalize}

/* ============================================================
   MENU BAR — Refined
   ============================================================ */
.menubar{background:linear-gradient(180deg,#131b2e,#0f172a);border-bottom:1px solid var(--border);display:flex;align-items:center;position:sticky;top:0;z-index:100;height:44px;padding:0 8px;box-shadow:var(--shadow-sm)}
.menu-logo{display:flex;align-items:center;gap:6px;padding:0 12px 0 4px;border-right:1px solid var(--border);margin-right:4px;height:100%}
.menu-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),var(--highlight));border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:var(--bg)}
.menu-logo-text{font-size:14px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--highlight));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.3px}
.menu-item{position:relative;padding:0 12px;height:100%;display:flex;align-items:center;font-size:12px;font-weight:500;color:var(--dim2);cursor:pointer;transition:all 0.15s}
.menu-item:hover{background:rgba(20,184,166,0.08);color:var(--text)}
.menu-item.active{color:var(--accent);background:rgba(20,184,166,0.06)}
.menu-right{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.menu-right .user-name{color:var(--dim2);font-weight:500}

/* DROPDOWN — polished */
.menu-dropdown{display:none;position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--border);border-radius:0 0 10px 10px;min-width:220px;box-shadow:var(--shadow-lg);z-index:200;padding:4px 0;backdrop-filter:blur(8px)}
.menu-item:hover .menu-dropdown{display:block}
.menu-dropdown-item{padding:9px 16px;font-size:12px;color:var(--dim2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:all 0.12s}
.menu-dropdown-item:hover{background:var(--accent-glow);color:var(--accent)}
.menu-dropdown-item .shortcut{margin-left:auto;font-size:10px;color:var(--dim);font-family:'Space Mono',monospace}
.menu-divider{height:1px;background:var(--border);margin:4px 8px}
.menu-dropdown-item.disabled{opacity:0.4;pointer-events:none}

/* CONTEXT BAR */
.context-bar{background:var(--card);border-bottom:1px solid var(--border);padding:6px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;min-height:38px}
.context-left{display:flex;align-items:center;gap:8px}
.context-breadcrumb{color:var(--dim);font-size:11px}
.context-breadcrumb span{color:var(--accent);cursor:pointer}
/* Nav history buttons */
.nav-hist-btn{transition:all 0.15s !important}
.nav-hist-btn:not([disabled]):hover{background:var(--accent-glow) !important;border-color:var(--accent) !important;color:var(--accent) !important}
.context-right{display:flex;align-items:center;gap:6px}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.main-content{padding:0;min-height:calc(100vh - 82px)}

/* BUTTONS — refined */
.btn{padding:8px 16px;border-radius:var(--radius);border:none;font-size:13px;font-weight:600;transition:all 0.18s}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:0 2px 8px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}
.btn-primary:active{transform:translateY(0);box-shadow:0 1px 4px var(--accent-glow)}
.btn-outline{background:transparent;border:1px solid var(--border2);color:var(--dim2)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.btn-gold{background:linear-gradient(135deg,var(--highlight),#d97706);color:var(--bg)}
.btn-sm{padding:6px 10px;font-size:11px;border-radius:6px}
.btn-danger{background:rgba(239,68,68,0.15);color:#fca5a5;border:1px solid rgba(239,68,68,0.3)}
.btn-danger:hover{background:rgba(239,68,68,0.25)}

/* FORMS — polished */
.form-field{margin-bottom:12px}
.form-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;display:block;font-weight:600}
.form-input{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 12px;color:var(--text);font-size:13px;outline:none;transition:all 0.2s}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-input::placeholder{color:var(--dim)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-full{grid-column:1/-1}
.section-title{font-size:13px;font-weight:700;color:var(--accent);margin:16px 0 8px;display:flex;align-items:center;gap:6px}
.section-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-weight:600}

/* TOGGLES & CHIPS — refined */
.gender-btn,.complaint-btn,.toggle-btn,.cond-btn,.filter-chip{padding:6px 11px;border-radius:var(--radius);border:1px solid var(--border2);background:var(--surface);color:var(--dim2);font-size:11px;font-weight:500;transition:all 0.15s}
.gender-btn:hover,.complaint-btn:hover,.toggle-btn:hover{border-color:var(--accent);color:var(--accent)}
.gender-btn.active,.complaint-btn.active{background:rgba(20,184,166,0.12);border-color:var(--accent);color:var(--accent)}
.toggle-btn.med-active{background:rgba(20,184,166,0.15);border-color:var(--accent);color:var(--accent)}
.toggle-btn.hab-active{background:#92400e;border-color:var(--highlight);color:#fcd34d}
.cond-btn{display:flex;align-items:center;gap:4px;font-weight:600}
.cond-btn.active{border-color:var(--accent);background:rgba(20,184,166,0.12)}
.cond-dot{width:8px;height:8px;border-radius:3px;display:inline-block}
.complaint-grid,.toggle-grid{display:flex;flex-wrap:wrap;gap:4px}
.filter-chip{padding:4px 10px;border-radius:16px;font-size:10px}
.filter-chip:hover{border-color:var(--accent);color:var(--accent)}

/* BADGES */
.badge{padding:2px 6px;border-radius:4px;font-size:9px;font-weight:700}
.badge-m{background:#1e3a5f;color:#93c5fd}
.badge-f{background:#4a1d5e;color:#d8b4fe}
.badge-risk{background:#991b1b;color:#fca5a5}

/* SEARCH */
.search-bar{padding:10px 16px;background:var(--card);border-bottom:1px solid var(--border)}
.search-box{display:flex;gap:6px}
.search-input{flex:1;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 12px;color:var(--text);font-size:13px;outline:none;transition:all 0.2s}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.search-input::placeholder{color:var(--dim)}

/* PATIENT LIST — cards with depth */
.patient-list{padding:6px 16px}
.patient-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:11px 13px;margin-bottom:6px;cursor:pointer;transition:all 0.18s;box-shadow:var(--shadow-sm)}
.patient-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.patient-name{font-size:14px;font-weight:600;text-transform:capitalize}
.patient-code{font-size:10px;color:var(--highlight);font-family:'Space Mono',monospace;font-weight:700;margin-left:6px}
.patient-info{font-size:11px;color:var(--dim);margin-top:2px}

/* DETAIL */
.detail-header{padding:14px 16px;background:var(--card);border-bottom:1px solid var(--border)}
.detail-name{font-size:20px;font-weight:700;text-transform:capitalize}
.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:12px}
.stat-card{background:var(--surface);border-radius:var(--radius);padding:8px;text-align:center;box-shadow:var(--shadow-sm)}
.stat-val{font-size:16px;font-weight:700;color:var(--accent)}
.stat-lbl{font-size:8px;color:var(--dim);text-transform:uppercase;margin-top:2px}
.detail-section{padding:12px 16px;border-bottom:1px solid rgba(30,41,59,0.3)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.detail-label{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px}
.detail-value{font-size:13px;margin-top:2px;text-transform:capitalize}
.action-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:0 16px 16px}
.action-btn{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:10px;text-align:center;border-left-width:3px;color:var(--text);transition:all 0.15s;box-shadow:var(--shadow-sm)}
.action-btn:hover{background:var(--card);border-color:var(--accent);transform:translateY(-1px)}
.action-icon{font-size:18px}
.action-label{font-size:10px;margin-top:3px;font-weight:600}

/* Action strip divider */
.action-strip-divider{width:1px;background:var(--border2);margin:8px 2px;flex-shrink:0;align-self:stretch}

/* CHARTING */
.chart-area{padding:8px;background:var(--card);margin:8px;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.teeth-row{display:flex;justify-content:center;gap:1px;padding:2px 0;overflow-x:auto}
.tooth-unit{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform 0.1s;padding:0 1px}
.tooth-unit:hover{transform:scale(1.1)}
.tooth-unit.selected{transform:scale(1.15)}
.tooth-num{font-size:8px;color:var(--dim);font-family:'Space Mono',monospace}
.tooth-unit.selected .tooth-num{color:var(--accent);font-weight:700}
.chart-divider{height:1px;background:var(--border2);margin:4px 16px;position:relative}
.chart-divider::after{content:'R ← → L';position:absolute;top:-7px;left:50%;transform:translateX(-50%);background:var(--card);padding:0 8px;font-size:8px;color:var(--dim);letter-spacing:1px}
.arch-label{font-size:9px;color:var(--dim);text-align:center;text-transform:uppercase;letter-spacing:2px;margin:3px 0}
.chart-info{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);margin:8px 12px;padding:8px}
.chart-stats{display:flex;gap:16px;justify-content:center;padding:6px}
.chart-stat{text-align:center}
.chart-stat-num{font-size:16px;font-weight:700}
.chart-stat-lbl{font-size:8px;color:var(--dim);text-transform:uppercase}

/* PRESCRIPTION */
.rx-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;margin-bottom:5px;box-shadow:var(--shadow-sm)}
.rx-name{font-size:12px;font-weight:600}
.rx-detail{font-size:10px;color:var(--dim2);margin-top:2px}
.rx-remove{background:none;border:none;color:var(--red);cursor:pointer;font-size:13px;padding:4px}
.group-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:12px}
.group-btn{padding:8px;border-radius:var(--radius);border:1px solid var(--border2);background:var(--surface);color:var(--text);font-size:11px;cursor:pointer;text-align:left;transition:all 0.15s}
.group-btn:hover{border-color:var(--highlight)}
.group-label{font-size:8px;color:var(--highlight);margin-bottom:2px}
.med-picker{background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);padding:6px;margin-bottom:10px}
.med-option{padding:7px 10px;border-radius:6px;border:1px solid var(--border2);background:var(--surface);color:var(--text);font-size:11px;cursor:pointer;width:100%;text-align:left;margin-bottom:3px;transition:all 0.12s}
.med-option:hover{border-color:var(--accent)}

/* CALENDAR */
.cal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--border)}
.cal-date-nav{display:flex;align-items:center;gap:10px}
.cal-nav-btn{background:var(--surface);border:1px solid var(--border2);border-radius:6px;padding:5px 10px;color:var(--text);font-size:14px;transition:all 0.12s}
.cal-nav-btn:hover{border-color:var(--accent)}
.cal-day{font-size:14px;font-weight:700;color:var(--accent);min-width:160px;text-align:center}
.time-grid{padding:8px 12px}
.time-slot{display:flex;border-bottom:1px solid rgba(30,41,59,0.3);min-height:48px}
.time-label{width:50px;padding:6px 4px;font-size:10px;color:var(--dim);font-family:'Space Mono',monospace;flex-shrink:0;padding-top:10px}
.slot-content{flex:1;padding:4px}
.slot-empty{width:100%;height:100%;min-height:36px;border-radius:6px;border:1px dashed var(--border2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:16px;opacity:0.3;transition:all 0.15s;background:none}
.slot-empty:hover{opacity:1;border-color:var(--accent);color:var(--accent)}
.slot-appt{width:100%;background:var(--surface);border-radius:6px;padding:5px 8px;border-left:3px solid var(--accent);cursor:pointer;text-align:left;border-top:none;border-right:none;border-bottom:none;color:var(--text);transition:all 0.12s}
.slot-appt:hover{background:var(--card)}
.slot-appt-name{font-size:11px;font-weight:600}
.slot-appt-purpose{font-size:9px;color:var(--dim2);margin-top:1px}
.slot-appt-chair{font-size:8px;color:var(--highlight);margin-top:1px}

/* MODAL — polished */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center}
.modal-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);width:90%;max-width:480px;max-height:85vh;overflow-y:auto;padding:20px;animation:modalIn 0.25s ease-out;box-shadow:var(--shadow-lg)}
@keyframes modalIn{from{opacity:0;transform:scale(0.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-title{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.modal-close{background:none;border:none;color:var(--dim);font-size:18px;cursor:pointer;transition:color 0.12s}
.modal-close:hover{color:var(--red)}

/* BRIEFING */
.briefing{padding:8px 16px}
.briefing-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;margin-bottom:10px}
.brief-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px;text-align:center;cursor:pointer;transition:all 0.18s;box-shadow:var(--shadow-sm)}
.brief-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.brief-num{font-size:18px;font-weight:800}
.brief-lbl{font-size:8px;color:var(--dim);text-transform:uppercase;margin-top:2px;font-weight:600}
.brief-alert{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:8px 12px;margin-bottom:5px;display:flex;align-items:center;gap:8px;font-size:11px;cursor:pointer;transition:all 0.12s}
.brief-alert:hover{border-color:var(--accent)}
.brief-alert-icon{font-size:16px;flex-shrink:0}

/* TIMELINE */
.timeline{padding:8px 16px}
.tl-item{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid rgba(30,41,59,0.2)}
.tl-date{width:54px;flex-shrink:0;font-size:9px;color:var(--dim);font-family:'Space Mono',monospace;padding-top:2px}
.tl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.tl-content{flex:1}
.tl-type{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.tl-desc{font-size:12px;margin-top:1px}
.tl-amount{font-size:11px;font-weight:600;margin-top:1px}
.tl-tabs{display:flex;gap:3px;padding:6px 16px;overflow-x:auto}
.tl-tab{padding:5px 10px;border-radius:5px;border:1px solid var(--border2);background:var(--surface);color:var(--dim2);font-size:10px;font-weight:600;white-space:nowrap;transition:all 0.12s}
.tl-tab:hover{border-color:var(--accent)}
.tl-tab.active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}

/* LAB */
.lab-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;margin-bottom:5px;box-shadow:var(--shadow-sm)}
.lab-status{display:flex;gap:2px;margin-top:6px}
.lab-step{flex:1;height:3px;border-radius:2px;background:var(--border2)}
.lab-step.done{background:var(--accent)}
.lab-step-labels{display:flex;justify-content:space-between;font-size:7px;color:var(--dim);margin-top:2px}
.lab-step-label.active{color:var(--highlight);font-weight:700}

/* REPORTS */
.report-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin:6px 16px;box-shadow:var(--shadow-sm)}
.report-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(30,41,59,0.2);font-size:12px}
.report-label{color:var(--dim2)}
.report-value{font-weight:600}
.report-bar{height:6px;border-radius:3px;background:var(--border2);margin-top:4px;overflow:hidden}
.report-fill{height:100%;border-radius:3px;transition:width 0.6s ease-out}

/* INSTRUCTIONS */
.instr-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;margin-bottom:5px;cursor:pointer;transition:all 0.15s;box-shadow:var(--shadow-sm)}
.instr-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.instr-title{font-size:12px;font-weight:600}
.instr-preview{font-size:10px;color:var(--dim2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* TOOTH SELECTOR */
.tooth-sel-btn{width:28px;height:28px;border:1px solid var(--border2);background:var(--surface);color:var(--text);font-size:10px;font-weight:600;border-radius:4px;cursor:pointer;padding:0;transition:all 0.1s;font-family:'Space Mono',monospace}
.tooth-sel-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.tooth-sel-btn.deci{width:26px;height:24px;font-size:9px;color:var(--dim2)}
.tooth-sel-btn.deci:hover{background:var(--highlight);color:var(--bg);border-color:var(--highlight)}

/* MISC — polished */
.save-btn{width:100%;padding:12px;border-radius:var(--radius-lg);border:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-size:15px;font-weight:700;margin-top:14px;cursor:pointer;box-shadow:0 3px 12px var(--accent-glow);transition:all 0.18s}
.save-btn:hover{transform:translateY(-1px);box-shadow:0 5px 20px var(--accent-glow)}
.save-btn:active{transform:translateY(0)}
.today-btn{padding:6px 10px;border-radius:6px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:11px;font-weight:600;cursor:pointer;transition:all 0.12s}
.today-btn:hover{background:var(--accent-glow)}
.stat{display:flex;justify-content:space-between;padding:6px 0;font-size:12px;border-bottom:1px solid rgba(30,41,59,0.2)}
.stat-label{color:var(--dim2)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:10px 20px;font-size:12px;color:var(--accent);box-shadow:var(--shadow-lg);z-index:999999;animation:toastSlideIn 0.35s ease-out;white-space:nowrap;font-weight:500}
@keyframes toastSlideIn{from{opacity:0;transform:translateX(-50%) translateY(30px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.loading{display:flex;align-items:center;justify-content:center;min-height:100vh}
.spinner{width:32px;height:32px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-msg{color:var(--red);font-size:11px;margin-top:6px;text-align:center}

/* LOGIN */
.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px;max-width:360px;width:100%;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo .logo-icon{width:56px;height:56px;font-size:26px;margin:0 auto 12px;background:linear-gradient(135deg,var(--accent),var(--highlight));border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--bg)}
.login-logo h1{font-size:24px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--highlight));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-logo p{color:var(--dim);font-size:12px;margin-top:4px}

/* MOBILE */
@media(max-width:768px){
  .menu-item .menu-label{font-size:11px}
  .menubar{flex-wrap:wrap;height:auto;padding:4px 8px}
  .menu-logo{padding:4px 8px;border:none}
  .menu-right{width:100%;justify-content:flex-end;padding:2px 0}
  .action-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .briefing-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr 1fr 1fr}
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
body.light-mode {
  --bg: #f0f4f8; --card: #ffffff; --surface: #f8fafc; --border: #e2e8f0; --border2: #cbd5e1;
  --text: #1e293b; --dim: #64748b; --dim2: #475569;
  --fg: #1e293b; --surface2: #e8f4f3;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.12);
}
body.light-mode .menubar { background: linear-gradient(180deg,#1e3a5f,#1a3352); }
body.light-mode .menu-dropdown { background: #fff; border-color: #e2e8f0; box-shadow: var(--shadow-lg); }
body.light-mode .modal-card { background: #ffffff; border-color: #e2e8f0; }
body.light-mode .modal-overlay { background: rgba(0,0,0,0.35);backdrop-filter:blur(4px) }
body.light-mode .form-input { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
body.light-mode .form-input:focus { border-color: var(--accent); background: #fff; }
body.light-mode .patient-card { background: #ffffff; border-color: #e2e8f0; }
body.light-mode .patient-card:hover { background: #f0fdf4; }
body.light-mode .toggle-btn { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
body.light-mode .toggle-btn:hover { border-color: var(--accent); }
body.light-mode .toggle-btn.med-active { background: rgba(20,184,166,0.1); border-color: var(--accent); color: var(--accent-dark); }
body.light-mode .context-bar { background: #ffffff; border-color: #e2e8f0; }
body.light-mode .brief-card { background: #ffffff; border-color: #e2e8f0; }
body.light-mode .brief-alert { background: #f8fafc; border-color: #e2e8f0; }
body.light-mode .action-btn { background: #ffffff; border-color: #e2e8f0; color: #1e293b; }
body.light-mode .action-btn:hover { background: #f0fdf4; }
body.light-mode .detail-header { background: #1e4d6e; }
body.light-mode .save-btn { background: linear-gradient(135deg,var(--accent),var(--accent-dark)); }
body.light-mode .section-title { color: var(--accent-dark); border-color: #e2e8f0; }
body.light-mode .complaint-btn { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
body.light-mode .complaint-btn.active { background: rgba(20,184,166,0.1); border-color: var(--accent); color: var(--accent-dark); }
body.light-mode .filter-chip { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
body.light-mode .filter-chip.active { background: rgba(20,184,166,0.1); border-color: var(--accent); color: var(--accent-dark); }

/* FAB */
.fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border:none;font-size:28px;font-weight:300;line-height:1;box-shadow:0 4px 20px var(--accent-glow),var(--shadow-md);z-index:90;display:flex;align-items:center;justify-content:center;transition:transform 0.15s,box-shadow 0.15s}
.fab:active{transform:scale(0.93);box-shadow:0 2px 10px var(--accent-glow)}

/* ── SETTINGS TAB SECTIONS ─────────────────────────────────── */
.settings-section-label{font-size:8px;color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;padding:8px 4px 2px;font-weight:700;border-top:1px solid var(--border2);margin-top:4px}
.settings-section-label:first-child{border-top:none;margin-top:0}

/* Date input — enhanced calendar icon */
input[type="date"]{cursor:pointer;position:relative}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.7;padding:4px;border-radius:4px;transition:opacity 0.15s}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--accent-glow)}