/* ==========================================================================
   TTP RAG PLATFORM — DESIGN SYSTEM
   ==========================================================================
   Brand variables are set by the brand loader from brand.json.
   These are platform defaults — overridden at runtime.
   Reference: Development Roadmap/05_DESIGN_SYSTEM.md
   ========================================================================== */

:root {
    /* ======================================================================
       PRIMARY & SECONDARY COLORS
       ====================================================================== */
    --brand-primary: #163f6b;
    --brand-primary-dark: #0d2d4d;
    --brand-primary-light: #1e5285;
    --brand-secondary: #a0a6ac;

    /* ======================================================================
       SEMANTIC COLORS
       ====================================================================== */
    --brand-success: #58c76b;
    --brand-success-dark: #009345;
    --brand-danger: #f0506b;
    --brand-danger-dark: #ec1c24;
    --brand-warning: #d4bf8c;
    --brand-info: #4cc0d2;
    --brand-light: #e7ebf0;
    --brand-dark: #5b6068;

    /* ======================================================================
       TEXT COLORS
       ====================================================================== */
    --brand-text-base: #404041;
    --brand-text-muted: #929497;
    --brand-text-secondary: #58595b;
    --brand-text-tertiary: #898a8d;
    --brand-text-lightest: #f3f5f7;
    --brand-text-dark: #404041;
    --brand-text-title: #1e4d39;
    --brand-text-link: #4679cc;
    --brand-text-emphasis: #909090;

    /* ======================================================================
       BACKGROUND COLORS
       ====================================================================== */
    --brand-card-bg: #f1f1f2;
    --brand-card-bg-alt: #f3f5f7;
    --brand-section-striped: #f3f5f7;
    --brand-blue-light: #ecf3f9;
    --brand-background: #ffffff;

    /* ======================================================================
       FORM COLORS
       ====================================================================== */
    --brand-form-label: #929497;
    --brand-form-control: #404040;
    --brand-form-control-bg: #fff;
    --brand-form-control-border: #e2e2e2;
    --brand-form-input-checked: #163f6b;
    --brand-form-link: #2776bd;
    --brand-form-error: #B61D22;
    --brand-form-error-border: #f3ced3;

    /* ======================================================================
       BADGE COLORS
       ====================================================================== */
    --badge-primary-bg: #275eb5;
    --badge-primary-text: #d2bf8b;
    --badge-secondary-bg: #a0a6ac;
    --badge-secondary-text: #fff;
    --badge-success-bg: #009345;
    --badge-success-text: #fff;
    --badge-danger-bg: #ec1c24;
    --badge-danger-text: #fff;
    --badge-light-bg: #dbdfe4;
    --badge-light-text: #163f6b;
    --badge-dark-bg: #6d6e70;
    --badge-dark-text: #fff;
    --badge-purple-bg: #b6259e;
    --badge-purple-text: #fff;

    /* ======================================================================
       SEMANTIC UI PALETTE
       Used for status indicators, content types, data visualization.
       Platform defaults — entities can override via brand.json.
       ====================================================================== */
    --ui-gray: #6b7280;
    --ui-blue: #3b82f6;
    --ui-green: #10b981;
    --ui-amber: #f59e0b;
    --ui-red: #ef4444;
    --ui-purple: #8b5cf6;
    --ui-cyan: #06b6d4;
    --ui-pink: #ec4899;
    --ui-teal: #14b8a6;
    --ui-indigo: #6366f1;
    --ui-emerald: #059669;
    --ui-dark-purple: #7c3aed;
    --ui-dark-amber: #d97706;

    /* Light background variants (8% opacity) */
    --ui-gray-light: #6b728015;
    --ui-blue-light: #3b82f615;
    --ui-green-light: #10b98115;
    --ui-amber-light: #f59e0b15;
    --ui-red-light: #ef444415;
    --ui-purple-light: #8b5cf615;
    --ui-cyan-light: #06b6d415;
    --ui-pink-light: #ec489915;

    /* Asset type colors (file type visual indicators) */
    --asset-image-bg: #e8f5e9;
    --asset-image-color: #4caf50;
    --asset-video-bg: #e3f2fd;
    --asset-video-color: #2196f3;
    --asset-pdf-bg: #e3f2fd;
    --asset-pdf-color: #1976d2;
    --asset-audio-bg: #fff3e0;
    --asset-audio-color: #ff9800;
    --asset-other-bg: #f3e5f5;
    --asset-other-color: #9c27b0;
    --asset-ppt-bg: #fce4ec;
    --asset-ppt-color: #b6259e;
    --asset-html-bg: #e1f5fe;
    --asset-html-color: #0288d1;
    --asset-excel-bg: #fff8e1;
    --asset-excel-color: #f9a825;
    --asset-embed-bg: #fff3e0;
    --asset-embed-color: #e65100;

    /* ======================================================================
       SPECIAL COLORS
       ====================================================================== */
    --brand-tooltip: #ed2224;
    --brand-text-selection: #fff2a8;
    --brand-close-btn-bg: #7f7f6f;
    --brand-progress-active: #37abf2;
    --brand-footer-bg: #13181c;
    --brand-orange-accent: #f15a25;
    --brand-accent: #EDA92C;
    --brand-accent-dark: #d4961f;

    /* ======================================================================
       TYPOGRAPHY
       ====================================================================== */
    --brand-font-size-base: 18px;
    --brand-font-body: 'Avenir', 'Avenir LT', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --brand-font-heading: 'PT Serif', Georgia, serif;
    --brand-font-display: 'Trajan Pro', 'Avenir', Georgia, serif;
    --brand-font-decorative: 'Dancing Script', cursive;
    --brand-font-mono: 'Monaco', 'Menlo', 'Consolas', monospace;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* ======================================================================
       SPACING & LAYOUT
       ====================================================================== */
    --brand-radius: 16px;
    --brand-radius-sm: 8px;
    --brand-radius-xs: 4px;
    --brand-radius-lg: 24px;
    --brand-radius-pill: 9999px;

    /* Container Widths */
    --brand-container-xxs: 470px;
    --brand-container-xs: 670px;
    --brand-container-sm: 930px;
    --brand-container-md: 1270px;
    --brand-container-max: 1354px;

    /* Container Padding */
    --container-padding-mobile: 15px;
    --container-padding-tablet: 30px;
    --container-padding-desktop: 42px;

    /* ======================================================================
       SHADOWS
       ====================================================================== */
    --brand-shadow-header: 0 7px 10px 0 rgba(32, 39, 80, 0.12);
    --brand-shadow-card: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
    --brand-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --brand-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --brand-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
    --brand-shadow-primary: 5px 0 18px -3px var(--brand-primary);

    /* ======================================================================
       TRANSITIONS
       ====================================================================== */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ======================================================================
       Z-INDEX SCALE
       ====================================================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* ======================================================================
       BACKWARD COMPATIBILITY ALIASES
       These map old --color-* names to new --brand-* names.
       Allows gradual migration — remove once all references are updated.
       ====================================================================== */
    --color-primary: var(--brand-primary);
    --color-primary-dark: var(--brand-primary-dark);
    --color-primary-light: var(--brand-primary-light);
    --color-secondary: var(--brand-secondary);
    --color-success: var(--brand-success);
    --color-success-dark: var(--brand-success-dark);
    --color-danger: var(--brand-danger);
    --color-danger-dark: var(--brand-danger-dark);
    --color-warning: var(--brand-warning);
    --color-info: var(--brand-info);
    --color-light: var(--brand-light);
    --color-dark: var(--brand-dark);
    --color-base: var(--brand-text-base);
    --color-gray: var(--brand-text-muted);
    --color-gray-light: var(--brand-text-secondary);
    --color-gray-lighter: var(--brand-text-tertiary);
    --color-gray-lightest: var(--brand-text-lightest);
    --color-gray-dark: var(--brand-text-dark);
    --color-title: var(--brand-text-title);
    --color-link: var(--brand-text-link);
    --color-emphasis: var(--brand-text-emphasis);
    --color-card-bg: var(--brand-card-bg);
    --color-t63-card-bg: var(--brand-card-bg-alt);
    --color-section-striped: var(--brand-section-striped);
    --color-blue-light: var(--brand-blue-light);
    --color-background: var(--brand-background);
    --color-form-label: var(--brand-form-label);
    --color-form-control: var(--brand-form-control);
    --color-form-control-bg: var(--brand-form-control-bg);
    --color-form-control-border: var(--brand-form-control-border);
    --color-input-checked: var(--brand-form-input-checked);
    --color-form-link: var(--brand-form-link);
    --color-form-error: var(--brand-form-error);
    --color-form-error-border: var(--brand-form-error-border);
    --color-tooltip: var(--brand-tooltip);
    --color-text-selection: var(--brand-text-selection);
    --color-close-btn-bg: var(--brand-close-btn-bg);
    --color-progress-active: var(--brand-progress-active);
    --color-footer-bg: var(--brand-footer-bg);
    --color-orange-accent: var(--brand-orange-accent);
    --color-accent: var(--brand-accent);
    --color-accent-dark: var(--brand-accent-dark);
    --font-body: var(--brand-font-body);
    --font-heading: var(--brand-font-heading);
    --font-display: var(--brand-font-display);
    --font-decorative: var(--brand-font-decorative);
    --font-mono: var(--brand-font-mono);
    --border-radius: var(--brand-radius);
    --border-radius-sm: var(--brand-radius-sm);
    --border-radius-xs: var(--brand-radius-xs);
    --border-radius-lg: var(--brand-radius-lg);
    --border-radius-pill: var(--brand-radius-pill);
    --container-xxs: var(--brand-container-xxs);
    --container-xs: var(--brand-container-xs);
    --container-sm: var(--brand-container-sm);
    --container-md: var(--brand-container-md);
    --container-lg: var(--brand-container-max);
    --shadow-header: var(--brand-shadow-header);
    --shadow-card: var(--brand-shadow-card);
    --shadow-sm: var(--brand-shadow-sm);
    --shadow-md: var(--brand-shadow-md);
    --shadow-lg: var(--brand-shadow-lg);
    --shadow-primary: var(--brand-shadow-primary);

    /* Shorthand aliases (for content-browser.css and other files) */
    --primary: var(--brand-primary);
    --secondary: var(--brand-secondary);
    --success: var(--brand-success);
    --danger: var(--brand-danger);
    --text-muted: var(--brand-text-muted);
    --text-base: var(--brand-text-base);
    --bg-light: var(--brand-text-lightest);
    --border-color: var(--brand-form-control-border);
    --font-headings: var(--brand-font-heading);
}

/* Base font size — scales all rem units platform-wide */
html {
    font-size: var(--brand-font-size-base, 16px);
}

/* ==========================================================================
   HOVER UTILITY CLASSES (replace inline onmouseover/onmouseout)
   ========================================================================== */
.hover-reveal:hover { opacity: 1 !important; }
.hover-danger:hover { color: var(--ui-red) !important; opacity: 1 !important; }

/* ==========================================================================
   COMPONENT BASE STYLES
   ========================================================================== */

/* Primary Button */
.btn-brand-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    border-radius: var(--brand-radius);
    font-family: var(--brand-font-body);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition);
}

.btn-brand-primary:hover,
.btn-brand-primary:focus {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--brand-shadow-md);
}

/* Secondary Button */
.btn-brand-secondary {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: #fff;
    border-radius: var(--brand-radius);
    font-family: var(--brand-font-body);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition);
}

.btn-brand-secondary:hover,
.btn-brand-secondary:focus {
    background-color: #8a9099;
    border-color: #8a9099;
    color: #fff;
}

/* Light Button */
.btn-brand-light {
    background-color: var(--brand-light);
    border-color: var(--brand-light);
    color: var(--brand-primary);
    border-radius: var(--brand-radius);
    font-family: var(--brand-font-body);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition);
}

.btn-brand-light:hover,
.btn-brand-light:focus {
    background-color: #d8dee5;
    border-color: #d8dee5;
    color: var(--brand-primary);
}

/* Accent Button (Gold) */
.btn-brand-accent {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
    border-radius: var(--brand-radius);
    font-family: var(--brand-font-body);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition);
}

.btn-brand-accent:hover,
.btn-brand-accent:focus {
    background-color: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
    color: #fff;
}

/* Card Component */
.card-brand {
    background-color: var(--brand-card-bg);
    border-radius: var(--brand-radius);
    border: none;
    box-shadow: var(--brand-shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

.card-brand:hover {
    box-shadow: var(--brand-shadow-md);
}

/* Header Component */
.header-brand {
    background-color: #fff;
    box-shadow: var(--brand-shadow-header);
}

/* Chapter Header */
.chapter-head-brand {
    background-color: var(--brand-primary);
    color: #fff;
}

/* Breadcrumb */
.breadcrumb-brand li {
    color: #808080;
}

.breadcrumb-brand li a {
    color: #4d5c61;
    text-decoration: none;
    transition: color var(--transition);
}

.breadcrumb-brand li a:hover {
    color: var(--brand-primary);
}

/* Form Control */
.form-control-brand {
    border: 1px solid var(--brand-form-control-border);
    border-radius: var(--brand-radius);
    color: var(--brand-form-control);
    background-color: var(--brand-form-control-bg);
    font-family: var(--brand-font-body);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control-brand:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(22, 63, 107, 0.1);
    outline: none;
}

.form-control-brand::placeholder {
    color: var(--brand-form-label);
}

/* Form Label */
.form-label-brand {
    color: var(--brand-form-label);
    font-family: var(--brand-font-body);
    font-weight: var(--font-weight-medium);
}


/* ==========================================================================
   TAB NAVIGATION
   ========================================================================== */

.nav-tabs-brand {
    border-bottom: 2px solid var(--brand-card-bg);
}

.nav-tabs-brand .nav-link {
    color: var(--brand-text-muted);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 20px;
    font-family: var(--brand-font-body);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition);
    margin-bottom: -2px;
}

.nav-tabs-brand .nav-link:hover {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-secondary);
}

.nav-tabs-brand .nav-link.active {
    color: var(--brand-primary);
    background-color: transparent;
    border-bottom-color: var(--brand-primary);
}


/* ==========================================================================
   PROVIDER CARDS
   ========================================================================== */

.provider-card-brand {
    background: #fff;
    border: 1px solid var(--brand-form-control-border);
    border-radius: var(--brand-radius);
    padding: 20px;
    margin-bottom: 16px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.provider-card-brand:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--brand-shadow-sm);
}

.provider-card-brand.enabled {
    border-left: 4px solid var(--brand-success);
}

.provider-card-brand.disabled {
    opacity: 0.7;
}

.provider-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.provider-name {
    font-family: var(--brand-font-body);
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    color: var(--brand-text-base);
}

.provider-type-badge {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: var(--brand-radius-pill);
    font-weight: var(--font-weight-medium);
}

.provider-type-llm {
    background-color: var(--brand-blue-light);
    color: var(--brand-primary);
}

.provider-type-image {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.provider-type-video {
    background-color: #fce4ec;
    color: #c2185b;
}

.provider-type-audio {
    background-color: #fff3e0;
    color: #e65100;
}

.provider-type-workflow {
    background-color: #f3e5f5;
    color: #7b1fa2;
}


/* ==========================================================================
   STATUS INDICATORS
   ========================================================================== */

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.active {
    background-color: var(--brand-success);
    box-shadow: 0 0 0 3px rgba(88, 199, 107, 0.2);
}

.status-dot.inactive {
    background-color: var(--brand-secondary);
}

.status-dot.error {
    background-color: var(--brand-danger);
    box-shadow: 0 0 0 3px rgba(240, 80, 107, 0.2);
}

.status-dot.pending {
    background-color: var(--brand-warning);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text colors */
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.text-brand-success { color: var(--brand-success) !important; }
.text-brand-danger { color: var(--brand-danger) !important; }
.text-brand-warning { color: var(--brand-warning) !important; }
.text-brand-info { color: var(--brand-info) !important; }
.text-brand-base { color: var(--brand-text-base) !important; }
.text-brand-muted { color: var(--brand-text-muted) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }

/* Background colors */
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.bg-brand-success { background-color: var(--brand-success) !important; }
.bg-brand-danger { background-color: var(--brand-danger) !important; }
.bg-brand-warning { background-color: var(--brand-warning) !important; }
.bg-brand-info { background-color: var(--brand-info) !important; }
.bg-brand-light { background-color: var(--brand-light) !important; }
.bg-brand-card { background-color: var(--brand-card-bg) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }

/* Border radius */
.rounded-brand { border-radius: var(--brand-radius) !important; }
.rounded-brand-sm { border-radius: var(--brand-radius-sm) !important; }
.rounded-brand-lg { border-radius: var(--brand-radius-lg) !important; }
.rounded-brand-pill { border-radius: var(--brand-radius-pill) !important; }

/* Shadows */
.shadow-brand-sm { box-shadow: var(--brand-shadow-sm) !important; }
.shadow-brand-md { box-shadow: var(--brand-shadow-md) !important; }
.shadow-brand-lg { box-shadow: var(--brand-shadow-lg) !important; }
.shadow-brand-header { box-shadow: var(--brand-shadow-header) !important; }

/* Typography */
.font-body { font-family: var(--brand-font-body) !important; }
.font-heading { font-family: var(--brand-font-heading) !important; }
.font-display { font-family: var(--brand-font-display) !important; }

/* Accent underline decoration */
.brand-underline::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--brand-accent);
    margin-top: 12px;
}


/* ==========================================================================
   DARK MODE — Layer 3 of the 3-Layer CSS Architecture
   ==========================================================================
   Layer 1: Base defaults (this file :root)
   Layer 2: Brand overlay (brand-loader.js applies brand.json at runtime)
   Layer 3: Theme mode (light/dark, activated via data-theme attribute)

   Dark mode overrides STRUCTURAL colors (backgrounds, borders, text)
   while preserving BRAND IDENTITY colors (primary, accent).
   The brand-loader sets brand colors BEFORE this layer, so brand.json
   values are the base that dark mode adjusts around.

   Activation: <html data-theme="dark"> or system prefers-color-scheme.
   Toggle: theme-manager.js handles localStorage persistence and system sync.
   ========================================================================== */

[data-theme="dark"] {
    /* ── Backgrounds ────────────────────────────────────────────────────── */
    --brand-background: #1a1d23;
    --brand-card-bg: #242830;
    --brand-card-bg-alt: #2a2e38;
    --brand-section-striped: #2a2e38;
    --brand-blue-light: #1e2a3a;
    --brand-light: #2a2e38;

    /* ── Text Colors ────────────────────────────────────────────────────── */
    --brand-text-base: #e0e4ea;
    --brand-text-muted: #8b919a;
    --brand-text-secondary: #b0b6c0;
    --brand-text-tertiary: #8b919a;
    --brand-text-lightest: #1a1d23;
    --brand-text-dark: #e0e4ea;
    --brand-text-title: #e8ecf2;
    --brand-text-link: #6fa8dc;
    --brand-text-emphasis: #b0b6c0;

    /* ── Form Colors ────────────────────────────────────────────────────── */
    --brand-form-label: #8b919a;
    --brand-form-control: #e0e4ea;
    --brand-form-control-bg: #2a2e38;
    --brand-form-control-border: #3d4350;
    --brand-form-error-border: #5a2025;

    /* ── Borders & Structural ───────────────────────────────────────────── */
    --brand-dark: #8b919a;
    --brand-footer-bg: #0f1115;

    /* ── Shadows (softer for dark backgrounds) ──────────────────────────── */
    --brand-shadow-header: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
    --brand-shadow-card: 0 4px 10px 0 rgba(0, 0, 0, 0.4);
    --brand-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --brand-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --brand-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);

    /* ── Badge adjustments (slightly brighter on dark bg) ──────────────── */
    --badge-light-bg: #3d4350;
    --badge-light-text: #e0e4ea;
    --badge-dark-bg: #8b919a;
    --badge-dark-text: #1a1d23;

    /* ── Backward compatibility aliases ─────────────────────────────────── */
    --color-base: var(--brand-text-base);
    --color-gray: var(--brand-text-muted);
    --color-gray-light: var(--brand-text-secondary);
    --color-gray-lighter: var(--brand-text-tertiary);
    --color-gray-lightest: var(--brand-text-lightest);
    --color-gray-dark: var(--brand-text-dark);
    --color-title: var(--brand-text-title);
    --color-link: var(--brand-text-link);
    --color-emphasis: var(--brand-text-emphasis);
    --color-card-bg: var(--brand-card-bg);
    --color-t63-card-bg: var(--brand-card-bg-alt);
    --color-section-striped: var(--brand-section-striped);
    --color-blue-light: var(--brand-blue-light);
    --color-background: var(--brand-background);
    --color-form-label: var(--brand-form-label);
    --color-form-control: var(--brand-form-control);
    --color-form-control-bg: var(--brand-form-control-bg);
    --color-form-control-border: var(--brand-form-control-border);
    --color-light: var(--brand-light);
    --color-dark: var(--brand-dark);
    --bg-light: var(--brand-text-lightest);
    --border-color: var(--brand-form-control-border);

    /* App-level aliases from styles.css */
    --brand-link: var(--brand-text-link);
    --brand-light-gray: var(--brand-text-lightest);
    --brand-text-primary: var(--brand-text-base);
    --brand-border: var(--brand-form-control-border);
}

/* ── Dark mode: Bootstrap overrides ─────────────────────────────────────── */
/* These override Bootstrap's default light-mode styles when dark mode is active */

[data-theme="dark"] body {
    background: var(--brand-background);
    color: var(--brand-text-base);
}

[data-theme="dark"] .card {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

[data-theme="dark"] .modal-content {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--brand-form-control-border);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--brand-form-control-border);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

[data-theme="dark"] .dropdown-item {
    color: var(--brand-text-base);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--brand-card-bg-alt);
    color: var(--brand-text-base);
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--brand-form-control-border);
}

[data-theme="dark"] .dropdown-header {
    color: var(--brand-text-muted);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--brand-form-control-bg);
    border-color: var(--brand-form-control-border);
    color: var(--brand-form-control);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--brand-form-control-bg);
    color: var(--brand-form-control);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--brand-form-label);
}

[data-theme="dark"] .form-label {
    color: var(--brand-text-secondary);
}

[data-theme="dark"] .form-text {
    color: var(--brand-text-muted);
}

[data-theme="dark"] .form-check-label {
    color: var(--brand-text-base);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--brand-card-bg-alt);
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-muted);
}

[data-theme="dark"] .table {
    color: var(--brand-text-base);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--brand-form-control-border);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--brand-text-base);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--brand-text-base);
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--brand-form-control-border);
}

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

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border) var(--brand-form-control-border) var(--brand-card-bg);
    color: var(--brand-text-base);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

[data-theme="dark"] .list-group-item {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

[data-theme="dark"] .alert {
    border-color: var(--brand-form-control-border);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(76, 192, 210, 0.15);
    color: var(--brand-info);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(212, 191, 140, 0.15);
    color: var(--brand-warning);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(240, 80, 107, 0.15);
    color: var(--brand-danger);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(88, 199, 107, 0.15);
    color: var(--brand-success);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--brand-text-link);
    border-color: var(--brand-text-link);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--brand-text-muted);
    border-color: var(--brand-form-control-border);
}

[data-theme="dark"] .btn-light {
    background-color: var(--brand-card-bg-alt);
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .text-muted {
    color: var(--brand-text-muted) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .text-body {
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .border {
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .border-top {
    border-top-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--brand-card-bg) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--brand-card-bg-alt) !important;
}

[data-theme="dark"] hr {
    border-color: var(--brand-form-control-border);
    opacity: 0.3;
}

[data-theme="dark"] code {
    color: #e06c75;
    background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] pre {
    background-color: #1e2028;
    color: #abb2bf;
    border-color: var(--brand-form-control-border);
}

/* ── Dark mode: App-specific overrides ──────────────────────────────────── */

/* Header stays brand-colored (dark primary already) — just darken slightly */
[data-theme="dark"] .app-header .header-main {
    background-color: var(--brand-primary-dark);
}

/* Header toolbar */
[data-theme="dark"] .app-header .header-toolbar {
    background-color: var(--brand-card-bg);
    border-bottom-color: var(--brand-form-control-border);
}

[data-theme="dark"] .app-header .header-toolbar .btn {
    color: var(--brand-text-muted);
}

[data-theme="dark"] .app-header .header-toolbar .btn:hover {
    color: var(--brand-text-base);
    background-color: var(--brand-card-bg-alt);
}

/* Admin cards (used in admin pages with inline styles) */
[data-theme="dark"] .admin-card {
    border-color: var(--brand-form-control-border);
    background-color: var(--brand-card-bg);
}

[data-theme="dark"] .admin-card .card-header {
    background-color: var(--brand-card-bg-alt);
    border-bottom-color: var(--brand-form-control-border);
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--brand-text-muted);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--brand-text-muted);
}

/* DevExpress DataGrid layout — comfortable padding around grids */
.admin-grid-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Grid cards — allow overflow for action buttons, add breathing room */
.grid-card { overflow: visible; }
.grid-card .card-body { padding: 0.5rem; }

/* DevExpress DataGrid (used in admin pages) */
[data-theme="dark"] .dx-datagrid {
    background-color: var(--brand-card-bg) !important;
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .dx-datagrid-headers {
    background-color: var(--brand-card-bg-alt) !important;
    border-bottom-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-muted) !important;
}

[data-theme="dark"] .dx-datagrid-headers td {
    background-color: var(--brand-card-bg-alt) !important;
    color: var(--brand-text-muted) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row {
    border-bottom-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row td {
    background-color: var(--brand-card-bg) !important;
    color: var(--brand-text-base) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row.dx-state-hover td,
[data-theme="dark"] .dx-datagrid-rowsview .dx-row:hover td {
    background-color: var(--brand-card-bg-alt) !important;
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row.dx-selection td {
    background-color: rgba(22, 63, 107, 0.3) !important;
}

[data-theme="dark"] .dx-datagrid-search-panel .dx-textbox {
    background-color: var(--brand-form-control-bg) !important;
    color: var(--brand-form-control) !important;
}

[data-theme="dark"] .dx-toolbar {
    background-color: transparent !important;
}

[data-theme="dark"] .dx-datagrid-filter-row td {
    background-color: var(--brand-card-bg-alt) !important;
}

[data-theme="dark"] .dx-checkbox-icon {
    background-color: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .dx-datagrid-nodata {
    color: var(--brand-text-muted) !important;
}

[data-theme="dark"] .dx-pager {
    background-color: var(--brand-card-bg) !important;
    color: var(--brand-text-muted) !important;
}

[data-theme="dark"] .dx-page {
    color: var(--brand-text-muted) !important;
}

[data-theme="dark"] .dx-page.dx-selection {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* Permission toggles section */
[data-theme="dark"] .perm-section {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border);
}

/* Tooltip override */
[data-theme="dark"] .tooltip-inner {
    background-color: var(--brand-card-bg-alt);
    color: var(--brand-text-base);
}

/* S180 hotfix: Bootstrap tooltips don't block clicks on the underlying
 * element. Without this, the tooltip div sits at z-index 1080 overlapping
 * the trigger element — real-mouse clicks on a hovered button land on the
 * tooltip instead of the button, and the button's click handler never fires.
 * Todd reported IC topic-sort + archive-toggle + filter buttons all
 * unresponsive on prod because of this. Playwright synthetic clicks bypass
 * visual layers so the issue was invisible to probe testing.
 *
 * Rule: the whole .tooltip overlay ignores pointer events (hover, click,
 * etc). Child .tooltip-inner keeps default so selectable-text inside
 * tooltips still works if we ever allow that. */
.tooltip {
    pointer-events: none !important;
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--brand-background);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--brand-form-control-border);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--brand-text-muted);
}

/* ── Dark mode: Broad catch-all overrides ──────────────────────────────── */
/* Many page-specific CSS files use hardcoded `background: white` / `#fff`.
   These rules override the most impactful containers until those files are
   migrated to use CSS variables. The !important is necessary to beat
   page-specific selectors that are equally or more specific. */

[data-theme="dark"] .tab-content {
    background: var(--brand-card-bg) !important;
    color: var(--brand-text-base);
}

[data-theme="dark"] .tab-pane {
    background: transparent !important;
    color: var(--brand-text-base);
}

/* Page-specific section backgrounds */
[data-theme="dark"] .ai-center-hero,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .page-hero {
    background: var(--brand-background) !important;
}

/* Nav pills (used in several pages) */
[data-theme="dark"] .nav-pills .nav-link {
    color: var(--brand-text-muted);
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--brand-primary);
    color: #fff;
}

/* Sidebar and panels */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .panel,
[data-theme="dark"] .side-panel {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
}

/* Content sections with white backgrounds */
[data-theme="dark"] .content-section,
[data-theme="dark"] .detail-section,
[data-theme="dark"] .section-content,
[data-theme="dark"] .provider-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .info-card {
    background: var(--brand-card-bg) !important;
    color: var(--brand-text-base);
    border-color: var(--brand-form-control-border) !important;
}

/* Common container patterns */
[data-theme="dark"] .card-body {
    background: transparent;
    color: var(--brand-text-base);
}

[data-theme="dark"] .card-header {
    background-color: var(--brand-card-bg-alt);
    border-bottom-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

[data-theme="dark"] .card-footer {
    background-color: var(--brand-card-bg-alt);
    border-top-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

/* Accordion (Bootstrap) */
[data-theme="dark"] .accordion-item {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--brand-card-bg-alt);
    color: var(--brand-text-base);
    border-color: var(--brand-form-control-border);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--brand-card-bg);
    color: var(--brand-text-title);
}

/* Popover */
[data-theme="dark"] .popover {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border);
}

[data-theme="dark"] .popover-header {
    background-color: var(--brand-card-bg-alt);
    border-bottom-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

[data-theme="dark"] .popover-body {
    color: var(--brand-text-base);
}

/* Badge text on dark backgrounds */
[data-theme="dark"] .badge.bg-light {
    background-color: var(--brand-card-bg-alt) !important;
    color: var(--brand-text-base) !important;
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-link);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Progress bar background */
[data-theme="dark"] .progress {
    background-color: var(--brand-card-bg-alt);
}

/* Toast */
[data-theme="dark"] .toast {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-form-control-border);
    color: var(--brand-text-base);
}

/* Offcanvas */
[data-theme="dark"] .offcanvas {
    background-color: var(--brand-card-bg);
    color: var(--brand-text-base);
}

/* ── Dark mode: Page-specific catch-all overrides ──────────────────────── */
/* Many page CSS files use hardcoded background: white / #fff / #f8f9fa.
   These rules override the most visible ones with !important. */

/* ── Home page: sidebar, breadcrumb, asset-type items ──────────────────── */
[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .course-filter {
    background: var(--brand-card-bg-alt) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .breadcrumb-nav {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .asset-type-item {
    background: var(--brand-card-bg-alt) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .asset-type-item:hover {
    background: var(--brand-card-bg) !important;
}

[data-theme="dark"] .getting-started-item {
    background: var(--brand-card-bg-alt) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .course-filter-bar {
    background: var(--brand-card-bg-alt) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .region-item {
    background: var(--brand-card-bg-alt) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .region-item:hover {
    background: var(--brand-card-bg) !important;
}

/* Card headers with hardcoded white/light-gray backgrounds */
[data-theme="dark"] .card-header {
    background-color: var(--brand-card-bg-alt) !important;
    border-bottom-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

/* Pagination */
[data-theme="dark"] .pagination-bar {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .page-btn {
    background: var(--brand-card-bg) !important;
    color: var(--brand-text-base) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .page-btn:hover,
[data-theme="dark"] .page-btn.active {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

/* ── Nav tabs (used across many pages) ─────────────────────────────────── */
[data-theme="dark"] .nav-tabs-brand,
[data-theme="dark"] .nav.nav-tabs {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .nav-tabs .nav-link:not(.active) {
    background: transparent !important;
    color: var(--brand-text-muted) !important;
    border-color: transparent !important;
}

/* ── Content Browser: filter bar, content cards ────────────────────────── */
[data-theme="dark"] .filter-bar {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .content-card {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .content-card:hover {
    border-color: var(--brand-primary) !important;
}

/* ── DX DataGrid additional overrides ──────────────────────────────────── */
[data-theme="dark"] .dx-datagrid-rowsview {
    background-color: var(--brand-card-bg) !important;
}

[data-theme="dark"] .dx-datagrid-search-panel {
    background-color: var(--brand-form-control-bg) !important;
}

/* Stat cards */
[data-theme="dark"] .stat-card-lms {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .stat-card-lms .stat-value {
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .stat-card-lms .stat-label {
    color: var(--brand-text-muted) !important;
}

[data-theme="dark"] .stat-card-lms .stat-icon {
    background: var(--brand-card-bg-alt) !important;
}

/* Content browser sidebar and panels */
[data-theme="dark"] .course-tree,
[data-theme="dark"] .course-sidebar,
[data-theme="dark"] .filter-panel,
[data-theme="dark"] .tree-panel {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

/* Notes panel */
[data-theme="dark"] .notes-panel,
[data-theme="dark"] .notes-dashboard,
[data-theme="dark"] .note-card,
[data-theme="dark"] .note-item {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

/* Generic section cards used across pages */
[data-theme="dark"] .section-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .dashboard-card {
    background: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

/* Link color in dark mode */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--brand-text-link);
}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}

/* Select2 / custom selects */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--brand-form-control-bg) !important;
    border-color: var(--brand-form-control-border) !important;
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--brand-card-bg) !important;
    border-color: var(--brand-form-control-border) !important;
}

[data-theme="dark"] .select2-results__option {
    color: var(--brand-text-base) !important;
}

[data-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ── Auto dark mode for system preference (opt-in via data-theme="auto") ── */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --brand-background: #1a1d23;
        --brand-card-bg: #242830;
        --brand-card-bg-alt: #2a2e38;
        --brand-section-striped: #2a2e38;
        --brand-blue-light: #1e2a3a;
        --brand-light: #2a2e38;
        --brand-text-base: #e0e4ea;
        --brand-text-muted: #8b919a;
        --brand-text-secondary: #b0b6c0;
        --brand-text-tertiary: #8b919a;
        --brand-text-lightest: #1a1d23;
        --brand-text-dark: #e0e4ea;
        --brand-text-title: #e8ecf2;
        --brand-text-link: #6fa8dc;
        --brand-text-emphasis: #b0b6c0;
        --brand-form-label: #8b919a;
        --brand-form-control: #e0e4ea;
        --brand-form-control-bg: #2a2e38;
        --brand-form-control-border: #3d4350;
        --brand-shadow-header: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
        --brand-shadow-card: 0 4px 10px 0 rgba(0, 0, 0, 0.4);
        --brand-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
        --brand-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --brand-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
    }
}