/* SpeechGradebook theme (default) - dark blue. Custom themes (e.g. University of Tennessee) override via JS from institution_themes. */
:root {
/* SpeechGradebook Light Theme (Option 7) */
--primary: #1e3a5f;
--primary-dark: #142940;
--primary-light: #2d4a6f;
--secondary: #5a6c7d;
--accent: #4a6fa5;
            
/* Apple HIG: Text colors with WCAG AA contrast (4.5:1 on white) - Option 7 */
--text: #1a1a1a;              /* High contrast for body text (WCAG AAA: 16.6:1) */
--text-secondary: #4a4a4a;     /* Secondary text (WCAG AA: 7.1:1) */
--text-light: #6b6b6b;        /* Light text (WCAG AA: 4.6:1) - minimum for body */
--text-disabled: #9a9a9a;     /* Disabled text (WCAG AA: 2.8:1 - only for disabled states) */
            
/* Apple HIG: Background colors - Option 7 */
--bg: #fafbfc;                 /* Subtle off-white for reduced eye strain */
--bg-alt: #f1f4f7;             /* Secondary background for cards/panels */
--bg-hover: #e8ecf0;           /* Hover state background */
--card: #ffffff;               /* Card background - white for clarity */
--border: #d1d5db;             /* Border color with good contrast */
--border-light: #e5e7eb;       /* Lighter borders for subtle separation */
            
/* Apple HIG: Semantic colors with proper contrast */
--success: #059669;           /* Green - WCAG AA on white (3.2:1) - use with white text or darker shade */
--success-bg: #d1fae5;       /* Light green background */
--success-text: #065f46;     /* Dark green text (WCAG AA: 7.1:1) */
--success-border: #10b981;    /* Success border */
            
--warning: #d97706;           /* Orange - WCAG AA on white (3.0:1) */
--warning-bg: #fef3c7;        /* Light orange background */
--warning-text: #92400e;      /* Dark orange text (WCAG AA: 7.4:1) */
--warning-border: #f59e0b;    /* Warning border */
            
--error: #b91c1c;             /* Red - WCAG AA on white (4.5:1) */
--error-bg: #fee2e2;          /* Light red background */
--error-text: #991b1b;        /* Dark red text (WCAG AA: 7.0:1) */
--error-border: #dc2626;      /* Error border */
            
--info: #0284c7;               /* Blue - WCAG AA on white (3.2:1) */
--info-bg: #dbeafe;           /* Light blue background */
--info-text: #0c4a6e;         /* Dark blue text (WCAG AA: 7.8:1) */
--info-border: #3b82f6;       /* Info border */
            
/* Apple HIG: Interactive states with proper contrast */
--link: #2563eb;              /* Link color (WCAG AA: 4.6:1 on white) */
--link-hover: #1d4ed8;        /* Link hover (WCAG AA: 5.8:1) */
--link-visited: #7c3aed;       /* Visited link (WCAG AA: 4.7:1) */
            
/* Apple HIG: Focus indicators */
--focus-ring: #2563eb;        /* Focus ring color */
--focus-ring-offset: 2px;     /* Focus ring offset */
--heading-font: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--body-font: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--heading-weight: 700;
--body-weight: 400;
/* Typography hierarchy */
--text-title-size: 1.5rem;
--text-title-weight: 700;
--text-headline-size: 1.25rem;
--text-headline-weight: 600;
--text-body-size: 1rem;
--text-caption-size: 0.875rem;
            
/* Apple HIG: Spacing System (8px base unit) */
--space-xs: 0.25rem;   /* 4px */
--space-sm: 0.5rem;     /* 8px */
--space-md: 1rem;       /* 16px */
--space-lg: 1.5rem;     /* 24px */
--space-xl: 2rem;       /* 32px */
--space-2xl: 3rem;      /* 48px */
--space-3xl: 4rem;      /* 64px */
            
/* Apple HIG: Elevation System (for depth) */
--elevation-0: none;
--elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
--elevation-2: 0 3px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
--elevation-3: 0 10px 20px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
--elevation-4: 0 15px 30px rgba(0, 0, 0, 0.12), 0 5px 10px rgba(0, 0, 0, 0.08);
            
/* Apple HIG: Motion (respects prefers-reduced-motion) */
--motion-fast: 0.15s;
--motion-normal: 0.25s;
--motion-slow: 0.35s;
--motion-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
--motion-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
--motion-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
            
/* Apple HIG: Border Radius */
--radius-sm: 0.375rem;  /* 6px */
--radius-md: 0.5rem;     /* 8px */
--radius-lg: 0.75rem;    /* 12px */
--radius-xl: 1rem;       /* 16px */
--radius-full: 9999px;
}
        
/* Dark Mode Variables - Refined for accessibility and aesthetics */
:root[data-theme="dark"] {
/* Primary colors - lighter for better visibility on dark backgrounds */
--primary: #5a8fc7;              /* Lighter blue for better contrast */
--primary-dark: #4a7fb7;        /* Slightly darker primary */
--primary-light: #6a9fd7;       /* Light primary variant */
--secondary: #9bb0d4;           /* Lighter secondary */
--accent: #e5c158;              /* Brighter accent for visibility */
            
/* Dark mode text colors - optimized for WCAG AA/AAA contrast on dark backgrounds */
--text: #ffffff;                 /* Pure white for maximum contrast (WCAG AAA: 21:1 on #1d1d1f) */
--text-secondary: #e5e5e7;      /* Light gray for secondary text (WCAG AA: 12.6:1) */
--text-light: #b8b8ba;         /* Medium gray for light text (WCAG AA: 7.1:1) */
--text-disabled: #8e8e93;        /* Disabled text (WCAG AA: 4.5:1) */
            
/* Dark mode background colors - refined Apple-style dark mode */
--bg: #1d1d1f;                  /* Slightly lighter than pure black for reduced eye strain */
--bg-alt: #2d2d30;              /* Secondary background (cards, panels) */
--bg-hover: #3a3a3d;            /* Hover state background */
--card: #2d2d30;                /* Card background - distinct from main bg */
--border: #48484a;              /* Visible borders with good contrast */
--border-light: #3a3a3d;        /* Lighter borders for subtle separation */
            
/* Dark mode semantic colors - optimized for dark backgrounds */
--success: #34c759;             /* Apple System Green - brighter for visibility */
--success-bg: rgba(52, 199, 89, 0.15);  /* Subtle green background */
--success-text: #34c759;         /* Green text */
--success-border: #34c759;      /* Green border */
            
--warning: #ff9500;              /* Apple System Orange - brighter */
--warning-bg: rgba(255, 149, 0, 0.15);  /* Subtle orange background */
--warning-text: #ff9500;        /* Orange text */
--warning-border: #ff9500;      /* Orange border */
            
--error: #ff3b30;               /* Apple System Red - brighter */
--error-bg: rgba(255, 59, 48, 0.15);    /* Subtle red background */
--error-text: #ff3b30;          /* Red text */
--error-border: #ff3b30;        /* Red border */
            
--info: #007aff;                 /* Apple System Blue - brighter */
--info-bg: rgba(0, 122, 255, 0.15);   /* Subtle blue background */
--info-text: #007aff;           /* Blue text */
--info-border: #007aff;         /* Blue border */
            
/* Dark mode interactive states - optimized for visibility */
--link: #64b5f6;                /* Light blue for links */
--link-hover: #90caf9;          /* Lighter blue on hover */
--link-visited: #ba68c8;        /* Purple for visited links */
            
/* Dark mode focus indicators */
--focus-ring: #007aff;           /* Blue focus ring */
            
/* Dark mode elevation adjustments - lighter shadows for dark backgrounds */
--elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--elevation-2: 0 3px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
--elevation-3: 0 10px 20px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.4);
--elevation-4: 0 15px 30px rgba(0, 0, 0, 0.6), 0 5px 10px rgba(0, 0, 0, 0.5);
}
        
/* Dark mode specific overrides for better contrast and aesthetics */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
background: var(--card);
color: var(--text);
border-color: var(--border);
}
        
:root[data-theme="dark"] input[type="text"]:focus,
:root[data-theme="dark"] input[type="email"]:focus,
:root[data-theme="dark"] input[type="password"]:focus,
:root[data-theme="dark"] input[type="number"]:focus,
:root[data-theme="dark"] input[type="url"]:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
border-color: var(--primary);
background: var(--card);
}
        
/* Dark mode tab hover states */
:root[data-theme="dark"] .analytics-tab:hover,
:root[data-theme="dark"] .settings-tab:hover,
:root[data-theme="dark"] .support-tab:hover,
:root[data-theme="dark"] .instructor-dashboard-tab:hover {
background: rgba(255, 255, 255, 0.08);
}
        
:root[data-theme="dark"] .analytics-tab-active,
:root[data-theme="dark"] .settings-tab-active,
:root[data-theme="dark"] .support-tab-active,
:root[data-theme="dark"] .instructor-dashboard-tab-active {
background: rgba(90, 143, 199, 0.15); /* Primary color with transparency */
}
        
/* Dark mode card hover */
:root[data-theme="dark"] .card:hover {
border-color: rgba(90, 143, 199, 0.3); /* Primary color border */
}
        
/* Dark mode dropdown hover */
:root[data-theme="dark"] .dropdown-item:hover {
background: var(--bg-hover);
}
        
/* Dark mode code blocks */
:root[data-theme="dark"] code {
background: var(--bg-alt);
color: var(--text);
border: 1px solid var(--border);
}
        
/* Dark mode header adjustments */
:root[data-theme="dark"] header {
border-bottom: 1px solid var(--border);
}
        
/* Option 7 Dark Theme specific overrides - fixes glare and contrast issues */
.theme-option7-dark .data-table tbody tr {
background: var(--card) !important;
color: var(--text) !important;
}
        
.theme-option7-dark .data-table tbody tr:hover {
background: var(--bg-hover) !important;
}
        
.theme-option7-dark .data-table td {
color: var(--text) !important;
background: transparent !important;
}
        
/* Fix any white backgrounds that cause glare */
.theme-option7-dark .card,
.theme-option7-dark .class-card,
.theme-option7-dark .kpi-card,
.theme-option7-dark .chart-card {
background: var(--card) !important;
color: var(--text) !important;
}
        
/* Fix search inputs and form elements */
.theme-option7-dark input[type="text"],
.theme-option7-dark input[type="email"],
.theme-option7-dark input[type="password"],
.theme-option7-dark input[type="search"],
.theme-option7-dark textarea,
.theme-option7-dark select {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
        
/* Fix filter controls and panels */
.theme-option7-dark .filter-controls {
background: var(--bg-alt) !important;
}
        
/* Fix chart table headers */
.theme-option7-dark .chart-card .data-table th {
background: var(--bg-alt) !important;
color: var(--text) !important;
}
        
/* Ensure table headers maintain contrast */
.theme-option7-dark .data-table thead {
background: var(--primary) !important;
color: white !important;
}
        
/* Fix any elements with hardcoded white backgrounds */
.theme-option7-dark [style*="background: white"],
.theme-option7-dark [style*="background: #fff"],
.theme-option7-dark [style*="background: #ffffff"] {
background: var(--card) !important;
}
        
/* Ensure readable text in all contexts */
.theme-option7-dark .text-light,
.theme-option7-dark .text-secondary {
color: var(--text-light) !important;
}
        
/* Apple HIG: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
        
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
        
/* Targeted approach: Only force normal weight on text content elements */
/* This prevents custom fonts from appearing bold while preserving button styles */
p, span, a:not(.button):not(.btn):not(.nav-link),
li, td, label:not([for]), 
.class-card, .student-card, .eval-card,
.class-meta, .class-stats, .stat-label,
textarea, input[type="text"], input[type="email"], input[type="password"], select {
font-weight: 400 !important;
font-style: normal !important;
}
        
/* Explicitly allow bold for semantic elements */
h1, h2, h3, h4, h5, h6,
strong, b, .font-bold,
th {
font-weight: 700 !important;
}
        
/* Explicitly allow italic for semantic elements */
em, i, .font-italic {
font-style: italic !important;
}
        
/* Preserve button and UI element weights (semi-bold for clarity) */
button, .btn, .button,
input[type="button"], input[type="submit"],
.nav-link,
.card-header,
.step-label.active {
font-weight: 600 !important;
}
        
body {
font-family: var(--body-font);
font-weight: 400; /* Always normal weight */
font-style: normal; /* Always normal style */
background: var(--bg);
color: var(--text);
line-height: 1.47059; /* Apple's standard line-height */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em; /* Subtle letter-spacing for refinement */
}
        
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
font-weight: 700; /* Always bold for headings */
font-style: normal; /* Always normal style */
color: var(--primary);
letter-spacing: -0.02em; /* Tighter letter-spacing for headings */
line-height: 1.2;
}
        
/* Typography hierarchy (Apple HIG–aligned) — single source of truth */
.text-title { font-size: var(--text-title-size); font-weight: var(--text-title-weight); line-height: 1.3; color: var(--text); }
.text-headline { font-size: var(--text-headline-size); font-weight: var(--text-headline-weight); line-height: 1.35; color: var(--text); }
.text-body { font-size: var(--text-body-size); font-weight: 400; line-height: 1.6; color: var(--text); }
.text-body-secondary { font-size: 0.9375rem; font-weight: 400; color: var(--text-secondary); line-height: 1.5; }
.text-caption { font-size: var(--text-caption-size); font-weight: 400; color: var(--text-light); line-height: 1.4; }
/* Apply hierarchy to components */
.card-header, .dashboard-shell-title, .modal-box h3, .class-header {
font-size: var(--text-headline-size); font-weight: var(--text-headline-weight); line-height: 1.35; font-family: var(--heading-font);
}
.card-header { 
color: var(--primary); 
margin-bottom: var(--space-lg); 
border-bottom: 1px solid var(--border); /* Lighter border like landing page */
padding-bottom: var(--space-md); 
letter-spacing: -0.01em; /* Refined typography */
}
.modal-box h3 { margin: 0 0 0.75rem 0; color: var(--primary); }
.class-header { color: var(--primary); margin-bottom: var(--space-sm); }
.dashboard-shell-title { margin-bottom: 0.25rem; color: var(--text); }
.dashboard-shell-subtitle, .modal-box p, .empty-state .empty-state-desc, .kpi-card .kpi-title, .chart-card .chart-subtitle, .chart-card .chart-description {
font-size: var(--text-caption-size); font-weight: 400; color: var(--text-light); line-height: 1.4;
}
.dashboard-shell-subtitle { margin-bottom: var(--space-lg); }
.modal-box p { margin: 0 0 var(--space-md) 0; color: var(--text-light); line-height: 1.5; }
.empty-state .empty-state-title { font-size: var(--text-headline-size); font-weight: var(--text-headline-weight); margin-bottom: 0.35rem; color: var(--text); line-height: 1.35; }
.stat-value { font-size: var(--text-title-size); font-weight: var(--text-title-weight); color: var(--primary); }
.stat-label, .kpi-card .kpi-subtext, .kpi-card .kpi-footer, .chart-card .chart-footer { font-size: var(--text-caption-size); font-weight: 400; color: var(--text-light); line-height: 1.4; }
.class-meta { font-size: var(--text-caption-size); font-weight: 400; color: var(--text-light); line-height: 1.5; margin-bottom: var(--space-md); }
        
.container {
max-width: 980px; /* Match landing page max-width for consistency */
margin: 0 auto;
padding: 0 22px; /* Match landing page padding */
/* Safe area: respect notch/Dynamic Island on side-mounted phones */
padding-left: max(22px, env(safe-area-inset-left));
padding-right: max(22px, env(safe-area-inset-right));
}
        
@media (max-width: 768px) {
.container {
padding: 0 16px;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}

/* Prevent horizontal overflow on mobile */
body, html {
overflow-x: hidden;
max-width: 100vw;
}

#mainApp, main#main-content {
max-width: 100vw;
overflow-x: hidden;
}

/* Ensure all table containers allow horizontal scroll on mobile */
[style*="overflow-x: auto"],
.data-table,
table {
max-width: 100%;
}

/* Make sure card containers don't cause overflow */
.card, .section {
max-width: 100%;
overflow-x: hidden;
}

/* Ensure class detail content is scrollable */
#classDetailContent {
max-width: 100%;
overflow-x: hidden;
}

/* Student table and other wide tables should scroll horizontally */
#classDetailContent > div[style*="overflow"] {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
}
        
/* Remove all spacing between header and class detail section */
header {
margin-bottom: 0 !important;
}
        
main#main-content {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: var(--space-2xl); /* Generous bottom padding like landing page */
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
        
/* Section spacing - match landing page generous spacing */
.section {
padding: var(--space-2xl) 0;
}
        
header + main#main-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
        
#classDetailSection {
margin-top: 0 !important;
padding-top: 0 !important;
}
        
#mainApp > #classDetailSection {
margin-top: 0 !important;
padding-top: 0 !important;
}
        
#mainApp > main#main-content > #classDetailSection {
margin-top: 0 !important;
padding-top: 0 !important;
}
        
/* Header - Clean, professional dark header */
header {
font-family: var(--body-font);
background: var(--primary-dark);
color: white;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.08); /* Refined shadow */
margin-bottom: 0 !important;
}
        
.header-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 22px;
height: 56px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
width: 100%;
}
        
/* Left section: Logo + Navigation */
.header-left {
display: flex;
align-items: center;
gap: 24px;
flex: 1;
min-width: 0;
}
        
/* Navigation on left side */
.primary-nav {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
}
        
/* Right section: Search and Account menu */
.header-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
        
/* Mobile menu button - hidden on desktop */
.mobile-menu-button {
display: none;
}
        
.logo-section {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
min-width: 0; /* Allow text truncation */
}
        
.logo {
width: 32px;
height: 32px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.8rem;
color: var(--primary);
flex-shrink: 0; /* Prevent compression */
}
        
.logo img {
width: 100%;
height: 100%;
object-fit: contain; /* Scale to fit without cropping */
object-position: center;
border-radius: 50%;
padding: 12%; /* Add padding so logo doesn't touch edges */
}
        
/* SpeechGradebook logo styling - no filters needed, logos are pre-designed for their backgrounds */
.logo img[src*="speechgradebook-logo"],
.logo img[src*="speechgradebook-logo"],
#appLogo img[src*="speechgradebook-logo"],
#appLogo img[src*="speechgradebook-logo"],
.auth-logo img[src*="speechgradebook-logo"],
.auth-logo img[src*="speechgradebook-logo"] {
filter: none; /* Logos are designed for their specific backgrounds */
}
        
/* Header logo circle: always pure white on account pages (no yellow/theme tint) */
header .logo,
header #appLogo {
position: relative;
background: #ffffff !important;
background-color: #ffffff !important;
}
        
/* Dark mode header logo - keep white background */
:root[data-theme="dark"] header .logo,
:root[data-theme="dark"] header #appLogo,
.theme-option7-dark header .logo,
.theme-option7-dark header #appLogo {
background: #ffffff !important;
background-color: #ffffff !important;
}
        
header #appLogo img {
position: relative;
z-index: 0;
}
        
.app-title h1 {
font-family: var(--heading-font);
font-weight: 600;
color: white;
font-size: 21px;
letter-spacing: -0.01em;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
        
.app-title {
min-width: 0; /* Allow text truncation */
flex: 0 1 auto;
}
        
.tagline {
font-size: 0.9rem;
opacity: 0.9;
}
        
/* Navigation - Apple HIG: Clean, spacious design with better hierarchy */
/* Primary Navigation: Core workflows */
nav.primary-nav {
font-family: var(--body-font);
display: flex;
gap: var(--space-md);
align-items: center;
flex-wrap: wrap;
flex-shrink: 0;
}
        
/* Utility Navigation: Search and Account */
.utility-nav {
display: flex;
align-items: center;
gap: var(--space-md);
flex-shrink: 0;
}
        
.nav-link {
color: white;
text-decoration: none;
padding: 8px 16px;
border-radius: 980px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
font-size: 14px;
font-weight: 400;
white-space: nowrap;
position: relative;
flex-shrink: 1;
min-width: 0;
max-width: 100%;
overflow: hidden;
font-family: var(--body-font);
}
        
/* Responsive header max-width */
@media (max-width: 1440px) {
.header-content {
max-width: 100%;
padding: 0 22px;
}
}

/* On tablet/smaller desktop, show both nav items consistently */
/* Option 1: Show both with full text (if space allows) */
@media (max-width: 1200px) and (min-width: 900px) {
.header-content {
padding: 0 22px;
}
.nav-link {
padding: 8px 14px;
font-size: 13px;
}
}
        
/* Option 2: Show both as icons only on smaller tablets (consistent behavior) */
@media (max-width: 900px) and (min-width: 769px) {
.nav-link {
padding: 8px 10px;
}
/* Hide text for BOTH nav items consistently */
.nav-link .icon-with-text {
font-size: 0;
line-height: 0;
}
/* Restore icon size for both */
.nav-link .icon-with-text i {
font-size: 16px;
line-height: 1;
margin-right: 0;
vertical-align: middle;
}
.primary-nav {
gap: 2px;
}
.header-left {
gap: 12px;
}
.app-title h1 {
font-size: 18px;
}
}
        
/* Account Dropdown */
.account-dropdown-wrapper {
position: relative;
}
        
.account-dropdown-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
background: transparent;
border: none;
color: white;
cursor: pointer;
border-radius: var(--radius-md);
transition: all var(--motion-normal) var(--motion-ease);
flex-shrink: 0;
}
        
.account-dropdown-trigger:hover {
background: rgba(255,255,255,0.12);
}
        
.account-dropdown-trigger:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
        
.account-dropdown-trigger[aria-expanded="true"] {
background: rgba(255,255,255,0.18);
}
        
.account-icon {
width: 1.25rem;
height: 1.25rem;
}
        
.user-display-name {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
        
.account-dropdown-menu {
position: absolute;
top: calc(100% + var(--space-xs));
right: 0;
min-width: 220px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--elevation-3);
z-index: 1000;
padding: var(--space-xs) 0;
margin-top: var(--space-xs);
}
        
.account-dropdown-menu.hidden {
display: none;
}
        
.dropdown-header {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-xs);
}
        
.dropdown-user-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
display: block;
}
        
.dropdown-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
color: var(--text);
text-decoration: none;
font-size: 0.9375rem;
transition: background var(--motion-fast) var(--motion-ease);
cursor: pointer;
}
        
.dropdown-item:hover {
background: var(--bg-alt);
}
        
.dropdown-item i {
width: 1rem;
height: 1rem;
color: var(--text-light);
}
        
/* Logout item - ensure dark text for visibility */
.dropdown-item-logout {
color: var(--text) !important;
font-weight: 500;
}
        
.dropdown-item-logout i {
color: var(--text) !important;
}
        
.dropdown-divider {
height: 1px;
background: var(--border);
margin: var(--space-xs) 0;
}
        
/* Evaluation actions dropdown */
.eval-actions-dropdown {
position: relative;
}
        
.eval-actions-menu button:hover {
background: var(--bg-alt) !important;
}
        
.eval-actions-menu button:focus {
outline: 2px solid var(--focus-ring);
outline-offset: -2px;
}
        
/* Rubric actions dropdown */
.rubric-actions-dropdown {
position: relative;
}
        
/* Apple HIG compliant menu styles */
.rubric-actions-menu,
.evaluation-actions-menu,
.student-actions-menu {
position: fixed;
background: white;
border: 1px solid var(--border);
border-radius: 8px; /* Apple's standard 8px radius */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.08); /* Apple-style shadow */
z-index: 99999;
min-width: 180px;
padding: 8px 0; /* Apple's 8pt grid spacing */
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}
        
.rubric-actions-menu.hidden,
.evaluation-actions-menu.hidden,
.student-actions-menu.hidden {
display: none !important;
visibility: hidden !important;
}
        
.rubric-actions-menu button,
.evaluation-actions-menu button,
.student-actions-menu button {
width: 100%;
text-align: left;
padding: 8px 16px; /* Apple's 8pt grid: 8px vertical, 16px horizontal */
border: none;
background: none;
cursor: pointer;
font-size: 14px; /* Apple's standard menu font size */
font-weight: 400;
color: var(--text);
display: flex;
align-items: center;
gap: 12px; /* 12px gap between icon and text */
transition: background-color 0.15s ease;
min-height: 44px; /* Apple's minimum touch target */
box-sizing: border-box;
}
        
.rubric-actions-menu button:not(:first-child),
.evaluation-actions-menu button:not(:first-child),
.student-actions-menu button:not(:first-child) {
border-top: 0.5px solid rgba(0, 0, 0, 0.1); /* Subtle separator */
}
        
.rubric-actions-menu button:hover,
.evaluation-actions-menu button:hover,
.student-actions-menu button:hover {
background: var(--bg-alt) !important;
}
        
.rubric-actions-menu button.menu-item-active,
.evaluation-actions-menu button.menu-item-active,
.student-actions-menu button.menu-item-active {
background: var(--bg-alt) !important;
}
        
.rubric-actions-menu button:focus,
.evaluation-actions-menu button:focus,
.student-actions-menu button:focus {
outline: 2px solid var(--focus-ring);
outline-offset: -2px;
}
        
.rubric-actions-menu button[aria-disabled="true"],
.evaluation-actions-menu button[aria-disabled="true"],
.student-actions-menu button[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
        
.rubric-actions-menu button[aria-disabled="true"]:hover,
.evaluation-actions-menu button[aria-disabled="true"]:hover,
.student-actions-menu button[aria-disabled="true"]:hover {
background: transparent !important;
}
        
/* Menu item icons */
.rubric-actions-menu button i,
.evaluation-actions-menu button i,
.student-actions-menu button i {
width: 16px;
height: 16px;
flex-shrink: 0;
}
        
/* Menu separators for grouping */
.rubric-actions-menu .menu-separator,
.evaluation-actions-menu .menu-separator,
.student-actions-menu .menu-separator {
height: 0.5px;
background: rgba(0, 0, 0, 0.1);
margin: 4px 0;
border: none;
padding: 0;
}
        
/* Enhanced separator for destructive action groups */
.rubric-actions-menu button[data-destructive="true"],
.evaluation-actions-menu button[data-destructive="true"],
.student-actions-menu button[data-destructive="true"] {
color: var(--error);
}
        
.rubric-actions-menu button[data-destructive="true"]:hover,
.evaluation-actions-menu button[data-destructive="true"]:hover,
.student-actions-menu button[data-destructive="true"]:hover {
background: rgba(239, 68, 68, 0.1) !important;
}
        
#userDisplay {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
        
.nav-link:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
        
.nav-link:hover {
background: rgba(255,255,255,0.12);
}
        
.nav-link.active {
background: rgba(255,255,255,0.18);
font-weight: 600;
}
        
/* Reduce icon size in nav for cleaner look */
.nav-link .icon-with-text i {
width: 1rem;
height: 1rem;
}
        
.nav-link .icon-with-text {
gap: var(--space-sm);
}
        
/* Main Content - Apple HIG: Generous spacing */
main {
font-family: var(--body-font);
padding: var(--space-xl) 0;
min-height: calc(100vh - 200px);
}
        
/* Remove top padding from main when class detail section is active */
main#main-content:has(#classDetailSection.active) {
padding-top: 0 !important;
margin-top: 0 !important;
min-height: 0 !important;
height: auto !important;
}
        
/* Also target directly - more specific */
#classDetailSection.active {
margin-top: 0 !important;
padding-top: 0 !important;
position: relative !important;
top: 0 !important;
}
        
/* Remove top padding from main container when showing class detail */
body:has(#classDetailSection.active) main#main-content,
#mainApp:has(#classDetailSection.active) main#main-content {
padding-top: 0 !important;
margin-top: 0 !important;
min-height: 0 !important;
height: auto !important;
}
        
/* Force remove main padding when class detail is shown - highest specificity */
#mainApp main#main-content:has(#classDetailSection.active),
#mainApp:has(#classDetailSection.active) main#main-content {
padding-top: 0 !important;
margin-top: 0 !important;
min-height: 0 !important;
height: auto !important;
}
        
/* Hide all other sections when classDetailSection is active */
main#main-content:has(#classDetailSection.active) > .section:not(#classDetailSection) {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
        
.section {
display: none;
margin-top: 0;
padding-top: 0;
}
        
.section.active {
display: block;
margin-top: 0;
padding-top: 0;
}
        
#classDetailSection {
margin-top: 0 !important;
padding-top: 0 !important;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
        
/* Remove all top spacing from card in class detail section */
#classDetailSection .card {
margin-top: 0 !important;
padding-top: 0 !important;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
        
/* Minimize top padding on card-header in class detail section */
#classDetailSection .card-header {
padding-top: 0.5rem !important;
margin-top: 0 !important;
}
        
/* Cards - Apple HIG: Proper spacing and elevation with enhanced visual interest */
.card {
background: var(--card);
border-radius: 12px; /* Match landing page refined radius */
padding: var(--space-xl);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04); /* Refined Apple-style shadow */
margin-bottom: var(--space-xl);
border: 1px solid var(--border);
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Apple's standard easing */
position: relative;
overflow: hidden;
}
        
.card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}

/* Apple HIG: 16pt horizontal margin on iPhone */
@media (max-width: 480px) {
.card {
padding: 1rem;
border-radius: var(--radius-md);
}
}
        
#resultsContent {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: auto;
overflow-y: visible;
}

/* ── Editing mode: card allows overflow so sticky works ── */
.card.editing-mode {
overflow: visible !important;
}
.card.editing-mode #resultsContent {
overflow: visible !important;
}

/* Sticky video+timeline block — in-flow position */
.sticky-eval-top {
position: relative;
z-index: 100;
background: var(--card);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
margin-bottom: 16px;
transition: box-shadow 0.2s;
}
/* When floating: fixed to top-center of viewport */
.sticky-eval-top.is-floating {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: min(680px, calc(100vw - 32px));
z-index: 1000;
border-radius: 14px;
box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
/* Placeholder keeps layout space while wrapper is floating */
#sticky-eval-placeholder {
display: none;
}
#sticky-eval-placeholder.active {
display: block;
}

/* ── Timeline scrubber ── */
.timeline-scrubber {
position: relative;
height: 36px;
background: var(--bg-alt);
border-radius: 18px;
margin: 12px 0 0;
cursor: pointer;
}
.timeline-scrubber-track {
position: absolute;
top: 50%;
left: 12px;
right: 12px;
height: 4px;
background: var(--border);
border-radius: 2px;
transform: translateY(-50%);
}
.timeline-scrubber-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: var(--accent);
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
}
.timeline-pin {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 28px;
height: 28px;
border-radius: 6px;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: #fff;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.20);
transition: transform 0.15s, box-shadow 0.15s;
z-index: 2;
}
.timeline-pin:hover, .timeline-pin.active {
transform: translate(-50%, -60%) scale(1.15);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.timeline-pin-stem {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 8px;
background: inherit;
border-radius: 0 0 1px 1px;
}
.timeline-pin-detail {
display: none;
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
min-width: 260px;
max-width: 340px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 200;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}
.timeline-pin-detail.open {
display: block;
}
.timeline-add-btn {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 8px;
padding: 6px 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
transition: background 0.15s;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
white-space: nowrap;
}
.timeline-add-btn:hover {
background: rgba(74,111,165,0.08);
}

/* Grade circle radio buttons — Apple HIG compliant */
.grade-circle {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
border: 1.5px solid var(--border);
background: var(--card);
color: var(--text);
transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
user-select: none;
cursor: pointer;
}
.grade-circle:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--bg-alt);
transform: scale(1.08);
}
/* Active state — applied via JS since CSS :checked + sibling can't span table cells */
.grade-circle.selected-A { background: #34C759; border-color: #34C759; color: white; }
.grade-circle.selected-B { background: #a3d977; border-color: #a3d977; color: white; }
.grade-circle.selected-C { background: #FF9500; border-color: #FF9500; color: white; }
.grade-circle.selected-D { background: #FF6430; border-color: #FF6430; color: white; }
.grade-circle.selected-F { background: #FF3B30; border-color: #FF3B30; color: white; }
        
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);
opacity: 0;
transition: opacity var(--motion-normal) var(--motion-ease);
}
        
.card:hover {
box-shadow: var(--elevation-3);
border-color: rgba(30, 58, 95, 0.15);
/* Removed transform to prevent position: fixed containing block issues */
}
        
.card:hover::before {
opacity: 1;
}
        
.card-header {
font-family: var(--heading-font);
font-size: var(--text-headline-size);
font-weight: var(--text-headline-weight);
line-height: 1.35;
margin-bottom: 1.5rem;
color: var(--primary);
border-bottom: 2px solid var(--border);
padding-bottom: 1rem;
}
.card-header.text-title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
        
/* Icon button for card headers - Apple HIG compliant */
.icon-button-add {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.icon-button-add:active {
background: var(--bg-alt) !important;
color: var(--primary) !important;
transform: scale(0.95);
}
@media (prefers-reduced-motion: reduce) {
.icon-button-add {
transition: none;
}
}
        
/* Analytics tabs: affordance + responsive */
.analytics-tablist {
flex-wrap: nowrap;
min-width: 0;
-webkit-overflow-scrolling: touch;
}
.analytics-tab {
padding: 0.75rem 1.5rem;
min-height: 44px;
border: none;
background: none;
cursor: pointer;
border-bottom: 3px solid transparent;
color: var(--text-light);
font-weight: 400;
font-size: 1rem;
white-space: nowrap;
flex-shrink: 0;
border-radius: 0.25rem 0.25rem 0 0;
transition: background 0.2s, color 0.2s, border-color 0.2s;
position: relative;
box-sizing: border-box;
}
.analytics-tab:hover {
color: var(--text);
background: rgba(0,0,0,0.03);
}
.analytics-tab:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.analytics-tab-active:focus-visible {
outline: none;
}
.analytics-tab-active {
border: none !important;
border-bottom: 3px solid var(--primary) !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
outline: none !important;
box-shadow: none !important;
color: var(--primary);
font-weight: 600;
background: rgba(30, 58, 95, 0.06);
}
.analytics-tab-active:focus,
.analytics-tab-active:focus-visible,
.analytics-tab-active:active {
outline: none !important;
box-shadow: none !important;
border: none !important;
border-bottom: 3px solid var(--primary) !important;
}
        
/* Business Dashboard - Segmented Control (Apple HIG pattern) */
.biz-seg-wrap {
margin-bottom: 1.5rem;
}
.biz-seg-control {
display: inline-flex;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 0.25rem;
gap: 0;
flex-wrap: wrap;
}
.biz-seg-btn {
padding: 0.5rem 1rem;
border: none;
background: transparent;
color: var(--text);
font-size: 0.875rem;
font-weight: 500;
border-radius: 0;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
position: relative;
}

/* First button: rounded left corners */
.biz-seg-btn:first-child {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}

/* Last button: rounded right corners */
.biz-seg-btn:last-child {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}

/* Only one button: all corners rounded */
.biz-seg-btn:only-child {
border-radius: 0.375rem;
}

.biz-seg-btn:hover {
background: rgba(0, 0, 0, 0.05);
}
.biz-seg-btn.active {
background: var(--primary);
color: white;
font-weight: 600;
}
.biz-seg-btn i {
width: 1rem;
height: 1rem;
}
.biz-sub-panel {
display: none;
}
.biz-sub-panel.active {
display: block;
}
        
/* Business Dashboard - KPI Strip */
.biz-kpi-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
.biz-kpi-strip {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.biz-kpi-strip {
grid-template-columns: 1fr;
}
}
.biz-kpi-card {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
}
.biz-kpi-card:hover {
background: var(--bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.biz-kpi-card .biz-kpi-value {
font-size: 2rem;
font-weight: 700;
color: var(--text);
margin: 0.5rem 0;
line-height: 1.2;
}
.biz-kpi-card .biz-kpi-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.25rem;
}
.biz-kpi-card .biz-kpi-sub {
font-size: 0.75rem;
color: var(--text-light);
margin-top: 0.5rem;
}
.biz-trend-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
margin-top: 0.5rem;
}
.biz-trend-chip.positive {
background: rgba(34, 197, 94, 0.1);
color: var(--success-text, #065f46);
}
.biz-trend-chip.negative {
background: rgba(239, 68, 68, 0.1);
color: var(--error-text, #dc2626);
}
.biz-trend-chip.neutral {
background: var(--bg-alt);
color: var(--text-light);
}
        
/* Business Dashboard - Overview Bottom Section */
.biz-overview-bottom {
display: grid;
grid-template-columns: 1fr 300px;
gap: 1.5rem;
}
@media (max-width: 768px) {
.biz-overview-bottom {
grid-template-columns: 1fr;
}
.biz-seg-control {
width: 100%;
justify-content: center;
}
.biz-seg-btn {
flex: 1;
min-width: 0;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
}
.biz-section-hdr {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.biz-section-hdr h3 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
}
.biz-refresh-btn {
background: transparent;
border: none;
color: var(--primary);
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
transition: background 0.2s;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.biz-refresh-btn:hover {
background: var(--bg-alt);
}
.biz-rank-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-bottom: 1px solid var(--border);
}
.biz-rank-row:last-child {
border-bottom: none;
}
.biz-rank-row:hover {
background: var(--bg-alt);
}
.biz-rank-medal {
font-size: 1.5rem;
flex-shrink: 0;
}
.biz-alert-item {
padding: 0.75rem;
border-left: 3px solid;
border-radius: 0.25rem;
margin-bottom: 0.75rem;
background: var(--bg-alt);
}
.biz-alert-item.warning {
border-left-color: var(--warning, #f59e0b);
}
.biz-alert-item.info {
border-left-color: var(--primary);
}
.biz-alert-item .biz-alert-msg {
font-size: 0.875rem;
color: var(--text);
margin: 0;
}
.biz-alert-item .biz-alert-action {
margin-top: 0.5rem;
font-size: 0.75rem;
}
.biz-alert-item .biz-alert-action a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.biz-alert-item .biz-alert-action a:hover {
text-decoration: underline;
}
        
/* Business Dashboard - Timestamp */
.biz-timestamp {
font-size: 0.75rem;
color: var(--text-light);
text-align: right;
margin-top: 0.5rem;
}
.biz-timestamp a {
color: var(--primary);
text-decoration: none;
margin-left: 0.5rem;
}
.biz-timestamp a:hover {
text-decoration: underline;
}
        
/* Instructor dashboard top-level tabs (Courses | Rubrics | Course Insights) */
.instructor-dashboard-tablist {
display: flex;
gap: 0.25rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--border);
padding-bottom: 0;
flex-wrap: wrap;
}
.instructor-dashboard-tab {
padding: 0.75rem 1.25rem;
min-height: 44px;
border: none;
background: none;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
color: var(--text-light);
font-weight: 500;
font-size: 1rem;
border-radius: 0.25rem 0.25rem 0 0;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.instructor-dashboard-tab:hover {
color: var(--text);
background: rgba(0,0,0,0.04);
}
.instructor-dashboard-tab-active {
border-bottom-color: var(--primary);
color: var(--primary);
font-weight: 600;
background: rgba(30, 58, 95, 0.06);
}

/* Settings section tabs (General | Consent | Admin) */
.settings-tablist {
display: flex;
gap: 0.25rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--border);
padding-bottom: 0;
flex-wrap: wrap;
}
.settings-tab {
padding: 0.75rem 1.25rem;
min-height: 44px;
border: none;
background: none;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
color: var(--text-light);
font-weight: 500;
font-size: 1rem;
border-radius: 0.25rem 0.25rem 0 0;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.settings-tab:hover {
color: var(--text);
background: rgba(0,0,0,0.04);
}
.settings-tab-active {
border-bottom-color: var(--primary);
color: var(--primary);
font-weight: 600;
}
/* Admin Settings Sidebar Navigation */
.admin-settings-container {
display: grid;
grid-template-columns: 240px 1fr;
gap: 2rem;
min-height: 600px;
}
        
.admin-settings-sidebar {
border-right: 1px solid var(--border);
padding-right: 1.5rem;
position: sticky;
top: 2rem;
align-self: start;
max-height: calc(100vh - 4rem);
overflow-y: auto;
}
        
/* General Settings Sidebar (mirror Admin tab styles) */
.general-settings-container {
display: grid;
grid-template-columns: 240px 1fr;
gap: 2rem;
min-height: 600px;
}
        
.general-settings-sidebar {
border-right: 1px solid var(--border);
padding-right: 1.5rem;
position: sticky;
top: 2rem;
align-self: start;
max-height: calc(100vh - 4rem);
overflow-y: auto;
}
        
.general-settings-sidebar h4 {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-light);
margin-bottom: 1rem;
padding: 0 1rem;
}
        
.general-settings-sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
        
.general-nav-item {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: none;
background: none;
text-align: left;
color: var(--text);
font-size: 0.9375rem;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 0.25rem;
position: relative;
}
        
.general-nav-item:hover {
background: var(--bg-alt);
}
        
.general-nav-item.active {
background: var(--primary);
color: white;
font-weight: 600;
}
        
.general-nav-item.active i {
color: white;
}
        
.general-nav-item i {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
color: var(--text-light);
}
        
.general-nav-item.active i {
color: white;
}
        
.general-settings-content {
overflow-y: auto;
padding-right: 1rem;
}
        
.general-section {
display: none;
}
        
.general-section.active {
display: block;
}
        
.general-section-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
        
.general-section-header h2 {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
        
.general-section-description {
color: var(--text-light);
font-size: 0.9375rem;
margin: 0;
}
        
.general-card {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
        
@media (max-width: 768px) {
.general-settings-container {
grid-template-columns: 1fr;
}
            
.general-settings-sidebar {
border-right: none;
border-bottom: 1px solid var(--border);
padding-bottom: 1rem;
margin-bottom: 1.5rem;
position: static;
max-height: none;
}
            
.general-settings-sidebar ul {
display: flex;
overflow-x: auto;
gap: 0.5rem;
}
            
.general-nav-item {
white-space: nowrap;
flex-shrink: 0;
}
}
        
.admin-settings-sidebar h4 {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-light);
margin-bottom: 1rem;
padding: 0 1rem;
}
        
.admin-settings-sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
        
.admin-nav-item {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: none;
background: none;
text-align: left;
color: var(--text);
font-size: 0.9375rem;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 0.25rem;
position: relative;
}
        
.admin-nav-item:hover {
background: var(--bg-alt);
}
        
.admin-nav-item.active {
background: var(--primary);
color: white;
font-weight: 600;
}
        
.admin-nav-item.active i {
color: white;
}
        
.admin-nav-item i {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
color: var(--text-light);
}
        
.admin-nav-item.active i {
color: white;
}
        
.admin-nav-item .badge {
margin-left: auto;
background: var(--error);
color: white;
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
border-radius: 10px;
font-weight: 600;
min-width: 1.25rem;
text-align: center;
}
        
.admin-nav-item.active .badge {
background: rgba(255, 255, 255, 0.3);
}
        
.admin-settings-content {
overflow-y: auto;
padding-right: 1rem;
}
        
.admin-section {
display: none;
}
        
.admin-section.active {
display: block;
}
        
.admin-section-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
        
.admin-section-header h2 {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
        
.admin-section-description {
color: var(--text-light);
font-size: 0.9375rem;
margin: 0;
}
        
.admin-card {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
        
.admin-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
        
.admin-card h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
}
        
.admin-card p {
color: var(--text-light);
font-size: 0.9rem;
margin: 0 0 1rem 0;
}
        
/* Ensure Save Settings button only appears in General tab */
#saveSettingsButtonContainer {
display: none;
}
        
#settingsTabGeneral[style*="display: block"] #saveSettingsButtonContainer {
display: flex !important;
}
        
/* Hide button when General tab is hidden */
#settingsTabGeneral[style*="display: none"] #saveSettingsButtonContainer,
#settingsTabGeneral:not([style]) #saveSettingsButtonContainer {
display: none !important;
}
        
/* Form Validation Styles */
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
        
.form-group label {
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--text);
font-size: 0.9375rem;
}
        
.form-group label.required::after {
content: " *";
color: var(--error);
font-weight: 600;
}
        
.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
font-size: 1rem;
transition: all 0.2s ease;
background: white;
color: var(--text);
}
        
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
        
.form-group input.invalid,
.form-group select.invalid {
border-color: var(--error);
box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}
        
.form-group input.valid,
.form-group select.valid {
border-color: var(--success);
}
        
.field-error {
display: none;
color: var(--error);
font-size: 0.875rem;
margin-top: 0.25rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
        
.field-error.show {
display: flex;
}
        
.field-error i {
width: 14px;
height: 14px;
flex-shrink: 0;
}
        
.field-hint {
font-size: 0.9rem;
color: var(--text-light);
margin-top: 0.5rem;
}
        
.form-group.optional label::after {
content: " (Optional)";
font-weight: 400;
color: var(--text-light);
font-size: 0.875rem;
}
        
/* Apple HIG: Enhanced select styling for Data Deletion Scope */
#deletionScopeSection select:hover {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
        
#deletionScopeSection select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15);
}
        
#deletionScopeSection select:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-color: var(--primary);
}
        
/* Apple HIG: Visual feedback for grouped settings containers */
#deletionScopeSection > div > div[style*="background: var(--bg-alt)"]:hover {
border-color: var(--primary);
background: rgba(30, 58, 95, 0.02);
}
        
@media (max-width: 768px) {
.admin-settings-container {
grid-template-columns: 1fr;
}
            
.admin-settings-sidebar {
border-right: none;
border-bottom: 1px solid var(--border);
padding-bottom: 1rem;
margin-bottom: 1.5rem;
position: static;
max-height: none;
}
            
.admin-settings-sidebar ul {
display: flex;
overflow-x: auto;
gap: 0.5rem;
}
            
.admin-nav-item {
white-space: nowrap;
flex-shrink: 0;
}
}
        
.settings-section-heading {
font-weight: 700;
margin-bottom: 1rem;
}
.settings-section-subheading {
margin-bottom: 1rem;
color: var(--primary);
}

/* Support section tabs (Getting Started | User Manual | Technical Documentation) */
.support-tablist {
display: flex;
gap: 0.25rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--border);
padding-bottom: 0;
flex-wrap: wrap;
}
.support-tab {
padding: 0.75rem 1.25rem;
min-height: 44px;
border: none;
background: none;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
color: var(--text-light);
font-weight: 500;
font-size: 1rem;
border-radius: 0.25rem 0.25rem 0 0;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.support-tab:hover {
color: var(--text);
background: rgba(0,0,0,0.04);
}
.support-tab-active {
border-bottom-color: var(--primary);
color: var(--primary);
font-weight: 600;
}
.support-tier-badge {
display: inline-block;
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
background: var(--bg-alt);
color: var(--text-light);
margin-left: 0.5rem;
}
.support-doc-panel { display: none; }
.support-doc-panel.active { display: block; }
#helpSection .support-doc-panel h3,
#helpSection .support-doc-panel h3 .icon-with-text {
font-family: var(--heading-font);
font-weight: 700;
font-size: 1.25rem;
color: var(--primary);
}

/* Toast for analytics success */
.analytics-toast {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: white;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 9999;
font-size: 0.9rem;
animation: analyticsToastIn 0.25s ease;
}
.analytics-toast a { color: #fff; text-decoration: underline; }
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
        
@media (prefers-reduced-motion: reduce) {
@keyframes shimmer {
0%, 100% { transform: translateX(0); }
}
}
        
@keyframes analyticsToastIn {
from { opacity: 0; transform: translateX(-50%) translateY(0.5rem); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
        
        
/* Persistent Evaluation Saved Indicator */
/* Student menu inherits from shared menu styles above */
        
.evaluation-saved-indicator {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
padding: 1rem 1.25rem;
border-radius: 0.5rem;
margin-bottom: var(--space-lg);
margin-top: 0;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
animation: evaluationSavedIn 0.3s ease;
position: relative;
z-index: 1;
width: 100%;
box-sizing: border-box;
}
.evaluation-saved-indicator.hidden {
display: none;
}
.evaluation-saved-indicator .icon-with-text {
color: white;
font-weight: 600;
font-size: 1rem;
}
.evaluation-saved-indicator .icon-with-text i {
color: white;
}
.evaluation-saved-dismiss {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 2rem;
height: 2rem;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.2s ease;
flex-shrink: 0;
}
.evaluation-saved-dismiss:hover {
background: rgba(255, 255, 255, 0.3);
}
.evaluation-saved-dismiss i {
width: 1rem;
height: 1rem;
color: white;
}
@keyframes evaluationSavedIn {
from {
opacity: 0;
transform: translateY(-0.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
        
/* Apple HIG: Dropdown animation */
@keyframes dropdownSlideIn {
from {
opacity: 0;
transform: translateY(-0.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
        
@media (prefers-reduced-motion: reduce) {
@keyframes dropdownSlideIn {
from, to {
opacity: 1;
transform: none;
}
}
}

/* Account-wide search dropdown */
.account-search-results {
position: absolute;
top: calc(100% + var(--space-xs));
left: 0;
right: 0;
max-height: 360px;
overflow-y: auto;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--elevation-3);
z-index: 1000;
padding: var(--space-sm) 0;
animation: dropdownSlideIn var(--motion-fast) var(--motion-ease-out);
}
.account-search-results.hidden { display: none !important; }
.account-search-results .search-group-label {
padding: 0.35rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
color: var(--text-light);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--border);
margin-bottom: 0.25rem;
}
.account-search-results .search-result-item {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
text-align: left;
border: none;
background: none;
font-size: 0.9rem;
color: var(--text);
cursor: pointer;
transition: background 0.15s;
}
.account-search-results .search-result-item:hover,
.account-search-results .search-result-item:focus {
background: var(--bg-alt);
outline: none;
}
.account-search-results .search-result-item .search-result-sub {
font-size: 0.8rem;
color: var(--text-light);
margin-top: 0.15rem;
}
.account-search-results .search-no-results {
padding: 1rem 0.75rem;
font-size: 0.9rem;
color: var(--text-light);
}
/* Expandable Search */
.search-wrapper {
position: relative;
display: flex;
align-items: center;
}
        
.search-icon-button {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
background: transparent;
border: none;
color: white;
cursor: pointer;
border-radius: var(--radius-md);
transition: all var(--motion-normal) var(--motion-ease);
flex-shrink: 0;
}
        
.search-icon-button:hover {
background: rgba(255,255,255,0.12);
}
        
.search-icon-button:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
        
.search-icon-button i {
width: 1.25rem;
height: 1.25rem;
}
        
.account-search-wrap {
position: relative;
flex: 1 1 auto;
max-width: 280px;
min-width: 180px;
margin: 0 var(--space-md);
cursor: text;
}
        
.account-search-wrap.search-expandable {
position: absolute;
right: 0;
top: 0;
max-width: 400px;
min-width: 280px;
margin: 0;
opacity: 0;
transform: scaleX(0.8);
transform-origin: right;
pointer-events: none;
transition: opacity var(--motion-normal) var(--motion-ease), 
transform var(--motion-normal) var(--motion-ease);
z-index: 1001;
}
        
.account-search-wrap.search-expandable:not(.hidden) {
opacity: 1;
transform: scaleX(1);
pointer-events: all;
}
.account-search-input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 2px solid var(--border) !important;
border-radius: 0.5rem;
font-size: 0.9rem;
background: var(--card) !important;
color: var(--text) !important;
position: relative;
z-index: 1;
}
.account-search-input::placeholder {
color: var(--text-light) !important;
}
        
/* Theme Customizer (Settings Admin tab) */
        
/* HTML Color Codes–style picker: 2D saturation/lightness + hue strip */
.theme-color-picker-panel {
display: none;
position: fixed;
z-index: 10000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--card);
border: 1px solid var(--border);
border-radius: 0.75rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
padding: 1.25rem;
min-width: 280px;
}
.theme-color-picker-panel.open { display: block; }
.theme-color-picker-panel .picker-2d-wrap {
position: relative;
width: 240px;
height: 160px;
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid var(--border);
cursor: crosshair;
touch-action: none;
}
.theme-color-picker-panel .picker-2d {
width: 100%;
height: 100%;
background-image:
linear-gradient(to bottom, #fff, transparent),
linear-gradient(to top, #000, transparent),
linear-gradient(to right, #808080, var(--picker-hue-color, #f00));
background-size: 100% 100%;
}
.theme-color-picker-panel .picker-2d-marker {
position: absolute;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
pointer-events: none;
}
.theme-color-picker-panel .picker-hue-wrap {
position: relative;
width: 240px;
height: 12px;
margin-top: 0.75rem;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
cursor: pointer;
touch-action: none;
background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.theme-color-picker-panel .picker-hue-marker {
position: absolute;
top: 0;
width: 4px;
height: 100%;
margin-left: -2px;
background: #fff;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
pointer-events: none;
}
.theme-color-picker-panel .picker-codes {
margin-top: 0.75rem;
display: flex;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
}
.theme-color-picker-panel .picker-codes label {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-light);
}
.theme-color-picker-panel .picker-codes input {
padding: 0.35rem 0.5rem;
border: 1px solid var(--border);
border-radius: 0.25rem;
font-size: 0.875rem;
font-family: ui-monospace, monospace;
}
.theme-color-picker-panel .picker-preview {
width: 36px;
height: 36px;
border-radius: 0.375rem;
border: 1px solid var(--border);
flex-shrink: 0;
}
.theme-color-picker-panel .picker-actions {
margin-top: 1rem;
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
.theme-color-picker-panel .picker-backdrop {
position: fixed;
inset: 0;
z-index: -1;
background: rgba(0,0,0,0.35);
}
        
/* Upload Zone */
.upload-zone {
border: 3px dashed var(--border);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
text-align: center;
cursor: pointer;
transition: border-color var(--motion-normal) var(--motion-ease),
background-color var(--motion-normal) var(--motion-ease),
transform var(--motion-fast) var(--motion-ease);
background: var(--bg-alt);
min-height: 2.75rem;  /* Ensure touch target minimum */
}
        
.upload-zone:hover {
border-color: var(--primary);
background: white;
transform: scale(1.01);
}
        
.upload-zone.drag-over {
border-color: var(--primary);
background: rgba(30, 58, 95, 0.05);
transform: scale(1.02);
}
        
.upload-zone:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
        
.upload-icon {
font-size: 3rem;
margin-bottom: var(--space-md);
}
        
.file-info {
background: var(--success);
color: white;
padding: var(--space-md);
border-radius: var(--radius-md);
margin-top: var(--space-md);
display: flex;
justify-content: space-between;
align-items: center;
}
        
/* Forms */
.form-group {
margin-bottom: 1.5rem;
}
        
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text);
}
        
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border); /* Lighter border like landing page */
border-radius: 8px; /* Match landing page radius */
font-size: 1rem;
font-family: var(--body-font);
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Apple easing */
background: var(--card);
}
        
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
        
/* Apple HIG: Enhanced focus states for accessibility */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-color: var(--primary);
}
        
/* Apple HIG: Ensure links have proper contrast and focus states */
a:not(.btn):not(.button):not(.nav-link) {
color: var(--link);
text-decoration: none;
transition: color var(--motion-fast) var(--motion-ease);
}
        
a:not(.btn):not(.button):not(.nav-link):hover {
color: var(--link-hover);
text-decoration: underline;
}
        
a:not(.btn):not(.button):not(.nav-link):visited {
color: var(--link-visited);
}
        
a:not(.btn):not(.button):not(.nav-link):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: 2px;
}
        
textarea {
resize: vertical;
min-height: 100px;
}
        
/* Buttons - Apple HIG: Clear affordances, proper feedback with enhanced visual appeal */
button,
.btn {
background: var(--primary); /* Solid color like landing page */
color: white;
padding: 12px 24px; /* Match landing page button padding */
border: none;
border-radius: 980px; /* Pill shape like landing page */
font-size: 17px; /* Match landing page font size */
font-weight: 400; /* Lighter weight like landing page */
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Apple easing */
display: inline-block;
text-decoration: none;
text-align: center;
box-shadow: 0 2px 8px rgba(30, 58, 95, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.05); /* Refined shadow */
position: relative;
overflow: hidden;
letter-spacing: -0.01em; /* Refined typography */
}
        
button::before,
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
        
button:hover::before,
.btn:hover::before {
left: 100%;
}
        
button:hover,
.btn:hover {
background: var(--primary-dark); /* Darker on hover like landing page */
box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
transform: scale(1.02); /* Subtle scale like landing page */
}
        
button:active,
.btn:active {
filter: brightness(0.95);
box-shadow: var(--elevation-1);
}
        
button:focus-visible,
.btn:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
        
.btn-icon-only {
padding: 0.5rem;
min-width: 2.75rem;
min-height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-icon-only [data-lucide] { width: 1.25em; height: 1.25em; }
        
/* Apple HIG: Button variants with proper contrast */
.btn-secondary {
background: var(--secondary);
color: white;
}
        
.btn-secondary:hover {
background: #4a5b6b;
color: white;
}
        
.btn-success {
background: var(--success);
color: white;
}
        
.btn-success:hover {
background: #047857;
color: white;
}
        
.btn-danger {
background: var(--error);
color: white;
}
        
.btn-danger:hover {
background: #991b1b;
color: white;
}
        
.btn-warning {
background: var(--warning);
color: white;
}
        
.btn-warning:hover {
background: #b45309;
color: white;
}
        
.btn-info {
background: var(--info);
color: white;
}
        
.btn-info:hover {
background: #0369a1;
color: white;
}
        
/* Minimum touch target (Apple HIG: ~44pt) for primary actions */
.btn:not(.btn-small):not(.btn-icon-only) {
min-height: 2.75rem;
min-width: 2.75rem;
padding: 0.5rem 1rem;
}
        
.btn-small {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
        
/* UTK Torch: primary buttons only (exclude tabs) – white bg, orange border, blue text */
html.theme-torch button:not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.settings-tab):not(.support-tab):not(.instructor-dashboard-tab):not(.analytics-tab),
html.theme-torch .btn:not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.settings-tab):not(.support-tab):not(.instructor-dashboard-tab):not(.analytics-tab) {
background: white !important;
color: #1a73c5 !important;
border: 2px solid var(--primary) !important;
}
html.theme-torch button:not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.settings-tab):not(.support-tab):not(.instructor-dashboard-tab):not(.analytics-tab):hover,
html.theme-torch .btn:not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.settings-tab):not(.support-tab):not(.instructor-dashboard-tab):not(.analytics-tab):hover {
background: #FFFBF7 !important;
color: #0d47a1 !important;
border-color: var(--primary-dark) !important;
}
/* UTK Torch: progress step circles – match Torch button style (white bg, orange border, blue number) */
html.theme-torch .step.active .step-circle {
background: white !important;
color: #1a73c5 !important;
border: 2px solid var(--primary) !important;
}
        
/* UTK Torch Theme: tab styling from utk-theme-preview.html (light gray bg, blue when active) */
html.theme-utk-torch .settings-tab,
html.theme-utk-torch .support-tab,
html.theme-utk-torch .instructor-dashboard-tab,
html.theme-utk-torch .analytics-tab {
background: var(--bg-alt, #F0F0F0);
border: 1px solid var(--border);
border-bottom: none;
border-radius: 0.25rem 0.25rem 0 0;
}
html.theme-utk-torch .settings-tab:hover,
html.theme-utk-torch .support-tab:hover,
html.theme-utk-torch .instructor-dashboard-tab:hover,
html.theme-utk-torch .analytics-tab:hover {
color: var(--link-blue, #1a73c5);
background: var(--bg, #FAFAFA);
}
html.theme-utk-torch .settings-tab-active,
html.theme-utk-torch .support-tab-active,
html.theme-utk-torch .instructor-dashboard-tab-active,
html.theme-utk-torch .analytics-tab-active {
background: white;
color: var(--link-blue, #1a73c5);
border: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: 2px solid white !important;
outline: none !important;
box-shadow: none !important;
}
html.theme-utk-torch .analytics-tab-active:focus,
html.theme-utk-torch .analytics-tab-active:focus-visible,
html.theme-utk-torch .analytics-tab-active:active {
outline: none !important;
box-shadow: none !important;
border: none !important;
border-bottom: 2px solid white !important;
}
        
/* Progress Steps - Apple HIG: Proper spacing and motion */
.progress-steps {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-xl);
position: relative;
gap: var(--space-md);
}
        
.progress-steps::before {
content: '';
position: absolute;
top: 1.375rem;  /* Center of 2.75rem circle */
left: 0;
right: 0;
height: 3px;
background: var(--border);
z-index: 1;
transition: background-color var(--motion-normal) var(--motion-ease);
}
        
.step {
flex: 1;
text-align: center;
position: relative;
z-index: 2;
}
        
/* Apple HIG: Step circles with proper touch targets and motion */
.step-circle {
width: 2.75rem;  /* 44pt minimum touch target */
height: 2.75rem;
min-width: 2.75rem;
min-height: 2.75rem;
border-radius: 50%;
background: var(--border);
color: var(--text-light);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin: 0 auto var(--space-sm);
transition: background-color var(--motion-normal) var(--motion-ease),
color var(--motion-normal) var(--motion-ease),
transform var(--motion-fast) var(--motion-ease);
cursor: pointer;
}
        
.step-circle:hover {
transform: scale(1.05);
}
        
.step-circle:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
        
.step.active .step-circle {
background: var(--primary);
color: white;
}
        
.step.completed .step-circle {
background: var(--success);
color: white;
}
        
.step-label {
font-size: 0.9rem;
color: var(--text-light);
transition: color var(--motion-normal) var(--motion-ease),
font-weight var(--motion-normal) var(--motion-ease);
}

/* On narrow screens, hide inactive step labels to prevent overlap */
@media (max-width: 480px) {
.step-label {
display: none;
}
.step.active .step-label,
.step.completed .step-label {
display: block;
font-size: 0.75rem;
}
}
        
.step.active .step-label {
color: var(--primary);
font-weight: 600;
}
        
/* Classes Grid */
.classes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-lg);
margin-top: var(--space-xl);
}
        
/* Data Table Styles */
.table-scroll-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-md);
box-shadow: var(--elevation-1);
}

.data-table {
width: 100%;
min-width: 480px; /* prevent squishing below readable width */
border-collapse: collapse;
background: var(--card);
border-radius: var(--radius-md);
overflow: hidden;
}

@media (max-width: 768px) {
.data-table th:nth-child(n+4),
.data-table td:nth-child(n+4) {
/* Hide columns beyond 3 on phone — most important data stays visible */
display: none;
}
}
        
.data-table thead {
background: var(--primary);
color: white;
}
        
.data-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
cursor: pointer;
user-select: none;
}
        
.data-table th:hover {
background: rgba(0, 0, 0, 0.1);
}
        
.data-table tbody tr {
border-bottom: 1px solid var(--border);
transition: background 0.2s;
}
        
.data-table tbody tr {
transition: background-color var(--motion-fast) var(--motion-ease);
}
        
.data-table tbody tr:hover {
background: var(--bg-hover);
}
        
.data-table td {
padding: var(--space-md) var(--space-md);
color: var(--text);
min-height: 2.75rem;  /* Touch target minimum for clickable rows */
}
        
.data-table td:last-child {
text-align: center;
}
        
/* Filter Controls */
.filter-controls {
padding: 1rem;
background: rgba(0, 0, 0, 0.02);
border-radius: 0.5rem;
}
        
.filter-group {
display: flex;
flex-direction: column;
}
        
/* Apple HIG: Cards with proper elevation and spacing */
.class-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
transition: all var(--motion-normal) var(--motion-ease);
cursor: pointer;
box-shadow: var(--elevation-1);
position: relative;
overflow: hidden;
}
        
.class-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
opacity: 0;
transition: opacity var(--motion-normal) var(--motion-ease);
}
        
.class-card:hover {
border-color: var(--primary);
box-shadow: 0 8px 24px rgba(30, 58, 95, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
}
        
.class-card:hover::before {
opacity: 1;
}
        
.class-card:active {
box-shadow: var(--elevation-1);
filter: brightness(0.97);
}
        
.class-card:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}

/* Course actions menu button - ensure it stays in top-right */
.class-card {
text-align: left; /* Prevent text-align from centering children */
}

.class-card .course-actions-menu-trigger {
position: absolute !important;
top: 0.75rem !important;
right: 0.75rem !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
background: none !important;
border: none !important;
padding: 0.5rem !important;
cursor: pointer !important;
border-radius: 0.25rem !important;
color: var(--text-light) !important;
transition: background 0.15s !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
}

.class-card .course-actions-menu-trigger i {
width: 1.25rem !important;
height: 1.25rem !important;
margin: 0 !important;
}

@media (max-width: 768px) {
/* On mobile, ensure menu button is properly positioned and touchable */
.class-card .course-actions-menu-trigger {
top: 0.5rem !important;
right: 0.5rem !important;
left: auto !important;
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
padding: 0.5rem !important;
}
}

.course-actions-menu {
display: none;
}
.course-actions-menu.hidden {
display: none !important;
visibility: hidden !important;
}
.course-actions-menu:not(.hidden) {
display: block !important;
visibility: visible !important;
}
        
/* Evaluation menu specific styles (inherits from shared menu styles above) */
.evaluation-actions-menu:not(.hidden) {
display: block !important;
visibility: visible !important;
}
        
.student-menu {
display: none;
}
.student-menu.hidden {
display: none !important;
}
.student-menu:not(.hidden) {
display: block !important;
}
        
.class-header {
font-size: var(--text-headline-size);
font-weight: var(--text-headline-weight);
line-height: 1.35;
color: var(--primary);
margin-bottom: 0.5rem;
}
        
.class-meta {
font-size: var(--text-caption-size);
font-weight: 400;
color: var(--text-light);
line-height: 1.5;
margin-bottom: var(--space-md);
}
        
.class-stats {
display: flex;
justify-content: space-between;
padding-top: var(--space-md);
border-top: 1px solid var(--border);
}
        
.stat {
text-align: center;
}
        
.stat-value {
font-size: var(--text-title-size);
font-weight: bold;
color: var(--primary);
}
        
.stat-label {
font-size: var(--text-caption-size);
font-weight: 400;
color: var(--text-light);
line-height: 1.4;
}
        
/* Rubrics - Apple HIG: Proper spacing */
.rubrics-list {
display: grid;
gap: var(--space-md);
}
        
.rubric-item {
/* Card format matching evaluation items - inline styles override these */
transition: box-shadow var(--motion-normal) var(--motion-ease);
}
        
.rubric-item:hover {
box-shadow: var(--elevation-2);
}
        
.rubric-item:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
        
.rubric-info h4 {
margin-bottom: var(--space-xs);
}
        
.rubric-info p {
font-size: 0.9375rem;
font-weight: 400;
color: var(--text-light);
line-height: 1.5;
}
        
/* Rubric collapsible sections */
.rubric-description-toggle,
.rubric-courses-toggle {
transition: color var(--motion-fast) var(--motion-ease);
}
        
.rubric-description-toggle:hover,
.rubric-courses-toggle:hover {
color: var(--text) !important;
}
        
.rubric-description-toggle:focus-visible,
.rubric-courses-toggle:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
        
.rubric-description-content,
.rubric-courses-content {
transition: opacity var(--motion-fast) var(--motion-ease);
}
        
.rubric-description-content.hidden,
.rubric-courses-content.hidden {
display: none;
}
        
.rubric-actions {
display: flex;
gap: var(--space-sm);
}
        
/* Apple HIG: Enhanced Loading States */
.spinner {
border: 3px solid var(--border);
border-top: 3px solid var(--primary);
border-radius: 50%;
width: 48px;
height: 48px;
animation: spin var(--motion-slow) linear infinite;
margin: var(--space-xl) auto;
position: relative;
}
        
/* Apple HIG: Skeleton loading for content */
.skeleton {
background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border) 50%, var(--bg-alt) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: var(--radius-sm);
min-height: 1rem;
}
        
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
        
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
        
.spin { 
display: inline-block; 
animation: spin var(--motion-slow) linear infinite; 
vertical-align: middle; 
}
        
/* Apple HIG: Loading states with proper feedback */
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-2xl);
gap: var(--space-md);
text-align: center;
}
        
.loading-state .spinner {
margin: 0;
}
        
.loading-state-message {
color: var(--text-light);
font-size: var(--text-body-size);
line-height: 1.5;
}
        
.loading-state-submessage {
color: var(--text-light);
font-size: var(--text-caption-size);
margin-top: var(--space-xs);
}
        
@media (prefers-reduced-motion: reduce) {
.spinner, .spin, .auth-loading-spinner, .skeleton { 
animation: none; 
}
.spinner { 
border-top-color: var(--primary); 
opacity: 0.85; 
}
.skeleton {
background: var(--bg-alt);
}
}

/* Analytics dashboard — typography hierarchy */
.dashboard-shell-title { font-size: var(--text-headline-size); font-weight: var(--text-headline-weight); line-height: 1.35; margin-bottom: 0.25rem; color: var(--text); }
.dashboard-shell-subtitle { font-size: var(--text-caption-size); font-weight: 400; color: var(--text-light); line-height: 1.4; margin-bottom: 1.5rem; }
.global-filter-bar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
        
.global-filter-bar::-webkit-scrollbar {
display: none;
}
.global-filter-bar {
display: flex; flex-direction: column; gap: 0;
padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg);
border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-alt);
}
.global-filter-bar-row {
display: flex;
gap: 0.75rem;
align-items: center;
flex-wrap: nowrap;
min-width: min-content;
}
        
@media (max-width: 768px) {
.global-filter-bar-row {
flex-wrap: wrap;
gap: 0.5rem;
}
            
.global-filter-bar .filter-dropdown {
flex: 1 1 auto;
min-width: 0;
}
            
.global-filter-bar .filter-dropdown-trigger {
min-width: 0;
width: 100%;
font-size: 0.8125rem;
padding: var(--space-xs) var(--space-sm);
}
            
/* Filter actions row styling - now in separate row */
.global-filter-bar-row:has(#analyticsGlobalReset) {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
            
@media (max-width: 768px) {
.global-filter-bar-row:has(#analyticsGlobalReset) {
flex-direction: column;
align-items: stretch;
}
                
.global-filter-bar-row:has(#analyticsGlobalReset) .btn-secondary {
width: 100%;
justify-content: center;
}
                
.global-filter-bar-row:has(#analyticsGlobalReset) .last-updated {
text-align: center;
width: 100%;
}
}
display: flex; flex-wrap: nowrap; align-items: flex-end; gap: var(--space-md) var(--space-lg);
overflow: visible; min-width: 0; padding-bottom: var(--space-xs);
}
.global-filter-bar-row > * { flex-shrink: 0; }
        
@media (max-width: 768px) {
.global-filter-bar-row > * { 
flex-shrink: 1;
}
}
.global-filter-bar label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--text-light); }
.global-filter-bar select, .global-filter-bar input[type="date"] {
padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; min-width: 8rem;
}
.global-filter-bar .filter-actions { margin-left: auto; padding-left: 1rem; border-left: 1px solid var(--border); display: flex; gap: 0.5rem; align-items: center; }
.global-filter-bar .last-updated { font-size: 0.75rem; color: var(--text-light); margin-left: 0.5rem; }
/* Custom multi-select filter dropdowns (match Sort dropdown look) */
.filter-dropdown { position: relative; display: flex; flex-direction: column; gap: 0.25rem; }
.filter-dropdown .filter-dropdown-trigger {
padding: var(--space-sm) var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.875rem; min-width: 8rem;
min-height: 2.75rem;  /* Touch target minimum */
background: var(--bg); color: var(--text); text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
transition: border-color var(--motion-normal) var(--motion-ease),
background-color var(--motion-fast) var(--motion-ease);
}
.filter-dropdown .filter-dropdown-trigger:hover { 
border-color: var(--primary);
background: var(--bg-alt);
}
.filter-dropdown .filter-dropdown-trigger:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.filter-dropdown .filter-dropdown-trigger::after { content: ''; border: 0.35rem solid transparent; border-top-color: currentColor; margin-left: auto; }
.filter-dropdown .filter-dropdown-panel {
display: none; position: absolute; top: 100%; left: 0; min-width: 100%; margin-top: var(--space-xs);
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--elevation-3);
max-height: 14rem; overflow-y: auto; z-index: 9999; padding: var(--space-xs) 0; min-height: 2rem;
animation: dropdownSlideIn var(--motion-fast) var(--motion-ease-out);
}
.filter-dropdown.open .filter-dropdown-panel { display: block; }
.filter-dropdown .filter-dropdown-item {
padding: var(--space-sm) var(--space-md); 
min-height: 2.75rem;  /* Touch target minimum */
cursor: pointer; display: flex; align-items: center; gap: var(--space-sm); font-size: 0.875rem;
transition: background-color var(--motion-fast) var(--motion-ease);
}
.filter-dropdown .filter-dropdown-item:hover { 
background: var(--bg-hover);
}
.filter-dropdown .filter-dropdown-item:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: -2px;
}
.filter-dropdown .filter-dropdown-item .filter-dropdown-check { width: 1rem; flex-shrink: 0; color: var(--primary); font-weight: bold; display: inline-flex; align-items: center; justify-content: center; }
.filter-dropdown .filter-dropdown-item .filter-dropdown-check svg { width: 1rem; height: 1rem; }
.filter-dropdown .filter-dropdown-item:not(.selected) .filter-dropdown-check { visibility: hidden; }
/* Export preview + Evaluations table: header with sort + filter dropdown (inner flex keeps th as table-cell for column alignment) */
#exportPreviewTable thead th .export-th-inner,
#analyticsEvaluationsTable thead th .export-th-inner { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
#exportPreviewTable thead th .export-th-sort,
#analyticsEvaluationsTable thead th .export-th-sort { flex: 1; min-width: 0; cursor: pointer; user-select: none; }
#exportPreviewTable thead th .export-th-filter,
#analyticsEvaluationsTable thead th .export-th-filter {
flex-shrink: 0; padding: 0.2rem 0.35rem; border: none; background: rgba(255,255,255,0.2); color: #fff;
border-radius: 0.25rem; cursor: pointer; font-size: 0.7rem; line-height: 1;
}
#exportPreviewTable thead th .export-th-filter:hover,
#analyticsEvaluationsTable thead th .export-th-filter:hover { background: rgba(255,255,255,0.35); }
#exportPreviewTable thead th .export-th-filter.has-filter,
#analyticsEvaluationsTable thead th .export-th-filter.has-filter { background: rgba(255,255,255,0.5); }
/* Data Export tab: top bar stays on one line; ensure Export button is visible */
#exportTabTopBar { flex-wrap: nowrap !important; white-space: nowrap !important; min-width: 0; overflow-x: auto; }
#exportTabTopBar > * { flex-shrink: 0; }
#analyticsExportBtn { display: inline-block !important; visibility: visible !important; min-width: 7rem; opacity: 1 !important; }
#exportPreviewTable thead th.export-th-center .export-th-inner,
#analyticsEvaluationsTable thead th.export-th-center .export-th-inner { justify-content: center; }
.export-header-filter-panel {
position: fixed; z-index: 200; background: var(--bg); border: 1px solid var(--border);
border-radius: 0.5rem; box-shadow: 0 4px 16px rgba(0,0,0,0.2); max-height: 280px; min-width: 160px;
overflow: hidden; display: flex; flex-direction: column;
}
.export-header-filter-panel .export-filter-toolbar { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); display: flex; gap: 0.5rem; flex-shrink: 0; font-size: 0.75rem; }
.export-header-filter-panel .export-filter-toolbar a { color: var(--primary); cursor: pointer; text-decoration: underline; }
.export-header-filter-panel .export-filter-list { overflow-y: auto; padding: 0.25rem 0; max-height: 220px; }
.export-header-filter-panel .export-filter-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; cursor: pointer; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export-header-filter-panel .export-filter-item:hover { background: var(--bg-alt); }
.export-header-filter-panel .export-filter-item input { margin: 0; flex-shrink: 0; }
.dashboard-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.kpi-card {
border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); background: linear-gradient(to bottom, #ffffff 0%, var(--bg) 100%);
box-shadow: var(--elevation-1);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.kpi-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(30, 58, 95, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.kpi-card:hover { 
box-shadow: 0 6px 20px rgba(30, 58, 95, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); 
border-color: var(--primary);
background: linear-gradient(to bottom, var(--card) 0%, var(--bg-alt) 100%);
}
.kpi-card .kpi-title { font-size: var(--text-caption-size); font-weight: 500; color: var(--text-light); margin-bottom: 0.5rem; letter-spacing: 0.01em; line-height: 1.4; }
.kpi-card .kpi-value { font-size: var(--text-title-size); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
.kpi-card .kpi-subtext { font-size: var(--text-caption-size); font-weight: 400; color: var(--text-light); margin-top: 0.35rem; line-height: 1.4; }
.kpi-card .kpi-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.kpi-card .kpi-badge { font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid; letter-spacing: 0.02em; }
.kpi-card .kpi-badge.ok { background: rgba(16,185,129,0.12); color: var(--success); border-color: rgba(16,185,129,0.3); }
.kpi-card .kpi-badge.limited { background: rgba(245,158,11,0.12); color: var(--warning); border-color: rgba(245,158,11,0.3); }
.kpi-card .kpi-badge.insufficient { background: var(--bg-alt); color: var(--text-light); border-color: var(--border); }
.kpi-card .kpi-footer { font-size: var(--text-caption-size); font-weight: 400; color: var(--text-light); margin-top: 0.5rem; line-height: 1.4; }
.kpi-card .kpi-footer a { color: var(--primary); text-decoration: underline; cursor: pointer; }
.kpi-card .kpi-title:hover, .chart-card .chart-title:hover { color: var(--primary); }
/* Chart cards — HIG: focused, clear hierarchy */
.chart-card {
border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); background: linear-gradient(to bottom, #ffffff 0%, var(--bg) 100%);
box-shadow: var(--elevation-1);
min-width: 0; overflow: hidden;
transition: all var(--motion-normal) var(--motion-ease);
position: relative;
}
.chart-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);
opacity: 0;
transition: opacity var(--motion-normal) var(--motion-ease);
}
.chart-card:hover { 
box-shadow: 0 8px 24px rgba(30, 58, 95, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
border-color: rgba(30, 58, 95, 0.2);
}
.chart-card:hover::before {
opacity: 1;
}
.chart-card .chart-title { font-size: var(--text-headline-size); font-weight: var(--text-headline-weight); margin-bottom: var(--space-xs); letter-spacing: -0.01em; color: var(--text); line-height: 1.35; }
.chart-card .chart-subtitle { font-size: var(--text-caption-size); font-weight: 400; color: var(--text-light); margin-bottom: var(--space-xs); line-height: 1.4; }
.chart-card .chart-description { font-size: var(--text-caption-size); font-weight: 400; color: var(--text); margin-bottom: var(--space-md); line-height: 1.45; }
.chart-card .chart-body {
min-height: 180px; border: 1px solid var(--border); border-radius: var(--radius-md);
background: linear-gradient(to bottom, #ffffff 0%, var(--bg-alt) 100%); overflow-x: auto; padding: var(--space-md);
position: relative;
}
        
/* Line chart styles */
.chart-line-container {
position: relative; height: 200px; width: 100%; padding: var(--space-md) 0;
}
.chart-line-svg {
width: 100%; height: 100%; overflow: visible;
}
.chart-line-path {
fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
transition: opacity 0.3s ease;
}
.chart-line-path.primary { stroke: var(--primary); }
.chart-line-path.secondary { stroke: var(--primary-light); }
.chart-line-area {
opacity: 0.15; transition: opacity 0.3s ease;
}
.chart-line-dot {
fill: var(--primary); stroke: white; stroke-width: 2; r: 11; /* Increased for 44pt touch target */
transition: r 0.2s ease;
cursor: pointer;
}
.chart-line-dot:hover { r: 13; }
.chart-line-dot:focus {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
r: 13;
}
.chart-line-grid {
stroke: var(--border); stroke-width: 1; stroke-dasharray: 2,2; opacity: 0.5;
}
        
/* Donut/Pie chart styles */
.chart-donut-container {
position: relative; width: 100%; max-width: 280px; margin: 0 auto; padding: var(--space-md);
}
.chart-donut-svg {
width: 100%; height: auto; transform: rotate(-90deg);
}
.chart-donut-segment {
transition: opacity 0.3s ease, transform 0.3s ease;
cursor: pointer;
}
.chart-donut-segment:hover {
opacity: 0.8; transform: scale(1.05);
}
.chart-donut-segment:focus {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
opacity: 0.8;
}
/* Larger hit area for donut segments (44pt minimum) */
.chart-donut-hit-area {
position: absolute;
width: 44px;
height: 44px;
border-radius: 50%;
background: transparent;
cursor: pointer;
pointer-events: all;
}
.chart-donut-center {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
text-align: center; pointer-events: none;
}
.chart-donut-center-value {
font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.2;
}
.chart-donut-center-label {
font-size: 0.875rem; color: var(--text-light); margin-top: 0.25rem;
}
        
/* Distribution histogram */
.chart-histogram {
display: flex; align-items: flex-end; justify-content: space-around; gap: 4px;
height: 200px; padding: var(--space-md) 0; border-bottom: 2px solid var(--border);
}
.chart-histogram-bar {
flex: 1; background: linear-gradient(to top, var(--primary) 0%, var(--primary-light) 100%);
border-radius: 4px 4px 0 0; min-height: 4px; transition: all 0.3s ease;
position: relative; box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
cursor: pointer;
min-width: 44px; /* Ensure touch target minimum */
}
.chart-histogram-bar:hover {
background: linear-gradient(to top, var(--primary-light) 0%, var(--primary) 100%);
box-shadow: 0 4px 8px rgba(30, 58, 95, 0.3);
filter: brightness(1.08);
}
.chart-histogram-bar:focus {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
filter: brightness(1.08);
}
.chart-histogram-label {
position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
font-size: 0.75rem; color: var(--text-light); white-space: nowrap;
}
        
/* Respect prefers-reduced-motion for chart animations */
@media (prefers-reduced-motion: reduce) {
.chart-line-dot,
.chart-donut-segment,
.chart-histogram-bar {
transition: none;
}
.chart-line-dot:hover,
.chart-line-dot:focus,
.chart-donut-segment:hover,
.chart-donut-segment:focus,
.chart-histogram-bar:hover,
.chart-histogram-bar:focus {
transform: none;
}
}
        
/* Colorblind-friendly patterns for donut charts */
.chart-donut-pattern-emissions {
fill: url(#pattern-emissions);
}
.chart-donut-pattern-offset {
fill: url(#pattern-offset);
}
.chart-card .chart-body .chart-bars { display: flex; flex-direction: column; gap: var(--space-md); }
.chart-card .chart-body .chart-bar-row {
display: flex; flex-direction: column; gap: 0.35rem;
}
.chart-card .chart-body .chart-bar-row [role="img"] { display: flex; flex-direction: column; gap: 0.35rem; }
.chart-card .chart-body .chart-bar-label-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.875rem; }
.chart-card .chart-body .chart-bar-label { font-weight: 500; color: var(--text); }
.chart-card .chart-body .chart-bar-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.chart-card .chart-body .chart-bar-track {
height: 12px; background: var(--bg-alt); border-radius: 8px; overflow: hidden; position: relative;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.chart-card .chart-body .chart-bar-fill {
height: 100%; border-radius: 8px; transition: width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
position: relative; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.chart-card .chart-body .chart-bar-fill::after {
content: '';
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, transparent 50%);
pointer-events: none;
}
.chart-card .chart-body .chart-bar-fill.data-high { 
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.chart-card .chart-body .chart-bar-fill.data-medium { 
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.chart-card .chart-body .chart-bar-fill.data-low { 
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.chart-card .chart-body .chart-bar-row {
transition: transform 0.2s ease;
}
.chart-card .chart-body .chart-bar-row:hover {
transform: translateX(4px);
}
.chart-card .chart-body .data-table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 0.875rem; }
.chart-card .chart-body .data-table caption { font-size: 0.8125rem; color: var(--text-light); text-align: left; padding: 0 0 0.5rem 0; }
.chart-card .chart-body .data-table th {
text-align: left; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-light); padding: 0.625rem 0.75rem; background: var(--bg-alt); border-bottom: 2px solid var(--border);
}
.chart-card .chart-body .data-table th[scope="col"]:first-child { border-radius: 6px 0 0 0; }
.chart-card .chart-body .data-table th[scope="col"]:last-child { border-radius: 0 6px 0 0; }
.chart-card .chart-body .data-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.chart-card .chart-body .data-table tbody tr:hover { background: rgba(0,0,0,0.02); }
.chart-card .chart-body .data-table tbody tr:last-child td { border-bottom: none; }
.chart-card .chart-body .data-table th.num, .chart-card .chart-body .data-table td.num { text-align: right; }
.chart-card .chart-footer { font-size: 0.875rem; font-weight: 400; color: var(--text-light); margin-top: 0.75rem; line-height: 1.4; }
.chart-card .chart-footer a { color: var(--primary); text-decoration: underline; cursor: pointer; }
.dashboard-charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
        
/* Score Display */
.score-banner {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
margin: 2rem 0;
}
        
.score-value {
font-size: 3rem;
font-weight: bold;
margin: 1rem 0;
}
        
.score-percentage {
font-size: 1.5rem;
opacity: 0.9;
}
        
/* Footer */
footer {
font-family: var(--body-font);
background: var(--primary);
color: white;
padding: 2rem 0;
/* Safe area: home indicator on iPhone */
padding-bottom: calc(2rem + env(safe-area-inset-bottom));
margin-top: 3rem;
}
        
.footer-content {
text-align: center;
}
        
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1rem;
}
        
.footer-links a {
color: white !important;
text-decoration: none;
opacity: 0.8;
transition: opacity 0.3s;
}
        
.footer-links a:hover {
opacity: 1;
}
        
/* Ensure all footer text is white */
footer p,
footer #footerCopyright,
footer #footerAdditional {
color: white !important;
}
        
footer a {
color: white !important;
}
        
/* Modal / Overlay */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.modal-overlay[hidden] { display: none !important; }
/* Apple HIG: Modals with proper elevation and spacing */
.modal-box {
background: var(--card);
padding: var(--space-xl) var(--space-2xl);
border-radius: var(--radius-lg);
max-width: 440px;
width: 100%;
box-shadow: var(--elevation-4);
border: 1px solid var(--border);
max-height: 90vh;
overflow-y: auto;
}

/* Full-screen modals on mobile */
@media (max-width: 768px) {
.modal-overlay {
padding: 0;
align-items: flex-end;
}
.modal-box {
max-width: 100%;
width: 100%;
height: 100vh;
max-height: 100vh;
border-radius: 0;
border: none;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
padding: var(--space-lg) var(--space-md);
padding-top: calc(var(--space-lg) + env(safe-area-inset-top, 0));
padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0));
}
}
.modal-box h3 {
margin: 0 0 0.75rem 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.35;
color: var(--primary);
}
.modal-box p { margin: 0 0 1rem 0; font-size: 0.9375rem; font-weight: 400; color: var(--text-light); line-height: 1.5; }
.modal-box .modal-actions { margin-top: 1.25rem; }
.info-box {
background: var(--bg-alt);
border-left: 4px solid var(--primary);
padding: 1rem 1.25rem;
border-radius: 0 0.5rem 0.5rem 0;
margin-bottom: 1.5rem;
font-size: 0.9375rem;
font-weight: 400;
color: var(--text);
line-height: 1.5;
}
.consent-toolbar {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: flex-end;
margin-bottom: 1.5rem;
}
.consent-toolbar .form-group { margin-bottom: 0; }
.consent-toolbar select {
min-width: 240px;
padding: 0.6rem 0.75rem;
}
.consent-actions {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
        
/* Utility Classes */
.skip-link {
position: absolute;
top: -3rem;
left: 0.5rem;
padding: 0.5rem 1rem;
background: var(--primary);
color: white;
text-decoration: none;
font-weight: 600;
z-index: 10002;
border-radius: 0 0 0.5rem 0;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Keyboard focus visible (accessibility): clear focus ring for interactive elements */
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.hidden {
display: none !important;
}
/* Screen reader only - visually hidden but accessible to assistive tech */
.sr-only,
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
        
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
        
.text-center {
text-align: center;
}
        
.mt-2 {
margin-top: 2rem;
}
        
.mb-2 {
margin-bottom: 2rem;
}
        
/* Apple HIG: Alert styles with semantic colors and proper contrast */
.alert {
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
border-left: 4px solid;
}
        
.alert-success {
background: var(--success-bg);
color: var(--success-text);
border-color: var(--success-border);
}
        
.alert-error {
background: var(--error-bg);
color: var(--error-text);
border-color: var(--error-border);
}
        
.alert-warning {
background: var(--warning-bg);
color: var(--warning-text);
border-color: var(--warning-border);
}
        
.alert-info {
background: var(--info-bg);
color: var(--info-text);
border-color: var(--info-border);
}
        
/* Responsive - Tablet and below */
@media (max-width: 1200px) {
.app-title h1 {
font-size: 1.5rem;
}
.tagline {
font-size: 0.85rem;
}
.nav-link {
padding: var(--space-sm) var(--space-md);
font-size: 0.875rem;
}
.nav-link .icon-with-text i {
width: 0.875rem;
height: 0.875rem;
}
}
        
@media (max-width: 1024px) {
.header-content {
gap: var(--space-sm);
}
/* Logo stays 32px at all breakpoints */
.logo {
width: 32px;
height: 32px;
}
.app-title h1 {
font-size: 1.35rem;
}
.account-search-wrap {
max-width: 240px;
min-width: 150px;
margin: 0 var(--space-sm);
}
nav {
gap: var(--space-sm);
}
.nav-link {
padding: var(--space-xs) var(--space-sm);
font-size: 0.875rem;
}
}
        
@media (max-width: 900px) {
.logo-section {
flex: 0 0 auto;
}
.app-title h1 {
font-size: 1.2rem;
}
.account-search-wrap {
max-width: 200px;
min-width: 120px;
}
.nav-link span.icon-with-text {
display: flex;
}
.nav-link .icon-with-text i {
margin-right: 0.25rem;
}
.account-dropdown-trigger {
padding: var(--space-xs) var(--space-sm);
font-size: 0.875rem;
}
}
        
/* Mobile */
/* Mobile — keep logo+account on one row (iOS navigation bar pattern) */
@media (max-width: 768px) {
/* Row 1: logo left, account right — never stacked */
.header-content {
height: 48px;
flex-direction: row;
gap: 8px;
align-items: center;
padding: 0 16px;
overflow: hidden;
}

.header-left {
flex-direction: row;
align-items: center;
flex: 1;
min-width: 0;
gap: 8px;
overflow: hidden;
}

.header-right {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
}

.logo-section {
flex-shrink: 0;
min-width: 0;
gap: 8px;
}

/* Logo stays 32px at all breakpoints - never changes */
.logo {
width: 32px !important;
height: 32px !important;
}

.app-title {
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
}

.app-title h1 {
font-size: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Hide navigation, search, and account on mobile - all in mobile menu */
.primary-nav,
nav.primary-nav,
.search-wrapper,
.account-dropdown-wrapper {
display: none !important;
}
            
/* Show mobile menu button */
.mobile-menu-button {
display: flex !important;
align-items: center;
justify-content: center;
background: none;
border: none;
color: white;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: background 0.2s;
width: 2rem;
height: 2rem;
}
            
.mobile-menu-button:hover {
background: rgba(255, 255, 255, 0.12);
}
            
.mobile-menu-button i {
width: 24px;
height: 24px;
}

.classes-grid {
grid-template-columns: 1fr;
}

/* Bottom padding for main content to account for tab bar */
main#main-content {
padding-bottom: 80px;
}

/* Mobile Card Layouts for Tables - Hidden on desktop by default */
#studentCardsMobile,
.data-table-mobile-container,
.student-card-mobile,
.evaluation-card-mobile {
display: none !important; /* Force hidden on desktop */
visibility: hidden !important;
}

/* Table container - visible on desktop by default */
.student-table-container {
display: block;
}

/* Ensure mobile cards are hidden on desktop (explicit override) */
@media (min-width: 769px) {
#studentCardsMobile,
.data-table-mobile-container,
.student-card-mobile,
.evaluation-card-mobile {
display: none !important;
visibility: hidden !important;
}

/* Ensure tables are visible on desktop */
.student-table-container {
display: block !important;
visibility: visible !important;
}

.student-table-container table,
table.student-table {
display: table !important;
visibility: visible !important;
}
}

@media (max-width: 768px) {
/* Make buttons more compact in Course Insights on mobile */
#dashboardOverviewStats .btn-icon-only,
#dashboardOverviewStats button.btn-icon-only,
#analyticsSection .btn-icon-only,
#analyticsSection button.btn-icon-only {
padding: 0.375rem !important;
min-width: 36px !important;
min-height: 36px !important;
width: auto !important;
height: auto !important;
}

#dashboardOverviewStats .btn-icon-only i,
#dashboardOverviewStats button.btn-icon-only i {
width: 0.875rem !important;
height: 0.875rem !important;
}

#analyticsEvaluationsTab .btn,
#analyticsEvaluationsTab button.btn {
padding: 0.5rem 0.75rem !important;
font-size: 0.8125rem !important;
min-height: 44px !important;
}

#analyticsEvaluationsTab .btn-secondary {
padding: 0.5rem 0.75rem !important;
font-size: 0.8125rem !important;
}

/* Hide tables on mobile, show cards */
.student-table-container,
.student-table-container table,
.data-table,
table.data-table,
table.student-table {
display: none !important;
visibility: hidden !important;
}

#studentCardsMobile,
.data-table-mobile-container {
display: block !important;
visibility: visible !important;
}

.student-card-mobile,
.evaluation-card-mobile {
display: block !important;
visibility: visible !important;
}

.student-card-mobile,
.evaluation-card-mobile {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-md);
margin-bottom: var(--space-sm);
box-shadow: var(--elevation-1);
transition: all 0.2s ease;
}

.student-card-mobile:active,
.evaluation-card-mobile:active {
transform: scale(0.98);
box-shadow: var(--elevation-2);
}

.student-card-header,
.evaluation-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-sm);
}

.student-card-title,
.evaluation-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin: 0;
}

.student-card-meta,
.evaluation-card-meta {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: var(--space-xs);
}

.student-card-meta-item,
.evaluation-card-meta-item {
font-size: 0.875rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.5rem;
}

.student-card-actions,
.evaluation-card-actions {
display: flex;
gap: 0.5rem;
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}

.student-card-actions button,
.evaluation-card-actions button {
min-height: 44px;
font-size: 0.8125rem;
padding: 0.5rem 0.75rem;
}

/* Text buttons in mobile cards - more compact */
.student-card-actions button:not([style*="flex: 0"]),
.evaluation-card-actions button:not([style*="flex: 0"]) {
flex: 1;
}

/* Icon-only buttons in mobile cards - smaller */
.student-card-actions button[style*="flex: 0"],
.evaluation-card-actions button[style*="flex: 0"] {
flex: 0 0 auto;
min-width: 44px;
width: 44px;
padding: 0.5rem;
}

.student-card-actions button i,
.evaluation-card-actions button i {
width: 16px;
height: 16px;
}

/* Mobile form optimizations */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
width: 100% !important;
min-height: 44px;
font-size: 16px; /* Prevents zoom on iOS */
padding: 0.75rem;
}

/* Full-width buttons on mobile */
.btn,
button[type="submit"],
button[type="button"] {
width: 100%;
min-height: 44px;
}
}
}
        
/* Bottom Tab Bar (Mobile Navigation) */
.bottom-tab-bar {
display: none; /* Hidden on desktop - only shows when top nav is hidden */
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: var(--card);
border-top: 1px solid var(--border);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
z-index: 1000;
justify-content: space-around;
align-items: center;
padding: 0;
padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Show bottom tab bar only when top navigation is hidden (same breakpoint) */
@media (max-width: 768px) {
.bottom-tab-bar {
display: flex;
}
}

.tab-bar-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
flex: 1;
height: 100%;
background: none;
border: none;
color: var(--text-light);
cursor: pointer;
transition: all 0.2s ease;
padding: 8px 12px;
min-height: 44px;
font-size: 0.75rem;
font-weight: 500;
}

.tab-bar-item i {
width: 24px;
height: 24px;
stroke-width: 2;
transition: all 0.2s ease;
}

.tab-bar-item:hover {
background: var(--bg-alt);
color: var(--primary);
}

.tab-bar-item.active {
color: var(--primary);
}

.tab-bar-item.active i {
stroke-width: 2.5;
}

.tab-bar-item span {
font-size: 0.75rem;
line-height: 1;
}
        
/* Mobile Menu (Apple Style) */
.mobile-menu {
display: none;
position: fixed;
top: 0;
right: 0;
width: 320px;
max-width: 85vw;
height: 100vh;
background: var(--card);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
z-index: 2000;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.mobile-menu.open {
transform: translateX(0);
}

.mobile-menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1999;
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
backdrop-filter: blur(4px);
}

.mobile-menu-overlay.open {
opacity: 1;
}

.mobile-menu-header {
padding: 20px 22px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-alt);
}

.mobile-menu-header h3 {
font-size: 17px;
font-weight: 600;
color: var(--text);
font-family: var(--body-font);
letter-spacing: -0.01em;
}

.mobile-menu-close {
background: none;
border: none;
color: var(--text);
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: background 0.2s;
display: flex;
align-items: center;
justify-content: center;
}

.mobile-menu-close:hover {
background: var(--border);
}

.mobile-menu-nav {
padding: 8px 0;
}

.mobile-menu-section {
padding: 12px 0;
border-bottom: 1px solid var(--border);
}

.mobile-menu-section:last-child {
border-bottom: none;
}

.mobile-menu-section-title {
font-size: 12px;
font-weight: 600;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 22px;
font-family: var(--body-font);
}

.mobile-menu-nav .nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 22px;
color: var(--text);
text-decoration: none;
font-size: 17px;
transition: background 0.2s;
font-family: var(--body-font);
-webkit-tap-highlight-color: transparent;
border-radius: 0;
}

.mobile-menu-nav .nav-link:active {
background: var(--bg-alt);
}

.mobile-menu-nav .nav-link.active {
background: var(--primary);
color: white;
}

.mobile-menu-nav .nav-link i {
width: 20px;
height: 20px;
flex-shrink: 0;
}

.mobile-menu-search {
padding: 12px 22px;
border-bottom: 1px solid var(--border);
}

.mobile-menu-search-input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 17px;
font-family: var(--body-font);
background: var(--bg-alt);
box-sizing: border-box;
}

.mobile-menu-search-input:focus {
outline: none;
border-color: var(--primary);
background: var(--card);
}
        
@media (max-width: 768px) {
.mobile-menu,
.mobile-menu-overlay {
display: block;
}
}

@media (max-width: 480px) {
.header-content {
height: 48px;
padding: 0 12px;
}
/* Logo stays 32px on all screen sizes - never changes */
.logo {
width: 32px !important;
height: 32px !important;
}
.app-title h1 {
font-size: 16px;
}
}
        
/* Edit functionality animations */
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
        
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
        
/* Auth / Login page – theme colors and logo */
.auth-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
padding: 1rem;
}
.auth-card {
background: var(--card);
padding: 2.5rem 3rem;
border-radius: 1rem;
max-width: 440px;
width: 100%;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
border: 2px solid var(--border);
}
.auth-card .auth-logo {
width: 120px;
height: 120px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
background: var(--card);
border: 2px solid var(--border);
}
        
/* Dark mode auth logo background */
:root[data-theme="dark"] .auth-card .auth-logo,
.theme-option7-dark .auth-card .auth-logo {
background: #1a1a1a;
border-color: var(--border);
}
.auth-card         .auth-logo img {
width: 100%;
height: 100%;
object-fit: fill; /* Stretch to fill the entire space */
object-position: center;
}
.auth-card h2 {
font-family: var(--heading-font);
color: var(--primary);
margin: 0;
font-size: 1.75rem;
}
.auth-card .auth-tagline {
color: var(--text-light);
margin: 0.35rem 0 0 0;
font-size: 0.95rem;
}
.auth-card .form-group label { color: var(--text); }
.auth-divider {
text-align: center;
color: var(--text-light);
margin: 1.25rem 0;
font-size: 0.9rem;
}
.auth-card .btn-demo {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
background: var(--secondary);
color: var(--text);
border: 2px solid var(--border);
border-radius: 0.5rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.auth-card .btn-demo:hover {
background: var(--accent);
border-color: var(--primary);
color: var(--primary-dark);
}
/* Full-page loading overlay until auth check completes */
#authLoadingOverlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
}
#authLoadingOverlay.hidden { display: none; }
#authLoadingOverlay .auth-loading-spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#authLoadingOverlay p { margin: 0; font-size: 1rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
#authLoadingOverlay .auth-loading-spinner { animation: none; border-top-color: white; opacity: 0.9; }
}
/* Typography: use global hierarchy for empty states */
.empty-state .empty-state-title { font-size: var(--text-headline-size); font-weight: var(--text-headline-weight); margin-bottom: 0.35rem; color: var(--text); line-height: 1.35; }
.empty-state .empty-state-desc { font-size: var(--text-caption-size); font-weight: 400; color: var(--text-light); margin-bottom: 1.25rem; line-height: 1.45; }
.empty-state {
text-align: center; padding: 2.5rem 1.5rem; max-width: 22rem; margin: 0 auto;
}
.empty-state .empty-state-icon { width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem; color: var(--text-light); display: block; }
.empty-state .empty-state-action { margin-top: 0.5rem; }

/* Lucide icons inline with text */
[data-lucide] { width: 1.1em; height: 1.1em; vertical-align: -0.2em; stroke-width: 2; flex-shrink: 0; }
.icon-with-text { display: inline-flex; align-items: center; gap: 0.35em; }
/* Keep icon+text buttons from looking lopsided (icon left, text right, centered) */
button .icon-with-text,
.btn .icon-with-text { display: inline-flex; align-items: center; gap: 0.35em; }