:root, html[data-theme="dark"], [data-theme="dark"] {
    /*
     * Xtended Professional Color Palette
     * Modern, accessible, and cohesive design inspired by DitIsWatt
     * Enhanced with professional color theory for better visual hierarchy
     */
    
    /* === Background Colors === */
    --bg-primary: #FAF7F2 !important;           /* Beige sable clair - Warm, inviting base */
    --bg-secondary: #F5F0E9 !important;         /* Beige doré pâle - Elegant secondary */
    --bg-tertiary: #EFEBDF !important;          /* Crème orangé - Soft accent */
    --bg-surface: #FFFFFF !important;           /* Blanc pur cartes - Clean surface */
    --bg-muted: #F2EEE5 !important;            /* Fond subtil - Subtle background */
    --bg-elevated: #FFFFFF !important;         /* Surface with elevation - Modern card style */
    --bg-overlay: rgba(0, 0, 0, 0.5) !important;  /* Overlay for modals/dropdowns */
     
    /* === Text Colors === */
    --text-primary: #2B261F !important;         /* Brun très foncé doux - High contrast (WCAG AA) */
    --text-secondary: #5A513D !important;       /* Beige brun moyen - Readable secondary */
    --text-muted: #8A7A5F !important;           /* Sable clair - Subtle text */
    --text-light: #B8A890 !important;           /* Beige très clair - Light text */
    --text-inverse: #FFFFFF !important;          /* White for dark backgrounds - Accessibility */
    --text-hint: #9CA3AF !important;           /* Hint text for placeholders */
     
    /* === Primary Brand Colors === */
    --primary-color: #1A4568 !important;        /* Bleu marine profond - Trust & stability */
    --primary-color-dark: #143A55 !important;   /* Bleu plus sombre - Hover states */
    --primary-color-light: #2A5A7A !important;  /* Bleu clair - Active states */
    --primary-color-text: #FFFFFF !important;      /* White text on primary - High contrast */
    --primary-color-rgb: 26, 69, 104 !important;
    --primary-gradient: linear-gradient(135deg, #1A4568 0%, #143A55 100%) !important;
     
    /* === Semantic/Accent Colors === */
    --success-color: #7AB87A !important;        /* Vert prairie doux - Positive actions */
    --success-color-dark: #5A9A5F !important;   /* Vert plus sombre - Success hover */
    --success-color-light: #A8D499 !important;  /* Vert clair - Success active */
    --success-color-text: #FFFFFF !important;
    
    --warning-color: #F2B87A !important;        /* Orange pêche tendance - Caution */
    --warning-color-dark: #D99A5E !important;   /* Orange plus sombre - Warning hover */
    --warning-color-light: #F5D4A3 !important;  /* Orange clair - Warning active */
    --warning-color-text: #FFFFFF !important;
    
    --danger-color: #E89A8F !important;         /* Corail pâle - Destructive actions */
    --danger-color-dark: #C77E73 !important;   /* Corail plus sombre - Danger hover */
    --danger-color-light: #F0B8A3 !important;  /* Corail clair - Danger active */
    --danger-color-text: #FFFFFF !important;
    
    --info-color: #8AB8D5 !important;           /* Bleu ciel doux - Informational */
    --info-color-dark: #6B8FB5 !important;    /* Bleu plus sombre - Info hover */
    --info-color-light: #A8C8E3 !important;   /* Bleu clair - Info active */
    --info-color-text: #FFFFFF !important;
     
    /* === Border & Structure Colors === */
    --border-color: #E5DCCA !important;         /* Beige sable bordure - Soft borders */
    --border-light: #F0EDE3 !important;         /* Bordure ultra-subtile - Subtle dividers */
    --border-focus: #1A4568 !important;        /* Primary color for focus states - Accessibility */
    --border-hover: #D4C4B8 !important;         /* Darker border on hover */
    --shadow-color: rgba(42,38,31,0.06) !important;
    --shadow-elevated: rgba(42,38,31,0.12) !important;
    --shadow-floating: rgba(42,38,31,0.2) !important;
     
    /* === Additional Professional Colors === */
    --secondary-color: #8A7A5F !important;      /* Original secondary preserved */
    --secondary-color-dark: #7A6A4F !important;  /* Darker secondary */
    
    /* === Interactive States === */
    --hover-bg: rgba(26, 69, 104, 0.08) !important;
    --active-bg: rgba(26, 69, 104, 0.12) !important;
    --focus-ring: rgba(26, 69, 104, 0.25) !important;
    
    /* === Spacing & Layout === */
    --spacing-xs: 0.25rem !important;
    --spacing-sm: 0.5rem !important;
    --spacing-md: 1rem !important;
    --spacing-lg: 1.5rem !important;
    --spacing-xl: 2rem !important;
    
    /* === Typography === */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-family-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace !important;
    
    /* === Border Radius === */
    --radius-sm: 0.25rem !important;
    --radius-md: 0.5rem !important;
    --radius-lg: 0.75rem !important;
    --radius-full: 9999px !important;
    
    /* === Transitions === */
    --transition-fast: 150ms ease-in-out !important;
    --transition-base: 250ms ease-in-out !important;
    --transition-slow: 350ms ease-in-out !important;
    
    /* === Z-Index Layers === */
    --z-dropdown: 1000 !important;
    --z-sticky: 1020 !important;
    --z-fixed: 1030 !important;
    --z-modal-backdrop: 1040 !important;
    --z-modal: 1050 !important;
    --z-tooltip: 1060 !important;
}

body:not(.isAdmin-TEST) { 
    #navbarNav ul:first-child .nav-item {
        display: none;
    }

    & > footer {
        display: none;
    }
}

body:not(.isAdmin-TEST).page-profile { 
    li:has(#reactions-tab), li:has(#subscriptions-tab) {
        display: none;
    }
}

body > nav.navbar.bg-primary {
    position: absolute;
    background-color: transparent !important;
    box-shadow: none !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

main.container-fluid {
    min-height: auto !important;
}

#navbarNav .nav-item:has(#theme-icon) {
    display: none !important;
}

.flatboard-index > .row {
    flex-direction: column;
} 

.flatboard-index > .row > * {
    width : 100%
} 

.flatboard-sidebar-wrapper {
    min-height: auto;
}

.flatboard-nav ul {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    width: 100%;
}

.flatboard-content-wrapper {
    all: unset !important;
}

.flatboard-nav ul li:nth-child(n+3) {
    display: none;
}

div[data-discussion-id] {

    .row {
        flex-direction: column-reverse;
    }

    .row > * {
        width: 100%;
    }

    .breadcrumb-nav {
        font-weight: 700;
        font-size: 1.2em;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        content : "→";
    }

    .discussion-sidebar-flatboard {
        padding-left: 0px !important;

        .d-grid {
            display: flex !important;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;

            & > *:nth-child(1) {
                order: 3;
                margin-left: auto;
            }

            & > *:nth-child(2) {
                order: 1;
            }

            & > *:nth-child(3) {
                order: 2;
            }

            button {
                display: inline-block;
                width: auto !important;
            }

            & > *:last-child {
                display: none;
            }
        }

    }

    .post-header .d-flex {
        align-items: center;
    }

    .text-muted:has(.copy-url-btn) {
        display: none !important;
    }

    .reaction-picker {
        display: none !important;
    }

    .row > *:last-child {
        position: sticky;
        top: 0;
        z-index: 500;
    }

    #post-scrubber-card {
        display: none;
    }
    
    .posts-list-flatboard {
        background-color: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
}

form#discussion-form {
    .mb-3:has(#selected-tags) {
        display: none;
    }
}

/* Set navbarNav background from --banner-bg CSS variable when it has 'show' class */
#navbarNav.show {
    background-color: var(--banner-bg);
}