/*
 * Orpheus design system. This file is plain CSS (uses CSS Cascade Layers
 * `@layer utilities` natively, no Tailwind directives like @apply / @tailwind),
 * so Propshaft serves it directly to the browser. Do NOT add `@import
 * "tailwindcss"` here unless you also wire it through @tailwindcss/cli
 * (package.json) — the browser can't resolve that import and will 404 it.
 */

@layer utilities {
    /* Orpheus Design System - Minimalist Dark Theme */
    :root {
        --orpheus-bg: #0a0f1a;
        --orpheus-bg-subtle: #111827;
        --orpheus-bg-card: #141c2b;
        --orpheus-border: rgba(255, 255, 255, 0.08);
        --orpheus-border-focus: rgba(59, 130, 246, 0.5);
        --orpheus-text: #f8fafc;
        --orpheus-text-secondary: #94a3b8;
        --orpheus-text-muted: #64748b;
        --orpheus-accent: #3b82f6;
        --orpheus-accent-soft: rgba(59, 130, 246, 0.15);
    }

    /* Light Mode Variables */
    [data-theme="light"] {
        --orpheus-bg: #f8fafc;
        --orpheus-bg-subtle: #f1f5f9;
        --orpheus-bg-card: #ffffff;
        --orpheus-border: #e2e8f0;
        --orpheus-border-focus: rgba(59, 130, 246, 0.5);
        --orpheus-text: #0f172a;
        --orpheus-text-secondary: #475569;
        --orpheus-text-muted: #94a3b8;
        --orpheus-accent: #3b82f6;
        --orpheus-accent-soft: rgba(59, 130, 246, 0.1);
    }

    /* Base Background */
    .orpheus-gradient-bg {
        background: var(--orpheus-bg);
        min-height: 100vh;
    }

    /* Auth Pages - Dark Theme (matching dashboard) */
    .orpheus-auth-bg {
        background: linear-gradient(135deg, #0a0f1a 0%, #1e293b 50%, #0f172a 100%);
        min-height: 100vh;
        position: relative;
    }
    
    .orpheus-auth-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(ellipse at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
        pointer-events: none;
    }
    
    .orpheus-auth-card {
        background: rgba(17, 24, 39, 0.8);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1rem;
        padding: 2rem;
        box-shadow: 
            0 4px 6px -1px rgba(0, 0, 0, 0.3),
            0 10px 15px -3px rgba(0, 0, 0, 0.2);
    }
    
    .orpheus-auth-input {
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        color: #f8fafc;
        font-size: 0.875rem;
        transition: all 0.15s ease;
        width: 100%;
    }
    
    .orpheus-auth-input:focus {
        outline: none;
        border-color: rgba(59, 130, 246, 0.5);
        background: rgba(15, 23, 42, 0.8);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .orpheus-auth-input::placeholder {
        color: #64748b;
    }
    
    .orpheus-auth-btn {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.875rem;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
    }
    
    .orpheus-auth-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }
    
    .orpheus-auth-btn:active {
        transform: translateY(0);
    }

    /* Typography */
    .orpheus-gradient-text {
        color: var(--orpheus-accent);
    }

    .orpheus-glow-text {
        color: var(--orpheus-text);
    }

    /* Buttons - Clean and Minimal */
    .orpheus-btn-primary {
        background: var(--orpheus-accent);
        color: white;
        padding: 0.625rem 1.25rem;
        border-radius: 0.375rem;
        font-weight: 500;
        font-size: 0.875rem;
        transition: opacity 0.15s ease;
        border: none;
        cursor: pointer;
    }

    .orpheus-btn-primary:hover {
        opacity: 0.9;
    }

    .orpheus-btn-secondary {
        background: transparent;
        color: var(--orpheus-text-secondary);
        padding: 0.625rem 1.25rem;
        border-radius: 0.375rem;
        border: 1px solid var(--orpheus-border);
        font-weight: 500;
        font-size: 0.875rem;
        transition: all 0.15s ease;
        cursor: pointer;
    }

    .orpheus-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.03);
        color: var(--orpheus-text);
        border-color: rgba(255, 255, 255, 0.15);
    }

    /* Cards - Subtle and Clean */
    .orpheus-card-light {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1.5rem;
    }

    .orpheus-card {
        background: var(--orpheus-bg-card);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.5rem;
        padding: 1.25rem;
    }

    .orpheus-card-stat {
        background: var(--orpheus-bg-card);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.5rem;
        padding: 1.25rem;
    }

    /* Badges - Subtle */
    .orpheus-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.025em;
    }

    .orpheus-badge-success {
        background: rgba(34, 197, 94, 0.12);
        color: #4ade80;
    }

    .orpheus-badge-warning {
        background: rgba(251, 191, 36, 0.12);
        color: #fcd34d;
    }

    .orpheus-badge-error {
        background: rgba(239, 68, 68, 0.12);
        color: #f87171;
    }

    .orpheus-badge-critical {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    .orpheus-badge-info {
        background: var(--orpheus-accent-soft);
        color: var(--orpheus-accent);
    }

    /* Inputs */
    .orpheus-input-light {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.375rem;
        padding: 0.625rem 0.875rem;
        color: #0f172a;
        font-size: 0.875rem;
        transition: border-color 0.15s ease;
        width: 100%;
    }

    .orpheus-input-light:focus {
        outline: none;
        border-color: var(--orpheus-accent);
    }

    .orpheus-input-light::placeholder {
        color: #94a3b8;
    }

    .orpheus-input {
        background: var(--orpheus-bg-subtle);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.375rem;
        padding: 0.625rem 0.875rem;
        color: var(--orpheus-text);
        font-size: 0.875rem;
        transition: border-color 0.15s ease;
        width: 100%;
    }

    .orpheus-input:focus {
        outline: none;
        border-color: var(--orpheus-border-focus);
    }

    .orpheus-input::placeholder {
        color: var(--orpheus-text-muted);
    }

    /* Navigation */
    .orpheus-nav {
        background: var(--orpheus-bg);
        border-bottom: 1px solid var(--orpheus-border);
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .orpheus-nav-link {
        color: var(--orpheus-text-muted);
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        transition: all 0.15s ease;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.875rem;
    }

    .orpheus-nav-link:hover {
        background: rgba(255, 255, 255, 0.04);
        color: var(--orpheus-text-secondary);
    }

    .orpheus-nav-link.active {
        background: rgba(30, 41, 59, 0.8);
        color: #ffffff;
        font-weight: 500;
    }

    .orpheus-nav-link.active svg {
        color: #60a5fa;
    }

    /* Tables */
    .orpheus-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .orpheus-table thead {
        background: rgba(255, 255, 255, 0.02);
    }

    .orpheus-table th {
        padding: 0.75rem 1rem;
        text-align: left;
        color: var(--orpheus-text-muted);
        font-weight: 500;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid var(--orpheus-border);
    }

    .orpheus-table td {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--orpheus-border);
        color: var(--orpheus-text-secondary);
        font-size: 0.875rem;
    }

    .orpheus-table tbody tr {
        transition: background 0.1s ease;
    }

    .orpheus-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.02);
    }

    /* Code Blocks */
    .orpheus-code {
        background: var(--orpheus-bg-subtle);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.375rem;
        padding: 0.875rem;
        font-family: 'SF Mono', 'Fira Code', monospace;
        font-size: 0.8125rem;
        color: var(--orpheus-text-secondary);
        overflow-x: auto;
    }

    /* Animations - Subtle */
    @keyframes orpheus-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .orpheus-slide-up {
        animation: orpheus-fade-in 0.3s ease-out;
    }

    /* Stats */
    .orpheus-stat-number {
        font-size: 1.875rem;
        font-weight: 600;
        color: var(--orpheus-text);
        line-height: 1;
        letter-spacing: -0.025em;
    }

    .orpheus-stat-label {
        font-size: 0.75rem;
        color: var(--orpheus-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.075em;
        margin-top: 0.375rem;
    }

    /* Verifier Status */
    .orpheus-verifier-active {
        width: 0.5rem;
        height: 0.5rem;
        background: #22c55e;
        border-radius: 50%;
        display: inline-block;
    }

    .orpheus-verifier-inactive {
        width: 0.5rem;
        height: 0.5rem;
        background: var(--orpheus-text-muted);
        border-radius: 50%;
        display: inline-block;
    }

    /* Progress Bars */
    .orpheus-progress {
        width: 100%;
        height: 0.25rem;
        background: var(--orpheus-bg-subtle);
        border-radius: 0.125rem;
        overflow: hidden;
    }

    .orpheus-progress-bar {
        height: 100%;
        background: var(--orpheus-accent);
        border-radius: 0.125rem;
        transition: width 0.3s ease;
    }

    /* Loading Spinner */
    .orpheus-spinner {
        width: 1.25rem;
        height: 1.25rem;
        border: 2px solid var(--orpheus-border);
        border-top-color: var(--orpheus-accent);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Sidebar */
    .orpheus-sidebar {
        background: var(--orpheus-bg);
        border-right: 1px solid var(--orpheus-border);
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }

    .orpheus-sidebar::-webkit-scrollbar {
        width: 0;
    }

    /* Alerts */
    .orpheus-alert {
        padding: 0.875rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

    .orpheus-alert-success {
        background: rgba(34, 197, 94, 0.08);
        border: 1px solid rgba(34, 197, 94, 0.2);
        color: #4ade80;
    }

    .orpheus-alert-warning {
        background: rgba(251, 191, 36, 0.08);
        border: 1px solid rgba(251, 191, 36, 0.2);
        color: #fcd34d;
    }

    .orpheus-alert-error {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
        color: #f87171;
    }

    .orpheus-alert-info {
        background: var(--orpheus-accent-soft);
        border: 1px solid rgba(59, 130, 246, 0.2);
        color: var(--orpheus-accent);
    }

    /* Feature Cards */
    .orpheus-feature-card {
        background: var(--orpheus-bg-card);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.5rem;
        padding: 1.5rem;
        transition: border-color 0.15s ease;
        height: 100%;
    }

    .orpheus-feature-card:hover {
        border-color: rgba(255, 255, 255, 0.15);
    }

    .orpheus-feature-icon {
        width: 2.5rem;
        height: 2.5rem;
        background: var(--orpheus-accent-soft);
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
    }

    /* Hero Section */
    .orpheus-hero {
        padding: 4rem 0;
    }

    .orpheus-hero h1 {
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 1rem;
        color: var(--orpheus-text);
        letter-spacing: -0.025em;
    }

    .orpheus-hero p {
        font-size: 1.125rem;
        color: var(--orpheus-text-secondary);
        max-width: 40rem;
        margin: 0 auto 1.5rem;
    }

    @media (max-width: 768px) {
        .orpheus-hero h1 {
            font-size: 1.75rem;
        }
        
        .orpheus-hero p {
            font-size: 1rem;
        }
    }

    /* Tooltip */
    .orpheus-tooltip {
        position: relative;
    }

    .orpheus-tooltip:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.375rem 0.625rem;
        background: var(--orpheus-bg-card);
        color: var(--orpheus-text-secondary);
        border: 1px solid var(--orpheus-border);
        border-radius: 0.25rem;
        font-size: 0.75rem;
        white-space: nowrap;
        z-index: 100;
        margin-bottom: 0.375rem;
    }

    /* Setup Required Modal Overlay */
    .orpheus-setup-modal-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 256px; /* w-64 sidebar width */
        background: rgba(15, 23, 42, 0.90);
        backdrop-filter: blur(4px);
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    /* Adjust for collapsed sidebar */
    .orpheus-sidebar.collapsed ~ .flex-1 .orpheus-setup-modal-overlay {
        left: 80px;
    }

    @media (max-width: 768px) {
        .orpheus-setup-modal-overlay {
            left: 0;
        }

        .orpheus-sidebar.collapsed ~ .flex-1 .orpheus-setup-modal-overlay {
            left: 0;
        }

        /* Responsive table wrapper */
        .orpheus-table {
            min-width: 600px;
        }

        /* Responsive stat numbers */
        .orpheus-stat-number {
            font-size: 1.5rem;
        }

        /* Responsive cards */
        .orpheus-card {
            padding: 1rem;
        }

        .orpheus-card-stat {
            padding: 1rem;
        }
    }

    /* ================================================================
       LIGHT MODE OVERRIDES
       ================================================================ */

    /* --- Design System Components --- */
    [data-theme="light"] .orpheus-card {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .orpheus-card-stat {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .orpheus-card-light {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .orpheus-feature-card {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .orpheus-feature-card:hover {
        border-color: #cbd5e1 !important;
    }
    [data-theme="light"] .orpheus-stat-number {
        color: #0f172a !important;
    }
    [data-theme="light"] .orpheus-stat-label {
        color: #64748b !important;
    }

    /* --- Navigation --- */
    [data-theme="light"] .orpheus-nav {
        background: #ffffff;
        border-bottom-color: #e2e8f0;
    }
    [data-theme="light"] .orpheus-nav-link {
        color: #64748b;
    }
    [data-theme="light"] .orpheus-nav-link:hover {
        background: #f1f5f9;
        color: #1e293b;
    }
    [data-theme="light"] .orpheus-nav-link.active {
        background: #eff6ff;
        color: #1e40af;
    }
    [data-theme="light"] .orpheus-nav-link.active svg {
        color: #3b82f6;
    }

    /* --- Tables --- */
    [data-theme="light"] .orpheus-table thead {
        background: #f8fafc;
    }
    [data-theme="light"] .orpheus-table th {
        color: #64748b;
        border-bottom-color: #e2e8f0;
    }
    [data-theme="light"] .orpheus-table td {
        color: #475569;
        border-bottom-color: #f1f5f9;
    }
    [data-theme="light"] .orpheus-table tbody tr:hover {
        background: #f8fafc;
    }

    /* --- Inputs --- */
    [data-theme="light"] .orpheus-input {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
        color: #0f172a !important;
    }
    [data-theme="light"] .orpheus-input:focus {
        border-color: #3b82f6 !important;
    }
    [data-theme="light"] .orpheus-input::placeholder {
        color: #94a3b8 !important;
    }

    /* --- Code Blocks --- */
    [data-theme="light"] .orpheus-code {
        background: #f1f5f9;
        border-color: #e2e8f0;
        color: #334155;
    }

    /* --- Alerts --- */
    [data-theme="light"] .orpheus-alert-success {
        background: rgba(34, 197, 94, 0.06);
        border-color: rgba(34, 197, 94, 0.15);
    }
    [data-theme="light"] .orpheus-alert-warning {
        background: rgba(251, 191, 36, 0.06);
        border-color: rgba(251, 191, 36, 0.15);
    }
    [data-theme="light"] .orpheus-alert-error {
        background: rgba(239, 68, 68, 0.06);
        border-color: rgba(239, 68, 68, 0.15);
    }

    /* Danger zone card — readable contrast on a light background. The red
       utilities aren't remapped by the broad overrides above, but the muted
       gray description and light-red heading wash out in light mode. */
    [data-theme="light"] main .orpheus-danger-zone {
        background-color: rgba(239, 68, 68, 0.06) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
    }
    [data-theme="light"] main .orpheus-danger-zone h3 {
        color: #dc2626 !important;
    }
    [data-theme="light"] main .orpheus-danger-zone p {
        color: #64748b !important;
    }
    [data-theme="light"] main .orpheus-danger-zone button {
        color: #ffffff !important;
    }

    /* --- Sidebar --- */
    [data-theme="light"] .orpheus-sidebar {
        background: #ffffff;
        border-right-color: #e2e8f0;
    }

    /* --- Tooltip --- */
    [data-theme="light"] .orpheus-tooltip:hover::after {
        background: #ffffff;
        color: #334155;
        border-color: #e2e8f0;
    }

    /* --- Setup Modal --- */
    [data-theme="light"] .orpheus-setup-modal-overlay {
        background: rgba(241, 245, 249, 0.90);
    }

    /* --- Progress Bars --- */
    [data-theme="light"] .orpheus-progress {
        background: #e2e8f0;
    }

    /* ================================================================
       LIGHT MODE: BROAD CONTENT OVERRIDES
       These target common Tailwind patterns used across views.
       Scoped to main content to avoid breaking colored badges/buttons.
       ================================================================ */

    /* Dark backgrounds → white/light */
    [data-theme="light"] main [class*="bg-gray-900"],
    [data-theme="light"] main [class*="bg-slate-900"],
    [data-theme="light"] main [class*="bg-slate-800"] {
        background-color: #ffffff !important;
    }
    [data-theme="light"] main [class*="bg-black\/"]:not(.bg-black\/60):not(.bg-black\/70) {
        background-color: #f8fafc !important;
    }

    /* Team member rows: keep a soft, low-opacity fill in light mode instead of
       the generic solid-white override above, so the rectangles sit subtly
       behind the member details. Declared after the generic rule (equal
       specificity) so it wins. */
    [data-theme="light"] main .orpheus-member-row {
        background-color: rgba(148, 163, 184, 0.08) !important;
    }
    [data-theme="light"] main .orpheus-member-row:hover {
        background-color: rgba(148, 163, 184, 0.14) !important;
    }

    /* Chart containers used in dashboard */
    [data-theme="light"] .chart-container {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }

    /* Stat cards in dashboard */
    [data-theme="light"] .stat-card {
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .stat-card:hover {
        border-color: #cbd5e1 !important;
        box-shadow: 0 12px 40px -12px rgba(0,0,0,0.08) !important;
    }

    /* Dark borders → light borders */
    [data-theme="light"] main [class*="border-gray-800"],
    [data-theme="light"] main [class*="border-gray-700"],
    [data-theme="light"] main [class*="border-slate-800"],
    [data-theme="light"] main [class*="border-slate-700"],
    [data-theme="light"] main [class*="border-white\/"] {
        border-color: #e2e8f0 !important;
    }

    /* Divide colors */
    [data-theme="light"] main [class*="divide-gray-"],
    [data-theme="light"] main [class*="divide-slate-"],
    [data-theme="light"] main [class*="divide-white\/"] {
        --tw-divide-opacity: 1;
        border-color: #f1f5f9;
    }
    [data-theme="light"] main [class*="divide-"] > :not([hidden]) ~ :not([hidden]) {
        border-color: #f1f5f9;
    }

    /* Text colors - only target text that should change */
    [data-theme="light"] main .text-white:not(.force-white-text):not([class*="bg-blue"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-emerald"]):not([class*="bg-cyan"]):not([class*="bg-yellow"]):not([class*="bg-purple"]):not([class*="bg-gradient"]):not(button):not([type="submit"]) {
        color: #0f172a !important;
    }
    [data-theme="light"] main .text-gray-100 { color: #1e293b !important; }
    [data-theme="light"] main .text-gray-200 { color: #334155 !important; }
    [data-theme="light"] main .text-gray-300 { color: #475569 !important; }
    [data-theme="light"] main .text-gray-400 { color: #64748b !important; }
    [data-theme="light"] main .text-gray-500 { color: #94a3b8 !important; }
    [data-theme="light"] main .text-gray-600 { color: #94a3b8 !important; }
    [data-theme="light"] main .text-slate-200 { color: #1e293b !important; }
    [data-theme="light"] main .text-slate-300 { color: #334155 !important; }
    [data-theme="light"] main .text-slate-400 { color: #64748b !important; }
    [data-theme="light"] main .text-slate-500 { color: #94a3b8 !important; }
    [data-theme="light"] main .text-slate-600 { color: #94a3b8 !important; }

    /* Form elements */
    [data-theme="light"] main select,
    [data-theme="light"] main input[type="text"],
    [data-theme="light"] main input[type="email"],
    [data-theme="light"] main input[type="password"],
    [data-theme="light"] main input[type="number"],
    [data-theme="light"] main input[type="search"],
    [data-theme="light"] main textarea {
        background-color: #f8fafc !important;
        border-color: #e2e8f0 !important;
        color: #0f172a !important;
    }
    [data-theme="light"] main select:focus,
    [data-theme="light"] main input:focus,
    [data-theme="light"] main textarea:focus {
        border-color: #3b82f6 !important;
    }

    /* Checkboxes */
    [data-theme="light"] main input[type="checkbox"] {
        background-color: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
    }

    /* Code/mono text */
    [data-theme="light"] main code,
    [data-theme="light"] main pre {
        background-color: #f1f5f9;
        color: #334155;
    }
    [data-theme="light"] main .font-mono {
        color: #334155;
    }

    /* Hover rows */
    [data-theme="light"] main tr:hover,
    [data-theme="light"] main .hover\:bg-black\/20:hover,
    [data-theme="light"] main .hover\:bg-black\/30:hover,
    [data-theme="light"] main .hover\:bg-slate-800\/50:hover,
    [data-theme="light"] main .hover\:bg-slate-800\/70:hover,
    [data-theme="light"] main .hover\:bg-slate-700\/20:hover {
        background-color: #f8fafc !important;
    }

    /* Table headers */
    [data-theme="light"] main thead {
        background-color: #f8fafc !important;
    }
    [data-theme="light"] main thead th {
        color: #64748b !important;
    }

    /* Period buttons / filter pills */
    [data-theme="light"] .period-btn {
        border-color: #e2e8f0 !important;
        color: #64748b !important;
    }
    [data-theme="light"] .period-btn:hover {
        color: #0f172a !important;
        border-color: #cbd5e1 !important;
    }
    [data-theme="light"] .period-btn.active {
        background: rgba(59, 130, 246, 0.1) !important;
        border-color: #3b82f6 !important;
        color: #2563eb !important;
    }

    /* Heatmap */
    [data-theme="light"] .heatmap-level-0 { background: #f1f5f9 !important; }
    [data-theme="light"] .heatmap-cell { border-color: rgba(0,0,0,0.04) !important; }

    /* Chart toggle */
    [data-theme="light"] .chart-toggle {
        background: #f1f5f9 !important;
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] .chart-toggle-btn { color: #64748b !important; }
    [data-theme="light"] .chart-toggle-btn.active {
        background: rgba(59, 130, 246, 0.1) !important;
        color: #2563eb !important;
    }

    /* Colored tint backgrounds - strengthen for light mode.
       Use exact class selectors (not [class*=...] substring matches) so we
       don't accidentally fire on Tailwind variant classes like
       `has-[:checked]:bg-emerald-500/10` or `hover:bg-red-500/10`, which
       would otherwise apply the tint unconditionally regardless of state. */
    [data-theme="light"] main .bg-yellow-500\/10 {
        background-color: rgba(234, 179, 8, 0.12) !important;
        border-color: rgba(234, 179, 8, 0.3) !important;
    }
    [data-theme="light"] main .bg-yellow-500\/10 .text-yellow-400,
    [data-theme="light"] main .bg-yellow-500\/10 .text-yellow-300 {
        color: #a16207 !important;
    }
    [data-theme="light"] main .bg-green-500\/10,
    [data-theme="light"] main .bg-emerald-500\/10 {
        background-color: rgba(16, 185, 129, 0.1) !important;
        border-color: rgba(16, 185, 129, 0.25) !important;
    }
    [data-theme="light"] main .bg-red-500\/10 {
        background-color: rgba(239, 68, 68, 0.08) !important;
        border-color: rgba(239, 68, 68, 0.2) !important;
    }
    [data-theme="light"] main .bg-blue-500\/10 {
        background-color: rgba(59, 130, 246, 0.08) !important;
        border-color: rgba(59, 130, 246, 0.2) !important;
    }

    /* Filter pill groups (Events page, etc.) */
    [data-theme="light"] main [class*="bg-slate-800\/50"][class*="p-1"] {
        background-color: #f1f5f9 !important;
    }
    [data-theme="light"] main [class*="bg-blue-500\/30"] {
        background-color: rgba(59, 130, 246, 0.15) !important;
    }

    /* ===== Verifier Show Page - Light Mode ===== */

    /* VLE Rules section */
    [data-theme="light"] main .text-slate-100 { color: #0f172a !important; }
    [data-theme="light"] main .text-slate-300 { color: #475569 !important; }
    [data-theme="light"] main .text-slate-400 { color: #64748b !important; }
    [data-theme="light"] main .text-slate-500 { color: #94a3b8 !important; }

    /* Dark backgrounds become white cards */
    [data-theme="light"] main [class*="bg-slate-800\/40"],
    [data-theme="light"] main [class*="bg-slate-800\/50"],
    [data-theme="light"] main [class*="bg-slate-800\/30"],
    [data-theme="light"] main [class*="bg-slate-900\/50"] {
        background-color: #ffffff !important;
    }

    /* Borders */
    [data-theme="light"] main [class*="border-slate-700"],
    [data-theme="light"] main [class*="border-slate-800"] {
        border-color: #e2e8f0 !important;
    }
    [data-theme="light"] main [class*="divide-slate-700"] > * + * {
        border-color: #e2e8f0 !important;
    }

    /* Inputs */
    [data-theme="light"] main input[type="number"] {
        background-color: #ffffff !important;
        border-color: #cbd5e1 !important;
        color: #0f172a !important;
    }
    [data-theme="light"] main input[type="range"] {
        background-color: #e2e8f0 !important;
    }

    /* Inactive buttons in config */
    [data-theme="light"] main .bg-slate-800.border-slate-700 {
        background-color: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
    }

    /* Scrollbar light mode */
    [data-theme="light"] main::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
    }
    [data-theme="light"] main::-webkit-scrollbar-track {
        background: transparent;
    }

    /* ===== Projects pages - Light Mode polish =====
       Scoped to the projects controller via the page-* hook on <main>.
       Fills gaps the global light overrides miss on these pages. */

    /* Canonical status pills for the two tones the global block omits
       (Personal/Unclassified type badges, critical/low severity pills):
       pastel surface + AA-contrast text + defining border. */
    [data-theme="light"] .page-orpheus-projects .bg-purple-500\/20.text-purple-400 {
        background: #f3e8ff !important;
        color: #6b21a8 !important;
        border: 1px solid #d8b4fe !important;
    }
    [data-theme="light"] .page-orpheus-projects .bg-yellow-500\/20.text-yellow-400 {
        background: #fef9c3 !important;
        color: #854d0e !important;
        border: 1px solid #fde047 !important;
    }

    /* Inactive filter tabs: the global rule turns bg-slate-800 white, leaving
       them undefined on a light background. Give them a real surface, border
       and hover state. */
    [data-theme="light"] .page-orpheus-projects-index a.bg-slate-800 {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #e2e8f0 !important;
    }
    [data-theme="light"] .page-orpheus-projects-index a.bg-slate-800:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }

    /* hover:text-white icons/links (edit/archive, row chevrons, breadcrumb)
       would turn invisible on a white surface; flip the hover target to dark. */
    [data-theme="light"] .page-orpheus-projects .hover\:text-white:hover {
        color: #0f172a !important;
    }

    /* Inner rows use bg-slate-900/50, which the global rule turns white -
       invisible inside white cards. Give them a subtle surface + border so
       they separate. Also stop the [class*="bg-slate-700/"] global rule from
       painting hover rows permanently grey, and restore a real hover. */
    [data-theme="light"] .page-orpheus-projects .bg-slate-900\/50 {
        background: #f8fafc !important;
        border: 1px solid #eef2f7 !important;
    }
    [data-theme="light"] .page-orpheus-projects .hover\:bg-slate-700\/30 {
        background: transparent !important;
    }
    [data-theme="light"] .page-orpheus-projects .hover\:bg-slate-700\/30:hover {
        background: #f1f5f9 !important;
    }

    /* Index table rows: the global [class*="bg-slate-700/"] rule matches the
       hover:bg-slate-700/20 utility and paints every row grey permanently.
       Keep rows transparent (white card shows through) with a real hover. */
    [data-theme="light"] .page-orpheus-projects .hover\:bg-slate-700\/20 {
        background: transparent !important;
    }
    [data-theme="light"] .page-orpheus-projects .hover\:bg-slate-700\/20:hover {
        background: #f1f5f9 !important;
    }

    /* Unclassified project rows carry bg-yellow-500/5 for a faint tint, but the
       transparency rule above also matches them (they share hover:bg-slate-700/20)
       and would clear it. Restore a very light yellow with higher specificity
       (element + class) so it wins for unclassified rows only. */
    [data-theme="light"] .page-orpheus-projects-index tr.bg-yellow-500\/5 {
        background: #fefce8 !important;
    }
    [data-theme="light"] .page-orpheus-projects-index tr.bg-yellow-500\/5:hover {
        background: #fef9c3 !important;
    }

    /* Index table row seams: the layout maps tbody tr / divide-slate-700/50 to
       light via an *unlayered* !important. A *layered* !important outranks that,
       so this guarantees the row dividers render light (no dark seam) even if
       another rule tries to win. */
    [data-theme="light"] .page-orpheus-projects-index table tbody tr,
    [data-theme="light"] .page-orpheus-projects-index .divide-slate-700\/50 > :not([hidden]) ~ :not([hidden]) {
        border-color: #e2e8f0 !important;
    }

    /* Recent Events / Recent Violations panels (detail page): the header uses a
       border-b border-slate-700 underline and the list uses a plain
       divide-slate-700 for row dividers. The first row's divider was still
       rendering dark in light mode. Force both seam types light, targeting the
       header underline and every direct row child (incl. the first - harmless,
       it carries no divider width). Scoped to these elements so intentional
       coloured borders (severity badges, status pills) are untouched. !important
       outranks Tailwind's normal divide/border utilities. */
    [data-theme="light"] .page-orpheus-projects .bg-slate-800\/50 > .border-b.border-slate-700,
    [data-theme="light"] .page-orpheus-projects .divide-slate-700 > * {
        border-color: #e2e8f0 !important;
    }

    /* "View All" CTAs on the project detail page: match the dashboard's
       "View All ->" styling by appending the arrow (decorative, both themes). */
    .page-orpheus-projects-show a.text-blue-400::after {
        content: " \2192";
    }
}