/* ============================================================
   Instructor Portal - Theme System
   Two themes: dark (aurora-inspired) and light (aurora-light)
   ============================================================ */

/* ===== DARK THEME (default) ===== */
[data-instructor-theme="dark"] {
    --i-bg: #0F0A2A;
    --i-bg-gradient: linear-gradient(135deg, #0F0A2A 0%, #1a1040 50%, #0F0A2A 100%);
    --i-surface: rgba(25, 15, 55, 0.72);
    --i-surface-solid: #1a1040;
    --i-surface-hover: rgba(25, 15, 55, 0.88);
    --i-surface-alt: rgba(20, 12, 48, 0.6);
    --i-surface-raised: rgba(30, 20, 65, 0.85);

    /* Nav */
    --i-nav-bg: rgba(15, 10, 42, 0.92);
    --i-nav-border: rgba(255, 107, 107, 0.15);
    --i-nav-shadow: 0 4px 30px rgba(0,0,0,0.4);

    /* Primary / Accent (coral-pink from aurora) */
    --i-primary: #FF6B6B;
    --i-primary-rgb: 255, 107, 107;
    --i-primary-hover: #ff5252;
    --i-primary-soft: rgba(255, 107, 107, 0.12);
    --i-primary-muted: rgba(255, 107, 107, 0.06);

    /* Secondary accent (teal from aurora) */
    --i-secondary: #2DD4BF;
    --i-secondary-rgb: 45, 212, 191;
    --i-secondary-soft: rgba(45, 212, 191, 0.12);

    /* Text */
    --i-text: #F0E6FF;
    --i-text-secondary: #B8A0D8;
    --i-text-muted: #7A6899;
    --i-text-inverse: #0F0A2A;

    /* Borders */
    --i-border: rgba(255, 107, 107, 0.18);
    --i-border-dim: rgba(255, 107, 107, 0.10);
    --i-border-strong: rgba(255, 107, 107, 0.30);

    /* Glass effects */
    --i-glass-bg: rgba(25, 15, 55, 0.72);
    --i-glass-border: rgba(255, 107, 107, 0.20);
    --i-glass-blur: blur(14px);

    /* Inputs */
    --i-input-bg: rgba(15, 10, 42, 0.6);
    --i-input-border: rgba(255, 107, 107, 0.2);
    --i-input-text: #F0E6FF;
    --i-input-placeholder: #7A6899;
    --i-input-focus-ring: rgba(255, 107, 107, 0.4);
    --i-input-focus-border: rgba(255, 107, 107, 0.5);

    /* Buttons */
    --i-btn-primary-bg: linear-gradient(135deg, #FF6B6B, #ff5252);
    --i-btn-primary-text: #ffffff;
    --i-btn-primary-shadow: 0 4px 14px rgba(255, 107, 107, 0.3);
    --i-btn-secondary-bg: rgba(255, 107, 107, 0.08);
    --i-btn-secondary-border: rgba(255, 107, 107, 0.25);
    --i-btn-secondary-text: #F0E6FF;
    --i-btn-secondary-hover: rgba(255, 107, 107, 0.18);

    /* Progress */
    --i-progress-bg: rgba(15, 10, 42, 0.5);
    --i-progress-fill: linear-gradient(90deg, #FF6B6B 0%, #FBBF24 50%, #2DD4BF 100%);

    /* Footer */
    --i-footer-bg: rgba(10, 6, 30, 0.9);
    --i-footer-text: #7A6899;

    /* Breadcrumbs */
    --i-breadcrumb-bg: rgba(20, 12, 48, 0.6);
    --i-breadcrumb-border: rgba(255, 107, 107, 0.08);
    --i-breadcrumb-text: #B8A0D8;
    --i-breadcrumb-link: #FF6B6B;

    /* Shadows */
    --i-shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --i-shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --i-shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

    /* Badge / Tags */
    --i-badge-bg: rgba(255, 107, 107, 0.12);
    --i-badge-text: #FF6B6B;
    --i-badge-border: rgba(255, 107, 107, 0.25);

    /* Modal overlay */
    --i-overlay: rgba(0, 0, 0, 0.6);
    --i-modal-bg: #1a1040;
    --i-modal-border: rgba(255, 107, 107, 0.15);

    /* Table */
    --i-table-header-bg: rgba(20, 12, 48, 0.8);
    --i-table-row-hover: rgba(255, 107, 107, 0.04);
    --i-table-stripe: rgba(15, 10, 42, 0.3);

    /* Tour / Help */
    --i-tour-bg: linear-gradient(135deg, #1a1040, #251555);
    --i-tour-border: rgba(255, 107, 107, 0.3);
    --i-tour-title: #FF6B6B;
    --i-tour-btn: linear-gradient(135deg, #FF6B6B, #ff5252);

    /* Logo */
    --i-logo-dark-display: block;
    --i-logo-light-display: none;
}

/* ===== LIGHT THEME ===== */
[data-instructor-theme="light"] {
    --i-bg: #E8E0F0;
    --i-bg-gradient: linear-gradient(135deg, #E8E0F0 0%, #DDD4EC 50%, #E8E0F0 100%);
    --i-surface: #ffffff;
    --i-surface-solid: #ffffff;
    --i-surface-hover: #F3F0FA;
    --i-surface-alt: #DDD4EC;
    --i-surface-raised: #ffffff;

    /* Nav */
    --i-nav-bg: rgba(255, 255, 255, 0.97);
    --i-nav-border: rgba(109, 40, 217, 0.25);
    --i-nav-shadow: 0 2px 20px rgba(109, 40, 217, 0.16);

    /* Primary / Accent (purple from aurora-light) */
    --i-primary: #7C3AED;
    --i-primary-rgb: 124, 58, 237;
    --i-primary-hover: #6D28D9;
    --i-primary-soft: rgba(124, 58, 237, 0.15);
    --i-primary-muted: rgba(124, 58, 237, 0.10);

    /* Secondary accent */
    --i-secondary: #0D9488;
    --i-secondary-rgb: 13, 148, 136;
    --i-secondary-soft: rgba(13, 148, 136, 0.14);

    /* Text */
    --i-text: #1E1B4B;
    --i-text-secondary: #312C58;
    --i-text-muted: #5A5286;
    --i-text-inverse: #ffffff;

    /* Borders */
    --i-border: rgba(109, 40, 217, 0.25);
    --i-border-dim: rgba(109, 40, 217, 0.14);
    --i-border-strong: rgba(109, 40, 217, 0.40);

    /* Glass effects */
    --i-glass-bg: rgba(255, 255, 255, 0.92);
    --i-glass-border: rgba(109, 40, 217, 0.22);
    --i-glass-blur: blur(14px);

    /* Inputs */
    --i-input-bg: #ffffff;
    --i-input-border: rgba(109, 40, 217, 0.28);
    --i-input-text: #1E1B4B;
    --i-input-placeholder: #5A5286;
    --i-input-focus-ring: rgba(124, 58, 237, 0.35);
    --i-input-focus-border: rgba(124, 58, 237, 0.60);

    /* Buttons */
    --i-btn-primary-bg: linear-gradient(135deg, #7C3AED, #6D28D9);
    --i-btn-primary-text: #ffffff;
    --i-btn-primary-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
    --i-btn-secondary-bg: rgba(124, 58, 237, 0.10);
    --i-btn-secondary-border: rgba(124, 58, 237, 0.30);
    --i-btn-secondary-text: #312C58;
    --i-btn-secondary-hover: rgba(124, 58, 237, 0.20);

    /* Progress */
    --i-progress-bg: rgba(109, 40, 217, 0.16);
    --i-progress-fill: linear-gradient(90deg, #7C3AED 0%, #0D9488 100%);

    /* Footer */
    --i-footer-bg: #1E1B4B;
    --i-footer-text: #8B85AD;

    /* Breadcrumbs */
    --i-breadcrumb-bg: rgba(255, 255, 255, 0.90);
    --i-breadcrumb-border: rgba(109, 40, 217, 0.18);
    --i-breadcrumb-text: #312C58;
    --i-breadcrumb-link: #7C3AED;

    /* Shadows */
    --i-shadow-sm: 0 2px 8px rgba(109, 40, 217, 0.14);
    --i-shadow-md: 0 4px 16px rgba(109, 40, 217, 0.18);
    --i-shadow-lg: 0 8px 32px rgba(109, 40, 217, 0.22);

    /* Badge / Tags */
    --i-badge-bg: rgba(124, 58, 237, 0.14);
    --i-badge-text: #6D28D9;
    --i-badge-border: rgba(124, 58, 237, 0.28);

    /* Modal overlay */
    --i-overlay: rgba(30, 27, 75, 0.55);
    --i-modal-bg: #ffffff;
    --i-modal-border: rgba(109, 40, 217, 0.22);

    /* Table */
    --i-table-header-bg: #DDD4EC;
    --i-table-row-hover: rgba(124, 58, 237, 0.07);
    --i-table-stripe: rgba(109, 40, 217, 0.06);

    /* Tour / Help */
    --i-tour-bg: linear-gradient(135deg, #ffffff, #DDD4EC);
    --i-tour-border: rgba(124, 58, 237, 0.30);
    --i-tour-title: #7C3AED;
    --i-tour-btn: linear-gradient(135deg, #7C3AED, #6D28D9);

    /* Logo */
    --i-logo-dark-display: none;
    --i-logo-light-display: block;
}

/* ===== AURORA BACKGROUND ANIMATION (dark theme) ===== */
[data-instructor-theme="dark"] body::before {
    content: '';
    position: fixed;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 15% 40%, rgba(255,107,107,0.14) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 85% 25%, rgba(45,212,191,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 60% 70% at 50% 85%, rgba(251,191,36,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 70% 60%, rgba(139,92,246,0.09) 0%, transparent 60%);
    animation: i-aurora-drift 20s ease-in-out infinite alternate;
}
[data-instructor-theme="dark"] body::after {
    content: '';
    position: fixed;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(255,107,107,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 20% 80%, rgba(45,212,191,0.06) 0%, transparent 60%);
    animation: i-aurora-drift 25s ease-in-out 5s infinite alternate-reverse;
}
@keyframes i-aurora-drift {
    0%   { transform: scale(1) rotate(0deg); }
    25%  { transform: scale(1.06) rotate(0.5deg); }
    50%  { transform: scale(0.98) rotate(-0.3deg); }
    75%  { transform: scale(1.04) rotate(0.4deg); }
    100% { transform: scale(1.02) rotate(-0.2deg); }
}

/* ===== AURORA BACKGROUND ANIMATION (light theme) ===== */
[data-instructor-theme="light"] body::before {
    content: '';
    position: fixed;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 15% 40%, rgba(124,58,237,0.14) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 85% 25%, rgba(13,148,136,0.11) 0%, transparent 70%),
        radial-gradient(ellipse 60% 70% at 50% 85%, rgba(251,191,36,0.08) 0%, transparent 60%);
    animation: i-aurora-drift 20s ease-in-out infinite alternate;
}
[data-instructor-theme="light"] body::after {
    content: '';
    position: fixed;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(124,58,237,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 20% 80%, rgba(13,148,136,0.07) 0%, transparent 60%);
    animation: i-aurora-drift 25s ease-in-out 5s infinite alternate-reverse;
}

/* ===== BASE RESETS ===== */
[data-instructor-theme] body {
    background: var(--i-bg) !important;
    color: var(--i-text);
    position: relative;
}

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

/* Surfaces */
.i-surface {
    background: var(--i-surface);
    border: 1px solid var(--i-border);
    box-shadow: var(--i-shadow-sm);
}
.i-surface-raised {
    background: var(--i-surface-raised);
    border: 1px solid var(--i-border);
    box-shadow: var(--i-shadow-md);
}

/* Cards */
.i-card {
    background: var(--i-surface);
    border: 1.5px solid var(--i-border);
    border-radius: 16px;
    box-shadow: var(--i-shadow-sm);
    backdrop-filter: var(--i-glass-blur);
    -webkit-backdrop-filter: var(--i-glass-blur);
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
}
.i-card:hover {
    border-color: var(--i-border-strong);
    box-shadow: var(--i-shadow-md);
    transform: translateY(-2px);
}

/* Nav bar */
.i-nav {
    background: var(--i-nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--i-nav-border);
    box-shadow: var(--i-nav-shadow);
    position: relative;
    z-index: 50;
}

/* Primary buttons */
.i-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--i-btn-primary-bg);
    color: var(--i-btn-primary-text);
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: var(--i-btn-primary-shadow);
    text-decoration: none;
    font-size: 0.875rem;
}
.i-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(var(--i-primary-rgb), 0.35);
}

/* Secondary buttons */
.i-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--i-btn-secondary-bg);
    color: var(--i-btn-secondary-text);
    border: 1.5px solid var(--i-btn-secondary-border);
    border-radius: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    font-size: 0.875rem;
}
.i-btn-secondary:hover {
    background: var(--i-btn-secondary-hover);
    border-color: var(--i-border-strong);
    transform: translateY(-1px);
}

/* Ghost buttons */
.i-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: var(--i-text-secondary);
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 0.85rem;
}
.i-btn-ghost:hover {
    background: var(--i-primary-muted);
    color: var(--i-primary);
    border-color: var(--i-border-dim);
}

/* Inputs */
.i-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--i-input-bg);
    border: 1.5px solid var(--i-input-border);
    border-radius: 10px;
    color: var(--i-input-text);
    font-family: inherit;
    font-size: 0.875rem;
    transition: all 0.2s;
}
.i-input::placeholder { color: var(--i-input-placeholder); }
.i-input:focus {
    outline: none;
    border-color: var(--i-input-focus-border);
    box-shadow: 0 0 0 3px var(--i-input-focus-ring);
}

/* Select */
.i-select {
    padding: 8px 14px;
    background: var(--i-input-bg);
    border: 1.5px solid var(--i-input-border);
    border-radius: 10px;
    color: var(--i-input-text);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.i-select:focus {
    outline: none;
    border-color: var(--i-input-focus-border);
    box-shadow: 0 0 0 3px var(--i-input-focus-ring);
}

/* Badges */
.i-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--i-badge-bg);
    border: 1px solid var(--i-badge-border);
    color: var(--i-badge-text);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Tables */
.i-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.i-table thead th {
    background: var(--i-table-header-bg);
    color: var(--i-text-secondary);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 12px 16px;
    text-align: right;
    border-bottom: 1px solid var(--i-border);
}
.i-table thead th:first-child { border-radius: 0 12px 0 0; }
.i-table thead th:last-child { border-radius: 12px 0 0 0; }
.i-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--i-border-dim);
    color: var(--i-text);
    font-size: 0.875rem;
}
.i-table tbody tr:hover { background: var(--i-table-row-hover); }
.i-table tbody tr:last-child td { border-bottom: none; }

/* Compact grade matrix */
.i-table.grade-matrix thead th {
    padding: 8px 6px;
    font-size: 0.7rem;
}
.i-table.grade-matrix tbody td {
    padding: 6px 4px;
    font-size: 0.8rem;
}
.i-table.grade-matrix tfoot td {
    padding: 8px 4px;
    font-size: 0.8rem;
}

/* Progress bars */
.i-progress-track {
    width: 100%;
    height: 8px;
    background: var(--i-progress-bg);
    border-radius: 8px;
    overflow: hidden;
}
.i-progress-fill {
    height: 100%;
    background: var(--i-progress-fill);
    border-radius: 8px;
    transition: width 0.6s ease;
}

/* Breadcrumbs */
.i-breadcrumb-bar {
    background: var(--i-breadcrumb-bg);
    border-bottom: 1px solid var(--i-breadcrumb-border);
    position: relative;
    z-index: 1;
}
.i-breadcrumb-bar a {
    color: var(--i-breadcrumb-link);
    text-decoration: none;
    transition: opacity 0.2s;
}
.i-breadcrumb-bar a:hover { opacity: 0.8; }
.i-breadcrumb-bar span { color: var(--i-breadcrumb-text); }

/* Modals */
.i-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--i-overlay);
    backdrop-filter: blur(4px);
    z-index: 50;
}
.i-modal {
    background: var(--i-modal-bg);
    border: 1.5px solid var(--i-modal-border);
    border-radius: 20px;
    box-shadow: var(--i-shadow-lg);
    position: relative;
    z-index: 51;
}

/* Separator */
.i-divider {
    height: 1px;
    background: var(--i-border-dim);
    border: none;
}

/* Stat cards on dashboard */
.i-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--i-surface);
    border: 1.5px solid var(--i-border);
    border-radius: 14px;
    backdrop-filter: var(--i-glass-blur);
}

/* Welcome / gradient header */
.i-welcome-header {
    background: var(--i-btn-primary-bg);
    color: var(--i-btn-primary-text);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--i-shadow-md);
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.i-welcome-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

/* Section header */
.i-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--i-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Flash messages */
.i-flash-success {
    padding: 14px 20px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-right-width: 4px;
    border-radius: 10px;
    color: #22c55e;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.i-flash-error {
    padding: 14px 20px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-right-width: 4px;
    border-radius: 10px;
    color: #ef4444;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

/* Footer */
.i-footer {
    background: var(--i-footer-bg);
    color: var(--i-footer-text);
    position: relative;
    z-index: 1;
}

/* Text colors */
.i-text-primary { color: var(--i-primary) !important; }
.i-text-main { color: var(--i-text) !important; }
.i-text-secondary { color: var(--i-text-secondary) !important; }
.i-text-muted { color: var(--i-text-muted) !important; }

/* Link styling */
.i-link {
    color: var(--i-primary);
    text-decoration: none;
    transition: opacity 0.2s;
}
.i-link:hover { opacity: 0.8; }

/* Theme switcher */
.i-theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: var(--i-primary-muted);
    border: 1px solid var(--i-border-dim);
    border-radius: 10px;
}
.i-theme-switcher button {
    padding: 5px 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: var(--i-text-muted);
}
.i-theme-switcher button.active {
    background: var(--i-primary);
    color: var(--i-btn-primary-text);
    box-shadow: 0 2px 8px rgba(var(--i-primary-rgb), 0.25);
}
.i-theme-switcher button:not(.active):hover {
    color: var(--i-text);
    background: var(--i-primary-soft);
}

/* ==========================================================
   SHARED COMPONENT OVERRIDES
   Override Tailwind utility classes within instructor context
   so shared components (viewer, etc.) adapt to the theme.
   ========================================================== */

/* --- DARK THEME: neutral gray/white overrides --- */
[data-instructor-theme="dark"] .bg-white {
    background-color: var(--i-surface-solid) !important;
}
[data-instructor-theme="dark"] .bg-gray-50 {
    background-color: var(--i-surface-alt) !important;
}
[data-instructor-theme="dark"] .bg-gray-100 {
    background-color: rgba(255,255,255,0.06) !important;
}
[data-instructor-theme="dark"] .bg-gray-200 {
    background-color: rgba(255,255,255,0.10) !important;
}
[data-instructor-theme="dark"] .bg-gray-800 {
    background-color: rgba(15,10,42,0.8) !important;
}
[data-instructor-theme="dark"] .text-gray-800 {
    color: var(--i-text) !important;
}
[data-instructor-theme="dark"] .text-gray-700 {
    color: var(--i-text-secondary) !important;
}
[data-instructor-theme="dark"] .text-gray-600 {
    color: var(--i-text-secondary) !important;
}
[data-instructor-theme="dark"] .text-gray-500 {
    color: var(--i-text-muted) !important;
}
[data-instructor-theme="dark"] .text-gray-400 {
    color: var(--i-text-muted) !important;
}
[data-instructor-theme="dark"] .text-gray-300 {
    color: rgba(255,255,255,0.25) !important;
}
[data-instructor-theme="dark"] .border-gray-100 {
    border-color: var(--i-border-dim) !important;
}
[data-instructor-theme="dark"] .border-gray-200 {
    border-color: var(--i-border) !important;
}
[data-instructor-theme="dark"] .border-gray-300 {
    border-color: var(--i-border) !important;
}
[data-instructor-theme="dark"] .divide-gray-100 > * + * {
    border-color: var(--i-border-dim) !important;
}
[data-instructor-theme="dark"] .divide-gray-200 > * + * {
    border-color: var(--i-border) !important;
}
/* Hover states */
[data-instructor-theme="dark"] .hover\:bg-gray-50:hover {
    background-color: rgba(255,255,255,0.08) !important;
}
[data-instructor-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: rgba(255,255,255,0.10) !important;
}
[data-instructor-theme="dark"] .hover\:bg-gray-200:hover {
    background-color: rgba(255,255,255,0.14) !important;
}
/* White with opacity */
[data-instructor-theme="dark"] .bg-white\/20 {
    background-color: rgba(255,255,255,0.08) !important;
}
[data-instructor-theme="dark"] .hover\:bg-white\/30:hover {
    background-color: rgba(255,255,255,0.12) !important;
}
/* Teal → primary */
[data-instructor-theme="dark"] .text-teal-600 {
    color: var(--i-primary) !important;
}
[data-instructor-theme="dark"] .text-teal-700 {
    color: var(--i-primary-hover) !important;
}
[data-instructor-theme="dark"] .hover\:text-teal-700:hover {
    color: var(--i-primary-hover) !important;
}
[data-instructor-theme="dark"] .bg-teal-500 {
    background-color: var(--i-primary) !important;
}
[data-instructor-theme="dark"] .bg-teal-600 {
    background-color: var(--i-primary) !important;
}
[data-instructor-theme="dark"] .hover\:bg-teal-700:hover {
    background-color: var(--i-primary-hover) !important;
}
[data-instructor-theme="dark"] .bg-teal-50 {
    background-color: var(--i-primary-soft) !important;
}
[data-instructor-theme="dark"] .hover\:bg-teal-100:hover {
    background-color: var(--i-primary-soft) !important;
}
[data-instructor-theme="dark"] .border-teal-200 {
    border-color: rgba(var(--i-primary-rgb),0.25) !important;
}
[data-instructor-theme="dark"] .border-teal-500 {
    border-color: var(--i-primary) !important;
}
[data-instructor-theme="dark"] .focus\:border-teal-500:focus {
    border-color: var(--i-input-focus-border) !important;
}
[data-instructor-theme="dark"] .focus\:ring-teal-500:focus {
    --tw-ring-color: var(--i-input-focus-ring) !important;
}
[data-instructor-theme="dark"] .focus\:ring-teal-500\/20:focus {
    --tw-ring-color: var(--i-input-focus-ring) !important;
}
/* Focus states for inputs */
[data-instructor-theme="dark"] .focus\:bg-white:focus {
    background-color: var(--i-input-bg) !important;
}
/* Indigo text override */
[data-instructor-theme="dark"] .text-indigo-600 {
    color: var(--i-primary) !important;
}
[data-instructor-theme="dark"] .border-indigo-300 {
    border-color: rgba(var(--i-primary-rgb),0.3) !important;
}
/* Shadow overrides */
[data-instructor-theme="dark"] .shadow-sm {
    box-shadow: var(--i-shadow-sm) !important;
}
[data-instructor-theme="dark"] .shadow-xl {
    box-shadow: var(--i-shadow-lg) !important;
}

/* --- LIGHT THEME: teal → purple overrides only --- */
[data-instructor-theme="light"] .text-teal-600 {
    color: var(--i-primary) !important;
}
[data-instructor-theme="light"] .text-teal-700 {
    color: var(--i-primary-hover) !important;
}
[data-instructor-theme="light"] .hover\:text-teal-700:hover {
    color: var(--i-primary-hover) !important;
}
[data-instructor-theme="light"] .bg-teal-500 {
    background-color: var(--i-primary) !important;
}
[data-instructor-theme="light"] .bg-teal-600 {
    background-color: var(--i-primary) !important;
}
[data-instructor-theme="light"] .hover\:bg-teal-700:hover {
    background-color: var(--i-primary-hover) !important;
}
[data-instructor-theme="light"] .bg-teal-50 {
    background-color: var(--i-primary-soft) !important;
}
[data-instructor-theme="light"] .hover\:bg-teal-100:hover {
    background-color: var(--i-primary-soft) !important;
}
[data-instructor-theme="light"] .border-teal-200 {
    border-color: rgba(var(--i-primary-rgb),0.2) !important;
}
[data-instructor-theme="light"] .border-teal-500 {
    border-color: var(--i-primary) !important;
}
[data-instructor-theme="light"] .focus\:border-teal-500:focus {
    border-color: var(--i-input-focus-border) !important;
}
[data-instructor-theme="light"] .focus\:ring-teal-500:focus {
    --tw-ring-color: var(--i-input-focus-ring) !important;
}
[data-instructor-theme="light"] .focus\:ring-teal-500\/20:focus {
    --tw-ring-color: var(--i-input-focus-ring) !important;
}
[data-instructor-theme="light"] .bg-gray-50 {
    background-color: var(--i-surface-alt) !important;
}
[data-instructor-theme="light"] .border-gray-100 {
    border-color: var(--i-border-dim) !important;
}
[data-instructor-theme="light"] .border-gray-200 {
    border-color: var(--i-border) !important;
}
[data-instructor-theme="light"] .border-gray-300 {
    border-color: var(--i-border) !important;
}

/* ==========================================================
   PROGRAMMING EDITOR RESET
   Prevent instructor theme overrides from breaking the
   programming editor's own dark styling.
   ========================================================== */
[data-instructor-theme] .programming-workspace .bg-gray-800,
[data-instructor-theme] .prog-parts-wrap .bg-gray-800 {
    background-color: rgb(31, 41, 55) !important;
}
[data-instructor-theme] .programming-workspace .bg-gray-900,
[data-instructor-theme] .prog-parts-wrap .bg-gray-900 {
    background-color: rgb(17, 24, 39) !important;
}
[data-instructor-theme] .programming-workspace .bg-white,
[data-instructor-theme] .prog-parts-wrap .bg-white {
    background-color: #ffffff !important;
}
[data-instructor-theme] .programming-workspace .bg-gray-50,
[data-instructor-theme] .prog-parts-wrap .bg-gray-50 {
    background-color: rgb(249, 250, 251) !important;
}
[data-instructor-theme] .programming-workspace .bg-gray-100,
[data-instructor-theme] .prog-parts-wrap .bg-gray-100 {
    background-color: rgb(243, 244, 246) !important;
}
[data-instructor-theme] .programming-workspace .bg-gray-200,
[data-instructor-theme] .prog-parts-wrap .bg-gray-200 {
    background-color: rgb(229, 231, 235) !important;
}
[data-instructor-theme] .programming-workspace .text-gray-800,
[data-instructor-theme] .prog-parts-wrap .text-gray-800 {
    color: rgb(31, 41, 55) !important;
}
[data-instructor-theme] .programming-workspace .text-gray-700,
[data-instructor-theme] .prog-parts-wrap .text-gray-700 {
    color: rgb(55, 65, 81) !important;
}
[data-instructor-theme] .programming-workspace .text-gray-600,
[data-instructor-theme] .prog-parts-wrap .text-gray-600 {
    color: rgb(75, 85, 99) !important;
}
[data-instructor-theme] .programming-workspace .text-gray-500,
[data-instructor-theme] .prog-parts-wrap .text-gray-500 {
    color: rgb(107, 114, 128) !important;
}
[data-instructor-theme] .programming-workspace .text-gray-400,
[data-instructor-theme] .prog-parts-wrap .text-gray-400 {
    color: rgb(156, 163, 175) !important;
}
[data-instructor-theme] .programming-workspace .text-gray-300,
[data-instructor-theme] .prog-parts-wrap .text-gray-300 {
    color: rgb(209, 213, 219) !important;
}
[data-instructor-theme] .programming-workspace .border-gray-700,
[data-instructor-theme] .prog-parts-wrap .border-gray-700 {
    border-color: rgb(55, 65, 81) !important;
}
[data-instructor-theme] .programming-workspace .border-gray-600,
[data-instructor-theme] .prog-parts-wrap .border-gray-600 {
    border-color: rgb(75, 85, 99) !important;
}
[data-instructor-theme] .programming-workspace .border-gray-100,
[data-instructor-theme] .prog-parts-wrap .border-gray-100 {
    border-color: rgb(243, 244, 246) !important;
}
[data-instructor-theme] .programming-workspace .border-gray-200,
[data-instructor-theme] .prog-parts-wrap .border-gray-200 {
    border-color: rgb(229, 231, 235) !important;
}
[data-instructor-theme] .programming-workspace .border-gray-300,
[data-instructor-theme] .prog-parts-wrap .border-gray-300 {
    border-color: rgb(209, 213, 219) !important;
}
[data-instructor-theme] .programming-workspace .shadow-sm,
[data-instructor-theme] .prog-parts-wrap .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
[data-instructor-theme] .programming-workspace .shadow-xl,
[data-instructor-theme] .prog-parts-wrap .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}
[data-instructor-theme] .programming-workspace .shadow-2xl,
[data-instructor-theme] .prog-parts-wrap .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================
   DARK THEME: Colored background overrides
   Replace light-pastel Tailwind bg-{color}-50/100 with dark
   semi-transparent tinted versions so they don't appear white.
   ========================================================== */

/* --- Amber / file sections --- */
[data-instructor-theme="dark"] .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.08) !important;
}
[data-instructor-theme="dark"] .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.14) !important;
}
[data-instructor-theme="dark"] .hover\:bg-amber-50:hover {
    background-color: rgba(245, 158, 11, 0.12) !important;
}
[data-instructor-theme="dark"] .hover\:bg-amber-200:hover {
    background-color: rgba(245, 158, 11, 0.18) !important;
}
[data-instructor-theme="dark"] .border-amber-100 {
    border-color: rgba(245, 158, 11, 0.18) !important;
}
[data-instructor-theme="dark"] .border-amber-200 {
    border-color: rgba(245, 158, 11, 0.22) !important;
}
[data-instructor-theme="dark"] .text-amber-700,
[data-instructor-theme="dark"] .text-amber-800 {
    color: #fbbf24 !important;
}
[data-instructor-theme="dark"] .text-amber-600 {
    color: #f59e0b !important;
}

/* --- Yellow / warning banners --- */
[data-instructor-theme="dark"] .bg-yellow-50 {
    background-color: rgba(234, 179, 8, 0.08) !important;
}
[data-instructor-theme="dark"] .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.14) !important;
}
[data-instructor-theme="dark"] .border-yellow-200 {
    border-color: rgba(234, 179, 8, 0.22) !important;
}
[data-instructor-theme="dark"] .text-yellow-700 {
    color: #facc15 !important;
}
[data-instructor-theme="dark"] .text-yellow-800 {
    color: #fde047 !important;
}
[data-instructor-theme="dark"] .text-yellow-900 {
    color: #fef08a !important;
}

/* --- Green / open-status --- */
[data-instructor-theme="dark"] .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.08) !important;
}
[data-instructor-theme="dark"] .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.14) !important;
}
[data-instructor-theme="dark"] .bg-green-200 {
    background-color: rgba(34, 197, 94, 0.18) !important;
}
[data-instructor-theme="dark"] .hover\:bg-green-100:hover {
    background-color: rgba(34, 197, 94, 0.18) !important;
}
[data-instructor-theme="dark"] .hover\:bg-green-200:hover {
    background-color: rgba(34, 197, 94, 0.22) !important;
}
[data-instructor-theme="dark"] .border-green-100 {
    border-color: rgba(34, 197, 94, 0.18) !important;
}
[data-instructor-theme="dark"] .border-green-300 {
    border-color: rgba(34, 197, 94, 0.25) !important;
}
[data-instructor-theme="dark"] .text-green-700 {
    color: #4ade80 !important;
}
[data-instructor-theme="dark"] .text-green-800 {
    color: #86efac !important;
}

/* --- Red / locked-status --- */
[data-instructor-theme="dark"] .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.08) !important;
}
[data-instructor-theme="dark"] .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.14) !important;
}
[data-instructor-theme="dark"] .hover\:bg-red-100:hover {
    background-color: rgba(239, 68, 68, 0.18) !important;
}
[data-instructor-theme="dark"] .hover\:bg-red-200:hover {
    background-color: rgba(239, 68, 68, 0.22) !important;
}
[data-instructor-theme="dark"] .text-red-700 {
    color: #f87171 !important;
}

/* --- Blue --- */
[data-instructor-theme="dark"] .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.08) !important;
}
[data-instructor-theme="dark"] .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.14) !important;
}
[data-instructor-theme="dark"] .hover\:bg-blue-100:hover {
    background-color: rgba(59, 130, 246, 0.18) !important;
}
[data-instructor-theme="dark"] .text-blue-700 {
    color: #60a5fa !important;
}

/* --- Indigo --- */
[data-instructor-theme="dark"] .bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.14) !important;
}
[data-instructor-theme="dark"] .hover\:bg-indigo-200:hover {
    background-color: rgba(99, 102, 241, 0.18) !important;
}
[data-instructor-theme="dark"] .text-indigo-700 {
    color: #818cf8 !important;
}

/* --- Purple --- */
[data-instructor-theme="dark"] .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.08) !important;
}
[data-instructor-theme="dark"] .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.14) !important;
}
[data-instructor-theme="dark"] .text-purple-700 {
    color: #c084fc !important;
}

/* --- Orange / revision banners --- */
[data-instructor-theme="dark"] .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.08) !important;
}
[data-instructor-theme="dark"] .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.14) !important;
}
[data-instructor-theme="dark"] .hover\:bg-orange-200:hover {
    background-color: rgba(249, 115, 22, 0.18) !important;
}
[data-instructor-theme="dark"] .border-orange-200 {
    border-color: rgba(249, 115, 22, 0.22) !important;
}
[data-instructor-theme="dark"] .text-orange-600 {
    color: #fb923c !important;
}
[data-instructor-theme="dark"] .text-orange-700 {
    color: #fdba74 !important;
}

/* --- Pink --- */
[data-instructor-theme="dark"] .bg-pink-100 {
    background-color: rgba(236, 72, 153, 0.14) !important;
}
[data-instructor-theme="dark"] .text-pink-600 {
    color: #f472b6 !important;
}

/* --- Rose --- */
[data-instructor-theme="dark"] .bg-rose-50 {
    background-color: rgba(244, 63, 94, 0.08) !important;
}
[data-instructor-theme="dark"] .bg-rose-100 {
    background-color: rgba(244, 63, 94, 0.14) !important;
}
[data-instructor-theme="dark"] .border-rose-200 {
    border-color: rgba(244, 63, 94, 0.22) !important;
}
[data-instructor-theme="dark"] .text-rose-600,
[data-instructor-theme="dark"] .text-rose-800 {
    color: #fb7185 !important;
}
}

/* Tabs - browser-tab style */
.i-tab-bar {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    background: var(--i-surface-alt);
    border-bottom: 2px solid var(--i-border);
}
.i-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 26px;
    border-radius: 12px 12px 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid transparent;
    border-bottom: none;
    background: var(--i-surface-alt);
    color: var(--i-text-muted);
    text-decoration: none;
    font-family: inherit;
    position: relative;
    margin-bottom: -2px;
}
.i-tab:hover {
    background: var(--i-surface-hover);
    color: var(--i-text-secondary);
}
.i-tab.active {
    background: var(--i-surface);
    color: var(--i-primary);
    border-color: var(--i-border);
    font-weight: 700;
    z-index: 1;
}

/* ===== Task Cards ===== */
.i-task-card {
    background: var(--i-surface);
    border: 1.5px solid var(--i-border-dim);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}
.i-task-card:hover {
    border-color: var(--i-border);
    box-shadow: var(--i-shadow-sm);
}
.i-task-card.is-locked {
    opacity: 0.55;
}
.i-task-card.is-locked:hover {
    opacity: 0.75;
}
/* Left accent strip */
.i-task-accent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    border-radius: 0 12px 12px 0;
}
/* Type colors */
.i-task-accent.type-text       { background: #60A5FA; }
.i-task-accent.type-upload,
.i-task-accent.type-file       { background: #F59E0B; }
.i-task-accent.type-mixed      { background: #A78BFA; }
.i-task-accent.type-canvas     { background: #F472B6; }
.i-task-accent.type-table      { background: #34D399; }
.i-task-accent.type-questionnaire { background: #818CF8; }
.i-task-accent.type-recording  { background: #FB923C; }
.i-task-accent.type-programming { background: #22D3EE; }
.i-task-accent.type-external   { background: #94A3B8; }

/* Task type chip */
.i-task-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--i-surface-alt);
    color: var(--i-text-muted);
}

/* Task action toolbar */
.i-task-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--i-surface-alt);
    border-top: 1px solid var(--i-border-dim);
    border-radius: 0 0 12px 12px;
}
.i-task-toolbar .i-task-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    border: 1px solid transparent;
}
.i-task-toolbar .i-task-action:hover {
    transform: translateY(-1px);
}
.i-task-action.action-submissions {
    background: var(--i-primary-soft);
    color: var(--i-primary);
    border-color: rgba(var(--i-primary-rgb), 0.2);
}
.i-task-action.action-submissions:hover {
    background: rgba(var(--i-primary-rgb), 0.2);
}
.i-task-action.action-open {
    background: rgba(34,197,94,0.12);
    color: #15803D;
    border-color: rgba(34,197,94,0.2);
}
[data-instructor-theme="dark"] .i-task-action.action-open {
    color: #4ADE80;
}
.i-task-action.action-locked {
    background: rgba(239,68,68,0.10);
    color: #B91C1C;
    border-color: rgba(239,68,68,0.2);
}
[data-instructor-theme="dark"] .i-task-action.action-locked {
    color: #FCA5A5;
}
.i-task-action.action-preview {
    background: var(--i-surface-hover);
    color: var(--i-text-secondary);
}
.i-task-action.action-preview:hover {
    background: var(--i-primary-muted);
    color: var(--i-primary);
}

/* Tooltip helper */
.i-tooltip {
    font-size: 0.75rem;
    color: var(--i-text-muted);
    font-weight: 500;
}

/* Active lesson indicator */
.i-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FBBF24;
    animation: i-pulse 1.5s infinite;
}
@keyframes i-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

/* Scrollbar styling for dark theme */
[data-instructor-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
[data-instructor-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(15, 10, 42, 0.3);
}
[data-instructor-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 107, 0.2);
    border-radius: 3px;
}
[data-instructor-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 107, 0.35);
}