/* Dark Theme for Booster Application */

[data-theme="dark"] {
    /* Background */
    --background-image: url(/content/images/bg-dark.webp);
    --background-color: #1a1a1a;
    /* Primary colors */
    --primary-color: #e25100;
    --primary-hover: #ff6f00;
    --primary-gradient-start: #000000;
    --primary-gradient-end: #FF8C00;
    /* Text colors */
    --text-primary: #ffffff;
    --text-secondary: #d7d7d7;
    --text-muted: #929292;
    --text-caption: rgba(255, 255, 255, 0.7);
    /* Link colors */
    --link-color: #4da3ff;
    --link-hover: #fff;
    --link-table: #ffb366;
    --link-table-hover: #ffd699;
    /* Paper/Card colors - Outer cards (main containers) */
    --paper-background: rgba(0, 0, 0, 0.4);
    --paper-border: rgba(255, 140, 0, 0.3);
    --paper-shadow: rgba(255, 104, 0, 0.48);
    /* Inner card colors - Simple nested elements */
    --inner-card-background: rgba(60, 60, 60, 0.6);
    --inner-card-border: rgba(100, 100, 100, 0.4);
    /* Table colors - Dark theme */
    --table-background: rgba(30, 30, 30, 0.8);
    --table-header-background: rgba(228, 86, 0, 0.15);
    --table-row-hover: rgba(255, 140, 0, 0.1);
    --table-border: rgba(80, 80, 80, 0.5);
    --table-text: #e0e0e0;
    /* Navigation */
    --nav-background: transparent;
    --nav-text: #d7d7d7;
    --nav-hover-bg: rgba(228, 86, 0, 0.72);
    --nav-active-bg: rgba(255, 255, 255, 0.37);
    /* Drawer */
    --drawer-background: rgba(0, 0, 0, 0);
    --drawer-border: rgba(255, 255, 255, 0.05);
    /* AppBar */
    --appbar-background: #e25100;
    --appbar-text: #ffffff;
    /* Forms */
    --input-background: rgba(255, 96, 0, 0.13);
    --input-background-filled: rgba(80, 80, 80, 0.95);
    --input-text: #ffffff;
    --input-label: #f0f0f0;
    --input-placeholder: #b0b0b0;
    --input-helper: #c0c0c0;
    --input-border: #929292;
    --input-border-hover: #b0b0b0;
    --input-border-focus: var(--primary-color);
    --input-focus-shadow: rgba(228, 81, 0, 0.3);
    --input-disabled-background: rgba(40, 40, 40, 0.6);
    --input-disabled-text: #888888;
    --input-adornment-icon: #e0e0e0;
    --popover-background: rgba(50, 50, 50, 0.98);
    --popover-border: rgba(150, 150, 150, 0.4);
    --popover-item-hover: rgba(228, 86, 0, 0.2);
    --popover-item-selected: rgba(228, 86, 0, 0.35);
    --popover-item-text: #ffffff;
    /* Status colors */
    --error-color: #e50000;
    --success-color: #26b050;
    --warning-color: #ff9800;
}

    /* Apply dark theme styles */
    [data-theme="dark"] html,
    [data-theme="dark"] body {
        background: var(--background-image) var(--background-color) center center / cover no-repeat fixed;
        color: var(--text-primary);
    }

    /* AppBar */
    [data-theme="dark"] .appbar-gradient {
        background-color: var(--appbar-background) !important;
        color: var(--appbar-text);
    }

    [data-theme="dark"] header h6 {
        color: #fff
    }

    /* Typography */
    [data-theme="dark"] .mud-typography-h1,
    [data-theme="dark"] .mud-typography-h2,
    [data-theme="dark"] .mud-typography-h3,
    [data-theme="dark"] .mud-typography-h4,
    [data-theme="dark"] .mud-typography-h5,
    [data-theme="dark"] .mud-typography-body2,
    [data-theme="dark"] .mud-typography-subtitle2.mud-list-item-secondary-text,
    [data-theme="dark"] .mud-breadcrumb-item > a,
    [data-theme="dark"] .mud-paper > ul > li,
    [data-theme="dark"] .mud-icon-root.mud-svg-icon:not([class*="-text"]) {
        color: var(--text-primary);
    }

    /* Ensure colored icons (mud-warning-text, mud-success-text, etc.) use fill:currentColor
       so that the color set by IconColor propagates to the SVG fill */
    [data-theme="dark"] .mud-icon-root.mud-svg-icon[class*="-text"] {
        fill: currentColor !important;
    }

    [data-theme="dark"] .mud-switch-button .mud-icon-root.mud-svg-icon {
        fill: #000;
    }

    [data-theme="dark"] .mud-switch-button .mud-switch-thumb-medium {
        background-color: #fff
    }

    /* ====================================================================
   OUTER CARDS - Main containers with glass morphism and orange border
   OPTIMIZED: Reduced backdrop-filter for instant theme switch
   ==================================================================== */
    [data-theme="dark"] .mud-paper {
        background: var(--paper-background) !important;
        border: 1px solid var(--paper-border) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        box-shadow: 0 8px 32px var(--paper-shadow), inset 0 1px 0 rgba(255, 140, 0, 0.2) !important;
        position: relative;
    }

        [data-theme="dark"] .mud-paper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, #ff6a00 0%, #ffbb66 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            opacity: 0.3;
            z-index: 0;
        }

        /* Ensure content is above ::before */
        [data-theme="dark"] .mud-paper > * {
            position: relative;
            z-index: 1;
        }

        /* ====================================================================
   INNER CARDS - Override nested .mud-paper with simpler style
   OPTIMIZED: No backdrop-filter for instant theme switch
   ==================================================================== */
        [data-theme="dark"] .mud-paper .mud-paper,
        [data-theme="dark"] .mud-card {
            background: var(--inner-card-background) !important;
            border: 1px solid var(--inner-card-border) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        }

            /* Remove orange border from inner cards */
            [data-theme="dark"] .mud-paper .mud-paper::before,
            [data-theme="dark"] .mud-card::before {
                display: none !important;
            }

    /* ====================================================================
   TABLES - Dark theme with orange tinted header
   OPTIMIZED: No backdrop-filter for instant theme switch
   ==================================================================== */
    [data-theme="dark"] .mud-table,
    [data-theme="dark"] .mud-table-container {
        background: var(--table-background) !important;
        border: 1px solid var(--table-border) !important;
        backdrop-filter: none !important;
    }

    /* FIXED: Orange tinted header background */
    [data-theme="dark"] .mud-table-head {
        background: var(--table-header-background) !important;
    }

        [data-theme="dark"] .mud-table-head .mud-table-cell {
            color: var(--text-primary) !important;
            font-weight: 600;
            background-color: transparent !important;
            border-bottom: 2px solid var(--table-border) !important;
        }

    [data-theme="dark"] .mud-table-body .mud-table-row {
        background: transparent !important;
        border-bottom: 1px solid var(--table-border) !important;
    }

        [data-theme="dark"] .mud-table-body .mud-table-row:hover {
            background: var(--table-row-hover) !important;
        }

    [data-theme="dark"] .mud-table-cell {
        color: var(--table-text) !important;
        border-color: var(--table-border) !important;
    }

    /* Striped tables */
    [data-theme="dark"] .mud-table-striped .mud-table-row:nth-of-type(odd) {
        background: rgba(40, 40, 40, 0.5) !important;
    }

    [data-theme="dark"] .mud-table-striped .mud-table-row:nth-of-type(even) {
        background: rgba(30, 30, 30, 0.5) !important;
    }

    /* FIXED: Light orange links in tables for better visibility */
    [data-theme="dark"] .mud-table a,
    [data-theme="dark"] .mud-table-cell a {
        color: var(--link-table) !important;
        text-decoration: none;
    }

        [data-theme="dark"] .mud-table a:hover,
        [data-theme="dark"] .mud-table-cell a:hover {
            color: var(--link-table-hover) !important;
            text-decoration: underline;
        }

    /* Table icons - always visible in dark theme */
    [data-theme="dark"] .mud-table .mud-icon-root,
    [data-theme="dark"] .mud-table-cell .mud-icon-root {
        color: var(--text-primary) !important;
        fill: var(--text-primary) !important;
    }

    /* ====================================================================
   CARD & TABLE CONTENT - Override inline styles
   ==================================================================== */
    /* Force dark backgrounds on elements with inline white/gray styles */
    [data-theme="dark"] [style*="background-color: white"],
    [data-theme="dark"] [style*="background-color: #fff"],
    [data-theme="dark"] [style*="background: white"],
    [data-theme="dark"] [style*="background: #fff"],
    [data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
    [data-theme="dark"] [style*="background-color: gray"],
    [data-theme="dark"] [style*="background-color: grey"],
    [data-theme="dark"] [style*="background: gray"],
    [data-theme="dark"] [style*="background: grey"] {
        background: var(--inner-card-background) !important;
        color: var(--text-primary) !important;
    }

        /* Icons in overridden elements */
        [data-theme="dark"] [style*="background-color: white"] .mud-icon-root,
        [data-theme="dark"] [style*="background: white"] .mud-icon-root,
        [data-theme="dark"] [style*="background-color: gray"] .mud-icon-root,
        [data-theme="dark"] [style*="background: gray"] .mud-icon-root {
            color: var(--text-primary) !important;
            fill: var(--text-primary) !important;
        }

    /* ====================================================================
   GENERAL CONTENT STYLES
   ==================================================================== */
    [data-theme="dark"] .mud-paper :is(p, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h5, .mud-typography-h6, .mud-typography-body1, .mud-typography-body2, .mud-icon-root.mud-svg-icon):not([class*="-text"]) {
        color: var(--text-primary);
        fill: var(--text-primary);
    }

    [data-theme="dark"] .mud-paper h3 strong,
    [data-theme="dark"] .mud-paper h5,
    [data-theme="dark"] .mud-paper h6 {
        color: darkorange !important;
    }

    /* Navigation */
    [data-theme="dark"] .sidebar {
        background-image: linear-gradient(180deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 70%);
    }

    [data-theme="dark"] .mud-nav-menu-custom .mud-nav-link {
        color: var(--nav-text) !important;
    }

        [data-theme="dark"] .mud-nav-menu-custom .mud-nav-link:hover {
            background-color: var(--nav-hover-bg) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .mud-nav-menu-custom .mud-nav-link.active {
            background-color: var(--nav-active-bg) !important;
            color: var(--text-primary) !important;
        }

    [data-theme="dark"] .nav-item .nav-link {
        color: var(--nav-text);
    }

    [data-theme="dark"] .nav-item a.active {
        background-color: var(--nav-active-bg);
        color: var(--text-primary);
    }

    [data-theme="dark"] .nav-item .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    /* Drawer */
    [data-theme="dark"] .mud-drawer {
        background-color: var(--drawer-background) !important;
        backdrop-filter: blur(8px);
        border-right: 1px solid var(--drawer-border);
    }

    /* Links */
    [data-theme="dark"] a,
    [data-theme="dark"] .btn-link {
        color: var(--link-color);
    }

        [data-theme="dark"] a:hover,
        [data-theme="dark"] .btn-link:hover {
            color: var(--link-hover);
        }

    [data-theme="dark"] .mud-link:hover .text-white {
        color: var(--text-primary) !important;
    }

    /* Buttons */
    [data-theme="dark"] .mud-button-filled:disabled {
        color: var(--text-primary) !important;
        background-color: rgba(255, 97, 0, 0.56) !important;
    }

    /* Button icons same color as button */
    [data-theme="dark"] .mud-button .mud-icon-root {
        color: inherit !important;
        fill: currentColor !important;
    }

    /* Forms */
    [data-theme="dark"] .darker-border-checkbox.form-check-input {
        border-color: var(--input-border);
    }

    /* ====================================================================
   FORM INPUTS - MudTextField, MudSelect - Dark Theme
   CRITICAL FIX: Maximum contrast for perfect text visibility
   ==================================================================== */

    /* Input fields - Outlined variant with strong contrast */
    [data-theme="dark"] .mud-input,
    [data-theme="dark"] .mud-input-outlined .mud-input-root,
    [data-theme="dark"] .mud-input-outlined input,
    [data-theme="dark"] .mud-input-outlined textarea,
    [data-theme="dark"] .mud-select-outlined .mud-select-input {
        color: var(--input-text) !important;
        background-color: var(--input-background) !important;
    }

    /* Input fields - Filled variant with strong contrast */
    [data-theme="dark"] .mud-input-filled .mud-input-root,
    [data-theme="dark"] .mud-input-filled input,
    [data-theme="dark"] .mud-input-filled textarea,
    [data-theme="dark"] .mud-select-filled .mud-select-input {
        color: var(--input-text) !important;
        background-color: var(--input-background-filled) !important;
    }

    /* Input fields - Text variant */
    [data-theme="dark"] .mud-input-text .mud-input-root,
    [data-theme="dark"] .mud-input-text input,
    [data-theme="dark"] .mud-input-text textarea {
        color: var(--input-text) !important;
        font-weight: 500 !important;
    }

    /* Labels - bright and readable */
    [data-theme="dark"] .mud-input-label,
    [data-theme="dark"] .mud-input-label-inputcontrol,
    [data-theme="dark"] .mud-select-label {
        color: var(--input-label) !important;
        font-weight: 500 !important;
    }

    /* Helper text - more visible */
    [data-theme="dark"] .mud-input-helper-text,
    [data-theme="dark"] .mud-select-helper-text {
        color: var(--input-helper) !important;
    }

    /* Placeholder - clearly visible */
    [data-theme="dark"] .mud-input-root::placeholder,
    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder {
        color: var(--input-placeholder) !important;
        opacity: 0.85 !important;
    }

    /* Borders - stronger (MudBlazor 8 uses .mud-input-outlined-border fieldset) */
    [data-theme="dark"] .mud-input-outlined .mud-input-outlined-border {
        border-color: var(--input-border) !important;
        border-width: 1.5px !important;
    }

    /* Hover state */
    [data-theme="dark"] .mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
        border-color: var(--input-border-hover) !important;
    }

    /* Focus state - bright orange */
    [data-theme="dark"] .mud-input-outlined:focus-within .mud-input-outlined-border {
        border-color: var(--input-border-focus) !important;
        border-width: 2px !important;
        box-shadow: 0 0 0 2px var(--input-focus-shadow) !important;
    }

    /* Disabled state - clearly distinguishable */
    [data-theme="dark"] .mud-input-disabled input,
    [data-theme="dark"] .mud-input-disabled textarea,
    [data-theme="dark"] .mud-select-disabled .mud-select-input {
        color: var(--input-disabled-text) !important;
        background-color: var(--input-disabled-background) !important;
    }

    /* Select dropdown arrow icon - visible */
    [data-theme="dark"] .mud-select .mud-icon-root,
    [data-theme="dark"] .mud-input-adornment .mud-icon-root {
        color: var(--input-adornment-icon) !important;
    }

    /* Autocomplete/Select dropdown - high contrast */
    [data-theme="dark"] .mud-popover-paper.mud-select-popover,
    [data-theme="dark"] .mud-menu-paper {
        background: var(--popover-background) !important;
        border: 2px solid var(--popover-border) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    }

        [data-theme="dark"] .mud-popover-paper.mud-select-popover::before,
        [data-theme="dark"] .mud-menu-paper::before {
            display: none !important;
        }

    /* Menu & popover text — force all children white */
    [data-theme="dark"] .mud-menu-paper .mud-list-item,
    [data-theme="dark"] .mud-menu-paper .mud-list-item-text,
    [data-theme="dark"] .mud-menu-paper .mud-typography,
    [data-theme="dark"] .mud-menu-paper .mud-menu-item,
    [data-theme="dark"] .mud-menu-paper p,
    [data-theme="dark"] .mud-menu-item .mud-menu-item-text {
        color: #ffffff !important;
    }

    [data-theme="dark"] .mud-menu-paper .mud-icon-root:not([class*="-text"]) {
        color: inherit !important;
    }

    [data-theme="dark"] .mud-list-item {
        color: var(--popover-item-text) !important;
    }

        [data-theme="dark"] .mud-list-item .mud-icon-root:not([class*="-text"]) {
                color: inherit !important;
            }

        [data-theme="dark"] .mud-list-item:hover {
            background-color: var(--popover-item-hover) !important;
        }

        [data-theme="dark"] .mud-list-item.mud-selected-item {
            background-color: var(--popover-item-selected) !important;
            color: var(--popover-item-text) !important;
            font-weight: 600 !important;
        }

    /* Connection Indicator */
    [data-theme="dark"] #connection-indicator {
        background: linear-gradient(135deg, var(--warning-color) 0%, #f57c00 100%);
        color: var(--text-primary);
    }

/* ====================================================================
   MOBILE OPTIMIZATIONS - Dark Theme
   ==================================================================== */
@media (max-width: 768px) {
    /* Stronger background for mobile readability */
    [data-theme="dark"] {
        --paper-background: rgba(0, 0, 0, 0.7);
        --inner-card-background: rgba(40, 40, 40, 0.8);
        --table-background: rgba(20, 20, 20, 0.9);
    }

        /* Reduce blur effects on mobile for better performance */
        [data-theme="dark"] .mud-paper {
            backdrop-filter: blur(8px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
        }

            [data-theme="dark"] .mud-paper .mud-paper,
            [data-theme="dark"] .mud-card {
                backdrop-filter: blur(4px) !important;
                -webkit-backdrop-filter: blur(4px) !important;
            }

        /* Stronger text contrast on mobile */
        [data-theme="dark"] .mud-typography-body1,
        [data-theme="dark"] .mud-typography-body2,
        [data-theme="dark"] .mud-table-cell {
            color: #f0f0f0 !important;
        }

        /* Enhanced borders for mobile visibility */
        [data-theme="dark"] .mud-paper {
            border: 2px solid var(--paper-border) !important;
        }

        /* Stronger shadows for depth perception on mobile */
        [data-theme="dark"] .mud-paper {
            box-shadow: 0 12px 40px var(--paper-shadow), inset 0 2px 0 rgba(255, 140, 0, 0.3) !important;
        }
}

/* =========================
   SOCIAL POSTS KANBAN - Dark Theme
   ========================= */

[data-theme="dark"] .social-post-card {
    background: var(--inner-card-background) !important;
    border: 1px solid var(--inner-card-border) !important;
    color: var(--text-primary) !important;
}

    [data-theme="dark"] .social-post-card:hover {
        background: rgba(80, 80, 80, 0.7) !important;
        border-color: rgba(255, 140, 0, 0.4) !important;
    }

    [data-theme="dark"] .social-post-card .mud-typography {
        color: var(--text-primary) !important;
    }

[data-theme="dark"] .social-stat-card {
    background: var(--inner-card-background) !important;
    border: 2px solid var(--inner-card-border) !important;
    color: var(--text-primary) !important;
}

    [data-theme="dark"] .social-stat-card:hover {
        background: rgba(80, 80, 80, 0.7) !important;
        border-color: rgba(255, 140, 0, 0.35) !important;
    }

[data-theme="dark"] .social-stat-card-active {
    background: rgba(255, 140, 0, 0.12) !important;
    border-color: rgba(255, 140, 0, 0.6) !important;
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.15);
}

[data-theme="dark"] .social-context-menu-caption {
    color: var(--text-secondary) !important;
}

/* Error states */
[data-theme="dark"] .invalid {
    outline: 1px solid var(--error-color);
}

[data-theme="dark"] .validation-message {
    color: var(--error-color);
}

[data-theme="dark"] .valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success-color);
}

/* Thumbnails */
[data-theme="dark"] .highlighted-image {
    border-color: var(--primary-hover);
}

    [data-theme="dark"] .highlighted-image::after {
        box-shadow: 0 0 12px 3px rgba(255, 111, 0, 0.6);
    }

/* Nav icons */
[data-theme="dark"] .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    fill: var(--text-primary);
}

[data-theme="dark"] .mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform {
    fill: orange;
}

[data-theme="dark"] .mud-navmenu span {
    color: #fff;
}

/* List items */
[data-theme="dark"] .mud-list-item.clickable:hover {
    background: rgba(228, 86, 0, 0.08);
}

/* Post bar */
[data-theme="dark"] .mud-postbar .mud-postbar-btn {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

    [data-theme="dark"] .mud-postbar .mud-postbar-btn.active {
        background: var(--primary-color);
        color: var(--text-primary);
        border-color: var(--primary-color);
    }

    [data-theme="dark"] .mud-postbar .mud-postbar-btn:not(.active):hover {
        background: rgba(228, 86, 0, 0.08);
    }

/* JSON Dialog */
[data-theme="dark"] .json-dialog-content {
    background-color: #1e1e1e !important;
}

[data-theme="dark"] .json-pre {
    color: #d4d4d4;
}

[data-theme="dark"] .mud-chip-filled {
    background-color: #5a5a5a
}

[data-theme="dark"] .mud-chip-content {
    color: #fff
}

/* Prompt output display */
[data-theme="dark"] .prompt-output {
    background: var(--inner-card-background);
    border: 1px solid var(--inner-card-border);
}

[data-theme="dark"] .prompt-output pre {
    color: var(--text-primary);
}

[data-theme="dark"] .components-reconnect-dialog {
    position: relative;
    background-color: #cc3737eb;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px 14px rgb(255 111 0 / 97%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    animation: components-reconnect-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-fadeInOpacity 0.5s ease-out 0.3s;
    animation-fill-mode: forwards;
    z-index: 10001;
}