/* ==========================================================================
   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%);
    /* Text colour to place ON the brand backgrounds. White fails WCAG AA
       on most of these primaries (e.g. sunset 3.56, spotify 2.59), so each
       skin declares the colour that actually passes instead of changing the
       brand colour itself. */
    --lmsc-on-primary: #FFFFFF;
    --lmsc-on-accent: #FFFFFF;
    /* Light tint of the primary, for text/marks on DARK surfaces where the
       full-strength primary would be too dark to read (Learning Paths in
       dark mode previously hardcoded #a5b4fc for exactly this reason).
       Each value clears 7:1 on both #1E293B and #0F172A. */
    --lmsc-primary-soft: #F79A9F;
}

.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].lmsc-dash--dark {
    --lmsc-action-link: var(--lmsc-primary-soft, #BFDBFE);
}

.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%);
    /* Text colour to place ON the brand backgrounds. White fails WCAG AA
       on most of these primaries (e.g. sunset 3.56, spotify 2.59), so each
       skin declares the colour that actually passes instead of changing the
       brand colour itself. */
    --lmsc-on-primary: #0B0B0F;
    --lmsc-on-accent: #0B0B0F;
    /* Light tint of the primary, for text/marks on DARK surfaces where the
       full-strength primary would be too dark to read (Learning Paths in
       dark mode previously hardcoded #a5b4fc for exactly this reason).
       Each value clears 7:1 on both #1E293B and #0F172A. */
    --lmsc-primary-soft: #20CF5E;
}

.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: #0071ED; /* #007AFF -> AA with white text */
    --lmsc-secondary: #1C1C1E;
    --lmsc-accent: #5856D6;
    --lmsc-primary-rgb: 0, 113, 237;
    --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: #76767C; /* was #8E8E93 — 3.26 on white, failed AA */
    --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%);
    /* Text colour to place ON the brand backgrounds. White fails WCAG AA
       on most of these primaries (e.g. sunset 3.56, spotify 2.59), so each
       skin declares the colour that actually passes instead of changing the
       brand colour itself. */
    --lmsc-on-primary: #FFFFFF;
    --lmsc-on-accent: #FFFFFF;
    /* Light tint of the primary, for text/marks on DARK surfaces where the
       full-strength primary would be too dark to read (Learning Paths in
       dark mode previously hardcoded #a5b4fc for exactly this reason).
       Each value clears 7:1 on both #1E293B and #0F172A. */
    --lmsc-primary-soft: #82B9F5;
}

/* 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: #027DBD; /* #0284C7 -> AA with white text */ /* darkened from #0EA5E9 so white-on-primary >= 3:1 (WCAG) */
    --lmsc-secondary: #0F172A;
    --lmsc-accent: #6164F1; /* nudged from #6366F1 for AA on white */
    --lmsc-primary-rgb: 2, 125, 189;
    --lmsc-secondary-rgb: 15, 23, 42;
    --lmsc-accent-rgb: 97, 100, 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%);
    /* Text colour to place ON the brand backgrounds. White fails WCAG AA
       on most of these primaries (e.g. sunset 3.56, spotify 2.59), so each
       skin declares the colour that actually passes instead of changing the
       brand colour itself. */
    --lmsc-on-primary: #FFFFFF;
    --lmsc-on-accent: #FFFFFF;
    /* Light tint of the primary, for text/marks on DARK surfaces where the
       full-strength primary would be too dark to read (Learning Paths in
       dark mode previously hardcoded #a5b4fc for exactly this reason).
       Each value clears 7:1 on both #1E293B and #0F172A. */
    --lmsc-primary-soft: #5ABEF2;
}

.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);
    /* Text colour to place ON the brand backgrounds. White fails WCAG AA
       on most of these primaries (e.g. sunset 3.56, spotify 2.59), so each
       skin declares the colour that actually passes instead of changing the
       brand colour itself. */
    --lmsc-on-primary: #0B0B0F;
    --lmsc-on-accent: #0B0B0F;
    /* Light tint of the primary, for text/marks on DARK surfaces where the
       full-strength primary would be too dark to read (Learning Paths in
       dark mode previously hardcoded #a5b4fc for exactly this reason).
       Each value clears 7:1 on both #1E293B and #0F172A. */
    --lmsc-primary-soft: #F49F73;
}

.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: #1E6FF5; /* #3B82F6 -> AA with white text */
    --lmsc-secondary: #0F172A;
    --lmsc-accent: #A78BFA;
    --lmsc-primary-rgb: 30, 111, 245;
    --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%);
    /* Text colour to place ON the brand backgrounds. White fails WCAG AA
       on most of these primaries (e.g. sunset 3.56, spotify 2.59), so each
       skin declares the colour that actually passes instead of changing the
       brand colour itself. */
    --lmsc-on-primary: #FFFFFF;
    --lmsc-on-accent: #FFFFFF;
    /* Light tint of the primary, for text/marks on DARK surfaces where the
       full-strength primary would be too dark to read (Learning Paths in
       dark mode previously hardcoded #a5b4fc for exactly this reason).
       Each value clears 7:1 on both #1E293B and #0F172A. */
    --lmsc-primary-soft: #8DB5F6;
}

.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-color: 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);
}

/* The refined course builder owns the category-chip interaction hierarchy. */
.lmsc-dash[data-skin] .lmsc-instructor__editor--refined .lmsc-instructor__cat-item {
    background: var(--lmsc-surface);
    color: var(--lmsc-text);
    border-color: var(--lmsc-border);
}

.lmsc-dash[data-skin] .lmsc-instructor__editor--refined .lmsc-instructor__cat-item:hover {
    background: rgba(var(--lmsc-primary-rgb, 5, 127, 189), .04);
    border-color: color-mix(in srgb, var(--lmsc-primary, #057fbd) 45%, var(--lmsc-border));
}

.lmsc-dash[data-skin] .lmsc-instructor__editor--refined .lmsc-instructor__cat-item.is-selected {
    background: rgba(var(--lmsc-primary-rgb, 5, 127, 189), .09);
    border-color: var(--lmsc-primary, #057fbd);
}

/* -- 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-color: 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 {
    /* Clip the active-item glow vertically (#70) but keep the base
       overflow-x:auto so the top nav still scrolls horizontally
       (touchpad/drag). overflow:hidden here killed the scroll on Midnight. */
    overflow-x: auto;
    overflow-y: hidden;
}

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

/* Keep the sidebar layout inside the same rounded outer canvas as topnav.
   The two inner columns stay square so only the dashboard's four outside
   corners are rounded. The shared .lmsc-dash rule in dashboard.css owns the
   canonical 10px radius and clips both skin backgrounds to that boundary. */

.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;
}

/* Preserve the progress widget's muted labels against the
   older Midnight goals-widget catch-all above. */
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget--progress .lmsc-dash__widget-subtitle,
.lmsc-dash[data-skin="midnight"] .lmsc-dash__widget--progress .lmsc-dash__progress-message {
    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;
}

/* ========================================================================== 
   Learning Paths semantic interaction tokens

   Path authors may choose a decorative colour for standalone paths. Inside a
   dashboard, the selected skin owns both decoration and text-bearing controls
   through the verified pair below. The darker/lighter boundary token keeps
   filled controls distinguishable from the surrounding surface by at least
   3:1 in each shipped skin.
   ========================================================================== */

.lmsc-dash[data-skin] {
    --lmsc-lp-action-bg: var(--lmsc-lp-custom-action-bg, #1D6BEE);
    --lmsc-action-bg: var(--lmsc-custom-action-bg, #1D6BEE);
    --lmsc-action-fg: #FFFFFF;
    --lmsc-action-link: var(--lmsc-action-bg);
    --lmsc-lp-action-fg: var(--lmsc-lp-custom-action-fg, #FFFFFF);
    --lmsc-lp-path-accent: var(--lmsc-lp-action-bg);
    --lmsc-lp-path-accent-fg: var(--lmsc-lp-action-fg);
    --lmsc-lp-current-marker: var(--lmsc-lp-action-bg);
    --lmsc-lp-current-marker-fg: var(--lmsc-lp-action-fg);
}

/* Canonical Learning Path roots define standalone fallbacks. Inside a skinned
   dashboard they must inherit the resolved interactive palette from the canvas
   so brand-safe foreground and focus colours are not masked by those defaults. */
.lmsc-dash[data-skin] :is(.lmsc-component--learning-path, [data-lmsc-learning-path]) {
    --lmsc-lp-link: inherit;
    --lmsc-lp-focus: inherit;
    --lmsc-lp-action-bg: inherit;
    --lmsc-lp-action-fg: inherit;
    --lmsc-lp-action-border: inherit;
    --lmsc-lp-path-accent: inherit;
    --lmsc-lp-path-accent-fg: inherit;
    --lmsc-lp-current: inherit;
    --lmsc-lp-current-bg: inherit;
    --lmsc-lp-current-marker: inherit;
    --lmsc-lp-current-marker-fg: inherit;
}

.lmsc-dash[data-skin="netflix"] {
    --lmsc-lp-action-bg: #E50914;
    --lmsc-action-bg: #E50914;
    --lmsc-lp-action-fg: #FFFFFF;
    --lmsc-lp-link: #B91C1C;
    --lmsc-lp-focus: #B91C1C;
    --lmsc-lp-action-border: #7F1D1D;
    --lmsc-lp-current: #B91C1C;
    --lmsc-lp-current-bg: #FEF2F2;
}

.lmsc-dash[data-skin="spotify"] {
    --lmsc-lp-action-bg: #14843C;
    --lmsc-action-bg: #14843C;
    --lmsc-lp-action-fg: #FFFFFF;
    --lmsc-lp-link: #166534;
    --lmsc-lp-focus: #166534;
    --lmsc-lp-action-border: #14532D;
    --lmsc-lp-current: #166534;
    --lmsc-lp-current-bg: #ECFDF3;
    --lmsc-lp-completed: #0F766E;
    --lmsc-lp-completed-bg: #F0FDFA;
    --lmsc-lp-completed-marker: #115E59;
    --lmsc-lp-completed-marker-border: #0F766E;
}

.lmsc-dash[data-skin="apple-glass"] {
    --lmsc-lp-action-bg: #006EE8;
    --lmsc-action-bg: #006EE8;
    --lmsc-lp-action-fg: #FFFFFF;
    --lmsc-lp-link: #0050A8;
    --lmsc-lp-focus: #0050A8;
    --lmsc-lp-action-border: #1E3A8A;
    --lmsc-lp-current: #0050A8;
    --lmsc-lp-current-bg: #EFF6FF;
}

.lmsc-dash[data-skin="ocean"] {
    --lmsc-lp-action-bg: #0369A1;
    --lmsc-action-bg: #0369A1;
    --lmsc-lp-action-fg: #FFFFFF;
    --lmsc-lp-link: #075985;
    --lmsc-lp-focus: #075985;
    --lmsc-lp-action-border: #164E63;
    --lmsc-lp-current: #075985;
    --lmsc-lp-current-bg: #F0F9FF;
}

.lmsc-dash[data-skin="sunset"] {
    --lmsc-lp-action-bg: #C74A0A;
    --lmsc-action-bg: #C74A0A;
    --lmsc-lp-action-fg: #FFFFFF;
    --lmsc-lp-link: #9A3412;
    --lmsc-lp-focus: #9A3412;
    --lmsc-lp-action-border: #7C2D12;
    --lmsc-lp-current: #9A3412;
    --lmsc-lp-current-bg: #FFF7ED;
}

.lmsc-dash[data-skin="midnight"] {
    --lmsc-lp-action-bg: #1D6BEE;
    --lmsc-action-bg: #1D6BEE;
    --lmsc-action-link: #BFDBFE;
    --lmsc-lp-action-fg: #FFFFFF;
    --lmsc-lp-link: #BFDBFE;
    --lmsc-lp-focus: #BFDBFE;
    --lmsc-lp-action-border: #BFDBFE;
    --lmsc-lp-current: #BFDBFE;
    --lmsc-lp-current-bg: #172554;
    --lmsc-lp-path-accent: #8DB5F6;
    --lmsc-lp-path-accent-fg: #0B0B0F;
}

.lmsc-dash[data-skin="netflix"].lmsc-dash--dark {
    --lmsc-lp-link: #FCA5A5;
    --lmsc-lp-focus: #FCA5A5;
    --lmsc-lp-action-border: #FCA5A5;
    --lmsc-lp-current: #FCA5A5;
    --lmsc-lp-current-bg: #3F1D24;
    --lmsc-lp-path-accent: #F79A9F;
    --lmsc-lp-path-accent-fg: #0B0B0F;
}

.lmsc-dash[data-skin="spotify"].lmsc-dash--dark {
    --lmsc-lp-link: #86EFAC;
    --lmsc-lp-focus: #86EFAC;
    --lmsc-lp-action-border: #86EFAC;
    --lmsc-lp-current: #86EFAC;
    --lmsc-lp-current-bg: #14291E;
    --lmsc-lp-path-accent: #20CF5E;
    --lmsc-lp-path-accent-fg: #0B0B0F;
    --lmsc-lp-completed: #5EEAD4;
    --lmsc-lp-completed-bg: #0F2A2A;
    --lmsc-lp-completed-marker: #115E59;
    --lmsc-lp-completed-marker-border: #5EEAD4;
}

.lmsc-dash[data-skin="apple-glass"].lmsc-dash--dark {
    --lmsc-lp-link: #BFDBFE;
    --lmsc-lp-focus: #BFDBFE;
    --lmsc-lp-action-border: #BFDBFE;
    --lmsc-lp-current: #BFDBFE;
    --lmsc-lp-current-bg: #172554;
    --lmsc-lp-path-accent: #82B9F5;
    --lmsc-lp-path-accent-fg: #0B0B0F;
}

.lmsc-dash[data-skin="ocean"].lmsc-dash--dark {
    --lmsc-lp-link: #BAE6FD;
    --lmsc-lp-focus: #BAE6FD;
    --lmsc-lp-action-border: #BAE6FD;
    --lmsc-lp-current: #BAE6FD;
    --lmsc-lp-current-bg: #0C2A3B;
    --lmsc-lp-path-accent: #5ABEF2;
    --lmsc-lp-path-accent-fg: #0B0B0F;
}

.lmsc-dash[data-skin="sunset"].lmsc-dash--dark {
    --lmsc-lp-link: #FED7AA;
    --lmsc-lp-focus: #FED7AA;
    --lmsc-lp-action-border: #FED7AA;
    --lmsc-lp-current: #FED7AA;
    --lmsc-lp-current-bg: #3A2117;
    --lmsc-lp-path-accent: #F49F73;
    --lmsc-lp-path-accent-fg: #0B0B0F;
}