/* ==========================================================================
   LMS Crafter - Dashboard Skins (Refactored)
   Each skin sets CSS custom properties; components cascade automatically.
   Only explicit overrides for gradients, glassmorphism, and sidebar colors.
   ========================================================================== */

/*
 * Architecture:
 *   1. Each skin sets --lmsc-* variables on [data-skin="name"]
 *   2. Components in dashboard.css reference these variables
 *   3. Only sidebar gradients, action-card gradients, banner gradients,
 *      and glassmorphism need explicit per-skin selectors
 *   4. Dark variants override --lmsc-bg/surface/text/border + components
 *      that need opaque backgrounds
 */

/* ==========================================================================
   1. NETFLIX - White canvas, bold red accents
   ========================================================================== */
.lmsc-dash[data-skin="netflix"] {
    --lmsc-primary: #E50914;
    --lmsc-secondary: #f8f8f8;
    --lmsc-accent: #B81D24;
    --lmsc-primary-rgb: 229, 9, 20;
    --lmsc-secondary-rgb: 248, 248, 248;
    --lmsc-accent-rgb: 184, 29, 36;
    --lmsc-bg: #fdf2f2;
    --lmsc-surface: #ffffff;
    --lmsc-surface-alt: #faf5f5;
    --lmsc-text: #141414;
    --lmsc-text-muted: #6b6b6b;
    --lmsc-border: #e5e5e5;
    --lmsc-success: #2da44e;
    --lmsc-warning: #d4a017;
    --lmsc-danger: #e50914;
    --lmsc-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --lmsc-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
    --lmsc-chart-accent-rgb: 59, 130, 246;
    --lmsc-sidebar-text: #333;
    --lmsc-sidebar-text-muted: rgba(0, 0, 0, 0.4);
    --lmsc-sidebar-hover-bg: rgba(229, 9, 20, 0.06);
    --lmsc-sidebar-border: #e5e5e5;
    --lmsc-banner-bg: linear-gradient(135deg, #fff5f5 0%, #fde8e8 50%, #fff5f5 100%);
    --lmsc-action-primary-bg: linear-gradient(135deg, #E50914 0%, #B81D24 100%);
}

.lmsc-dash[data-skin="netflix"] .lmsc-dash__sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #faf5f5 100%);
    border-right: 1px solid #e5e5e5;
    color: #333;
    --lmsc-sidebar-text: #333;
    --lmsc-sidebar-text-muted: rgba(0, 0, 0, 0.4);
    --lmsc-sidebar-hover-bg: rgba(229, 9, 20, 0.06);
    --lmsc-sidebar-border: #e5e5e5;
}

/* Netflix - Dark variant */
.lmsc-dash[data-skin="netflix"].lmsc-dash--dark {
    --lmsc-bg: #141414;
    --lmsc-surface: #1F1F1F;
    --lmsc-surface-alt: #141414;
    --lmsc-text: #E5E5E5;
    --lmsc-text-muted: #B3B3B3;
    --lmsc-border: #333333;
    --lmsc-banner-bg: linear-gradient(135deg, #1F1F1F 0%, #2a1517 50%, #1F1F1F 100%);
}

.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-dash__sidebar {
    background: linear-gradient(180deg, #141414 0%, #1a0a0b 100%);
    border-right: 1px solid #333333;
}

.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-dash__sidebar-name,
.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-dash__sidebar-user h3 {
    color: #E5E5E5 !important;
}

.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-dash__sidebar-role {
    color: rgba(255, 255, 255, 0.4) !important;
}

.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-dash__nav-section-header {
    color: rgba(255, 255, 255, 0.3) !important;
}

.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-dash__logout-btn {
    color: rgba(255, 255, 255, 0.5) !important;
}

.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-dash__topnav {
    background: #141414;
    border-bottom: 1px solid #333333;
}

/* ==========================================================================
   2. SPOTIFY - White background, vibrant green accents
   ========================================================================== */
.lmsc-dash[data-skin="spotify"] {
    --lmsc-primary: #1DB954;
    --lmsc-secondary: #f5f5f5;
    --lmsc-accent: #1ed760;
    --lmsc-primary-rgb: 29, 185, 84;
    --lmsc-secondary-rgb: 245, 245, 245;
    --lmsc-accent-rgb: 30, 215, 96;
    --lmsc-bg: #f2faf5;
    --lmsc-surface: #ffffff;
    --lmsc-surface-alt: #e8f5ee;
    --lmsc-text: #191414;
    --lmsc-text-muted: #6b6b6b;
    --lmsc-border: #d4e8db;
    --lmsc-success: #1DB954;
    --lmsc-warning: #e8a317;
    --lmsc-danger: #e34040;
    --lmsc-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    --lmsc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --lmsc-sidebar-text: #333;
    --lmsc-sidebar-text-muted: rgba(0, 0, 0, 0.4);
    --lmsc-sidebar-hover-bg: rgba(29, 185, 84, 0.08);
    --lmsc-sidebar-border: #d4e8db;
    --lmsc-banner-bg: linear-gradient(135deg, #e8f5ee 0%, #d4f0df 50%, #e8f5ee 100%);
    --lmsc-chart-accent-rgb: 29, 185, 84;
    --lmsc-action-primary-bg: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
}

.lmsc-dash[data-skin="spotify"] .lmsc-dash__sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f2faf5 100%);
    border-right: 1px solid #d4e8db;
    color: #333;
    --lmsc-sidebar-text: #333;
    --lmsc-sidebar-text-muted: rgba(0, 0, 0, 0.4);
    --lmsc-sidebar-hover-bg: rgba(29, 185, 84, 0.08);
    --lmsc-sidebar-border: #d4e8db;
}

.lmsc-dash[data-skin="spotify"] .lmsc-dash__action-card--primary .lmsc-dash__action-text strong,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__action-card--primary .lmsc-dash__action-text span {
    color: #000;
}

/* Spotify - Dark variant */
.lmsc-dash[data-skin="spotify"].lmsc-dash--dark {
    --lmsc-bg: #121212;
    --lmsc-surface: #1A1A1A;
    --lmsc-surface-alt: #121212;
    --lmsc-text: #E8F5E9;
    --lmsc-text-muted: #81C784;
    --lmsc-border: #2E2E2E;
    --lmsc-banner-bg: linear-gradient(135deg, #1A1A1A 0%, #1a2e1f 50%, #1A1A1A 100%);
}

.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-dash__sidebar {
    background: linear-gradient(180deg, #121212 0%, #0d1f13 100%);
    border-right: 1px solid #2E2E2E;
}

.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-dash__sidebar-name,
.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-dash__sidebar-user h3 {
    color: #E8F5E9 !important;
}

.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-dash__sidebar-role {
    color: rgba(255, 255, 255, 0.4) !important;
}

.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-dash__nav-section-header {
    color: rgba(255, 255, 255, 0.3) !important;
}

.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-dash__logout-btn {
    color: rgba(255, 255, 255, 0.5) !important;
}

.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-dash__topnav {
    background: #121212;
    border-bottom: 1px solid #2E2E2E;
}

/* ==========================================================================
   3. APPLE GLASS - Frosted glassmorphism
   ========================================================================== */
.lmsc-dash[data-skin="apple-glass"] {
    --lmsc-primary: #007AFF;
    --lmsc-secondary: #1C1C1E;
    --lmsc-accent: #5856D6;
    --lmsc-primary-rgb: 0, 122, 255;
    --lmsc-secondary-rgb: 28, 28, 30;
    --lmsc-accent-rgb: 88, 86, 214;
    --lmsc-bg: #F2F2F7;
    --lmsc-surface: rgba(255, 255, 255, 0.72);
    --lmsc-surface-alt: rgba(255, 255, 255, 0.6);
    --lmsc-text: #1C1C1E;
    --lmsc-text-muted: #8E8E93;
    --lmsc-border: rgba(60, 60, 67, 0.12);
    --lmsc-success: #34C759;
    --lmsc-warning: #FF9F0A;
    --lmsc-danger: #FF3B30;
    --lmsc-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --lmsc-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
    --lmsc-banner-bg: rgba(255, 255, 255, 0.6);
    --lmsc-chart-accent-rgb: 0, 122, 255;
    --lmsc-sidebar-text: #fff;
    --lmsc-sidebar-text-muted: rgba(255, 255, 255, 0.5);
    --lmsc-sidebar-hover-bg: rgba(0, 122, 255, 0.15);
    --lmsc-sidebar-border: rgba(255, 255, 255, 0.1);
    --lmsc-action-primary-bg: linear-gradient(135deg, rgba(0, 122, 255, 0.85) 0%, rgba(88, 86, 214, 0.85) 100%);
}

/* Apple Glass needs explicit backdrop-filter - cannot be done via CSS variables */
.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__sidebar {
    background: rgba(28, 28, 30, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__stat-card,
.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__action-card,
.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__course-card,
.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__widget,
.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__greeting-banner,
.lmsc-dash[data-skin="apple-glass"] .lmsc-chart-card {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__topnav {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__topnav-item--active,
.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__nav-item--active {
    background: rgba(0, 122, 255, 0.15) !important;
    color: #007AFF !important;
    box-shadow: none;
}

/* Apple Glass - Dark variant */
.lmsc-dash[data-skin="apple-glass"].lmsc-dash--dark {
    --lmsc-bg: #000000;
    --lmsc-surface: rgba(28, 28, 30, 0.72);
    --lmsc-surface-alt: rgba(28, 28, 30, 0.6);
    --lmsc-text: #FFFFFF;
    --lmsc-text-muted: #98989D;
    --lmsc-border: rgba(84, 84, 88, 0.36);
    --lmsc-banner-bg: rgba(28, 28, 30, 0.6);
}

.lmsc-dash[data-skin="apple-glass"].lmsc-dash--dark .lmsc-dash__stat-card,
.lmsc-dash[data-skin="apple-glass"].lmsc-dash--dark .lmsc-dash__action-card,
.lmsc-dash[data-skin="apple-glass"].lmsc-dash--dark .lmsc-dash__course-card,
.lmsc-dash[data-skin="apple-glass"].lmsc-dash--dark .lmsc-dash__widget,
.lmsc-dash[data-skin="apple-glass"].lmsc-dash--dark .lmsc-chart-card {
    border: 1px solid rgba(84, 84, 88, 0.36);
}

.lmsc-dash[data-skin="apple-glass"].lmsc-dash--dark .lmsc-dash__topnav {
    border-color: rgba(84, 84, 88, 0.36);
}

/* ==========================================================================
   4. OCEAN BREEZE - Cool blue
   ========================================================================== */
.lmsc-dash[data-skin="ocean"] {
    --lmsc-primary: #0284C7; /* darkened from #0EA5E9 so white-on-primary >= 3:1 (WCAG) */
    --lmsc-secondary: #0F172A;
    --lmsc-accent: #6366F1;
    --lmsc-primary-rgb: 2, 132, 199;
    --lmsc-secondary-rgb: 15, 23, 42;
    --lmsc-accent-rgb: 99, 102, 241;
    --lmsc-bg: #F0F9FF;
    --lmsc-surface: #FFFFFF;
    --lmsc-surface-alt: #E0F2FE;
    --lmsc-text: #0C4A6E;
    --lmsc-text-muted: #64748B;
    --lmsc-border: #BAE6FD;
    --lmsc-success: #22D3EE;
    --lmsc-warning: #FBBF24;
    --lmsc-danger: #F43F5E;
    --lmsc-shadow: 0 1px 3px rgba(14, 165, 233, 0.06), 0 1px 2px rgba(14, 165, 233, 0.04);
    --lmsc-shadow-lg: 0 10px 30px rgba(14, 165, 233, 0.1);
    --lmsc-banner-bg: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 50%, #EDE9FE 100%);
    --lmsc-chart-accent-rgb: 14, 165, 233;
    --lmsc-sidebar-text: #fff;
    --lmsc-sidebar-text-muted: rgba(255, 255, 255, 0.5);
    --lmsc-sidebar-hover-bg: rgba(14, 165, 233, 0.15);
    --lmsc-sidebar-border: rgba(255, 255, 255, 0.1);
    --lmsc-action-primary-bg: linear-gradient(135deg, #0EA5E9 0%, #6366F1 100%);
}

.lmsc-dash[data-skin="ocean"] .lmsc-dash__sidebar {
    background: linear-gradient(180deg, #0F172A 0%, #1E3A5F 50%, #0C4A6E 100%);
}

/* Ocean - Dark variant */
.lmsc-dash[data-skin="ocean"].lmsc-dash--dark {
    --lmsc-bg: #0B1120;
    --lmsc-surface: #132237;
    --lmsc-surface-alt: #0B1120;
    --lmsc-text: #E0F2FE;
    --lmsc-text-muted: #7DD3FC;
    --lmsc-border: #1E3A5F;
    --lmsc-banner-bg: linear-gradient(135deg, #132237 0%, #1a2d4a 50%, #132237 100%);
}

.lmsc-dash[data-skin="ocean"].lmsc-dash--dark .lmsc-dash__topnav {
    background: #0B1120;
    border-bottom: 1px solid #1E3A5F;
}

.lmsc-dash[data-skin="ocean"].lmsc-dash--dark .lmsc-dash__sidebar {
    border-right: 1px solid #1E3A5F;
}

/* ==========================================================================
   5. SUNSET GRADIENT - Warm orange to purple
   ========================================================================== */
.lmsc-dash[data-skin="sunset"] {
    --lmsc-primary: #EA580C; /* darkened from #F97316 so white-on-primary >= 3:1 (WCAG) */
    --lmsc-secondary: #7C3AED;
    --lmsc-accent: #EC4899;
    --lmsc-primary-rgb: 234, 88, 12;
    --lmsc-secondary-rgb: 124, 58, 237;
    --lmsc-accent-rgb: 236, 72, 153;
    --lmsc-bg: #FFF9F2;
    --lmsc-surface: #FFFFFF;
    --lmsc-surface-alt: #FFF7ED;
    --lmsc-text: #1C1917;
    --lmsc-text-muted: #78716C;
    --lmsc-border: #FED7AA;
    --lmsc-success: #22C55E;
    --lmsc-warning: #F59E0B;
    --lmsc-danger: #EF4444;
    --lmsc-shadow: 0 1px 3px rgba(249, 115, 22, 0.06), 0 1px 2px rgba(124, 58, 237, 0.04);
    --lmsc-shadow-lg: 0 10px 30px rgba(249, 115, 22, 0.1), 0 4px 10px rgba(124, 58, 237, 0.06);
    --lmsc-chart-accent-rgb: 99, 102, 241;
    --lmsc-banner-bg: linear-gradient(135deg, #FFF7ED 0%, #FDF2F8 50%, #F5F3FF 100%);
    --lmsc-action-primary-bg: linear-gradient(135deg, #F97316 0%, #EC4899 50%, #7C3AED 100%);
    --lmsc-sidebar-text: #fff;
    --lmsc-sidebar-text-muted: rgba(255, 255, 255, 0.5);
    --lmsc-sidebar-hover-bg: rgba(249, 115, 22, 0.15);
    --lmsc-sidebar-border: rgba(255, 255, 255, 0.1);
}

.lmsc-dash[data-skin="sunset"] .lmsc-dash__sidebar {
    background: linear-gradient(180deg, #7C3AED 0%, #9333EA 40%, #C026D3 80%, #F97316 100%);
}

.lmsc-dash[data-skin="sunset"] .lmsc-dash__nav-item--active {
    background: linear-gradient(135deg, #F97316, #EC4899) !important;
}

.lmsc-dash[data-skin="sunset"] .lmsc-dash__topnav-item--active {
    background: linear-gradient(135deg, #F97316, #EC4899);
}

/* Sunset - Dark variant */
.lmsc-dash[data-skin="sunset"].lmsc-dash--dark {
    --lmsc-bg: #1C1017;
    --lmsc-surface: #2A1A23;
    --lmsc-surface-alt: #1C1017;
    --lmsc-text: #FED7AA;
    --lmsc-text-muted: #D6BCFA;
    --lmsc-border: #44243A;
    --lmsc-banner-bg: linear-gradient(135deg, #2A1A23 0%, #3a1f30 50%, #2A1A23 100%);
}

.lmsc-dash[data-skin="sunset"].lmsc-dash--dark .lmsc-dash__topnav {
    background: #1C1017;
    border-bottom: 1px solid #44243A;
}

.lmsc-dash[data-skin="sunset"].lmsc-dash--dark .lmsc-dash__sidebar {
    border-right: 1px solid #44243A;
}

/* ==========================================================================
   6. MIDNIGHT BLUE - Dark enterprise
   ========================================================================== */
.lmsc-dash[data-skin="midnight"] {
    --lmsc-primary: #3B82F6;
    --lmsc-secondary: #0F172A;
    --lmsc-accent: #A78BFA;
    --lmsc-primary-rgb: 59, 130, 246;
    --lmsc-secondary-rgb: 15, 23, 42;
    --lmsc-accent-rgb: 167, 139, 250;
    --lmsc-bg: #020617;
    --lmsc-surface: #0F172A;
    --lmsc-surface-alt: #020617;
    --lmsc-text: #E2E8F0;
    --lmsc-text-muted: #94A3B8;
    --lmsc-border: #1E293B;
    --lmsc-success: #4ADE80;
    --lmsc-warning: #FACC15;
    --lmsc-danger: #FB7185;
    --lmsc-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --lmsc-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --lmsc-banner-bg: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #172554 100%);
    --lmsc-chart-accent-rgb: 59, 130, 246;
    --lmsc-sidebar-text: #E2E8F0;
    --lmsc-sidebar-text-muted: rgba(148, 163, 184, 0.7);
    --lmsc-sidebar-hover-bg: rgba(59, 130, 246, 0.12);
    --lmsc-sidebar-border: #1E293B;
    --lmsc-action-primary-bg: linear-gradient(135deg, #3B82F6 0%, #A78BFA 100%);
}

.lmsc-dash[data-skin="midnight"] .lmsc-dash__sidebar {
    background: linear-gradient(180deg, #0F172A 0%, #020617 100%);
    border-right: 1px solid #1E293B;
}

.lmsc-dash[data-skin="midnight"] .lmsc-dash__topnav {
    background: #0F172A;
    border-bottom: 1px solid #1E293B;
}

.lmsc-dash[data-skin="midnight"] .lmsc-dash__topnav-item {
    color: #94A3B8;
}

.lmsc-dash[data-skin="midnight"] .lmsc-dash__topnav-item:hover {
    color: #E2E8F0;
    background: rgba(59, 130, 246, 0.08);
}

.lmsc-dash[data-skin="midnight"] .lmsc-dash__topnav-item--active {
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.15);
}

/* ==========================================================================
   UNIVERSAL COMPONENT BINDINGS
   These rules wire components to the new CSS variables so ALL skins
   work automatically without per-skin overrides.
   ========================================================================== */

/* -- Greeting banner uses --lmsc-banner-bg -- */
.lmsc-dash[data-skin] .lmsc-dash__greeting-banner {
    background: var(--lmsc-banner-bg, var(--lmsc-surface));
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-dash__greeting-banner h2 {
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-dash__greeting-banner p {
    color: var(--lmsc-text-muted);
}

/* -- Action card primary uses --lmsc-action-primary-bg -- */
.lmsc-dash[data-skin] .lmsc-dash__action-card--primary {
    background: var(--lmsc-action-primary-bg, var(--lmsc-primary));
}

/* -- Components that should reference --lmsc-surface -- */
.lmsc-dash[data-skin] .lmsc-dash__stat-card,
.lmsc-dash[data-skin] .lmsc-dash__course-card,
.lmsc-dash[data-skin] .lmsc-dash__widget,
.lmsc-dash[data-skin] .lmsc-dash__action-card {
    background: var(--lmsc-surface);
    border-color: var(--lmsc-border);
}

.lmsc-dash[data-skin] .lmsc-dash__stat-card:hover {
    border-color: var(--lmsc-primary);
    box-shadow: 0 0 20px rgba(var(--lmsc-primary-rgb), 0.1);
}

.lmsc-dash[data-skin] .lmsc-dash__course-card:hover {
    box-shadow: 0 4px 16px rgba(var(--lmsc-primary-rgb), 0.06);
}

/* -- Inputs, textareas, selects -- */
.lmsc-dash[data-skin] .lmsc-dash__input,
.lmsc-dash[data-skin] .lmsc-dash__textarea,
.lmsc-dash[data-skin] .lmsc-dash__sort-select {
    background: var(--lmsc-surface);
    color: var(--lmsc-text);
    border-color: var(--lmsc-border);
}

/* -- Quiz / data tables -- */
.lmsc-dash[data-skin] .lmsc-dash__quiz-table th {
    background: var(--lmsc-surface-alt, var(--lmsc-bg));
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-dash__quiz-table td {
    border-color: var(--lmsc-border);
    color: var(--lmsc-text);
}

/* -- Mini stats -- */
.lmsc-dash[data-skin] .lmsc-dash__mini-stat {
    background: var(--lmsc-surface-alt, var(--lmsc-bg));
    border-color: var(--lmsc-border);
}

/* -- Pills/filters -- */
.lmsc-dash[data-skin] .lmsc-dash__pill {
    border-color: var(--lmsc-border);
    color: var(--lmsc-text-muted);
    background: transparent;
}

.lmsc-dash[data-skin] .lmsc-dash__pill--active {
    background: var(--lmsc-primary);
    border-color: var(--lmsc-primary);
    color: #fff;
}

/* -- Section headers -- */
.lmsc-dash[data-skin] .lmsc-dash__section-header h2,
.lmsc-dash[data-skin] .lmsc-dash__section-header h3 {
    color: var(--lmsc-text);
}

/* -- Top nav -- */
.lmsc-dash[data-skin] .lmsc-dash__topnav {
    background: var(--lmsc-surface);
    border-color: var(--lmsc-border);
}

/* -- Nav items -- */

/* -- Smooth transitions for all nav items -- */
.lmsc-dash[data-skin] .lmsc-dash__nav-item {
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.lmsc-dash[data-skin] .lmsc-dash__topnav-item {
    transition: background 0.2s ease, color 0.2s ease;
}

.lmsc-dash[data-skin] .lmsc-dash__nav-item:hover {
    background: var(--lmsc-sidebar-hover-bg, rgba(var(--lmsc-primary-rgb), 0.08));
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-dash__nav-section-header:hover {
    background: var(--lmsc-sidebar-hover-bg, rgba(var(--lmsc-primary-rgb), 0.08)) !important;
    color: var(--lmsc-primary) !important;
}

/* -- Sidebar footer elements (light sidebars) -- */
.lmsc-dash[data-skin] .lmsc-dash__sidebar-footer,
.lmsc-dash[data-skin] .lmsc-dash__layout-label,
.lmsc-dash[data-skin] .lmsc-dash__logout-btn {
    color: var(--lmsc-sidebar-text, inherit);
}

/* -- Reports text -- */
.lmsc-dash[data-skin] .lmsc-report-stat-cards .lmsc-report-stat__value,
.lmsc-dash[data-skin] .lmsc-report-stat-cards .lmsc-report-stat__label,
.lmsc-dash[data-skin] .lmsc-report-section h3,
.lmsc-dash[data-skin] .lmsc-reports-stat-card__value,
.lmsc-dash[data-skin] .lmsc-reports-stat-card__label {
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-report-table th {
    background: var(--lmsc-surface-alt, var(--lmsc-bg));
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-report-table td {
    color: var(--lmsc-text);
    border-color: var(--lmsc-border);
}

.lmsc-dash[data-skin] .lmsc-heatmap-label {
    color: var(--lmsc-text-muted);
}

/* -- Chart cards -- */
.lmsc-dash[data-skin] .lmsc-chart-card {
    background: var(--lmsc-surface);
    color: var(--lmsc-text);
    border-color: var(--lmsc-border);
}

.lmsc-dash[data-skin] .lmsc-chart-card__title,
.lmsc-dash[data-skin] .lmsc-reports-header h2 {
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-reports-header .lmsc-text-muted {
    color: var(--lmsc-text-muted);
}

/* -- Dark skin buttons -- */
.lmsc-dash[data-skin="midnight"] .lmsc-dash-btn--secondary {
    color: #E2E8F0;
    border-color: #1E293B;
}

.lmsc-dash[data-skin="midnight"] .lmsc-dash-btn--secondary:hover {
    border-color: #3B82F6;
    color: #3B82F6;
}

/* ==========================================================================
   INSTRUCTOR BUILDER - Universal Skin Bindings
   Ensures the course builder inherits skin colors for all skins.
   ========================================================================== */

/* -- Editor container & form -- */
.lmsc-dash[data-skin] .lmsc-instructor__editor {
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-instructor__form {
    background: var(--lmsc-surface, #fff);
    border-color: var(--lmsc-border);
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-instructor__field label {
    color: var(--lmsc-text);
}

/* -- Curriculum container -- */
.lmsc-dash[data-skin] .lmsc-instructor__curriculum {
    background: var(--lmsc-surface, #fff);
    border-color: var(--lmsc-border);
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-instructor__curriculum-header h4 {
    color: var(--lmsc-text);
}

/* -- Lesson items - CRITICAL: lesson title contrast fix -- */
.lmsc-dash[data-skin] .lmsc-instructor__lesson {
    border-color: var(--lmsc-border);
    background: var(--lmsc-surface, #fff);
}

.lmsc-dash[data-skin] .lmsc-instructor__lesson-header {
    background: var(--lmsc-surface-alt, var(--lmsc-bg, #f9fafb));
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-instructor__lesson-title {
    color: var(--lmsc-text) !important;
}

.lmsc-dash[data-skin] .lmsc-instructor__lesson-count {
    color: var(--lmsc-text-muted);
}

.lmsc-dash[data-skin] .lmsc-instructor__lesson-num {
    background: var(--lmsc-primary);
    color: #fff;
}

.lmsc-dash[data-skin] .lmsc-instructor__lesson-body {
    border-color: var(--lmsc-border);
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-instructor__lesson-toggle,
.lmsc-dash[data-skin] .lmsc-instructor__lesson-delete,
.lmsc-dash[data-skin] .lmsc-instructor__lesson-drag,
.lmsc-dash[data-skin] .lmsc-instructor__lesson-edit {
    color: var(--lmsc-text-muted);
}

/* -- Topic items -- */
.lmsc-dash[data-skin] .lmsc-instructor__topic-title {
    color: var(--lmsc-text) !important;
}

.lmsc-dash[data-skin] .lmsc-instructor__topic-icon {
    color: var(--lmsc-text-muted);
}

.lmsc-dash[data-skin] .lmsc-instructor__topic:hover {
    background: var(--lmsc-surface-alt, rgba(0, 0, 0, .03));
}

.lmsc-dash[data-skin] .lmsc-instructor__topic-delete,
.lmsc-dash[data-skin] .lmsc-instructor__topic-edit {
    color: var(--lmsc-text-muted);
}

/* -- Quiz section -- */
.lmsc-dash[data-skin] .lmsc-instructor__quizzes {
    background: var(--lmsc-surface, #fff);
    border-color: var(--lmsc-border);
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-instructor__quiz-item {
    color: var(--lmsc-text) !important;
    border-color: var(--lmsc-border);
}

.lmsc-dash[data-skin] .lmsc-instructor__quiz-item span {
    color: var(--lmsc-text) !important;
}

/* -- Enrolled students section -- */
.lmsc-dash[data-skin] .lmsc-instructor__students {
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-instructor__student-name {
    color: var(--lmsc-text) !important;
}

/* -- Inline forms (add topic/lesson) -- */
.lmsc-dash[data-skin] .lmsc-instructor__inline-form,
.lmsc-dash[data-skin] .lmsc-instructor__topic-inline-form {
    background: var(--lmsc-surface-alt, var(--lmsc-bg, #f9fafb));
    border-color: var(--lmsc-border);
    color: var(--lmsc-text);
}

/* -- Shortcuts bar -- */
.lmsc-dash[data-skin] .lmsc-instructor__shortcuts-bar {
    color: var(--lmsc-text-muted);
}

.lmsc-dash[data-skin] .lmsc-instructor__shortcuts-bar kbd {
    color: var(--lmsc-text);
    border-color: var(--lmsc-border);
    background: var(--lmsc-surface-alt, var(--lmsc-bg));
}

/* -- Editor top bar -- */
.lmsc-dash[data-skin] .lmsc-instructor__back {
    color: var(--lmsc-text);
}

/* -- Category items -- */
.lmsc-dash[data-skin] .lmsc-instructor__cat-item {
    background: var(--lmsc-surface-alt, #f3f4f6);
    color: var(--lmsc-text);
    border-color: var(--lmsc-border);
}

/* -- Featured image area -- */
.lmsc-dash[data-skin] .lmsc-instructor__thumb-preview {
    border-color: var(--lmsc-border);
}

.lmsc-dash[data-skin] .lmsc-instructor__thumb-placeholder {
    color: var(--lmsc-text-muted);
}

/* -- Field hints and char counter -- */
.lmsc-dash[data-skin] .lmsc-instructor__field-hint,
.lmsc-dash[data-skin] .lmsc-instructor__char-count {
    color: var(--lmsc-text-muted);
}

/* -- Course cards in instructor list -- */
.lmsc-dash[data-skin] .lmsc-instructor__course-card {
    background: var(--lmsc-surface, #fff);
    border-color: var(--lmsc-border);
}

.lmsc-dash[data-skin] .lmsc-instructor__course-info h4 {
    color: var(--lmsc-text);
}

.lmsc-dash[data-skin] .lmsc-instructor__course-meta {
    color: var(--lmsc-text-muted);
}

.lmsc-dash[data-skin] .lmsc-instructor__course-thumb {
    background: var(--lmsc-surface-alt, #f3f4f6);
}

/* -- Inputs inside instructor forms -- */
.lmsc-dash[data-skin] .lmsc-instructor__form .lmsc-dash-input,
.lmsc-dash[data-skin] .lmsc-instructor__form .lmsc-dash-select,
.lmsc-dash[data-skin] .lmsc-instructor__form textarea,
.lmsc-dash[data-skin] .lmsc-instructor__inline-form .lmsc-dash-input,
.lmsc-dash[data-skin] .lmsc-instructor__topic-inline-form .lmsc-dash-input {
    background: var(--lmsc-surface, #fff);
    color: var(--lmsc-text);
    border-color: var(--lmsc-border);
}

/* -- Status bar -- */
.lmsc-dash[data-skin] .lmsc-instructor__status {
    color: var(--lmsc-text);
}

/* -- Empty state text -- */
.lmsc-dash[data-skin] .lmsc-instructor__curriculum-empty {
    color: var(--lmsc-text-muted);
}

/* -- Price input -- */
.lmsc-dash[data-skin] .lmsc-instructor__price-currency {
    background: var(--lmsc-surface-alt, #f3f4f6);
    border-color: var(--lmsc-border);
    color: var(--lmsc-text-muted);
}

/* ==========================================================================
   UNIVERSAL POLISH - Rounded main container + sidebar accent for light skins
   ========================================================================== */

/* Rounded main content area for sidebar layout - matches Apple's premium feel */
.lmsc-dash--sidebar.lmsc-dash[data-skin] .lmsc-dash__main {
    border-radius: 20px 0 0 20px;
    margin-left: -2px;
    position: relative;
    z-index: 1;
}

/* Sidebar active accent bar for light-background sidebars */
.lmsc-dash[data-skin="netflix"] .lmsc-dash--sidebar .lmsc-dash__nav-item--active::before,
.lmsc-dash[data-skin="spotify"] .lmsc-dash--sidebar .lmsc-dash__nav-item--active::before,
.lmsc-dash--sidebar[data-skin="netflix"] .lmsc-dash__nav-item--active::before,
.lmsc-dash--sidebar[data-skin="spotify"] .lmsc-dash__nav-item--active::before {
    background: var(--lmsc-primary);
}

/* Nav section header text fix for light sidebars */
.lmsc-dash[data-skin="netflix"] .lmsc-dash__nav-section-header,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__nav-section-header {
    color: rgba(0, 0, 0, 0.35) !important;
}

/* Sidebar name + role fix for light sidebars */
.lmsc-dash[data-skin="netflix"] .lmsc-dash__sidebar-name,
.lmsc-dash[data-skin="netflix"] .lmsc-dash__sidebar-user h3,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__sidebar-name,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__sidebar-user h3 {
    color: #222 !important;
}

.lmsc-dash[data-skin="netflix"] .lmsc-dash__sidebar-role,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__sidebar-role {
    color: rgba(0, 0, 0, 0.4) !important;
}

/* Sidebar logout btn text for light sidebars */
.lmsc-dash[data-skin="netflix"] .lmsc-dash__logout-btn,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__logout-btn {
    color: #666 !important;
}

.lmsc-dash[data-skin="netflix"] .lmsc-dash__logout-btn:hover,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__logout-btn:hover {
    color: var(--lmsc-danger) !important;
}

/* Sidebar header separator for light sidebars */
.lmsc-dash[data-skin="netflix"] .lmsc-dash--sidebar .lmsc-dash__sidebar-header::after,
.lmsc-dash--sidebar[data-skin="netflix"] .lmsc-dash__sidebar-header::after,
.lmsc-dash[data-skin="spotify"] .lmsc-dash--sidebar .lmsc-dash__sidebar-header::after,
.lmsc-dash--sidebar[data-skin="spotify"] .lmsc-dash__sidebar-header::after {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

/* Nav badge (sidebar count badge) for light sidebars */
.lmsc-dash[data-skin="netflix"] .lmsc-dash__sidebar-nav .lmsc-dash__nav-badge,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__sidebar-nav .lmsc-dash__nav-badge {
    background: var(--lmsc-primary);
    color: #fff;
}


/* ==========================================================================
   Skin Switcher Widget
   ========================================================================== */
.lmsc-dash__skin-switcher {
    position: relative;
}

.lmsc-dash__skin-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--lmsc-border);
    border-radius: 50%;
    background: var(--lmsc-surface);
    color: var(--lmsc-text-muted);
    cursor: pointer;
    width: 40px;
    height: 40px;
    font-family: inherit;
    transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}

.lmsc-dash__skin-toggle:hover {
    background: rgba(var(--lmsc-primary-rgb), 0.08);
    border-color: var(--lmsc-primary);
    color: var(--lmsc-primary);
    transform: scale(1.05);
}

.lmsc-dash__skin-toggle:active,
.lmsc-dash__skin-toggle:focus {
    background: rgba(var(--lmsc-primary-rgb), 0.12);
    border-color: var(--lmsc-primary);
    color: var(--lmsc-primary);
    outline: none;
    transform: scale(1);
}

.lmsc-dash__skin-toggle:hover svg,
.lmsc-dash__skin-toggle:active svg,
.lmsc-dash__skin-toggle:focus svg {
    color: var(--lmsc-primary);
}

.lmsc-dash__skin-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--lmsc-text-muted);
}

.lmsc-dash__skin-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    min-width: 220px;
    background: var(--lmsc-surface);
    border: 1px solid var(--lmsc-border);
    border-radius: var(--lmsc-radius);
    box-shadow: var(--lmsc-shadow-lg);
    padding: 8px;
    animation: lmscFadeDown 0.2s ease;
}

.lmsc-dash__skin-dropdown.lmsc-dash__skin-dropdown--open {
    display: block;
}

.lmsc-dash__skin-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--lmsc-radius-sm);
    cursor: pointer;
    transition: var(--lmsc-transition);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    color: var(--lmsc-text);
}

.lmsc-dash__skin-option:hover {
    background: rgba(var(--lmsc-primary-rgb), 0.08);
    color: var(--lmsc-text); /* keep text on the panel's own text token (light/dark safe) */
}

.lmsc-dash__skin-option--active {
    background: rgba(var(--lmsc-primary-rgb), 0.1);
    color: var(--lmsc-text);
    font-weight: 600;
}

.lmsc-dash__skin-swatch {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.lmsc-dash__skin-swatch span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
}

.lmsc-dash__skin-name {
    flex: 1;
}

.lmsc-dash__skin-check {
    width: 16px;
    height: 16px;
    color: var(--lmsc-primary);
    opacity: 0;
}

.lmsc-dash__skin-option--active .lmsc-dash__skin-check {
    opacity: 1;
}

/* ==========================================================================
   UX/UI AUDIT FIXES - Skin-Specific (Bugs #21, #61-63, #68-70)
   ========================================================================== */

/* #21: Apple Glass - sidebar role text readability */
.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__sidebar-role {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

/* #61: Netflix Dark - stat cards too bright */
.lmsc-dash[data-skin="netflix-dark"] .lmsc-dash__stat-card,
.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-dash__stat-card {
    background: var(--lmsc-surface, #1e1e1e) !important;
}

/* #62: Spotify Dark - toolbar icon hover themed */
.lmsc-dash[data-skin="spotify-dark"] .lmsc-dash__toolbar-btn:hover svg,
.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-dash__toolbar-btn:hover svg {
    color: var(--lmsc-primary, #1DB954) !important;
}

/* #63: Midnight - active pill contrast */
.lmsc-dash[data-skin="midnight"] .lmsc-dash__nav-item--active,
.lmsc-dash[data-skin="midnight-blue"] .lmsc-dash__nav-item--active {
    border: 1px solid var(--lmsc-primary, #3b82f6);
}

/* #68: Netflix topnav search placeholder contrast */
.lmsc-dash[data-skin="netflix-dark"] .lmsc-dash__search-input::placeholder,
.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-dash__search-input::placeholder {
    color: var(--lmsc-text-muted, #6b6b6b) !important;
}

/* #69: Spotify topnav active underline */
.lmsc-dash[data-skin="spotify-dark"] .lmsc-dash__topnav-item--active::after,
.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-dash__topnav-item--active::after {
    height: 3px !important;
    background: var(--lmsc-primary, #1DB954) !important;
}

/* #70: Midnight topnav glow overflow */
.lmsc-dash[data-skin="midnight"] .lmsc-dash__topnav,
.lmsc-dash[data-skin="midnight-blue"] .lmsc-dash__topnav {
    overflow: hidden;
}

/* ==========================================================================
   SIDEBAR LAYOUT - Skin-Specific Fixes
   ========================================================================== */

/* Fix: Sidebar gradient color bleeding at edges.
   Container has border-radius:10px clipping the sidebar bottom corner.
   Main content has border-radius + margin-left overlap. */
.lmsc-dash--sidebar {
    border-radius: 0 !important;
}

.lmsc-dash--sidebar .lmsc-dash__sidebar {
    overflow: hidden;
}

.lmsc-dash--sidebar .lmsc-dash__main,
.lmsc-dash--sidebar[data-skin] .lmsc-dash__main,
.lmsc-dash--sidebar.lmsc-dash[data-skin] .lmsc-dash__main {
    margin-left: 0 !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--lmsc-border, #e2e8f0);
}

/* Fix: Netflix - active sidebar nav item hover text invisible.
   Use a soft red tint instead of solid red for the active state. */
.lmsc-dash[data-skin="netflix"] .lmsc-dash__nav-item--active {
    background: rgba(229, 9, 20, 0.12) !important;
    color: #E50914 !important;
}
.lmsc-dash[data-skin="netflix"] .lmsc-dash__nav-item--active:hover {
    background: rgba(229, 9, 20, 0.18) !important;
    color: #E50914 !important;
}
.lmsc-dash[data-skin="netflix"] .lmsc-dash__nav-item--active .lmsc-dash__nav-label,
.lmsc-dash[data-skin="netflix"] .lmsc-dash__nav-item--active .lmsc-dash__nav-icon {
    color: #E50914 !important;
}
.lmsc-dash[data-skin="netflix"] .lmsc-dash__nav-item--active:hover .lmsc-dash__nav-label,
.lmsc-dash[data-skin="netflix"] .lmsc-dash__nav-item--active:hover .lmsc-dash__nav-icon {
    color: #E50914 !important;
}

/* Fix: Spotify - same soft tint approach for active nav */
.lmsc-dash[data-skin="spotify"] .lmsc-dash__nav-item--active {
    background: rgba(29, 185, 84, 0.12) !important;
    color: #1DB954 !important;
}
.lmsc-dash[data-skin="spotify"] .lmsc-dash__nav-item--active:hover {
    background: rgba(29, 185, 84, 0.18) !important;
    color: #1DB954 !important;
}
.lmsc-dash[data-skin="spotify"] .lmsc-dash__nav-item--active .lmsc-dash__nav-label,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__nav-item--active .lmsc-dash__nav-icon {
    color: #1DB954 !important;
}
.lmsc-dash[data-skin="spotify"] .lmsc-dash__nav-item--active:hover .lmsc-dash__nav-label,
.lmsc-dash[data-skin="spotify"] .lmsc-dash__nav-item--active:hover .lmsc-dash__nav-icon {
    color: #1DB954 !important;
}

/* Fix: All skins - sidebar active nav items keep soft tint on hover */
.lmsc-dash[data-skin].lmsc-dash--sidebar .lmsc-dash__nav-item--active:hover,
.lmsc-dash[data-skin="sunset"] .lmsc-dash__nav-item--active:hover,
.lmsc-dash[data-skin="ocean"] .lmsc-dash__nav-item--active:hover,
.lmsc-dash[data-skin="apple-glass"] .lmsc-dash__nav-item--active:hover,
.lmsc-dash[data-skin="midnight"] .lmsc-dash__nav-item--active:hover {
    background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.18) !important;
    color: var(--lmsc-primary) !important;
}

/* Fix: Midnight - Learning Goals widget inner text not visible.
   Force all widget text to use the skin's text color. */
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget,
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget * {
    color: var(--lmsc-text, #E2E8F0);
}

.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget h3,
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget h4,
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget p,
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget span:not(.lmsc-dash__nav-badge),
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget label,
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget .lmsc-dash__goal-title,
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget .lmsc-dash__goal-target,
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget .lmsc-dash__goal-progress-text {
    color: var(--lmsc-text, #E2E8F0) !important;
}

.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget .lmsc-dash__goal-status {
    color: var(--lmsc-text-muted, #94A3B8) !important;
}

/* Fix: Midnight - Goal item cards have white backgrounds.
   .lmsc-goal-item uses var(--lmsc-bg-secondary, #f8fafc) which falls
   back to light. Force dark backgrounds for all widget inner cards. */
.lmsc-dash[data-skin="midnight"] .lmsc-goal-item {
    background: var(--lmsc-surface, #0F172A) !important;
    border: 1px solid var(--lmsc-border, #1E293B);
}

.lmsc-dash[data-skin="midnight"] .lmsc-goal-item__label {
    color: var(--lmsc-text, #E2E8F0) !important;
}

.lmsc-dash[data-skin="midnight"] .lmsc-goal-item__stat,
.lmsc-dash[data-skin="midnight"] .lmsc-goal-item__pct {
    color: var(--lmsc-text-muted, #94A3B8) !important;
}

.lmsc-dash[data-skin="midnight"] .lmsc-goal-item__bar {
    background: var(--lmsc-border, #1E293B) !important;
}

.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget--goals {
    background: var(--lmsc-surface, #0F172A) !important;
}

/* Same fix for ALL dark skins - ensure goal items match skin backgrounds */
.lmsc-dash[data-skin].lmsc-dash--dark .lmsc-goal-item,
.lmsc-dash[data-skin="netflix"].lmsc-dash--dark .lmsc-goal-item,
.lmsc-dash[data-skin="spotify"].lmsc-dash--dark .lmsc-goal-item,
.lmsc-dash[data-skin="ocean"].lmsc-dash--dark .lmsc-goal-item,
.lmsc-dash[data-skin="sunset"].lmsc-dash--dark .lmsc-goal-item {
    background: var(--lmsc-surface, #1a1a1a) !important;
    border: 1px solid var(--lmsc-border, #333);
}

.lmsc-dash[data-skin].lmsc-dash--dark .lmsc-goal-item__label {
    color: var(--lmsc-text) !important;
}

.lmsc-dash[data-skin].lmsc-dash--dark .lmsc-goal-item__stat,
.lmsc-dash[data-skin].lmsc-dash--dark .lmsc-goal-item__pct {
    color: var(--lmsc-text-muted) !important;
}

.lmsc-dash[data-skin].lmsc-dash--dark .lmsc-goal-item__bar {
    background: var(--lmsc-border) !important;
}