/* Shared theme control */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .4rem .65rem;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25rem;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background: #f1f5f9; }
.theme-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.theme-toggle-floating { position: fixed; top: 1rem; right: 1rem; z-index: 100; }

/* Existing light utility colors are remapped, including classes in JS templates. */
html[data-theme="dark"] body { background-color: #000000 !important; color: #e2e8f0; }
html[data-theme="dark"] [class~="bg-white"] { background-color: #1e293b !important; }
html[data-theme="dark"] [class~="bg-gray-50"], html[data-theme="dark"] [class~="bg-slate-50"] { background-color: #1e293b !important; }
html[data-theme="dark"] [class~="bg-gray-100"], html[data-theme="dark"] [class~="bg-slate-100"] { background-color: #334155 !important; }
html[data-theme="dark"] body[class~="bg-gray-100"] { background-color: #000000 !important; }
html[data-theme="dark"] [class~="bg-gray-200"], html[data-theme="dark"] [class~="bg-gray-300"], html[data-theme="dark"] [class~="bg-slate-200"] { background-color: #475569 !important; }
html[data-theme="dark"] [class~="text-gray-900"], html[data-theme="dark"] [class~="text-gray-800"], html[data-theme="dark"] [class~="text-gray-700"], html[data-theme="dark"] [class~="text-slate-900"], html[data-theme="dark"] [class~="text-slate-800"], html[data-theme="dark"] [class~="text-slate-700"], html[data-theme="dark"] [class~="text-black"] { color: #e2e8f0 !important; }
html[data-theme="dark"] [class~="text-gray-600"], html[data-theme="dark"] [class~="text-gray-500"], html[data-theme="dark"] [class~="text-gray-400"], html[data-theme="dark"] [class~="text-gray-300"], html[data-theme="dark"] [class~="text-gray-200"], html[data-theme="dark"] [class~="text-slate-600"], html[data-theme="dark"] [class~="text-slate-500"], html[data-theme="dark"] [class~="text-slate-400"], html[data-theme="dark"] [class~="text-slate-300"], html[data-theme="dark"] [class~="text-slate-200"] { color: #cbd5e1 !important; }
html[data-theme="dark"] [class~="border-gray-100"], html[data-theme="dark"] [class~="border-gray-200"], html[data-theme="dark"] [class~="border-gray-300"], html[data-theme="dark"] [class~="border-slate-100"], html[data-theme="dark"] [class~="border-slate-200"], html[data-theme="dark"] [class~="border-slate-300"] { border-color: #475569 !important; }
html[data-theme="dark"] [class~="divide-gray-100"] > :not([hidden]) ~ :not([hidden]), html[data-theme="dark"] [class~="divide-gray-200"] > :not([hidden]) ~ :not([hidden]) { border-color: #475569 !important; }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { color-scheme: dark; }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #0f172a; color: #e2e8f0; border-color: #475569; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #94a3b8; }
html[data-theme="dark"] [class~="bg-blue-50"] { background-color: #172554 !important; }
html[data-theme="dark"] [class~="bg-emerald-50"] { background-color: #022c22 !important; }
html[data-theme="dark"] [class~="bg-amber-50"] { background-color: #451a03 !important; }
html[data-theme="dark"] [class~="bg-red-50"] { background-color: #450a0a !important; }
html[data-theme="dark"] [class~="bg-indigo-50"] { background-color: #1e1b4b !important; }
html[data-theme="dark"] [class~="bg-blue-50/50"] { background-color: #172554 !important; }
html[data-theme="dark"] [class~="bg-indigo-50/50"] { background-color: #1e1b4b !important; }
html[data-theme="dark"] [class~="bg-blue-100"] { background-color: #1e3a8a !important; }
html[data-theme="dark"] [class~="bg-emerald-100"] { background-color: #064e3b !important; }
html[data-theme="dark"] [class~="bg-amber-100"] { background-color: #78350f !important; }
html[data-theme="dark"] [class~="bg-red-100"], html[data-theme="dark"] [class~="bg-red-200"] { background-color: #7f1d1d !important; }
html[data-theme="dark"] [class~="bg-rose-50"], html[data-theme="dark"] [class~="bg-rose-100"] { background-color: #881337 !important; }
html[data-theme="dark"] [class~="bg-purple-100"] { background-color: #581c87 !important; }
html[data-theme="dark"] [class~="text-blue-800"], html[data-theme="dark"] [class~="text-emerald-800"], html[data-theme="dark"] [class~="text-amber-800"], html[data-theme="dark"] [class~="text-red-800"], html[data-theme="dark"] [class~="text-indigo-800"] { color: #e2e8f0 !important; }
html[data-theme="dark"] [class~="text-blue-600"], html[data-theme="dark"] [class~="text-blue-700"] { color: #93c5fd !important; }
html[data-theme="dark"] [class~="text-emerald-600"], html[data-theme="dark"] [class~="text-emerald-700"] { color: #6ee7b7 !important; }
html[data-theme="dark"] [class~="text-amber-700"] { color: #fcd34d !important; }
html[data-theme="dark"] [class~="text-indigo-600"], html[data-theme="dark"] [class~="text-indigo-700"], html[data-theme="dark"] [class~="text-indigo-900"] { color: #a5b4fc !important; }
html[data-theme="dark"] [class~="text-purple-700"] { color: #d8b4fe !important; }
html[data-theme="dark"] [class~="text-red-500"], html[data-theme="dark"] [class~="text-red-600"], html[data-theme="dark"] [class~="text-red-700"], html[data-theme="dark"] [class~="text-red-900"], html[data-theme="dark"] [class~="text-rose-500"], html[data-theme="dark"] [class~="text-rose-700"], html[data-theme="dark"] [class~="text-rose-800"] { color: #fda4af !important; }
html[data-theme="dark"] [class~="border-blue-200"], html[data-theme="dark"] [class~="border-emerald-200"], html[data-theme="dark"] [class~="border-amber-200"], html[data-theme="dark"] [class~="border-red-200"], html[data-theme="dark"] [class~="border-indigo-200"] { border-color: #475569 !important; }
html[data-theme="dark"] .theme-toggle { background: #334155; border-color: #64748b; color: #f8fafc; }
html[data-theme="dark"] .theme-toggle:hover { background: #475569; }

/* Tailwind hover variants need their own dark backgrounds; base bg-* rules do not match them. */
html[data-theme="dark"] [class~="hover:bg-gray-50"]:hover,
html[data-theme="dark"] [class~="hover:bg-slate-50"]:hover { background-color: #334155 !important; }
html[data-theme="dark"] [class~="hover:bg-gray-100"]:hover,
html[data-theme="dark"] [class~="hover:bg-gray-200"]:hover,
html[data-theme="dark"] [class~="hover:bg-gray-300"]:hover,
html[data-theme="dark"] [class~="hover:bg-slate-100"]:hover,
html[data-theme="dark"] [class~="hover:bg-slate-200"]:hover { background-color: #475569 !important; }
html[data-theme="dark"] [class~="hover:bg-blue-50"]:hover,
html[data-theme="dark"] [class~="hover:bg-blue-50/50"]:hover,
html[data-theme="dark"] [class~="hover:bg-blue-100"]:hover { background-color: #1e3a8a !important; }
html[data-theme="dark"] [class~="hover:bg-indigo-50"]:hover,
html[data-theme="dark"] [class~="hover:bg-indigo-50/50"]:hover { background-color: #312e81 !important; }
html[data-theme="dark"] [class~="hover:bg-amber-100"]:hover { background-color: #78350f !important; }

/* Explicit selected rows/cells keep their dark highlight, including runtime-applied states. */
html[data-theme="dark"] tr[aria-selected="true"],
html[data-theme="dark"] tr.selected,
html[data-theme="dark"] tr.is-selected,
html[data-theme="dark"] td[aria-selected="true"],
html[data-theme="dark"] td.selected,
html[data-theme="dark"] td.is-selected { background-color: #1e3a8a !important; color: #eff6ff !important; }

/* Preserve the established dark outer frame of the standalone punch-clock page in light mode. */
html[data-theme="light"] body.bg-slate-900 { background-color: #f1f5f9 !important; }
html[data-theme="light"] body.bg-slate-900 > header.bg-slate-800 { background-color: #fff !important; border-color: #e2e8f0 !important; }
html[data-theme="light"] body.bg-slate-900 > header h1 { color: #1e293b !important; }
html[data-theme="light"] body.bg-slate-900 > header a { background-color: #e2e8f0 !important; color: #334155 !important; }
html[data-theme="light"] body.bg-slate-900 .theme-toggle { background: #fff; color: #334155; }
html[data-theme="light"] #app-contenido > header.bg-slate-800 { background-color: #fff !important; border-color: #e2e8f0 !important; }
html[data-theme="light"] #app-contenido > header h1 { color: #1e293b !important; }
html[data-theme="light"] #app-contenido > header a { background-color: #e2e8f0 !important; color: #334155 !important; }