/* ═══════════════════════════════════════════════════════════════════════════
   THEME CSS VARIABLES
   RGB channel values (space-separated, no #) so Tailwind's opacity modifier
   syntax  bg-dark-800/50  works correctly via:
     color: rgb(var(--color-dark-800) / 0.5)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark theme (default) ─────────────────────────────────────────────────── */
:root {
    --color-dark-50:  248 250 252;  /* #f8fafc — near-white */
    --color-dark-100: 241 245 249;  /* #f1f5f9 */
    --color-dark-200: 226 232 240;  /* #e2e8f0 */
    --color-dark-300: 203 213 225;  /* #cbd5e1 */
    --color-dark-400: 148 163 184;  /* #94a3b8 */
    --color-dark-500: 100 116 139;  /* #64748b */
    --color-dark-600:  71  85 105;  /* #475569 */
    --color-dark-700:  51  65  85;  /* #334155 */
    --color-dark-800:  30  41  59;  /* #1e293b */
    --color-dark-900:  15  23  42;  /* #0f172a */
    --color-dark-950:   2   6  23;  /* #020617 — near-black */

    /* Semantic chart/icon colours */
    --chart-text:   #e5e7eb;
    --chart-tick:   #9ca3af;
    --chart-grid:   #374151;
}

/* ── Light theme ──────────────────────────────────────────────────────────── */
html.light {
    /* Palette is inverted so every bg-dark-* / border-dark-* / text-dark-*
       class in every component automatically flips without editing Vue files. */
    --color-dark-50:   15  23  42;  /* near-black  → darkest text  */
    --color-dark-100:  30  41  59;  /* #1e293b    */
    --color-dark-200:  51  65  85;  /* #334155    */
    --color-dark-300:  71  85 105;  /* #475569    */
    --color-dark-400: 100 116 139;  /* #64748b    */
    --color-dark-500: 148 163 184;  /* #94a3b8    */
    --color-dark-600: 203 213 225;  /* #cbd5e1  → subtle borders   */
    --color-dark-700: 226 232 240;  /* #e2e8f0  → borders          */
    --color-dark-800: 255 255 255;  /* white    → cards / inputs   */
    --color-dark-900: 248 250 252;  /* #f8fafc  → section bg       */
    --color-dark-950: 241 245 249;  /* #f1f5f9  → page bg          */

    /* Semantic chart/icon colours */
    --chart-text:   #334155;
    --chart-tick:   #64748b;
    --chart-grid:   #e2e8f0;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply bg-gradient-to-br from-dark-950 via-dark-900 to-dark-800 text-white antialiased;
    }
    
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        @apply bg-dark-900;
    }
    
    ::-webkit-scrollbar-thumb {
        @apply bg-dark-600 rounded-full hover:bg-dark-500;
    }
    
    * {
        scroll-behavior: smooth;
    }
    
    /* Ensure white backgrounds have dark text */
    input[style*="background-color: white"],
    input[style*="background: white"],
    input.bg-white,
    select[style*="background-color: white"],
    select[style*="background: white"],
    select.bg-white,
    textarea[style*="background-color: white"],
    textarea[style*="background: white"],
    textarea.bg-white {
        color: #1e293b !important;
    }

    /* Date/time inputs: force dark color-scheme so browser renders the
       calendar icon and popup in a dark palette, and text stays white */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"] {
        color-scheme: dark;
        color: #ffffff;
    }

    /* Calendar/clock picker icon — handled by unlayered rules below for
       higher specificity. Keep cursor here as a baseline. */
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    input[type="month"]::-webkit-calendar-picker-indicator,
    input[type="week"]::-webkit-calendar-picker-indicator {
        cursor: pointer;
    }
    
    /* Ensure select elements with white backgrounds have proper styling */
    select {
        color: inherit;
    }
    
    select option {
        background-color: #1e293b;
        color: white;
    }
}

@layer components {
    /* Modern Button Styles */
    .btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-105 active:scale-95;
    }
    
    .btn-primary {
        @apply bg-gradient-to-r from-primary-600 to-primary-500 text-white hover:from-primary-700 hover:to-primary-600 focus:ring-primary-500 shadow-lg hover:shadow-glow;
    }
    
    .btn-secondary {
        @apply bg-gradient-to-r from-secondary-600 to-secondary-500 text-white hover:from-secondary-700 hover:to-secondary-600 focus:ring-secondary-500 shadow-lg;
    }
    
    .btn-success {
        @apply bg-gradient-to-r from-success-600 to-success-500 text-white hover:from-success-700 hover:to-success-600 focus:ring-success-500 shadow-lg;
    }
    
    .btn-warning {
        @apply bg-gradient-to-r from-warning-600 to-warning-500 text-white hover:from-warning-700 hover:to-warning-600 focus:ring-warning-500 shadow-lg;
    }
    
    .btn-danger {
        @apply bg-gradient-to-r from-danger-600 to-danger-500 text-white hover:from-danger-700 hover:to-danger-600 focus:ring-danger-500 shadow-lg;
    }
    
    .btn-ghost {
        @apply bg-transparent border-2 border-dark-600 text-white hover:bg-dark-800 hover:border-dark-500 focus:ring-dark-500;
    }
    
    /* Modern Card Styles with Glass Morphism */
    .card {
        @apply bg-gradient-to-br from-dark-800/90 to-dark-900/90 backdrop-blur-xl rounded-2xl shadow-custom p-6 border border-dark-700/50 transition-all duration-300 hover:shadow-custom-lg hover:border-dark-600/50 animate-fade-in-up;
    }
    
    .card-glass {
        @apply bg-white/5 backdrop-blur-xl rounded-2xl shadow-custom p-6 border border-white/10 transition-all duration-300 hover:bg-white/10 hover:shadow-custom-lg;
    }
    
    .card-hover {
        @apply hover:transform hover:-translate-y-1;
    }
    
    /* Enhanced Input Styles */
    .input {
        @apply w-full px-4 py-3 bg-dark-800/50 border border-dark-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 hover:border-dark-500 backdrop-blur-sm;
    }
    
    /* White background input variant */
    .input-light,
    .input[style*="background"] {
        @apply text-dark-900;
    }
    
    /* Ensure select elements inherit text color */
    select.input {
        @apply text-white;
    }
    
    select.input option {
        @apply bg-dark-800 text-white;
    }
    
    .input-group {
        @apply relative;
    }
    
    .input-icon {
        @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none;
    }
    
    .input-with-icon {
        @apply pl-10;
    }
    
    /* Label Styles */
    .label {
        @apply block text-sm font-semibold text-gray-300 mb-2 tracking-wide;
    }
    
    /* Modern Table Styles */
    .table {
        @apply w-full text-left;
    }
    
    .table thead {
        @apply bg-gradient-to-r from-dark-800 to-dark-900 backdrop-blur-sm;
    }
    
    .table th {
        @apply px-6 py-4 text-xs font-bold text-gray-300 uppercase tracking-wider border-b border-dark-700;
    }
    
    .table td {
        @apply px-6 py-4 whitespace-nowrap text-sm border-b border-dark-800;
    }
    
    .table tbody tr {
        @apply hover:bg-dark-700/60 transition-colors duration-200 cursor-pointer;
    }
    
    .table-striped tbody tr:nth-child(even) {
        @apply bg-dark-950/60;
    }
    
    /* Badge Styles */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide;
    }
    
    .badge-primary {
        @apply bg-primary-500/20 text-primary-300 border border-primary-500/50;
    }
    
    .badge-success {
        @apply bg-success-500/20 text-success-300 border border-success-500/50;
    }
    
    .badge-warning {
        @apply bg-warning-500/20 text-warning-300 border border-warning-500/50;
    }
    
    .badge-danger {
        @apply bg-danger-500/20 text-danger-300 border border-danger-500/50;
    }
    
    .badge-secondary {
        @apply bg-secondary-500/20 text-secondary-300 border border-secondary-500/50;
    }
    
    /* Stat Card */
    .stat-card {
        @apply relative overflow-hidden;
    }
    
    .stat-card-gradient {
        @apply absolute top-0 right-0 w-32 h-32 rounded-full blur-3xl opacity-20;
    }
    
    /* Modal Backdrop */
    .modal-backdrop {
        @apply fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-fade-in;
    }
    
    .modal-content {
        @apply bg-gradient-to-br from-dark-800 to-dark-900 rounded-2xl shadow-custom-lg max-w-2xl w-full max-h-[90vh] overflow-auto border border-dark-700 animate-scale-in;
    }
    
    /* Loading Spinner */
    .spinner {
        @apply inline-block w-8 h-8 border-4 border-primary-500/30 border-t-primary-500 rounded-full animate-spin;
    }
    
    /* Tooltip */
    .tooltip {
        @apply absolute z-50 px-3 py-2 text-xs font-medium text-white bg-dark-700 rounded-lg shadow-lg whitespace-nowrap;
    }
    
    /* Divider */
    .divider {
        @apply border-t border-dark-700 my-6;
    }
    
    /* Alert Styles */
    .alert {
        @apply p-4 rounded-lg border flex items-start space-x-3 animate-fade-in-down;
    }
    
    .alert-info {
        @apply bg-primary-500/10 border-primary-500/50 text-primary-300;
    }
    
    .alert-success {
        @apply bg-success-500/10 border-success-500/50 text-success-300;
    }
    
    .alert-warning {
        @apply bg-warning-500/10 border-warning-500/50 text-warning-300;
    }
    
    .alert-danger {
        @apply bg-danger-500/10 border-danger-500/50 text-danger-300;
    }
    
    /* Skeleton Loader */
    .skeleton {
        @apply bg-gradient-to-r from-dark-800 via-dark-700 to-dark-800 bg-[length:200%_100%] animate-shimmer rounded;
    }
    
    /* Page Header */
    .page-header {
        @apply mb-8 pb-6 border-b border-dark-700;
    }
    
    .page-title {
        @apply text-3xl font-bold bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent;
    }
    
    .page-subtitle {
        @apply text-gray-400 mt-2;
    }
    
    /* Sidebar Link Active State */
    .sidebar-link {
        @apply flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-300 hover:bg-dark-800 hover:text-white transition-all duration-200 relative overflow-hidden;
    }
    
    .sidebar-link::before {
        content: '';
        @apply absolute left-0 top-0 h-full w-1 bg-gradient-to-b from-primary-500 to-primary-600 transform -translate-x-full transition-transform duration-200;
    }
    
    .sidebar-link:hover::before {
        @apply translate-x-0;
    }
    
    .sidebar-link.active {
        @apply bg-gradient-to-r from-primary-600/20 to-primary-500/10 text-white border-l-2 border-primary-500;
    }
    
    /* Progress Bar */
    .progress {
        @apply w-full bg-dark-800 rounded-full h-2 overflow-hidden;
    }
    
    .progress-bar {
        @apply h-full bg-gradient-to-r from-primary-600 to-primary-500 rounded-full transition-all duration-300;
    }
}

@layer utilities {
    .text-gradient {
        @apply bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent;
    }
    
    .border-gradient {
        border-image: linear-gradient(to right, #0ea5e9, #a855f7) 1;
    }
    
    .glass {
        @apply bg-white/5 backdrop-blur-xl border border-white/10;
    }
    
    .shadow-text {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   Placed OUTSIDE @layer so these unlayered rules beat all Tailwind layers.
   The `html.light` ancestor selector adds specificity to win cleanly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global text/background defaults ─────────────────────────────────────── */
html.light body {
    color: rgb(15 23 42);
}

/* ── Fix hardcoded white / light-gray text classes ────────────────────────── */
html.light .text-white    { color: rgb(15  23  42) !important; }
html.light .text-gray-100 { color: rgb(30  41  59) !important; }
html.light .text-gray-200 { color: rgb(51  65  85) !important; }
html.light .text-gray-300 { color: rgb(71  85 105) !important; }
html.light .text-gray-400 { color: rgb(100 116 139) !important; }
html.light .text-gray-500 { color: rgb(107 114 128) !important; }

/* ── Fix glass / ghost borders that use rgba(white) ──────────────────────── */
html.light .border-white\/10 { border-color: rgb(226 232 240) !important; }
html.light .border-white\/5  { border-color: rgb(241 245 249) !important; }
html.light .bg-white\/5  { background-color: rgb(248 250 252) !important; }
html.light .bg-white\/10 { background-color: rgb(241 245 249) !important; }

/* ── Table borders (dark-800 = white in light mode → override to visible) ── */
html.light .table td    { border-bottom-color: rgb(226 232 240) !important; }
html.light .table th    { border-bottom-color: rgb(226 232 240) !important; color: rgb(71 85 105) !important; }
html.light .table thead { background-image: linear-gradient(to right, rgb(248 250 252), rgb(241 245 249)) !important; }
html.light .table tbody tr:hover { background-color: rgb(241 245 249) !important; }
html.light .table-striped tbody tr:nth-child(even) { background-color: rgb(248 250 252) !important; }

/* ── Page header border ───────────────────────────────────────────────────── */
html.light .page-header { border-bottom-color: rgb(226 232 240) !important; }

/* ── Page title gradient: from-white = invisible on light bg → dark gradient */
html.light .page-title {
    background-image: linear-gradient(to right, rgb(15 23 42), rgb(71 85 105)) !important;
}
html.light .page-subtitle { color: rgb(100 116 139) !important; }

/* ── Component classes that compiled `text-white` via @apply ─────────────── */
html.light .label        { color: rgb(51 65 85) !important; }
html.light .sidebar-link { color: rgb(71 85 105) !important; }
html.light .sidebar-link:hover { background-color: rgb(241 245 249) !important; color: rgb(15 23 42) !important; }
html.light .sidebar-link.active { color: rgb(2 132 199) !important; }

html.light .btn-ghost {
    border-color: rgb(203 213 225) !important;
    color: rgb(51 65 85) !important;
}
html.light .btn-ghost:hover {
    background-color: rgb(241 245 249) !important;
    border-color: rgb(148 163 184) !important;
}

html.light .input {
    background-color: rgb(255 255 255 / 0.8) !important;
    border-color: rgb(203 213 225) !important;
    color: rgb(15 23 42) !important;
}
html.light .input::placeholder { color: rgb(148 163 184) !important; }
html.light select.input        { color: rgb(15 23 42) !important; }

/* ── Glass / card-glass ───────────────────────────────────────────────────── */
html.light .card-glass {
    background-color: rgb(255 255 255 / 0.85) !important;
    border-color: rgb(226 232 240) !important;
    box-shadow: 0 4px 24px 0 rgb(15 23 42 / 0.06) !important;
}
html.light .card-glass:hover {
    background-color: rgb(255 255 255 / 0.95) !important;
}
html.light .glass {
    background-color: rgb(251 252 254 / 0.8) !important;
    border-color: rgb(226 232 240) !important;
}

/* ── Card (solid) ─────────────────────────────────────────────────────────── */
html.light .card {
    box-shadow: 0 4px 16px 0 rgb(15 23 42 / 0.07), 0 1px 3px 0 rgb(15 23 42 / 0.05) !important;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
html.light .modal-content {
    border-color: rgb(226 232 240) !important;
}

/* ── Skeleton loader ──────────────────────────────────────────────────────── */
html.light .skeleton {
    background-image: linear-gradient(to right, rgb(241 245 249), rgb(226 232 240), rgb(241 245 249)) !important;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
html.light ::-webkit-scrollbar-track  { background-color: rgb(241 245 249); }
html.light ::-webkit-scrollbar-thumb  { background-color: rgb(203 213 225); border-radius: 9999px; }
html.light ::-webkit-scrollbar-thumb:hover { background-color: rgb(148 163 184); }

/* ── Date / time inputs ───────────────────────────────────────────────────── */
html.light input[type="date"],
html.light input[type="time"],
html.light input[type="datetime-local"],
html.light input[type="month"],
html.light input[type="week"] {
    color-scheme: light;
    color: rgb(15 23 42) !important;
}

html.light input[type="date"]::-webkit-calendar-picker-indicator,
html.light input[type="time"]::-webkit-calendar-picker-indicator,
html.light input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.light input[type="month"]::-webkit-calendar-picker-indicator,
html.light input[type="week"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.6;
}

/* ── Select dropdown options ──────────────────────────────────────────────── */
html.light select option {
    background-color: #ffffff !important;
    color: rgb(15 23 42) !important;
}

/* ── Progress bar track ───────────────────────────────────────────────────── */
html.light .progress { background-color: rgb(226 232 240) !important; }

/* ── Tooltip ──────────────────────────────────────────────────────────────── */
html.light .tooltip {
    background-color: rgb(30 41 59) !important;
    color: #ffffff !important;
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
html.light .divider { border-color: rgb(226 232 240) !important; }

/* ── Calendar / clock picker icons — dark mode (unlayered = highest priority) */
:root:not(.light) input[type="date"]::-webkit-calendar-picker-indicator,
:root:not(.light) input[type="time"]::-webkit-calendar-picker-indicator,
:root:not(.light) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root:not(.light) input[type="month"]::-webkit-calendar-picker-indicator,
:root:not(.light) input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2) !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Ensure dark-mode date inputs always render text + icon in white */
:root:not(.light) input[type="date"],
:root:not(.light) input[type="time"],
:root:not(.light) input[type="datetime-local"],
:root:not(.light) input[type="month"],
:root:not(.light) input[type="week"] {
    color-scheme: dark !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH PAGE — always dark-themed regardless of user theme preference
   Uses explicit inline styles in AuthLayout.vue, but protects against any
   body-level light-mode color resets leaking in via Tailwind utilities.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Background is set via inline style in the component; force it here too */
html.light .auth-page-bg {
    background: linear-gradient(145deg, #060d1f 0%, #0d1f3c 45%, #06111e 100%) !important;
    color: #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — COMPREHENSIVE VISIBILITY PASS 2
   All rules are unlayered for maximum cascade priority.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Auth brand panel: stays dark/navy even in light mode ──────────────── */
html.light .auth-brand-panel {
    background: linear-gradient(160deg, #0f172a 0%, #082f49 55%, #0f172a 100%) !important;
}
html.light .auth-brand-panel .text-white    { color: #f1f5f9 !important; }
html.light .auth-brand-panel .text-gray-100 { color: #e2e8f0 !important; }
html.light .auth-brand-panel .text-gray-200 { color: #cbd5e1 !important; }
html.light .auth-brand-panel .text-gray-300 { color: #cbd5e1 !important; }
html.light .auth-brand-panel .text-gray-400 { color: #94a3b8 !important; }
html.light .auth-brand-panel .text-gray-700 { color: #64748b !important; }

/* ── Sidebar: white background with subtle right-shadow separator ───────── */
html.light aside {
    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 1px 0 0 #e2e8f0, 2px 0 16px rgba(15, 23, 42, 0.05) !important;
}

/* ── Header / Topbar ────────────────────────────────────────────────────── */
html.light header {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: #e2e8f0 !important;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06) !important;
}
/* Header search bar (not using .input class) */
html.light header input[type="text"] {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html.light header input[type="text"]::placeholder { color: #94a3b8 !important; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
html.light footer {
    background-color: rgba(248, 250, 252, 0.9) !important;
    border-top-color: #e2e8f0 !important;
}
html.light footer p { color: #64748b !important; }

/* ── Modal panels: bg-dark-light = white in light mode; needs visible depth  */
html.light .bg-dark-light {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

/* ── Card: white gradient + visible border ─────────────────────────────── */
html.light .card {
    background: linear-gradient(150deg, #ffffff 0%, #f9fafb 100%) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* ── hover:text-white → dark in light mode ─────────────────────────────── */
html.light .hover\:text-white:hover { color: rgb(15 23 42) !important; }

/* ── hover:bg-dark-* used on icon-buttons and topbar actions ───────────── */
html.light .hover\:bg-dark-800:hover       { background-color: #f1f5f9 !important; }
html.light .hover\:bg-dark-700:hover       { background-color: #e2e8f0 !important; }
html.light .hover\:bg-dark-700\/60:hover   { background-color: rgba(226, 232, 240, 0.6) !important; }

/* ── Register step-2 org summary box (bg-dark-800/50 = invisible on white) */
html.light .bg-dark-800\/50 {
    background-color: rgba(241, 245, 249, 0.9) !important;
}

/* ── text-gradient utility (sidebar business title, footer "INVENTINO") ── */
html.light .text-gradient {
    background-image: linear-gradient(to right, #0284c7, #9333ea) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ── Primary colour text: 300/400 shades are too light on white ─────────── */
html.light .text-primary-300 { color: #0369a1 !important; }
html.light .text-primary-400 { color: #0284c7 !important; }
html.light .hover\:text-primary-300:hover { color: #0369a1 !important; }

/* ── Semantic palette 300/400 shades are too light on white ─────────────── */
html.light .text-success-300,
html.light .text-success-400   { color: #16a34a !important; }
html.light .text-warning-300,
html.light .text-warning-400   { color: #d97706 !important; }
html.light .text-danger-300,
html.light .text-danger-400    { color: #dc2626 !important; }
html.light .text-secondary-300,
html.light .text-secondary-400 { color: #9333ea !important; }

/* ── General Tailwind hue classes too light on white ────────────────────── */
html.light .text-red-300,
html.light .text-red-400     { color: #dc2626 !important; }
html.light .text-green-300,
html.light .text-green-400   { color: #16a34a !important; }
html.light .text-teal-300,
html.light .text-teal-400    { color: #0f766e !important; }
html.light .text-cyan-300,
html.light .text-cyan-400    { color: #0891b2 !important; }
html.light .text-sky-300,
html.light .text-sky-400     { color: #0284c7 !important; }
html.light .text-blue-300,
html.light .text-blue-400    { color: #1d4ed8 !important; }
html.light .text-indigo-300,
html.light .text-indigo-400  { color: #4338ca !important; }
html.light .text-purple-300,
html.light .text-purple-400  { color: #9333ea !important; }
html.light .text-violet-300,
html.light .text-violet-400  { color: #7c3aed !important; }
html.light .text-pink-300,
html.light .text-pink-400    { color: #db2777 !important; }
html.light .text-rose-300,
html.light .text-rose-400    { color: #e11d48 !important; }
html.light .text-yellow-300,
html.light .text-yellow-400  { color: #d97706 !important; }
html.light .text-amber-300,
html.light .text-amber-400   { color: #d97706 !important; }
html.light .text-orange-300,
html.light .text-orange-400  { color: #ea580c !important; }

/* ── Badge text + border (compiled via @apply, not inheriting text-*-300) ─ */
html.light .badge-primary   { color: #0284c7 !important; border-color: rgba(2, 132, 199, 0.35) !important; }
html.light .badge-success   { color: #16a34a !important; border-color: rgba(22, 163, 74, 0.35) !important; }
html.light .badge-warning   { color: #d97706 !important; border-color: rgba(217, 119, 6, 0.35)  !important; }
html.light .badge-danger    { color: #dc2626 !important; border-color: rgba(220, 38, 38, 0.35)  !important; }
html.light .badge-secondary { color: #9333ea !important; border-color: rgba(147, 51, 234, 0.35) !important; }

/* ── Alert text + backgrounds ───────────────────────────────────────────── */
html.light .alert-info    {
    color: #0284c7 !important;
    background-color: rgba(14, 165, 233, 0.06) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
}
html.light .alert-success {
    color: #16a34a !important;
    background-color: rgba(34, 197, 94, 0.06) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}
html.light .alert-warning {
    color: #d97706 !important;
    background-color: rgba(245, 158, 11, 0.06) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}
html.light .alert-danger  {
    color: #dc2626 !important;
    background-color: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ── Focus ring offset colour on light page bg ──────────────────────────── */
html.light .focus\:ring-offset-dark-900 { --tw-ring-offset-color: #f8fafc !important; }