/* =====================================================================
   Chanchal Suman Nursing College ERP — THEME LAYER (offline, /static).
   Light/Dark modes × accent colours, chosen from the floating palette
   button (see theme.js). Works by re-mapping the Tailwind utility
   classes the templates already use onto CSS variables — so every one
   of the ~90 screens re-skins at once, with zero template rework.

   Load order: tailwind.js → app.css → theme.css (this file last).
   `html ...` prefixes out-rank Tailwind's runtime-injected rules.
   Printing always uses the light look (all dark rules are @media screen).
   ===================================================================== */

/* ------------------------------------------------ 1. ACCENT PALETTES -- */
:root, html[data-accent="teal"]{
    --acc-50:#f0fdfa; --acc-100:#ccfbf1; --acc-200:#99f6e4; --acc-300:#5eead4;
    --acc-400:#2dd4bf; --acc-500:#14b8a6; --acc-600:#0d9488; --acc-700:#0f766e;
    --acc-800:#115e59;
}
html[data-accent="blue"]{
    --acc-50:#eff6ff; --acc-100:#dbeafe; --acc-200:#bfdbfe; --acc-300:#93c5fd;
    --acc-400:#60a5fa; --acc-500:#3b82f6; --acc-600:#2563eb; --acc-700:#1d4ed8;
    --acc-800:#1e40af;
}
html[data-accent="violet"]{
    --acc-50:#f5f3ff; --acc-100:#ede9fe; --acc-200:#ddd6fe; --acc-300:#c4b5fd;
    --acc-400:#a78bfa; --acc-500:#8b5cf6; --acc-600:#7c3aed; --acc-700:#6d28d9;
    --acc-800:#5b21b6;
}
html[data-accent="rose"]{
    --acc-50:#fff1f2; --acc-100:#ffe4e6; --acc-200:#fecdd3; --acc-300:#fda4af;
    --acc-400:#fb7185; --acc-500:#f43f5e; --acc-600:#e11d48; --acc-700:#be123c;
    --acc-800:#9f1239;
}
html[data-accent="emerald"]{
    --acc-50:#ecfdf5; --acc-100:#d1fae5; --acc-200:#a7f3d0; --acc-300:#6ee7b7;
    --acc-400:#34d399; --acc-500:#10b981; --acc-600:#059669; --acc-700:#047857;
    --acc-800:#065f46;
}

/* ---------------------------------------------- 2. SURFACE VARIABLES -- */
:root{
    /* light look (default) */
    --bg:#f1f5f9;            /* page background            */
    --surface:#ffffff;       /* cards / tables / forms     */
    --surface-2:#f8fafc;     /* subtle panels (slate-50)   */
    --surface-3:#f1f5f9;     /* chips / hovers (slate-100) */
    --ink:#1e293b;
    --line:#e2e8f0;
    /* app.css brand hooks now follow the chosen accent */
    --brand:var(--acc-700);
    --brand-dark:var(--acc-800);
}
@media screen{
html[data-theme="dark"]{
    color-scheme:dark;                       /* native inputs, scrollbars */
    --bg:#0b1220;
    --surface:#1a2438;
    --surface-2:#20304a;
    --surface-3:#293a58;
    --ink:#dbe3ee;
    --line:#2e3d55;
}}

/* --------------------------------------- 3. ACCENT RE-MAP (both modes) --
   Every teal-* utility used in the templates follows the chosen accent. */
html .bg-teal-400{background-color:var(--acc-400)}
html .bg-teal-500{background-color:var(--acc-500)}
html .bg-teal-600{background-color:var(--acc-600)}
html .bg-teal-700{background-color:var(--acc-700)}
html .bg-teal-50{background-color:var(--acc-50)}
html .bg-teal-100{background-color:var(--acc-100)}
html .hover\:bg-teal-600:hover{background-color:var(--acc-600)}
html .hover\:bg-teal-700:hover{background-color:var(--acc-700)}
html .hover\:bg-teal-800:hover{background-color:var(--acc-800)}
html .text-teal-400{color:var(--acc-400)}
html .text-teal-500{color:var(--acc-500)}
html .text-teal-600{color:var(--acc-600)}
html .text-teal-700{color:var(--acc-700)}
html .text-teal-800{color:var(--acc-800)}
html .hover\:text-teal-400:hover{color:var(--acc-400)}
html .hover\:text-teal-600:hover{color:var(--acc-600)}
html .border-teal-200{border-color:var(--acc-200)}
html .border-teal-300{border-color:var(--acc-300)}
html .border-teal-400{border-color:var(--acc-400)}
html .hover\:border-teal-300:hover{border-color:var(--acc-300)}
html .hover\:border-teal-400:hover{border-color:var(--acc-400)}
html .ring-teal-400{--tw-ring-color:var(--acc-400)}
html .focus\:ring-teal-400:focus{--tw-ring-color:var(--acc-400)}

/* ------------------------------------------------- 4. DARK MODE SKIN --
   Re-maps the exact utility classes the templates use. Screen only —
   printed pages always come out light/white.                            */
@media screen{

/* page + typography ladder */
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .bg-white{background-color:var(--surface)}
html[data-theme="dark"] .bg-white\/90{background-color:rgba(26,36,56,.9)}
html[data-theme="dark"] .focus\:bg-white:focus{background-color:var(--surface)}
html[data-theme="dark"] .bg-slate-50{background-color:var(--surface-2)}
html[data-theme="dark"] .bg-slate-50\/60{background-color:rgba(32,48,74,.6)}
html[data-theme="dark"] .bg-slate-100{background-color:var(--surface-3)}
html[data-theme="dark"] .bg-slate-100\/70{background-color:rgba(41,58,88,.7)}
html[data-theme="dark"] .bg-slate-200{background-color:#33445f}
html[data-theme="dark"] .hover\:bg-slate-50:hover{background-color:#243350}
html[data-theme="dark"] .hover\:bg-slate-200:hover{background-color:#3a4c6b}
html[data-theme="dark"] .bg-slate-700{background-color:#3a4a63}
html[data-theme="dark"] .bg-slate-800{background-color:#233048}
html[data-theme="dark"] .hover\:bg-slate-800:hover{background-color:#2a3852}
html[data-theme="dark"] .bg-slate-900{background-color:#0a101e}

html[data-theme="dark"] .text-slate-900{color:#eef2f7}
html[data-theme="dark"] .text-slate-800{color:#e2e8f0}
html[data-theme="dark"] .text-slate-700{color:#cbd5e1}
html[data-theme="dark"] .text-slate-600{color:#adbccf}
html[data-theme="dark"] .text-slate-500{color:#93a5bc}
html[data-theme="dark"] .text-slate-400{color:#7e8fa6}
html[data-theme="dark"] .hover\:text-slate-600:hover{color:#cbd5e1}

html[data-theme="dark"] .border-slate-50{border-color:#243250}
html[data-theme="dark"] .border-slate-100{border-color:#2a3a56}
html[data-theme="dark"] .border-slate-200{border-color:var(--line)}
html[data-theme="dark"] .border-slate-300{border-color:#3b4d69}
html[data-theme="dark"] .border-slate-400{border-color:#4b5f7e}
html[data-theme="dark"] .divide-slate-50 > *{border-color:#243250}

/* forms — readable fields with the native dark chrome */
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background-color:#141d30;color:var(--ink)}

/* accent tints on dark (teal-* follows the accent everywhere) */
html[data-theme="dark"] .bg-teal-50{background-color:color-mix(in srgb, var(--acc-500) 13%, transparent)}
html[data-theme="dark"] .bg-teal-100{background-color:color-mix(in srgb, var(--acc-500) 22%, transparent)}
html[data-theme="dark"] .border-teal-200{border-color:color-mix(in srgb, var(--acc-500) 40%, transparent)}
html[data-theme="dark"] .border-teal-300{border-color:color-mix(in srgb, var(--acc-500) 55%, transparent)}
html[data-theme="dark"] .text-teal-600{color:var(--acc-300)}
html[data-theme="dark"] .text-teal-700{color:var(--acc-300)}
html[data-theme="dark"] .text-teal-800{color:var(--acc-200)}
html[data-theme="dark"] .hover\:text-teal-600:hover{color:var(--acc-300)}

/* status hues — tinted surfaces + lifted text (keeps meaning, fits dark) */
html[data-theme="dark"] .bg-red-50{background-color:rgba(239,68,68,.13)}
html[data-theme="dark"] .bg-red-100{background-color:rgba(239,68,68,.22)}
html[data-theme="dark"] .hover\:bg-red-50:hover{background-color:rgba(239,68,68,.2)}
html[data-theme="dark"] .border-red-200,
html[data-theme="dark"] .border-red-300{border-color:rgba(239,68,68,.4)}
html[data-theme="dark"] .text-red-600{color:#f87171}
html[data-theme="dark"] .text-red-700,html[data-theme="dark"] .text-red-800{color:#fca5a5}

html[data-theme="dark"] .bg-rose-50{background-color:rgba(244,63,94,.13)}
html[data-theme="dark"] .bg-rose-50\/40{background-color:rgba(244,63,94,.08)}
html[data-theme="dark"] .bg-rose-50\/30,
html[data-theme="dark"] .hover\:bg-rose-50\/30:hover{background-color:rgba(244,63,94,.06)}
html[data-theme="dark"] .hover\:bg-rose-50:hover{background-color:rgba(244,63,94,.2)}
html[data-theme="dark"] .bg-rose-100{background-color:rgba(244,63,94,.22)}
html[data-theme="dark"] .border-rose-200,
html[data-theme="dark"] .border-rose-300,
html[data-theme="dark"] .hover\:border-rose-300:hover{border-color:rgba(244,63,94,.4)}
html[data-theme="dark"] .text-rose-400{color:#fda4af}
html[data-theme="dark"] .text-rose-500{color:#fb7185}
html[data-theme="dark"] .text-rose-600,html[data-theme="dark"] .text-rose-700{color:#fda4af}
html[data-theme="dark"] .hover\:text-rose-400:hover,
html[data-theme="dark"] .hover\:text-rose-600:hover{color:#fda4af}

html[data-theme="dark"] .bg-amber-50{background-color:rgba(245,158,11,.12)}
html[data-theme="dark"] .hover\:bg-amber-50:hover{background-color:rgba(245,158,11,.2)}
html[data-theme="dark"] .bg-amber-100{background-color:rgba(245,158,11,.2)}
html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-amber-300{border-color:rgba(245,158,11,.4)}
html[data-theme="dark"] .ring-amber-300{--tw-ring-color:rgba(245,158,11,.5)}
html[data-theme="dark"] .text-amber-500{color:#fbbf24}
html[data-theme="dark"] .text-amber-600{color:#fcd34d}
html[data-theme="dark"] .text-amber-700,html[data-theme="dark"] .text-amber-800{color:#fde68a}

html[data-theme="dark"] .bg-orange-50{background-color:rgba(249,115,22,.12)}
html[data-theme="dark"] .bg-orange-100{background-color:rgba(249,115,22,.22)}
html[data-theme="dark"] .border-orange-200{border-color:rgba(249,115,22,.4)}
html[data-theme="dark"] .text-orange-700{color:#fdba74}

html[data-theme="dark"] .bg-green-50{background-color:rgba(34,197,94,.13)}
html[data-theme="dark"] .bg-green-100{background-color:rgba(34,197,94,.22)}
html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-green-300{border-color:rgba(34,197,94,.4)}
html[data-theme="dark"] .text-green-600{color:#4ade80}
html[data-theme="dark"] .text-green-700,html[data-theme="dark"] .text-green-800{color:#86efac}

html[data-theme="dark"] .bg-emerald-50{background-color:rgba(16,185,129,.13)}
html[data-theme="dark"] .hover\:bg-emerald-50:hover{background-color:rgba(16,185,129,.2)}
html[data-theme="dark"] .border-emerald-200,
html[data-theme="dark"] .border-emerald-300{border-color:rgba(16,185,129,.4)}
html[data-theme="dark"] .text-emerald-600{color:#34d399}
html[data-theme="dark"] .text-emerald-700,html[data-theme="dark"] .text-emerald-800{color:#6ee7b7}

html[data-theme="dark"] .bg-sky-50{background-color:rgba(14,165,233,.13)}
html[data-theme="dark"] .bg-sky-100{background-color:rgba(14,165,233,.22)}
html[data-theme="dark"] .border-sky-200{border-color:rgba(14,165,233,.4)}
html[data-theme="dark"] .text-sky-700{color:#7dd3fc}

html[data-theme="dark"] .bg-indigo-50{background-color:rgba(99,102,241,.14)}
html[data-theme="dark"] .bg-indigo-50\/50{background-color:rgba(99,102,241,.09)}
html[data-theme="dark"] .bg-indigo-100{background-color:rgba(99,102,241,.24)}
html[data-theme="dark"] .border-indigo-200{border-color:rgba(99,102,241,.4)}
html[data-theme="dark"] .text-indigo-600{color:#a5b4fc}
html[data-theme="dark"] .text-indigo-700{color:#a5b4fc}
html[data-theme="dark"] .text-indigo-900{color:#c7d2fe}

html[data-theme="dark"] .bg-purple-50{background-color:rgba(168,85,247,.14)}
html[data-theme="dark"] .bg-purple-100{background-color:rgba(168,85,247,.24)}
html[data-theme="dark"] .border-purple-200{border-color:rgba(168,85,247,.4)}
html[data-theme="dark"] .text-purple-700{color:#d8b4fe}

html[data-theme="dark"] .bg-pink-50{background-color:rgba(236,72,153,.14)}
html[data-theme="dark"] .bg-pink-100{background-color:rgba(236,72,153,.24)}
html[data-theme="dark"] .border-pink-200{border-color:rgba(236,72,153,.4)}
html[data-theme="dark"] .text-pink-700{color:#f9a8d4}

/* smooth cross-fade while switching (added briefly by theme.js) */
html.theme-anim, html.theme-anim *{
    transition:background-color .25s ease, color .2s ease, border-color .25s ease !important;
}
} /* end @media screen */

/* ---------------------------------- 4b. FLOATING TOASTS (flash messages) --
   These float over arbitrary page content, so they need SOLID/opaque
   backgrounds — the faint bg-*-50 tints used for inline banners are nearly
   invisible when they float over a dark page. Defined for both modes with a
   strong shadow so a save/error message is always clearly readable.          */
.toast{ border:1px solid; box-shadow:0 12px 30px rgba(15,23,42,.18); }
.toast-success{ background:#ecfdf5; color:#065f46; border-color:#6ee7b7; }
.toast-error{   background:#fef2f2; color:#991b1b; border-color:#fca5a5; }
.toast button{ color:inherit; }
@media screen{
    html[data-theme="dark"] .toast{ box-shadow:0 16px 38px rgba(0,0,0,.55); }
    html[data-theme="dark"] .toast-success{ background:#0f3226; color:#a7f3d0; border-color:#1f7a54; }
    html[data-theme="dark"] .toast-error{   background:#3a161a; color:#fecaca; border-color:#9b2c33; }
}

/* ------------------------------------------ 5. FLOATING THEME WIDGET -- */
#themeBtn{
    position:fixed; right:20px; bottom:20px; z-index:70;
    width:48px; height:48px; border-radius:9999px; border:none;
    background:var(--acc-600); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 25px rgba(0,0,0,.28);
    transition:transform .15s ease, background-color .15s ease;
}
#themeBtn:hover{transform:scale(1.08); background:var(--acc-700)}
#themeBtn svg{width:22px; height:22px}

#themePanel{
    position:fixed; right:20px; bottom:80px; z-index:70; width:248px;
    background:var(--surface); color:var(--ink);
    border:1px solid var(--line); border-radius:16px; padding:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.30);
    opacity:0; transform:translateY(10px) scale(.97); pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
}
#themePanel.open{opacity:1; transform:none; pointer-events:auto}
#themePanel .tp-head{font-weight:600; font-size:.85rem; margin-bottom:10px}
#themePanel .tp-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
    opacity:.55; margin:12px 0 6px}
#themePanel .tp-seg{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px}
#themePanel .tp-seg button{
    border:1px solid var(--line); background:transparent; color:inherit;
    border-radius:10px; padding:7px 0 5px; font-size:.72rem; line-height:1.1;
    display:flex; flex-direction:column; align-items:center; gap:3px;
}
#themePanel .tp-seg button svg{width:16px; height:16px}
#themePanel .tp-seg button.active{
    background:var(--acc-600); border-color:var(--acc-600); color:#fff;
}
#themePanel .tp-swatches{display:flex; gap:10px; padding:2px 0}
#themePanel .tp-sw{
    width:26px; height:26px; border-radius:9999px; border:none; position:relative;
    background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
    transition:transform .12s ease;
}
#themePanel .tp-sw:hover{transform:scale(1.15)}
#themePanel .tp-sw.active{outline:2px solid var(--sw); outline-offset:2px}
#themePanel .tp-sw.active::after{
    content:"✓"; position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; color:#fff; font-size:.8rem; font-weight:700;
}
#themePanel .tp-note{font-size:.65rem; opacity:.5; margin-top:10px}

@media print{ #themeBtn, #themePanel{display:none !important} }