/* theme-toggle.css
 * Shared by every page (app.php + all Tailwind-based pages).
 *
 * Section A — the icon-only light/dark pill switch.
 * Section B — light-theme overrides that remap the dark Tailwind utility
 *             classes used by the site/admin pages to app.php's light palette.
 *
 * Every light rule is prefixed with html[data-theme="light"] so its specificity
 * (>= 0,2,1) beats Tailwind's (0,1,0) utilities, their (0,2,0) pseudo variants
 * and the (0,1,0) .manager-tab component classes.
 */

/* ==========================================================================
   Section A — toggle component
   ========================================================================== */

.theme-toggle {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    line-height: 0;
    cursor: pointer;
    border-radius: 999px;
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.55);
}

.theme-toggle-track {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
    border-radius: 999px;
    background-color: rgba(37, 99, 235, 0.22);
    transition: background-color 0.18s ease;
}

.theme-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #0ea5e9;
    transform: translateX(26px);
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.theme-toggle-icon {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
}

.theme-toggle-icon svg {
    width: 13px;
    height: 13px;
}

.theme-toggle-icon--sun {
    left: 6.5px;
    color: rgba(148, 163, 184, 0.7);
}

.theme-toggle-icon--moon {
    right: 6.5px;
    color: #ffffff;
}

html[data-theme="light"] .theme-toggle-track {
    background-color: rgba(250, 204, 21, 0.38);
}

html[data-theme="light"] .theme-toggle-knob {
    background-color: #f5a623;
    transform: translateX(0);
}

html[data-theme="light"] .theme-toggle-icon--sun {
    color: #ffffff;
}

html[data-theme="light"] .theme-toggle-icon--moon {
    color: rgba(100, 116, 139, 0.85);
}

/* ==========================================================================
   Section B — light-theme overrides for the Tailwind pages
   ========================================================================== */

/* --- Text colours --- */
html[data-theme="light"] .text-white {
    color: #1d1d1f;
}

html[data-theme="light"] .text-slate-200 {
    color: #2b2b2e;
}

html[data-theme="light"] .text-slate-300 {
    color: #4a4a4f;
}

html[data-theme="light"] .text-slate-400 {
    color: #5f5f63;
}

html[data-theme="light"] .text-slate-500 {
    color: #6e6e73;
}

html[data-theme="light"] .text-blue-100,
html[data-theme="light"] .text-blue-200,
html[data-theme="light"] .text-blue-200\/90 {
    color: #1e40af;
}

html[data-theme="light"] .text-blue-300,
html[data-theme="light"] .text-blue-400,
html[data-theme="light"] .text-blue-500 {
    color: #1d4ed8;
}

html[data-theme="light"] .text-indigo-300,
html[data-theme="light"] .text-indigo-400 {
    color: #4338ca;
}

html[data-theme="light"] .text-rose-200 {
    color: #b91c1c;
}

html[data-theme="light"] .text-emerald-200,
html[data-theme="light"] .text-emerald-300 {
    color: #047857;
}

html[data-theme="light"] .text-green-400 {
    color: #15803d;
}

html[data-theme="light"] .text-amber-100,
html[data-theme="light"] .text-amber-200 {
    color: #92400e;
}

html[data-theme="light"] .text-amber-300 {
    color: #b45309;
}

html[data-theme="light"] .text-yellow-400 {
    color: #a16207;
}

/* Solid coloured buttons keep white label text. Must stay after the
   .text-white override above — specificity (0,3,1) wins over (0,2,1). */
html[data-theme="light"] .bg-blue-500.text-white,
html[data-theme="light"] .bg-blue-600.text-white,
html[data-theme="light"] .bg-blue-700.text-white,
html[data-theme="light"] .bg-indigo-500.text-white,
html[data-theme="light"] .bg-indigo-600.text-white,
html[data-theme="light"] .bg-indigo-700.text-white,
html[data-theme="light"] .bg-rose-500.text-white,
html[data-theme="light"] .bg-rose-600.text-white,
html[data-theme="light"] .bg-red-500.text-white,
html[data-theme="light"] .bg-green-500.text-white,
html[data-theme="light"] .bg-emerald-500.text-white,
html[data-theme="light"] .bg-amber-500.text-white,
html[data-theme="light"] .bg-yellow-500.text-white {
    color: #ffffff;
}

/* --- Surface backgrounds --- */
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-900 {
    background-color: #ffffff;
}

/* Full-screen modal scrim (admin-licenses.php, admin-users.php) */
html[data-theme="light"] .bg-slate-950\/80 {
    background-color: rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] .bg-slate-950\/95 {
    background-color: rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .bg-slate-950\/70 {
    background-color: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .bg-slate-950\/60 {
    background-color: rgba(255, 255, 255, 0.85);
}

html[data-theme="light"] .bg-slate-950\/50 {
    background-color: rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .bg-slate-950\/40 {
    background-color: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .bg-slate-900\/95 {
    background-color: rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .bg-slate-900\/90 {
    background-color: rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .bg-slate-900\/80 {
    background-color: rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .bg-slate-800 {
    background-color: #f2f2f5;
}

html[data-theme="light"] .bg-slate-800\/60 {
    background-color: rgba(242, 242, 245, 0.7);
}

html[data-theme="light"] .bg-slate-800\/50 {
    background-color: rgba(242, 242, 245, 0.6);
}

html[data-theme="light"] .bg-slate-700 {
    background-color: #e4e4e8;
}

html[data-theme="light"] .bg-slate-700\/60 {
    background-color: rgba(228, 228, 232, 0.7);
}

/* --- Borders --- */
html[data-theme="light"] .border-slate-900,
html[data-theme="light"] .border-slate-800 {
    border-color: #e5e5e9;
}

html[data-theme="light"] .border-slate-700 {
    border-color: #dcdce0;
}

html[data-theme="light"] .border-slate-700\/70 {
    border-color: rgba(220, 220, 224, 0.8);
}

html[data-theme="light"] .border-slate-700\/60 {
    border-color: rgba(220, 220, 224, 0.7);
}

html[data-theme="light"] .border-slate-700\/50 {
    border-color: rgba(220, 220, 224, 0.6);
}

html[data-theme="light"] .border-slate-600 {
    border-color: #cdcdd2;
}

html[data-theme="light"] .border-slate-600\/60 {
    border-color: rgba(205, 205, 210, 0.7);
}

html[data-theme="light"] .border-blue-500 {
    border-color: #2563eb;
}

html[data-theme="light"] .border-blue-500\/20 {
    border-color: rgba(37, 99, 235, 0.25);
}

html[data-theme="light"] .border-blue-500\/30 {
    border-color: rgba(37, 99, 235, 0.35);
}

html[data-theme="light"] .border-blue-400\/40 {
    border-color: rgba(37, 99, 235, 0.35);
}

html[data-theme="light"] .border-rose-500\/30 {
    border-color: rgba(220, 38, 38, 0.3);
}

html[data-theme="light"] .border-emerald-500\/30 {
    border-color: rgba(5, 150, 105, 0.3);
}

html[data-theme="light"] .border-indigo-500\/20 {
    border-color: rgba(79, 70, 229, 0.25);
}

html[data-theme="light"] .border-indigo-500\/30 {
    border-color: rgba(79, 70, 229, 0.35);
}

html[data-theme="light"] .border-amber-500\/30 {
    border-color: rgba(217, 119, 6, 0.3);
}

html[data-theme="light"] .border-green-500\/20 {
    border-color: rgba(22, 163, 74, 0.25);
}

html[data-theme="light"] .border-yellow-500\/20 {
    border-color: rgba(202, 138, 4, 0.25);
}

/* --- Gradients and shadows --- */
html[data-theme="light"] .from-slate-800 {
    --tw-gradient-from: #f2f2f5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(242, 242, 245, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html[data-theme="light"] .to-slate-900 {
    --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
}

html[data-theme="light"] .from-slate-950\/55 {
    --tw-gradient-from: rgba(255, 255, 255, 0.75) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html[data-theme="light"] .from-blue-900\/40 {
    --tw-gradient-from: rgba(37, 99, 235, 0.16) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(37, 99, 235, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html[data-theme="light"] .shadow-slate-950\/60 {
    --tw-shadow-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .shadow-slate-950\/40 {
    --tw-shadow-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .shadow-blue-950\/10 {
    --tw-shadow-color: rgba(0, 0, 0, 0.06);
}

/* --- Hover / state variants --- */
html[data-theme="light"] .hover\:bg-slate-800:hover {
    background-color: #ececee;
}

html[data-theme="light"] .hover\:bg-slate-900:hover {
    background-color: #f2f2f5;
}

html[data-theme="light"] .hover\:bg-slate-700:hover {
    background-color: #dcdce0;
}

html[data-theme="light"] .hover\:text-white:hover {
    color: #1d1d1f;
}

html[data-theme="light"] .hover\:border-slate-600:hover {
    border-color: #cdcdd2;
}

html[data-theme="light"] .hover\:text-blue-200:hover {
    color: #1d4ed8;
}

/* --- Component classes with dark colours baked in --- */
html[data-theme="light"] .manager-tab-list {
    border-color: rgba(220, 220, 224, 0.7);
}

html[data-theme="light"] .manager-tab {
    color: #5f5f63;
}

html[data-theme="light"] .manager-tab:not(.active):hover {
    background-color: rgba(242, 242, 245, 0.8);
    color: #2b2b2e;
}

html[data-theme="light"] .manager-tab.active {
    border-color: rgba(220, 220, 224, 0.7);
    background-color: #f2f2f5;
    color: #1d1d1f;
}

html[data-theme="light"] .manager-tab.active::after {
    background: #ffffff;
}