/*
 * WEBUILDER Academy - Brand Identity CSS
 * Primary Color: #004aad (Deep Blue)
 * A cohesive, modern color palette for the entire LMS platform
 * 
 * Color Scale:
 * - Primary (900): #002d6b - Darkest
 * - Primary (800): #003a89 - Very Dark
 * - Primary (700): #004aad - Main Primary
 * - Primary (600): #1a5cb9 - Primary
 * - Primary (500): #336dc5 - Medium
 * - Primary (400): #5587d1 - Light
 * - Primary (300): #7aa1dd - Lighter
 * - Primary (200): #a3bfe9 - Very Light
 * - Primary (100): #cddcf4 - Soft
 * - Primary (50):  #e8f0fb - Softest/Background
 */

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */
:root {
    /* Primary Color Palette */
    --primary-50: #e8f0fb;
    --primary-100: #cddcf4;
    --primary-200: #a3bfe9;
    --primary-300: #7aa1dd;
    --primary-400: #5587d1;
    --primary-500: #336dc5;
    --primary-600: #1a5cb9;
    --primary-700: #004aad;
    --primary-800: #003a89;
    --primary-900: #002d6b;
    
    /* Semantic Primary Colors */
    --primary: #004aad;
    --primary-hover: #003a89;
    --primary-active: #002d6b;
    --primary-light: #336dc5;
    --primary-dark: #003a89;
    --primary-soft: #e8f0fb;
    --primary-soft-hover: #cddcf4;
    
    /* Secondary/Accent Color Palette */
    --secondary-50: #f8fafc;
    --secondary-100: #f1f5f9;
    --secondary-200: #e2e8f0;
    --secondary-300: #cbd5e1;
    --secondary-400: #94a3b8;
    --secondary-500: #78889d;
    --secondary-600: #6c7d92;
    --secondary-700: #64748b;
    --secondary-800: #3b4559;
    --secondary-900: #2b3340;

    /* Semantic Secondary Colors */
    --secondary: #64748b;
    --secondary-hover: #3b4559;
    --secondary-active: #2b3340;
    --secondary-light: #78889d;
    --secondary-dark: #3b4559;
    --secondary-soft: #f8fafc;
    --secondary-soft-hover: #f1f5f9;
    --secondary-rgb: 100, 116, 139;
    
    /* Success Colors */
    --success: #059669;
    --success-light: #10b981;
    --success-soft: #d1fae5;
    
    /* Danger Colors */
    --danger: #dc2626;
    --danger-light: #ef4444;
    --danger-soft: #fee2e2;
    
    /* Warning Colors */
    --warning: #d97706;
    --warning-light: #f59e0b;
    --warning-soft: #fef3c7;
    
    /* Info Colors */
    --info: #0284c7;
    --info-light: #0ea5e9;
    --info-soft: #e0f2fe;
    
    /* Dark/Light Neutrals */
    --dark: #1e293b;
    --dark-light: #334155;
    --light: #f8fafc;
    --white: #ffffff;
    
    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-light: #cbd5e1;
    
    /* Border Colors */
    --border-color: #e2e8f0;
    --border-color-light: #f1f5f9;
    --border-color-strong: #d1d5db;
    --border-color-subtle: #e5e7eb;

    /* ─────────────────────────────────────────────────────────────
       Status depth scale.
       The base --success/--danger/--warning/--info above are the only hues these
       surfaces used, so anything needing a darker emphasis or a softer wash had to
       hard-code a literal. Gate G4 (tools/ci/check-brand-token-discipline.py) forbids
       that, so the full depth ramp is declared here once.
       These are deliberately NOT emitted by ColorPaletteHelper.GenerateCssOverrideBlock:
       a success green must stay green whichever brand colour the academy picks.
       ───────────────────────────────────────────────────────────── */
    --success-deep: #047857;
    --success-deeper: #065f46;
    --success-darkest: #166534;
    --success-bright: #22c55e;
    --success-mid: #16a34a;
    --success-glow: #34d399;
    --success-glow-light: #4ade80;
    --success-soft-alt: #dcfce7;
    --success-line: #a7f3d0;

    --danger-deep: #b91c1c;
    --danger-deeper: #991b1b;
    --danger-glow: #f87171;
    --danger-soft-alt: #fecaca;
    --danger-darkest: #7f1d1d;

    --warning-deep: #b45309;
    --warning-deeper: #92400e;
    --warning-darkest: #713f12;
    --warning-ink: #7c2d12;
    --warning-bright: #fbbf24;
    --warning-glow: #fcd34d;
    --warning-wash: #fde68a;
    --warning-soft-alt: #fffbeb;
    --warning-ember: #fed7aa;
    --warning-ember-deep: #fdba74;
    --warning-ember-wash: #fef2e8;
    --warning-amber: #f7b84b;

    --info-deep: #075985;
    --info-bright: #06b6d4;
    --info-glow: #38bdf8;
    --info-glow-light: #a5f3fc;
    --info-soft-alt: #dbeafe;
    --info-darkest: #0c4a6e;
    --info-ink: #1e3a5f;
    --info-line: #bae6fd;

    /* Accent — the non-primary hue charts and highlights use so a report can show
       two series without inventing a second blue. */
    --accent: #7c3aed;
    --accent-deep: #4f46e5;
    --accent-strong: #1e40af;
    --accent-teal: #0ab39c;
    /* Chart blues kept distinct from --primary so a chart's first series does not
       collide with brand-tinted chrome sitting next to it. */
    --accent-blue: #2563eb;
    --accent-blue-light: #3b82f6;
    --accent-blue-strong: #3454d1;

    /* Neutral ink ramp, for surfaces that need more steps than the four text tokens
       above provide. Ordered light -> dark. */
    --gray-25: #fafbfc;
    --gray-50: #f8f9fa;
    --gray-60: #f8f9fc;
    --gray-75: #eef1f6;
    --gray-85: #e8edf2;
    --gray-100: #f0f4ff;
    --gray-400: #9ca3af;
    --gray-420: #9aa4b5;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-650: #475569;
    --gray-700: #374151;
    --gray-750: #1f2937;
    --gray-800: #0f172a;

    /* Chart series ramp. The ORDER MIRRORS brandPalette() in wwwroot/js/admin-apex.js
       ([primary, success, warning, info, purple, pink, teal, danger]) so a legend swatch
       written as var(--chart-1) is guaranteed to be the same hue the chart renders for
       series 1. Changing one without the other desynchronises legends from charts —
       gate G9 asserts they agree. */
    --chart-1: var(--primary);
    --chart-2: var(--success);
    --chart-3: var(--warning);
    --chart-4: var(--info);
    --chart-5: #8b5cf6;
    --chart-6: #ec4899;
    --chart-7: #14b8a6;
    --chart-8: var(--danger);
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px 0 rgba(0, 74, 173, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 74, 173, 0.1), 0 2px 4px -1px rgba(0, 74, 173, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 74, 173, 0.1), 0 4px 6px -2px rgba(0, 74, 173, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 74, 173, 0.1), 0 10px 10px -5px rgba(0, 74, 173, 0.04);
    
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, #004aad 0%, #0066cc 50%, #3385d6 100%);
    --gradient-primary-dark: linear-gradient(135deg, #002d6b 0%, #003a89 50%, #004aad 100%);
    --gradient-primary-light: linear-gradient(135deg, #336dc5 0%, #5587d1 50%, #7aa1dd 100%);
    --gradient-hero: linear-gradient(135deg, #004aad 0%, #0055c4 50%, #1a5cb9 100%);
    --gradient-sidebar: linear-gradient(180deg, #004aad 0%, #003a89 100%);
    --gradient-card: linear-gradient(135deg, #e8f0fb 0%, #ffffff 100%);
    
    /* Bootstrap Overrides */
    --bs-primary: #004aad;
    --bs-primary-rgb: 0, 74, 173;
    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-link-color: #004aad;
    --bs-link-hover-color: #003a89;
}

/* ============================================
   BOOTSTRAP COMPONENT OVERRIDES
   ============================================ */

/* Buttons */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--white) !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--primary-active) !important;
    border-color: var(--primary-active) !important;
}

.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn-soft-primary,
.btn-light-brand {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
    border: none !important;
}

.btn-soft-primary:hover,
.btn-light-brand:hover {
    background-color: var(--primary-soft-hover) !important;
    color: var(--primary-hover) !important;
}

/* Secondary Buttons */
.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--white) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--secondary-hover) !important;
    border-color: var(--secondary-hover) !important;
    color: var(--white) !important;
}

.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--secondary-active) !important;
    border-color: var(--secondary-active) !important;
}

.btn-outline-secondary {
    color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--white) !important;
}

.btn-soft-secondary {
    background-color: var(--secondary-soft) !important;
    color: var(--secondary) !important;
    border: none !important;
}

.btn-soft-secondary:hover {
    background-color: var(--secondary-soft-hover) !important;
    color: var(--secondary-hover) !important;
}

/* Links */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-hover);
}

/* Text Colors */
.text-primary {
    color: var(--primary) !important;
}

.text-primary-hover:hover {
    color: var(--primary-hover) !important;
}

/* Background Colors */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-soft,
.bg-soft-primary {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}

.bg-primary-gradient {
    background: var(--gradient-primary) !important;
}

.bg-primary-light {
    background-color: var(--primary-light) !important;
}

/* Borders */
.border-primary {
    border-color: var(--primary) !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--primary) !important;
}

.badge.bg-soft-primary {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
}

.badge.bg-soft-secondary {
    background-color: var(--secondary-soft) !important;
    color: var(--secondary) !important;
}

/* Secondary Text & Background Utilities */
.text-secondary {
    color: var(--secondary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.bg-soft-secondary,
.bg-secondary-soft {
    background-color: var(--secondary-soft) !important;
    color: var(--secondary) !important;
}

.border-secondary {
    border-color: var(--secondary) !important;
}

/* Progress Bars */
.progress-bar {
    background-color: var(--primary);
}

.progress-bar.bg-primary {
    background-color: var(--primary) !important;
}

/* Form Controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.form-check-input:focus {
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

/* ============================================
   RTL FORM SELECT DROPDOWN STYLING
   Fixes dropdown arrow position for RTL layouts
   ============================================ */

/* RTL Form Select - Arrow on the left (end of row) */
[dir="rtl"] .form-select,
html[dir="rtl"] .form-select {
    padding-right: 0.75rem;
    padding-left: 2.25rem;
    background-position: left 0.75rem center;
    background-size: 16px 12px;
}

/* Ensure proper arrow styling */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    cursor: pointer;
}

/* Form Select enhanced styling */
.form-select:not(:disabled):not([readonly]) {
    cursor: pointer;
}

.form-select:hover {
    border-color: var(--primary-light, #336dc5);
}

/* Nav Pills & Tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.nav-link {
    color: var(--primary);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--primary-hover);
}

/* Pagination */
.page-link {
    color: var(--primary);
}

.page-link:hover {
    color: var(--primary-hover);
    background-color: var(--primary-soft);
    border-color: var(--primary-soft);
}

.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

/* Alerts */
.alert-primary {
    background-color: var(--primary-soft);
    border-color: var(--primary-100);
    color: var(--primary-800);
}

/* List Groups */
.list-group-item.active {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Dropdowns */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary);
    color: var(--white);
}

/* Cards */
.card-header {
    border-bottom-color: var(--border-color);
}

/* ============================================
   NAVIGATION & SIDEBAR STYLES
   ============================================ */

/* Sidebar Link Hover */
.nxl-link:hover {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}

/* Sidebar Active State */
.nxl-link.active,
.nxl-item.active > .nxl-link {
    background-color: var(--primary-soft, #e8f0fb) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

/* Sidebar Submenu */
.nxl-submenu .nxl-link:hover {
    color: var(--primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}

.nxl-submenu .nxl-link.active,
.nxl-submenu .nxl-item.active > .nxl-link {
    background-color: var(--primary-soft, #e8f0fb) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

.nxl-submenu .nxl-item.active > .nxl-link i {
    color: var(--primary) !important;
}

/* Header Dropdown Toggle */
.header-dropdown-toggle.active {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}

.header-dropdown-toggle:hover {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}

/* Breadcrumb */
.breadcrumb-item a:hover {
    color: var(--primary) !important;
}

/* Page Header Title Border */
.page-header-title {
    border-left-color: var(--primary) !important;
}

[dir="rtl"] .page-header-title {
    border-right-color: var(--primary) !important;
}

/* ============================================
   GRADIENT HERO SECTIONS
   ============================================ */

/* Hero Banner Gradient */
.hero-gradient,
.gradient-hero,
.card-gradient-primary {
    background: var(--gradient-hero) !important;
}

/* Override Purple Gradients with Brand Colors */
[style*="667eea"],
[style*="764ba2"],
[style*="#667eea"],
[style*="#764ba2"] {
    background: var(--gradient-hero) !important;
}

/* Hero cards and banners */
.hero-banner,
.welcome-card,
.dashboard-hero {
    background: var(--gradient-hero) !important;
}

/* Course Thumbnail Placeholder Gradient */
.course-thumbnail-placeholder {
    background: var(--gradient-primary) !important;
}

/* Stats Card Gradient Headers */
.stats-card-gradient {
    background: var(--gradient-primary-light) !important;
}

/* ============================================
   CUSTOM COMPONENT STYLES
   ============================================ */

/* Stats Icon Circle */
.stats-icon,
.avatar-text.bg-primary-soft {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
}

/* Category Chips */
.category-chip:hover,
.category-chip.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

/* Course Cards */
.course-card:hover {
    box-shadow: var(--shadow-lg);
}

/* Avatar with Primary Background */
.avatar-text.bg-primary {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.avatar-text.bg-info {
    background-color: var(--info) !important;
}

.avatar-text.bg-success {
    background-color: var(--success) !important;
}

/* Focus States */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary) !important;
}

/* Focus Visible (Accessibility) */
*:focus-visible {
    outline: 3px solid var(--primary) !important;
    outline-offset: 2px;
}

/* ============================================
   CHART COLORS (JavaScript Reference)
   ============================================ */
/*
 * Use these colors in Chart.js configurations:
 * 
 * chartColors = {
 *     primary: '#004aad',
 *     primaryLight: '#336dc5',
 *     primarySoft: '#e8f0fb',
 *     success: '#059669',
 *     danger: '#dc2626',
 *     warning: '#d97706',
 *     info: '#0284c7',
 *     secondary: '#64748b'
 * }
 */

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

/* Gradient Text */
.gradient-text-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hover Effects */
.hover-primary:hover {
    color: var(--primary) !important;
}

.hover-bg-primary:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.hover-bg-primary-soft:hover {
    background-color: var(--primary-soft) !important;
}

/* Shadow Utilities */
.shadow-primary-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-primary-md {
    box-shadow: var(--shadow-md);
}

.shadow-primary-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-primary-xl {
    box-shadow: var(--shadow-xl);
}

/* Border Accents */
.border-primary-accent {
    border-left: 4px solid var(--primary);
}

[dir="rtl"] .border-primary-accent {
    border-left: none;
    border-right: 4px solid var(--primary);
}

/* ============================================
   DARK MODE SUPPORT (Future)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Dark mode variables can be added here */
    :root {
        /* Override for dark mode if needed in future */
    }
}

/* ============================================
   MOBILE-SPECIFIC CSS VARIABLES
   ============================================ */
@media (max-width: 767.98px) {
    :root {
        --mobile-header-height: 56px;
        --mobile-bottom-nav-height: 56px;
        --mobile-border-radius-sm: 10px;
        --mobile-border-radius-md: 14px;
        --mobile-border-radius-lg: 20px;
        --mobile-card-padding: 0.875rem;
        --mobile-font-size-sm: 12px;
        --mobile-font-size-base: 14px;
        --mobile-tap-target: 44px;
    }
}

@media (max-width: 374.98px) {
    :root {
        --mobile-border-radius-sm: 8px;
        --mobile-border-radius-md: 12px;
        --mobile-card-padding: 0.75rem;
    }
}

/* ============================================
   ANIMATION ENHANCEMENTS
   ============================================ */

/* Smooth Transitions */
.btn,
.form-control,
.form-select,
.nav-link,
.dropdown-item,
.card,
.nxl-link,
.category-chip {
    transition: all 0.2s ease-in-out;
}

/* Hover Scale Effect for Cards */
.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Pulse Animation for Notifications */
@keyframes pulse-primary {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 74, 173, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 74, 173, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 74, 173, 0);
    }
}

.pulse-primary {
    animation: pulse-primary 2s infinite;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .bg-primary,
    .btn-primary {
        background-color: var(--primary) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .text-primary {
        color: var(--primary) !important;
    }
}

/* ============================================
   GLOBAL TEXT VISIBILITY ON COLORED BACKGROUNDS
   Ensures text is always visible on any background
   ============================================ */

/* Dark backgrounds should have white text */
.bg-primary,
.bg-primary-gradient,
.bg-success,
.bg-danger,
.bg-dark,
[class*="bg-primary"]:not(.bg-primary-soft):not(.bg-soft-primary):not([class*="-light"]),
.hero-gradient,
.gradient-hero,
.dashboard-hero,
.welcome-card,
.quick-actions-panel,
.card-gradient-primary {
    color: #ffffff !important;
}

/* Warning backgrounds (yellow/amber) need dark text for WCAG contrast */
.bg-warning {
    color: #78350f !important;
    background-color: #f59e0b !important;
}

/* Info backgrounds — override to brand blue for unified identity */
.bg-info {
    color: #ffffff !important;
    background-color: var(--info, #0284c7) !important;
}

/* Ensure children elements inherit white text on dark backgrounds */
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary p, .bg-primary span, .bg-primary label, .bg-primary small,
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.bg-success p, .bg-success span, .bg-success label, .bg-success small,
.bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6,
.bg-danger p, .bg-danger span, .bg-danger label, .bg-danger small,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark p, .bg-dark span, .bg-dark label, .bg-dark small,
.bg-info h1, .bg-info h2, .bg-info h3, .bg-info h4, .bg-info h5, .bg-info h6,
.bg-info p, .bg-info span, .bg-info label, .bg-info small,
.hero-gradient h1, .hero-gradient h2, .hero-gradient h3, .hero-gradient h4, .hero-gradient h5, .hero-gradient h6,
.hero-gradient p, .hero-gradient span, .hero-gradient label, .hero-gradient small,
.gradient-hero h1, .gradient-hero h2, .gradient-hero h3, .gradient-hero h4, .gradient-hero h5, .gradient-hero h6,
.gradient-hero p, .gradient-hero span, .gradient-hero label, .gradient-hero small,
.quick-actions-panel h1, .quick-actions-panel h2, .quick-actions-panel h3, .quick-actions-panel h4, .quick-actions-panel h5, .quick-actions-panel h6,
.quick-actions-panel p, .quick-actions-panel span, .quick-actions-panel label, .quick-actions-panel small {
    color: #ffffff !important;
}

/* Warning background children need dark text for readability */
.bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5, .bg-warning h6,
.bg-warning p, .bg-warning span, .bg-warning label, .bg-warning small {
    color: #78350f !important;
}

/* Warning text-white override — force dark text even when text-white is set */
.bg-warning.text-white,
.bg-warning .text-white {
    color: #78350f !important;
}

/* Links in colored backgrounds */
.bg-primary a:not(.btn),
.bg-success a:not(.btn),
.bg-danger a:not(.btn),
.bg-dark a:not(.btn),
.bg-info a:not(.btn),
.hero-gradient a:not(.btn),
.gradient-hero a:not(.btn) {
    color: #ffffff !important;
    text-decoration: underline;
}

.bg-primary a:not(.btn):hover,
.bg-success a:not(.btn):hover,
.bg-danger a:not(.btn):hover,
.bg-dark a:not(.btn):hover,
.bg-info a:not(.btn):hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Warning background links need dark color */
.bg-warning a:not(.btn) {
    color: #92400e !important;
    text-decoration: underline;
}

.bg-warning a:not(.btn):hover {
    color: #78350f !important;
}

/* Light/soft backgrounds should have dark text */
.bg-primary-soft,
.bg-soft-primary,
.bg-light,
.bg-white,
[class*="bg-soft"]:not(.stat-icon),
[class*="bg-light"] {
    color: var(--text-primary, #1e293b) !important;
}

/* Stat icon elements in soft backgrounds should keep their semantic color */
.stat-icon[class*="bg-soft"].text-primary { color: var(--primary, #004aad) !important; }
.stat-icon[class*="bg-soft"].text-success { color: var(--success, #059669) !important; }
.stat-icon[class*="bg-soft"].text-warning { color: var(--warning, #d97706) !important; }
.stat-icon[class*="bg-soft"].text-info { color: var(--info, #0284c7) !important; }
.stat-icon[class*="bg-soft"].text-secondary { color: var(--secondary, #64748b) !important; }
.stat-icon[class*="bg-soft"].text-danger { color: var(--danger, #dc2626) !important; }

/* Buttons with background should have white text */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info,
.btn-dark {
    color: #ffffff !important;
}

/* Warning button needs dark text for contrast on yellow background */
.btn-warning {
    color: #78350f !important;
}

/* Soft buttons should have colored text */
.btn-soft-primary {
    color: var(--primary, #004aad) !important;
}

.btn-soft-success {
    color: var(--success, #059669) !important;
}

.btn-soft-danger {
    color: var(--danger, #dc2626) !important;
}

.btn-soft-warning {
    color: var(--warning, #d97706) !important;
}

.btn-soft-info {
    color: var(--info, #0284c7) !important;
}

.btn-soft-secondary {
    color: var(--secondary, #64748b) !important;
}

/* Cards with primary background */
.card.bg-primary .card-title,
.card.bg-primary .card-text,
.card.bg-primary .card-header,
.card.bg-primary .card-body,
.card.bg-success .card-title,
.card.bg-success .card-text,
.card.bg-success .card-header,
.card.bg-success .card-body,
.card.bg-danger .card-title,
.card.bg-danger .card-text,
.card.bg-danger .card-header,
.card.bg-danger .card-body,
.card.bg-dark .card-title,
.card.bg-dark .card-text,
.card.bg-dark .card-header,
.card.bg-dark .card-body,
.card.bg-info .card-title,
.card.bg-info .card-text,
.card.bg-info .card-header,
.card.bg-info .card-body {
    color: #ffffff !important;
}

/* Warning cards need dark text for contrast */
.card.bg-warning .card-title,
.card.bg-warning .card-text,
.card.bg-warning .card-header,
.card.bg-warning .card-body {
    color: #78350f !important;
}

/* Badges visibility — dark bg badges get white text */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-dark {
    color: #ffffff !important;
}

/* Info badge: override to brand blue for unified identity */
.badge.bg-info {
    background-color: var(--info, #0284c7) !important;
}

/* Warning badge needs dark text on yellow/amber background (WCAG AA) */
.badge.bg-warning {
    color: #78350f !important;
    background-color: #f59e0b !important;
}

/* Soft badges — use darker shade of their semantic color for identity */
.badge.bg-soft-primary {
    color: var(--primary-800, #003a89) !important;
}

.badge.bg-soft-success {
    color: #065f46 !important;
}

.badge.bg-soft-danger {
    color: #991b1b !important;
}

.badge.bg-soft-warning {
    /* #92400e measured 4.32:1 on the amber tint behind it — just under the AA floor at badge size. */
    color: #7c2d12 !important;
}

.badge.bg-soft-info {
    color: #0c4a6e !important;
}

.badge.bg-light {
    color: var(--text-primary, #1e293b) !important;
}

/* Alert text visibility */
.alert-primary {
    color: var(--primary-800, #003a89) !important;
}

.alert-success {
    color: #065f46 !important;
}

.alert-danger {
    color: #991b1b !important;
}

.alert-warning {
    color: #92400e !important;
}

.alert-info {
    color: #0c4a6e !important;
}

/* Stats cards and icon circles — these are small icon containers with
   intentionally vivid backgrounds; white icons are correct here */
.stats-icon.bg-primary,
.avatar-text.bg-primary,
.avatar-text.bg-success,
.avatar-text.bg-danger,
.avatar-text.bg-info,
.avatar-text.bg-warning,
.avatar-text.bg-dark {
    color: #ffffff !important;
}

/* Avatar icon circles bg-warning: use deeper amber so white icon is visible */
.avatar-text.bg-warning {
    background-color: #b45309 !important;
}

.avatar-text.bg-primary-soft,
.avatar-text.bg-soft-primary {
    color: var(--primary, #004aad) !important;
}

/* Table header with colored background */
.table thead.bg-primary th,
.table thead.bg-dark th,
.table thead.bg-success th {
    color: #ffffff !important;
}

/* Progress bar text */
.progress-bar {
    color: #ffffff !important;
}

/* Dropdown active item */
.dropdown-item.active,
.dropdown-item:active {
    color: #ffffff !important;
}

/* List group active item */
.list-group-item.active {
    color: #ffffff !important;
}

/* Tooltip */
.tooltip-inner {
    color: #ffffff !important;
}

/* Toast headers with background */
.toast-header.bg-primary,
.toast-header.bg-success,
.toast-header.bg-danger {
    color: #ffffff !important;
}

/* Icons in colored containers — dark backgrounds get white icons */
.bg-primary i,
.bg-success i,
.bg-danger i,
.bg-dark i,
.bg-info i {
    color: #ffffff !important;
}

/* Warning container icons need dark color for contrast */
.bg-warning i {
    color: #78350f !important;
}

/* Avatar/stat icon circles with bg-warning use deep amber+white icons */
.avatar-text.bg-warning i,
.avatar-text.bg-warning [class*="feather-"],
.stats-icon.bg-warning i,
.stats-icon.bg-warning [class*="feather-"] {
    color: #ffffff !important;
}

/* Ensure feather icons in colored backgrounds are visible */
.bg-primary [class*="feather-"],
.bg-success [class*="feather-"],
.bg-danger [class*="feather-"],
.bg-dark [class*="feather-"],
.bg-info [class*="feather-"] {
    color: #ffffff !important;
}

/* Warning feather icons — dark for general containers */
.bg-warning [class*="feather-"] {
    color: #78350f !important;
}

/* ============================================
   INSTRUCTOR DASHBOARD SPECIFIC STYLES
   ============================================ */

/* Welcome Banner / Alert with gradient background */
.alert[style*="background"] h1,
.alert[style*="background"] h2,
.alert[style*="background"] h3,
.alert[style*="background"] h4,
.alert[style*="background"] h5,
.alert[style*="background"] h6,
.alert[style*="background"] p,
.alert[style*="background"] span,
.alert[style*="background"] i,
.alert[style*="background"] [class*="feather-"] {
    color: #ffffff !important;
}

/* Stats Icon containers with gradient backgrounds */
.stats-icon.primary,
.stats-icon.success,
.stats-icon.warning,
.stats-icon.info,
.stats-icon.danger {
    color: #ffffff !important;
}

.stats-icon.primary i,
.stats-icon.success i,
.stats-icon.warning i,
.stats-icon.info i,
.stats-icon.danger i,
.stats-icon.primary [class*="feather-"],
.stats-icon.success [class*="feather-"],
.stats-icon.warning [class*="feather-"],
.stats-icon.info [class*="feather-"],
.stats-icon.danger [class*="feather-"] {
    color: #ffffff !important;
}

/* Quick Actions panel / colored cards */
.quick-actions-panel,
.stats-card-colored,
.hero-card,
.welcome-banner,
.dashboard-welcome {
    color: #ffffff !important;
}

.quick-actions-panel *,
.stats-card-colored *,
.hero-card *,
.welcome-banner *,
.dashboard-welcome * {
    color: inherit;
}

/* Cards with inline gradient styles.
   ---------------------------------------------------------------------------
   These rules assume an inline gradient means "a saturated brand banner", so
   they force white text on everything inside. CSS cannot read the colour stops,
   so a LIGHT gradient — rgba(...,0.04), #f8fafc→#f1f5f9, color-mix(... , #fff) —
   gets the same treatment and renders white-on-white. That is exactly how the
   student course-details progress ring lost its percentage.

   Opt out with data-gradient-text="auto" on the gradient element. The subtree
   then inherits normal colours and honours whatever the component's own
   stylesheet says. Use it on any tint that is not a brand banner. */
[style*="linear-gradient"]:not([data-gradient-text="auto"]),
[style*="gradient"]:not([data-gradient-text="auto"]) {
    color: #ffffff;
}

[style*="linear-gradient"]:not([data-gradient-text="auto"]) h1,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) h2,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) h3,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) h4,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) h5,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) h6,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) p,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) span,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) small,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) i,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) label,
[style*="linear-gradient"]:not([data-gradient-text="auto"]) [class*="feather-"] {
    color: #ffffff !important;
}

/* Dashboard stats icons with background */
.stats-card .stats-icon,
.stat-card .stat-icon,
.dashboard-stat-icon {
    color: #ffffff !important;
}

/* Avatar text with colored backgrounds (for icons) —
   Inline-styled avatars; class-based rules are defined above in the
   "Stats cards and icon circles" section (lines ~845-862) */
.avatar-text[style*="background"] {
    color: #ffffff !important;
}

.avatar-text[style*="background"] i,
.avatar-text[style*="background"] [class*="feather-"] {
    color: #ffffff !important;
}

/* Course stats cards */
.course-stats-card .icon-wrapper i,
.course-stats-card [class*="feather-"] {
    color: #ffffff !important;
}

/* Ensure all icons in gradient containers are white */
[style*="gradient-primary"] i,
[style*="gradient-hero"] i,
.bg-gradient i,
[class*="gradient"] i,
[style*="gradient-primary"] [class*="feather-"],
[style*="gradient-hero"] [class*="feather-"],
.bg-gradient [class*="feather-"],
[class*="gradient"] [class*="feather-"] {
    color: #ffffff !important;
}

/* Dashboard welcome section */
.dashboard-welcome-section,
.instructor-welcome,
.admin-welcome,
.student-welcome {
    color: #ffffff !important;
}

.dashboard-welcome-section i,
.instructor-welcome i,
.admin-welcome i,
.student-welcome i {
    color: #ffffff !important;
}

/* Override any theme classes that might set text to dark on DARK backgrounds.
   Note: amber/yellow hex values (#d97706, #f59e0b) are excluded here because 
   they need dark text for WCAG contrast — inline elements using these colors
   already set `color: white` explicitly when the gradient is dark enough.
   IMPORTANT: match the hex ONLY when it is the `background`/`background-color`
   value — never when it merely appears somewhere in the style attribute (e.g.
   as a foreground `color:` on a light background). The previous selector
   `[style*="background"][style*="#059669"]` wrongly matched
   `style="background:#d1fae5;color:#059669"` and forced the green text white,
   making it invisible. Gradient backgrounds are handled by the
   gradient-background rules above, so only solid values are listed here. */
[style*="background:#004aad"],[style*="background: #004aad"],[style*="background-color:#004aad"],[style*="background-color: #004aad"],
[style*="background:#003a89"],[style*="background: #003a89"],[style*="background-color:#003a89"],[style*="background-color: #003a89"],
[style*="background:#002d6b"],[style*="background: #002d6b"],[style*="background-color:#002d6b"],[style*="background-color: #002d6b"],
[style*="background:#059669"],[style*="background: #059669"],[style*="background-color:#059669"],[style*="background-color: #059669"],
[style*="background:#10b981"],[style*="background: #10b981"],[style*="background-color:#10b981"],[style*="background-color: #10b981"],
[style*="background:#0284c7"],[style*="background: #0284c7"],[style*="background-color:#0284c7"],[style*="background-color: #0284c7"],
[style*="background:#0ea5e9"],[style*="background: #0ea5e9"],[style*="background-color:#0ea5e9"],[style*="background-color: #0ea5e9"] {
    color: #ffffff !important;
}

/* Fix for inline color: white that gets overridden */
[style*="color: white"] h1,
[style*="color: white"] h2,
[style*="color: white"] h3,
[style*="color: white"] h4,
[style*="color: white"] h5,
[style*="color: white"] h6,
[style*="color: white"] p,
[style*="color: white"] span,
[style*="color: white"] i,
[style*="color: white"] [class*="feather-"] {
    color: #ffffff !important;
}