/* ══════════════════════════════════════════════════════
MEDICORE — PREMIUM RESPONSIVE CSS (Dark + Light Mode)
══════════════════════════════════════════════════════ */
/* ─── DARK MODE (default) ─── */
:root {
    --navy:#060E1F;--navy-2:#0D1A35;--navy-3:#132040;--navy-4:#1A2A52;
    --teal:#00C6CF;--teal-dim:rgba(0,198,207,0.12);--teal-glow:rgba(0,198,207,0.25);
    --blue:#3A8EF6;--blue-dim:rgba(58,142,246,0.12);
    --amber:#F5A623;--amber-dim:rgba(245,166,35,0.12);
    --green:#22C55E;--green-dim:rgba(34,197,94,0.1);
    --red:#EF4444;--red-dim:rgba(239,68,68,0.1);
    --purple:#8B5CF6;--purple-dim:rgba(139,92,246,0.12);
    --text-primary:#F0F4FF;--text-secondary:rgba(200,215,255,0.75);--text-muted:rgba(140,165,210,0.55);
    --border:rgba(255,255,255,0.08);--border-hover:rgba(0,198,207,0.35);
    --glass:rgba(255,255,255,0.04);--glass-hover:rgba(255,255,255,0.08);
    --sidebar-bg:rgba(10,18,40,0.95);
    --topbar-bg:rgba(10,18,40,0.8);
    --page-bg:var(--navy);
    --card-bg:var(--glass);
    --input-bg:rgba(255,255,255,0.05);
    --input-border:rgba(255,255,255,0.1);
    --modal-bg:var(--navy-2);
    --sidebar-w:260px;--header-h:68px;--radius:14px;--radius-sm:9px;
    --shadow:0 8px 32px rgba(0,0,0,0.4);
    --transition:all 0.22s cubic-bezier(0.4,0,0.2,1);
}
/* ─── LIGHT MODE ─── */
[data-theme="light"] {
    --navy:#F0F4FB;--navy-2:#FFFFFF;--navy-3:#E8EEF8;--navy-4:#DDE6F5;
    --teal:#0099A8;--teal-dim:rgba(0,153,168,0.1);--teal-glow:rgba(0,153,168,0.2);
    --blue:#2B7EE8;--blue-dim:rgba(43,126,232,0.1);
    --amber:#D4890A;--amber-dim:rgba(212,137,10,0.1);
    --green:#16A34A;--green-dim:rgba(22,163,74,0.1);
    --red:#DC2626;--red-dim:rgba(220,38,38,0.08);
    --purple:#7C3AED;--purple-dim:rgba(124,58,237,0.1);
    --text-primary:#0F172A;--text-secondary:#334155;--text-muted:#64748B;
    --border:rgba(0,0,0,0.1);--border-hover:rgba(0,153,168,0.4);
    --glass:rgba(0,0,0,0.03);--glass-hover:rgba(0,0,0,0.06);
    --sidebar-bg:rgba(248,252,255,0.98);
    --topbar-bg:rgba(255,255,255,0.92);
    --page-bg:#F0F4FB;
    --card-bg:rgba(255,255,255,0.9);
    --input-bg:rgba(255,255,255,0.8);
    --input-border:rgba(0,0,0,0.15);
    --modal-bg:#FFFFFF;
    --shadow:0 8px 32px rgba(0,0,0,0.12);
}
/* ─── GLOBAL RESET + BASE ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { min-width:0; }
body {
    font-family:'Inter',sans-serif;
    background:var(--page-bg);
    color:var(--text-primary);
    min-height:100vh;
    overflow-x:hidden;
    transition:background 0.3s ease, color 0.3s ease;
}
body::before {
    content:'';
    position:fixed;inset:0;
    background:
    radial-gradient(ellipse 60% 40% at 15% 20%,rgba(0,198,207,0.07) 0%,transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 80%,rgba(58,142,246,0.06) 0%,transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%,rgba(139,92,246,0.04) 0%,transparent 70%);
    pointer-events:none;
    z-index:0;
    transition:opacity 0.3s ease;
}
[data-theme="light"] body::before { opacity:0.3; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(128,128,128,0.2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(128,128,128,0.35); }

/* ═══════════════════════════════════════
DARK / LIGHT MODE TOGGLE BUTTON
═══════════════════════════════════════ */
#themeToggleBtn {
    min-width:44px; height:auto; min-height:44px;
    border-radius:var(--radius-sm);
    background:var(--glass);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:2px;
    cursor:pointer;
    color:var(--text-secondary);
    font-size:18px;
    transition:var(--transition);
    position:relative;
    padding:6px 8px;
}
#themeToggleBtn:hover {
    background:var(--glass-hover);
    color:var(--text-primary);
    border-color:var(--border-hover);
}
#themeToggleBtn .ti-sun { display:none; }
#themeToggleBtn .ti-moon { display:block; }
[data-theme="light"] #themeToggleBtn .ti-sun { display:block; }
[data-theme="light"] #themeToggleBtn .ti-moon { display:none; }
#themeToggleBtn .theme-label {
    font-size:9px; font-weight:600; letter-spacing:0.4px;
    text-transform: uppercase;e; color:var(--text-muted); line-height:1;
}
#themeToggleBtn .theme-label-dark { display:block; }
#themeToggleBtn .theme-label-light { display:none; }
[data-theme="light"] #themeToggleBtn .theme-label-dark { display:none; }
[data-theme="light"] #themeToggleBtn .theme-label-light { display:block; }

/* ═══════════════════════════════════════
LANDING PAGE
═══════════════════════════════════════ */
#landingPage {
    position:fixed; inset:0; z-index:9000;
    overflow-y:auto;
    background:var(--page-bg);
    transition:background 0.3s ease;
}
#landingPage.hidden { display:none; }
.landing-hero {
    min-height:100vh;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:40px 24px;
    position:relative;
}
.landing-logo {
    display:flex; align-items:center; gap:16px; margin-bottom:48px;
}
.landing-logo-icon {
    width:64px; height:64px;
    background:linear-gradient(135deg,var(--teal),var(--blue));
    border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:32px; color:#fff;
    box-shadow:0 8px 32px rgba(0,198,207,0.45);
    flex-shrink:0;
}
.landing-logo-text strong { font-size:32px; font-weight:700; display:block; letter-spacing:-1px; }
.landing-logo-text span { font-size:13px; color:var(--text-muted); text-transform: uppercase;e; letter-spacing:1px; }
.landing-tagline {
    font-size:clamp(32px,6vw,72px);
    font-weight:700; line-height:1.1; letter-spacing:-2px;
    font-family:'DM Sans',sans-serif; margin-bottom:20px;
    background:linear-gradient(135deg,var(--text-primary) 30%,var(--teal));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.landing-sub {
    font-size:18px; color:var(--text-secondary);
    max-width:620px; margin:0 auto 48px; line-height:1.6;
}
.landing-stats {
    display:flex; gap:clamp(20px,4vw,40px); justify-content:center; flex-wrap:wrap; margin-bottom:60px;
}
.landing-stat { text-align:center; }
.landing-stat strong { display:block; font-size:36px; font-weight:700; font-family:'DM Sans',sans-serif; color:var(--teal); }
.landing-stat span { font-size:13px; color:var(--text-muted); }
.landing-scroll-hint {
    margin-top:60px; display:flex; flex-direction:column;
    align-items:center; gap:10px; color:var(--text-muted); font-size:13px;
    animation:bounce 2s infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0);}50%{transform:translateY(8px);} }
.landing-doctors { padding:80px 24px; max-width:1100px; margin:0 auto; }
.landing-doctors h2 {
    font-size:clamp(24px,4vw,40px); font-weight:700;
    text-align:center; margin-bottom:48px; font-family:'DM Sans',sans-serif;
}
.doc-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:20px; margin-bottom:80px;
}
.doc-card {
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:var(--radius); padding:24px; text-align:center;
    transition:var(--transition);
}
.doc-card:hover { background:var(--glass-hover); border-color:var(--border-hover); transform:translateY(-4px); }
.doc-avatar {
    width:64px; height:64px; border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex; align-items:center; justify-content:center;
    font-size:22px; font-weight:700; color:#fff;
    margin:0 auto 14px;
}
.doc-card h3 { font-size:15px; font-weight:600; margin-bottom:4px; }
.doc-card p { font-size:12px; color:var(--text-muted); }
.landing-features { padding:80px 24px; max-width:1100px; margin:0 auto; }
.landing-features h2 {
    font-size:clamp(24px,4vw,40px); font-weight:700;
    text-align:center; margin-bottom:48px; font-family:'DM Sans',sans-serif;
}
.feat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.feat-card {
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:var(--radius); padding:28px; transition:var(--transition);
}
.feat-card:hover { background:var(--glass-hover); }
.feat-icon {
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; margin-bottom:16px;
}

/* ─── AUTH PANEL ─── */
.landing-auth {
    padding:80px 24px;
    background:rgba(13,26,53,0.5);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
[data-theme="light"] .landing-auth {
    background:rgba(240,244,251,0.8);
}
.auth-box {
    max-width:480px; margin:0 auto;
    background:var(--modal-bg); border:1px solid var(--border);
    border-radius:var(--radius); padding:36px;
    box-shadow:var(--shadow);
}
.auth-box h2 { font-size:22px; font-weight:700; margin-bottom:6px; font-family:'DM Sans',sans-serif; }
.auth-box > p { font-size:13px; color:var(--text-muted); margin-bottom:28px; }
.auth-tab {
    display:flex; gap:4px;
    background:var(--glass); border-radius:var(--radius-sm);
    padding:4px; margin-bottom:24px;
    border:1px solid var(--border);
}
.auth-tab-btn {
    flex:1; padding:9px 6px; border-radius:7px; border:none;
    background:transparent; color:var(--text-muted);
    font-size:12px; font-weight:500; cursor:pointer;
    transition:var(--transition); white-space:nowrap; min-width:0;
}
.auth-tab-btn.active {
    background:var(--navy-3); color:var(--text-primary);
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.auth-form { display:none; }
.auth-form.active { display:block; }

/* ─── GREETING SCREEN ─── */
#greetingScreen {
    position:fixed; inset:0; z-index:8999;
    background:var(--page-bg);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:40px;
    transition:background 0.3s ease;
}
#greetingScreen.hidden { display:none; }
.greeting-icon {
    width:100px; height:100px; border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--blue));
    display:flex; align-items:center; justify-content:center;
    font-size:44px; margin:0 auto 32px;
    box-shadow:0 12px 48px rgba(0,198,207,0.4);
    animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{box-shadow:0 12px 48px rgba(0,198,207,0.4);}50%{box-shadow:0 12px 64px rgba(0,198,207,0.65);} }
.greeting-time {
    font-size:clamp(28px,5vw,56px); font-weight:700;
    font-family:'DM Sans',sans-serif; margin-bottom:12px;
    background:linear-gradient(135deg,var(--text-primary) 30%,var(--teal));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.greeting-name { font-size:18px; color:var(--text-secondary); margin-bottom:48px; }
.greeting-btn { opacity:0; transform:translateY(20px); transition:opacity 0.5s ease,transform 0.5s ease; }
.greeting-btn.visible { opacity:1; transform:none; }
.greeting-timer { font-size:12px; color:var(--text-muted); margin-top:12px; }

/* ═══════════════════════════════════════
APP SHELL
═══════════════════════════════════════ */
#appShell { display:none; }
#appShell.visible { display:block; }

/* ─── SIDEBAR ─── */
.sidebar {
    position:fixed; top:0; left:0;
    width:var(--sidebar-w); height:100vh;
    background:var(--sidebar-bg);
    backdrop-filter:blur(24px);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    z-index:100;
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),background 0.3s ease;
    overflow:hidden;
}
.sidebar-logo {
    padding:22px 24px 16px;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:12px;
    flex-shrink:0;
}
.logo-icon {
    width:40px; height:40px;
    background:linear-gradient(135deg,var(--teal),var(--blue));
    border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; color:#fff; flex-shrink:0;
    box-shadow:0 4px 16px rgba(0,198,207,0.4);
}
.logo-text { display:flex; flex-direction:column; min-width:0; }
.logo-text strong { font-size:18px; font-weight:700; letter-spacing:-0.3px; white-space:nowrap; }
.logo-text span { font-size:11px; color:var(--text-muted); letter-spacing:0.5px; text-transform: uppercase;e; white-space:nowrap; }
.sidebar-section-label {
    font-size:10px; font-weight:600; letter-spacing:1px;
    color:var(--text-muted); text-transform: uppercase;e;
    padding:16px 24px 6px;
}
.nav-item {
    display:flex; align-items:center; gap:12px;
    padding:11px 20px; margin:2px 10px;
    border-radius:var(--radius-sm);
    cursor:pointer; color:var(--text-secondary);
    font-size:14px; font-weight:500;
    transition:var(--transition);
    border:1px solid transparent;
    user-select:none;
}
.nav-item i { font-size:18px; width:22px; flex-shrink:0; }
.nav-item:hover { background:var(--glass-hover); color:var(--text-primary); }
.nav-item.active { background:var(--teal-dim); color:var(--teal); border-color:rgba(0,198,207,0.2); }
.nav-item .badge {
    margin-left:auto; background:var(--red); color:#fff;
    font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:20px; min-width:20px; text-align:center;
}
.nav-item .badge-info { background:var(--blue); }
.sidebar-footer {
    margin-top:auto; padding:16px;
    border-top:1px solid var(--border); flex-shrink:0;
}
.user-card {
    display:flex; align-items:center; gap:12px;
    padding:10px; border-radius:var(--radius-sm);
    cursor:pointer; transition:var(--transition);
}
.user-card:hover { background:var(--glass-hover); }
.user-avatar {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg,#3A8EF6,#8B5CF6);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:#fff; flex-shrink:0;
}
.user-info strong { display:block; font-size:13px; font-weight:600; }
.user-info span { font-size:11px; color:var(--text-muted); }
.user-card i { margin-left:auto; color:var(--text-muted); font-size:16px; }

/* ─── MAIN CONTENT ─── */
.main {
    margin-left:var(--sidebar-w);
    min-height:100vh;
    position:relative; z-index:1;
    transition:margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ─── TOP BAR ─── */
.topbar {
    height:var(--header-h);
    background:var(--topbar-bg);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center;
    padding:0 24px; gap:12px;
    position:sticky; top:0; z-index:50;
    transition:background 0.3s ease, border-color 0.3s ease;
}
.topbar-title { font-size:18px; font-weight:600; color:var(--text-primary); white-space:nowrap; }
.topbar-sub { font-size:13px; color:var(--text-muted); margin-top:1px; white-space:nowrap; }
.topbar-search {
    display:flex; align-items:center; gap:10px;
    background:var(--glass); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:9px 16px;
    flex:1; max-width:320px; margin-left:auto;
    transition:var(--transition);
}
.topbar-search:focus-within { border-color:var(--teal); background:var(--teal-dim); }
.topbar-search i { color:var(--text-muted); font-size:16px; flex-shrink:0; }
.topbar-search input {
    background:none; border:none; outline:none;
    color:var(--text-primary); font-size:14px; width:100%;
    font-family:'Inter',sans-serif;
}
.topbar-search input::placeholder { color:var(--text-muted); }
.topbar-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.icon-btn {
    width:auto !important; min-width:44px; height:auto !important; min-height:44px;
    border-radius:var(--radius-sm);
    background:var(--glass); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:2px; padding:6px 8px;
    cursor:pointer; color:var(--text-secondary);
    transition:var(--transition); position:relative; flex-shrink:0;
}
.icon-btn:hover { background:var(--glass-hover); color:var(--text-primary); border-color:var(--border-hover); }
.icon-btn .dot {
    position:absolute; top:6px; right:6px;
    width:7px; height:7px; border-radius:50%;
    background:var(--red); border:1.5px solid var(--navy-2);
}
.icon-btn-label {
    display:block; font-size:9px; font-weight:600;
    letter-spacing:0.4px; text-transform: uppercase;e;
    color:var(--text-muted); line-height:1; margin-top:2px;
}

/* ─── PAGES ─── */
.page { display:none; padding:28px 24px; }
.page.active { display:block; animation:fadeUp 0.28s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;} }

/* ─── HAMBURGER (mobile toggle) ─── */
.hamburger {
    display:none;
    width:38px; height:38px; border-radius:var(--radius-sm);
    background:var(--glass); border:1px solid var(--border);
    align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-primary); font-size:20px;
    flex-shrink:0;
}
.sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.5); z-index:99;
}

/* ─── STAT CARDS ─── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px 22px;
    transition:var(--transition); cursor:default;
    position:relative; overflow:hidden;
}
.stat-card::before {
    content:''; position:absolute; top:0; left:0; right:0;
    height:3px; border-radius:var(--radius) var(--radius) 0 0;
}
.stat-card.teal::before { background:linear-gradient(90deg,var(--teal),transparent); }
.stat-card.blue::before { background:linear-gradient(90deg,var(--blue),transparent); }
.stat-card.amber::before { background:linear-gradient(90deg,var(--amber),transparent); }
.stat-card.green::before { background:linear-gradient(90deg,var(--green),transparent); }
.stat-card.red::before { background:linear-gradient(90deg,var(--red),transparent); }
.stat-card.purple::before { background:linear-gradient(90deg,var(--purple),transparent); }
.stat-card:hover { background:var(--glass-hover); border-color:rgba(255,255,255,0.12); transform:translateY(-2px); }
.stat-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat-label { font-size:12px; font-weight:500; color:var(--text-muted); text-transform: uppercase;e; letter-spacing:0.5px; }
.stat-icon-wrap { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; }
.teal .stat-icon-wrap{background:var(--teal-dim);color:var(--teal);}
.blue .stat-icon-wrap{background:var(--blue-dim);color:var(--blue);}
.amber .stat-icon-wrap{background:var(--amber-dim);color:var(--amber);}
.green .stat-icon-wrap{background:var(--green-dim);color:var(--green);}
.red .stat-icon-wrap{background:var(--red-dim);color:var(--red);}
.purple .stat-icon-wrap{background:var(--purple-dim);color:var(--purple);}
.stat-value { font-size:28px; font-weight:700; letter-spacing:-1px; font-family:'DM Sans',sans-serif; }
.teal .stat-value{color:var(--teal);}
.blue .stat-value{color:var(--blue);}
.amber .stat-value{color:var(--amber);}
.green .stat-value{color:var(--green);}
.red .stat-value{color:var(--red);}
.purple .stat-value{color:var(--purple);}
.stat-trend { font-size:12px; color:var(--text-muted); margin-top:4px; }
.trend-up { color:var(--green); }
.trend-dn { color:var(--red); }

/* ─── SECTION HEADERS ─── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-title { font-size:16px; font-weight:600; color:var(--text-primary); }
.section-subtitle { font-size:13px; color:var(--text-muted); margin-top:2px; }

/* ─── GLASS CARD ─── */
.glass-card {
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:var(--radius); padding:24px;
    transition:background 0.3s ease, border-color 0.3s ease;
}

/* ─── TABLES ─── */
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; min-width:560px; }
thead th {
    padding:12px 16px; font-size:11px; font-weight:600;
    color:var(--text-muted); text-transform: uppercase;e; letter-spacing:0.8px;
    border-bottom:1px solid var(--border); text-align:left; white-space:nowrap;
}
tbody td {
    padding:13px 16px; font-size:14px;
    border-bottom:1px solid var(--border);
    color:var(--text-secondary); vertical-align:middle;
}
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:var(--transition); }
tbody tr:hover td { background:var(--glass-hover); color:var(--text-primary); }

/* ─── PILLS ─── */
.pill {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:20px;
    font-size:12px; font-weight:500; white-space:nowrap;
}
.pill-green{background:var(--green-dim);color:var(--green);}
.pill-red{background:var(--red-dim);color:var(--red);}
.pill-amber{background:var(--amber-dim);color:var(--amber);}
.pill-blue{background:var(--blue-dim);color:var(--blue);}
.pill-teal{background:var(--teal-dim);color:var(--teal);}
.pill-purple{background:var(--purple-dim);color:var(--purple);}
.pill-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ─── BUTTONS ─── */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:var(--radius-sm);
    font-size:14px; font-weight:500;
    font-family:'Inter',sans-serif; cursor:pointer;
    border:none; transition:var(--transition);
    white-space:nowrap;
}
.btn-primary {
    background:linear-gradient(135deg,var(--teal),#00A8B5);
    color:#041220; box-shadow:0 4px 16px rgba(0,198,207,0.3);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(0,198,207,0.45); }
.btn-secondary { background:var(--glass); color:var(--text-primary); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--glass-hover); border-color:var(--border-hover); }
.btn-danger { background:var(--red-dim); color:var(--red); border:1px solid rgba(239,68,68,0.2); }
.btn-danger:hover { background:rgba(239,68,68,0.2); }
.btn-sm { padding:7px 13px; font-size:13px; }
.btn-xs { padding:5px 10px; font-size:12px; }

/* ─── FORMS ─── */
.form-grid { display:grid; gap:16px; }
.form-grid.cols-2 { grid-template-columns:1fr 1fr; }
.form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:12px; font-weight:500; color:var(--text-muted); text-transform: uppercase;e; letter-spacing:0.5px; }
.form-input {
    background:var(--input-bg); border:1px solid var(--input-border);
    border-radius:var(--radius-sm);
    padding:11px 14px; color:var(--text-primary);
    font-size:14px; font-family:'Inter',sans-serif;
    transition:var(--transition); outline:none;
    min-width:0; width:100%;
}
.form-input:focus {
    border-color:var(--teal); background:var(--teal-dim);
    box-shadow:0 0 0 3px rgba(0,198,207,0.1);
}
.form-input::placeholder { color:var(--text-muted); }
select.form-input option { background:var(--modal-bg); color:var(--text-primary); }
textarea.form-input { resize:vertical; min-height:90px; }

/* ─── LAYOUT GRIDS ─── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.col-2-3 { display:grid; grid-template-columns:2fr 1fr; gap:20px; }

/* ─── MODALS ─── */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.65); backdrop-filter:blur(6px);
    z-index:999; display:none;
    align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
    background:var(--modal-bg); border:1px solid var(--border);
    border-radius:var(--radius); width:100%;
    max-width:720px; max-height:88vh;
    overflow-y:auto; box-shadow:var(--shadow);
    animation:modalIn 0.22s ease;
    transition:background 0.3s ease;
}
.modal-lg { max-width:860px; }
@keyframes modalIn { from{opacity:0;transform:scale(0.96) translateY(12px);}to{opacity:1;transform:none;} }
.modal-header {
    padding:22px 26px 18px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.modal-title { font-size:17px; font-weight:600; }
.modal-close {
    width:32px; height:32px; border-radius:8px;
    background:var(--glass); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-muted); font-size:16px;
    transition:var(--transition);
}
.modal-close:hover { background:var(--red-dim); color:var(--red); border-color:rgba(239,68,68,0.3); }
.modal-body { padding:24px 26px; }
.modal-footer {
    padding:16px 26px 20px; border-top:1px solid var(--border);
    display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}

/* ─── TOASTS ─── */
.toast-container {
    position:fixed; top:20px; right:20px; z-index:9999;
    display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast {
    background:var(--modal-bg); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:14px 18px;
    display:flex; align-items:center; gap:12px;
    min-width:260px; max-width:360px;
    box-shadow:var(--shadow); animation:slideIn 0.25s ease;
    pointer-events:all;
}
@keyframes slideIn { from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:none;} }
.toast-icon { font-size:18px; flex-shrink:0; }
.toast-msg { font-size:14px; font-weight:500; flex:1; }
.toast.success .toast-icon { color:var(--green); }
.toast.error .toast-icon { color:var(--red); }
.toast.info .toast-icon { color:var(--blue); }

/* ─── ACTIVITY FEED ─── */
.activity-item {
    display:flex; align-items:flex-start; gap:14px;
    padding:13px 0; border-bottom:1px solid var(--border);
}
.activity-item:last-child { border-bottom:none; }
.activity-dot {
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; flex-shrink:0; margin-top:2px;
}
.activity-content p { font-size:14px; font-weight:500; }
.activity-content span { font-size:12px; color:var(--text-muted); }

/* ─── VITALS ─── */
.vitals-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.vital-card {
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:14px; transition:var(--transition);
}
.vital-card:hover { background:var(--glass-hover); }
.vital-label { font-size:11px; color:var(--text-muted); font-weight:500; text-transform: uppercase;e; letter-spacing:0.5px; }
.vital-value { font-size:22px; font-weight:700; font-family:'DM Sans',sans-serif; margin:4px 0 2px; }
.vital-sub { font-size:11px; color:var(--text-muted); }

/* ─── WARD GRID ─── */
.ward-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:12px; }
.room {
    border-radius:8px; padding:10px 6px;
    text-align:center; font-size:12px; font-weight:500;
    border:1px solid transparent; cursor:pointer; transition:var(--transition);
}
.room.occupied{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.25);color:var(--red);}
.room.available{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.2);color:var(--green);}
.room.maintenance{background:rgba(245,166,35,0.1);border-color:rgba(245,166,35,0.2);color:var(--amber);}
.room:hover { transform:scale(1.05); }
.room-num { font-size:14px; font-weight:700; display:block; }

/* ─── PATIENT REPORT ─── */
.report-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--border);
    flex-wrap:wrap; gap:16px;
}
.patient-avatar-lg {
    width:72px; height:72px; border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--blue));
    display:flex; align-items:center; justify-content:center;
    font-size:26px; font-weight:700; color:#fff;
    box-shadow:0 6px 20px rgba(0,198,207,0.35);
}
.info-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.info-block label { font-size:11px; color:var(--text-muted); text-transform: uppercase;e; letter-spacing:0.5px; display:block; margin-bottom:4px; }
.info-block span { font-size:15px; font-weight:500; }

/* ─── MISC ─── */
.divider { height:1px; background:var(--border); margin:20px 0; }
.empty-state { text-align:center; padding:48px 20px; color:var(--text-muted); }
.empty-state i { font-size:48px; opacity:0.35; display:block; margin-bottom:12px; }
.empty-state p { font-size:14px; }
.prog-bar { height:5px; background:rgba(255,255,255,0.06); border-radius:99px; overflow:hidden; }
[data-theme="light"] .prog-bar { background:rgba(0,0,0,0.08); }
.prog-fill { height:100%; border-radius:99px; transition:width 1s ease; }

/* ─── MESSAGES PANEL ─── */
.msg-panel {
    position:fixed; top:0; right:-420px;
    width:380px; height:100vh;
    background:var(--modal-bg); border-left:1px solid var(--border);
    z-index:200; transition:right 0.3s ease;
    display:flex; flex-direction:column;
    box-shadow:-8px 0 32px rgba(0,0,0,0.3);
}
.msg-panel.open { right:0; }
.msg-panel-header {
    padding:20px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.msg-panel-body { flex:1; overflow-y:auto; padding:16px; }
.msg-item {
    background:var(--glass); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:14px; margin-bottom:10px;
    cursor:pointer; transition:var(--transition);
}
.msg-item:hover { background:var(--glass-hover); }
.msg-item.unread { border-color:rgba(0,198,207,0.3); }
.msg-item-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.msg-compose { padding:16px; border-top:1px solid var(--border); flex-shrink:0; }

/* ─── ALERTS PANEL ─── */
.alert-panel {
    position:fixed; top:0; right:-420px;
    width:380px; height:100vh;
    background:var(--modal-bg); border-left:1px solid var(--border);
    z-index:200; transition:right 0.3s ease;
    display:flex; flex-direction:column;
    box-shadow:-8px 0 32px rgba(0,0,0,0.3);
}
.alert-panel.open { right:0; }
.panel-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:199; }
.panel-overlay.open { display:block; }
.alert-item {
    background:var(--glass); border-radius:var(--radius-sm);
    padding:14px; margin-bottom:10px;
    display:flex; align-items:flex-start; gap:12px;
    border:1px solid var(--border);
}

/* ─── DOCTOR PROFILE ─── */
.dr-profile-pic {
    width:120px; height:120px; border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex; align-items:center; justify-content:center;
    font-size:40px; font-weight:700; color:#fff;
    margin:0 auto 20px; border:3px solid var(--border);
    box-shadow:0 8px 32px rgba(58,142,246,0.3);
    position:relative; overflow:hidden;
}
.dr-profile-pic img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ─── APPOINTMENTS ─── */
.appt-item {
    display:flex; align-items:center; gap:14px;
    padding:14px; border-radius:var(--radius-sm);
    border:1px solid var(--border); margin-bottom:10px;
    transition:var(--transition); flex-wrap:wrap;
    min-width:0;
}
.appt-item:hover { background:var(--glass-hover); }
.appt-time-block { text-align:center; min-width:64px; flex-shrink:0; }

/* ─── SECTION DIVIDER ─── */
.section-divider-label {
    font-size:13px; font-weight:600; color:var(--teal);
    text-transform: uppercase;e; letter-spacing:0.8px;
    margin-bottom:16px; display:flex; align-items:center; gap:8px;
}

/* ─── SETTINGS NOTIFICATIONS ─── */
.notif-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 0; border-bottom:1px solid var(--border);
    gap:16px; min-height:48px;
}
.notif-row:last-child { border-bottom:none; }
.notif-row span { font-size:14px; flex:1; min-width:0; }

/* ═══════════════════════════════════════
RESPONSIVE — TABLET (1100px)
═══════════════════════════════════════ */
@media (max-width:1100px) {
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .three-col { grid-template-columns:1fr 1fr; }
    .col-2-3 { grid-template-columns:1fr; }
    .vitals-grid { grid-template-columns:repeat(2,1fr); }
    .ward-grid { grid-template-columns:repeat(5,1fr); }
}

/* ═══════════════════════════════════════
RESPONSIVE — COLLAPSE SIDEBAR (960px)
═══════════════════════════════════════ */
@media (max-width:960px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:none; box-shadow:4px 0 24px rgba(0,0,0,0.4); }
    .sidebar-overlay.open { display:block; }
    .main { margin-left:0; }
    .hamburger { display:flex; }
    .topbar { padding:0 16px; gap:10px; }
    .topbar-search { max-width:none; flex:1; }
    .page { padding:20px 16px; }
    .two-col { grid-template-columns:1fr; }
    .form-grid.cols-2 { grid-template-columns:1fr; }
    .form-grid.cols-3 { grid-template-columns:1fr 1fr; }
    .info-row { grid-template-columns:1fr 1fr; }
    .ward-grid { grid-template-columns:repeat(4,1fr); }
    .msg-panel, .alert-panel { width:100%; right:-100%; }
    .auth-box { padding:28px 20px; }
    .auth-form .form-grid.cols-2 { grid-template-columns:1fr 1fr; }
    .topbar-title-wrap { display:none; }
    #page-admit .form-grid.cols-3 { grid-template-columns:1fr 1fr; }
    #page-schedule .form-grid.cols-2 { grid-template-columns:1fr 1fr; }
    #page-settings .two-col { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════
RESPONSIVE — SMALL TABLET (810px min)
═══════════════════════════════════════ */
@media (max-width:810px) {
    html { min-width:0; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .three-col { grid-template-columns:1fr; }
    .col-2-3 { grid-template-columns:1fr; }
    .vitals-grid { grid-template-columns:1fr 1fr; }
    .ward-grid { grid-template-columns:repeat(3,1fr); }
    .form-grid.cols-3 { grid-template-columns:1fr 1fr; }
    .form-grid.cols-2 { grid-template-columns:1fr; }
    .info-row { grid-template-columns:1fr 1fr; }
    .page { padding:16px 12px; }
}

/* ═══════════════════════════════════════
EXTRA MOBILE (≤480px)
═══════════════════════════════════════ */
@media (max-width:480px) {
    .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .info-row { grid-template-columns:1fr; }
    .vitals-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .ward-grid { grid-template-columns:repeat(3,1fr); }
    .form-grid.cols-2 { grid-template-columns:1fr; }
    .form-grid.cols-3 { grid-template-columns:1fr; }
    .topbar-search { display:none; }
    .modal { border-radius:var(--radius) var(--radius) 0 0; }
    .modal-overlay { align-items:flex-end; }
    .landing-stats { gap:16px; }
    .landing-stat strong { font-size:26px; }
    .doc-grid { grid-template-columns:1fr 1fr; }
    .feat-grid { grid-template-columns:1fr; }
    .auth-box { padding:24px 16px; }
    .auth-box .form-grid.cols-2 { grid-template-columns:1fr; }
    .report-header { flex-direction:column; }
    .modal-footer { flex-direction:column; }
    .modal-footer .btn { width:100%; justify-content:center; }
    .msg-panel, .alert-panel { width:100%; }
    .topbar-actions { gap:4px; }
    .icon-btn { min-width:40px; padding:5px 6px; }
    #themeToggleBtn { min-width:40px; padding:5px 6px; }
    .icon-btn .icon-btn-label,
    #themeToggleBtn .theme-label { font-size:8px; }
}

/* ══════════════════════════
LIGHT MODE REFINEMENTS
══════════════════════════ */
[data-theme="light"] .glass-card {
    background:#FFFFFF;
    border-color:rgba(0,0,0,0.08);
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
[data-theme="light"] .stat-card {
    background:#FFFFFF;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .nav-item.active {
    background:var(--teal-dim);
    color:var(--teal);
}
[data-theme="light"] .sidebar {
    border-right-color:rgba(0,0,0,0.1);
}
[data-theme="light"] .topbar {
    border-bottom-color:rgba(0,0,0,0.1);
}
[data-theme="light"] .form-input {
    background:#FFFFFF;
    border-color:rgba(0,0,0,0.15);
    color:#0F172A;
}
[data-theme="light"] .form-input:focus {
    background:rgba(0,153,168,0.05);
}
[data-theme="light"] .modal {
    box-shadow:0 16px 48px rgba(0,0,0,0.16);
}
[data-theme="light"] .auth-tab-btn.active {
    background:var(--navy-4);
}
[data-theme="light"] .topbar-search {
    background:#FFFFFF;
    border-color:rgba(0,0,0,0.12);
}
[data-theme="light"] .icon-btn {
    background:#FFFFFF;
    border-color:rgba(0,0,0,0.1);
}
[data-theme="light"] .icon-btn:hover {
    background:rgba(0,0,0,0.05);
}
[data-theme="light"] .stat-card:hover {
    background:#F8FAFD;
}
[data-theme="light"] tbody tr:hover td {
    background:rgba(0,0,0,0.03);
}
[data-theme="light"] .msg-panel,
[data-theme="light"] .alert-panel {
    border-left-color:rgba(0,0,0,0.1);
}
[data-theme="light"] .toast {
    background:#FFFFFF;
    border-color:rgba(0,0,0,0.1);
    box-shadow:0 4px 24px rgba(0,0,0,0.12);
}
[data-theme="light"] .form-input::placeholder {
    color:rgba(100,116,139,0.7);
}
[data-theme="light"] select.form-input option {
    background:#FFFFFF;
    color:#0F172A;
}

/* ══════════════════════════
SMOOTH TRANSITIONS on theme switch
══════════════════════════ */
.glass-card, .stat-card, .modal, .sidebar,
.topbar, .form-input, .icon-btn, .btn,
.toast, .msg-panel, .alert-panel,
.nav-item, .auth-box, .landing-auth {
    transition:background 0.25s ease, border-color 0.25s ease,
    color 0.25s ease, box-shadow 0.25s ease, transform 0.22s cubic-bezier(0.4,0,0.2,1);
}