/* Base CSS Utilities - Shared across all themes */
/* Themes should import or override these as needed */

* {
    box-sizing: border-box;
}

/* Use 100% width instead of 100vw to avoid scrollbar-related gaps */
html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
    overflow-x: hidden;
    background: var(--color-bg, #000);
    /* Scrollbar gutter prevents layout shift */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    background: var(--color-bg, #000);
}

/* Reset body pseudo-elements so they don't bleed between theme switches */
body::before,
body::after {
    content: none;
}

/* Style scrollbar to match theme - prevents desktop showing through */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background: var(--color-bg, #000);
}

::-webkit-scrollbar-track {
    background: var(--color-bg, #000);
}

::-webkit-scrollbar-thumb {
    background: var(--color-bg-alt, #333);
    border-radius: 6px;
    border: 3px solid var(--color-bg, #000);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary, #666);
}

/* Firefox scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-bg-alt, #333) var(--color-bg, #000);
}

/* Ensure the main wrapper fills viewport */
body > div,
.page-wrapper,
.page-container,
#app {
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

/* Font Awesome icon fixes */
.fas,
.far,
.fab,
.fal,
.fad {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fab {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

.far {
    font-weight: 400;
}

/* ============================================
   THEME PICKER STYLES (consistent across themes)
   ============================================ */

#theme-selector {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

#theme-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: var(--theme-toggle-bg, #fff);
    color: var(--theme-toggle-color, #000);
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

#theme-toggle:hover {
    transform: scale(1.1);
}

#theme-toggle:focus {
    outline: 2px solid var(--theme-toggle-color, #000);
    outline-offset: 2px;
}

#theme-menu {
    position: absolute;
    top: 60px;
    right: 0;
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--theme-menu-bg, #fff);
    border: 2px solid var(--theme-menu-border, #333);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

#theme-menu h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--theme-menu-title, #000);
}

.theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid var(--theme-option-border, #ddd);
    background: var(--theme-option-bg, #f5f5f5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-option:hover {
    border-color: var(--theme-option-hover, #333);
    transform: translateY(-2px);
}

.theme-option.active {
    border-color: var(--theme-option-active, #0066cc);
    background: var(--theme-option-active-bg, #e6f2ff);
}

.theme-emoji {
    font-size: 24px;
}

.theme-name {
    font-size: 12px;
    text-align: center;
    color: var(--theme-option-text, #333);
}

/* Theme option wrapper with pin button */
.theme-option-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.theme-option-wrapper .theme-option {
    width: 100%;
}

.theme-option-wrapper.active .theme-option {
    border-color: var(--theme-option-active, #0066cc);
    background: var(--theme-option-active-bg, #e6f2ff);
}

.theme-option-wrapper.pinned {
    outline: 2px solid var(--theme-pin-color, #ff6b35);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Pin button */
.theme-pin-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--theme-menu-border, #333);
    background: var(--theme-menu-bg, #fff);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

.theme-option-wrapper:hover .theme-pin-btn,
.theme-pin-btn:focus,
.theme-pin-btn.pinned {
    opacity: 1;
}

.theme-pin-btn:hover {
    transform: scale(1.1);
    background: var(--theme-option-hover-bg, #eee);
}

.theme-pin-btn.pinned {
    background: var(--theme-pin-color, #ff6b35);
    border-color: var(--theme-pin-color, #ff6b35);
}

/* Pinned theme indicator */
.pinned-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--theme-pin-bg, rgba(255, 107, 53, 0.1));
    border: 1px solid var(--theme-pin-color, #ff6b35);
    border-radius: 6px;
    font-size: 13px;
}

.pinned-label {
    color: var(--theme-option-text, #333);
}

.unpin-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--theme-pin-color, #ff6b35);
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.unpin-btn:hover {
    background: var(--theme-pin-hover, #e55a2b);
    transform: scale(1.1);
}

/* ============================================
   TRACK LISTING PAGE STYLES
   ============================================ */

.tracks {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.track-card {
    background: var(--color-card-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
}

.track-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary, #00bfff);
}

.track-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.track-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.track-content {
    padding: 1.5rem;
    background: var(--color-card-bg, rgba(255, 255, 255, 0.05));
}

.track-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary, #00bfff);
    margin: 0 0 0.75rem 0;
}

.track-description {
    color: var(--color-text-muted, rgba(255, 255, 255, 0.7));
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================
   RESPONSIVE LAYOUT - WIDE SCREEN DEFAULTS
   ============================================ */

/* Ensure grids can expand on wider screens - themes can override */
@media (min-width: 1600px) {
    .class-grid,
    .resource-grid,
    .event-list,
    .track-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    #theme-selector {
        display: none !important;
    }
    
    * {
        background: white !important;
        color: black !important;
    }
}

/* ============================================
   INTERNAL PAGE BASE STYLES
   (Class, Course, Intensive pages)
   Themes override colors/fonts, structure remains consistent
   ============================================ */

/* --- HERO/HEADER --- */
.site-header {
    position: relative;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--color-bg-alt, #1a1a1a);
}

/* Top section with hero + instructor sidebar */
.top-section {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.top-section .site-header {
    flex: 1;
    text-align: left;
}

.hero-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Purely decorative gradient — must never capture clicks. Without this it
       covers the hero CTA buttons (Enroll/Learn More) and, in browsers whose
       stacking resolves the .site-header overlay above .hero-content, makes them
       unclickable. pointer-events:none is visual-only; the gradient still shows. */
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), var(--color-bg, #000));
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

/* Instructor sidebar (outside hero) */
.instructor-sidebar {
    flex-shrink: 0;
    width: 320px;
    padding-top: 3rem;
}

.instructor-card-compact {
    background: var(--color-card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--color-border, rgba(255,255,255,0.15));
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
}

.instructor-card-compact .instructor-image {
    margin-bottom: 1rem;
}

.instructor-card-compact .instructor-image img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primary, #00bfff);
}

.instructor-card-compact .instructor-placeholder {
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.instructor-card-compact .instructor-name {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.instructor-card-compact .instructor-title {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.instructor-card-compact .instructor-bio {
    font-size: 0.85rem;
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 1rem;
    white-space: pre-line; /* Preserve line breaks from database */
}

.instructor-card-compact .instructor-links {
    justify-content: center;
    gap: 0.5rem;
}

.instructor-card-compact .social-link {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
}

.site-logo {
    display: inline-block;
    color: var(--color-primary, #00bfff);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border: none;
}

.class-meta {
    margin-bottom: 1rem;
}

.class-badge {
    display: inline-block;
    background: var(--color-primary, #00bfff);
    color: var(--color-bg, #000);
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.class-title {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    color: var(--color-text, #fff);
    margin: 1rem 0;
    line-height: 1.2;
}

.class-description {
    color: var(--color-text-muted, rgba(255,255,255,0.8));
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.class-audience {
    color: var(--color-text-muted, rgba(255,255,255,0.7));
    font-size: 0.95rem;
    font-style: italic;
    margin: 0.5rem 0;
    line-height: 1.5;
}

/* --- HERO STATS --- */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary, #00bfff);
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted, rgba(255,255,255,0.6));
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* --- CTA BUTTONS --- */
.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.btn-primary {
    display: inline-block;
    background: var(--color-primary, #00bfff);
    color: var(--color-bg, #000);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 191, 255, 0.3);
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--color-primary, #00bfff);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    border: 2px solid var(--color-primary, #00bfff);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-secondary:hover {
    background: var(--color-primary, #00bfff);
    color: var(--color-bg, #000);
}

/* --- MAIN CONTENT --- */
.site-main {
    background: var(--color-bg, #000);
    color: var(--color-text, #fff);
}

/* --- FEATURES SECTION --- */
.features-section {
    background: var(--color-bg-alt, rgba(255,255,255,0.03));
    padding: 3rem 2rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    background: var(--color-card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary, #00bfff);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary, #00bfff);
    margin-bottom: 0.5rem;
}

.feature-desc {
    color: var(--color-text-muted, rgba(255,255,255,0.7));
    font-size: 0.95rem;
}

/* --- CONTENT SECTIONS --- */
.content-section {
    padding: 4rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.content-section.alt-bg {
    background: var(--color-bg-alt, rgba(255,255,255,0.02));
    max-width: none;
}

.content-section.alt-bg > * {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary, #00bfff);
    text-align: center;
    margin-bottom: 1.5rem;
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-muted, rgba(255,255,255,0.7));
    margin-bottom: 2rem;
}

.content-card {
    background: var(--color-card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.card-title {
    font-size: 1.2rem;
    color: var(--color-primary, #00bfff);
    margin-bottom: 1rem;
}

.lead-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text, rgba(255,255,255,0.9));
}

.learn-list ul,
.learn-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.learn-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--color-text, rgba(255,255,255,0.9));
}

.learn-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary, #00bfff);
}

.section-cta {
    text-align: center;
    margin-top: 2rem;
}

/* --- FORMAT GRID --- */
.format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.format-card {
    background: var(--color-card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.format-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.format-title {
    font-size: 0.85rem;
    color: var(--color-text-muted, rgba(255,255,255,0.6));
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.format-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary, #00bfff);
    margin-bottom: 0.5rem;
}

.format-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted, rgba(255,255,255,0.6));
}

/* --- SCHEDULE / SESSIONS --- */
.schedule-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.session-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-card-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.session-info {
    flex: 1;
}

.session-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #fff);
    margin: 0 0 0.25rem;
}

.session-datetime {
    font-size: 0.9rem;
    color: var(--color-primary, #00bfff);
    margin-bottom: 0.5rem;
}

.session-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted, rgba(255,255,255,0.7));
    margin: 0;
}

.session-duration {
    flex-shrink: 0;
}

.duration-badge {
    display: inline-block;
    background: var(--color-primary-alpha, rgba(0,191,255,0.2));
    color: var(--color-primary, #00bfff);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.timezone-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    margin-top: 1.5rem;
}

/* --- INSTRUCTOR SECTION --- */
.instructor-card {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    max-width: 800px;
    margin: 0 auto;
}

.instructor-image {
    flex-shrink: 0;
}

.instructor-image img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primary, #00bfff);
}

.instructor-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--color-primary, #00bfff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-bg, #000);
}

.instructor-info {
    flex: 1;
}

.instructor-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary, #00bfff);
    margin: 0 0 0.5rem;
}

.instructor-title {
    color: var(--color-text-muted, rgba(255,255,255,0.7));
    margin-bottom: 1rem;
}

.instructor-bio {
    color: var(--color-text, rgba(255,255,255,0.8));
    line-height: 1.7;
    margin: 0;
    white-space: pre-line; /* Preserve line breaks from database */
}

.instructor-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.social-link {
    color: var(--color-primary, #00bfff);
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-primary, #00bfff);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.social-link:hover {
    background: var(--color-primary, #00bfff);
    color: var(--color-bg, #000);
}

/* --- PRICING SECTION --- */
.pricing-section {
    background: var(--color-bg-alt, rgba(0,191,255,0.05));
    padding: 4rem 2rem;
    max-width: none !important;
}

.pricing-note {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2rem;
    color: var(--color-text-muted, rgba(255,255,255,0.7));
}

.pricing-note a {
    color: var(--color-primary, #00bfff);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.pricing-grid.single {
    grid-template-columns: 1fr !important;
    max-width: 1200px;
}

@media (max-width: 768px) {
    .pricing-grid.single {
        max-width: 100%;
    }
}

.pricing-card {
    background: var(--color-card-bg, rgba(0,0,0,0.5));
    border: 2px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: 1.5rem;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
}

.pricing-card:hover,
.pricing-card.featured {
    border-color: var(--color-primary, #00bfff);
    transform: translateY(-4px);
}

.pricing-badge {
    background: var(--color-primary, #00bfff);
    color: var(--color-bg, #000);
    text-align: center;
    padding: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing-header {
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.1));
}

.pricing-name {
    font-size: 1.2rem;
    color: var(--color-primary, #00bfff);
    margin-bottom: 1rem;
}

.pricing-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.pricing-label {
    font-size: 0.9rem;
    color: var(--color-text-muted, rgba(255,255,255,0.6));
    margin-right: 0.5rem;
}

.currency {
    font-size: 1.5rem;
    color: var(--color-text-muted, rgba(255,255,255,0.7));
}

.price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text, #fff);
}

.pricing-subtext {
    font-size: 0.9rem;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    margin-top: 0.5rem;
}

.pricing-lifetime {
    font-size: 0.85rem;
    color: var(--color-primary, #00bfff);
    margin-top: 0.5rem;
}

.pricing-features {
    padding: 2rem;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--color-text, rgba(255,255,255,0.8));
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.05));
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary, #00bfff);
}

.pricing-cta {
    padding: 0 2rem 2rem;
    text-align: center;
}

.pricing-cta .btn-primary {
    width: 100%;
}

.secure-note {
    font-size: 0.8rem;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    margin-top: 1rem;
}

.community-note {
    text-align: center;
    margin-top: 3rem;
    color: var(--color-text-muted, rgba(255,255,255,0.6));
}

.community-note .small {
    font-size: 0.85rem;
    color: var(--color-text-muted, rgba(255,255,255,0.4));
}

/* --- ENTERPRISE CALLOUT --- */
.enterprise-callout {
    background: var(--color-bg-alt, rgba(255,255,255,0.02));
    padding: 3rem 2rem;
    text-align: center;
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.1));
}

.enterprise-content {
    max-width: 600px;
    margin: 0 auto;
}

.enterprise-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text, #fff);
    margin: 0 0 0.75rem;
}

.enterprise-text {
    color: var(--color-text-muted, rgba(255,255,255,0.7));
    margin: 0;
}

.enterprise-text a {
    color: var(--color-primary, #00bfff);
    font-weight: 600;
}

/* --- FOOTER --- */
.page-footer {
    background: var(--color-bg-alt, rgba(0,0,0,0.3));
    padding: 2rem;
    text-align: center;
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.1));
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.footer-nav a {
    color: var(--color-primary, #00bfff);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.copyright {
    font-size: 0.85rem;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .top-section {
        flex-direction: column;
        padding: 0 1rem;
    }
    
    .top-section .site-header {
        text-align: center;
    }
    
    .instructor-sidebar {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        padding-top: 1rem;
    }
}

@media (max-width: 768px) {
    .instructor-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .instructor-links {
        justify-content: center;
    }
    
    .hero-stats {
        gap: 1.5rem;
        justify-content: center;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .format-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .session-card {
        flex-direction: column;
    }
    
    .session-duration {
        align-self: flex-start;
    }
    
    .hero-cta {
        justify-content: center;
    }
}

/* --- COOKIE CONSENT BANNER --- */
#cookie-consent-banner {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 10000;
    max-width: 380px;
    background: var(--color-bg-alt, rgba(30, 30, 30, 0.98));
    border: 1px solid var(--color-primary, #9d4edd);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#cookie-consent-banner.visible {
    transform: translateY(0);
    opacity: 1;
}

#cookie-consent-banner.hiding {
    transform: translateY(20px);
    opacity: 0;
}

.cookie-consent-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cookie-consent-text {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text, #fff);
    line-height: 1.5;
}

.cookie-icon {
    margin-right: 0.4rem;
}

.cookie-link {
    color: var(--color-primary, #9d4edd);
    text-decoration: underline;
}

.cookie-link:hover {
    color: var(--color-accent, #c77dff);
}

.cookie-consent-actions {
    display: flex;
    justify-content: flex-end;
}

.cookie-btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cookie-btn-accept {
    background: var(--color-primary, #9d4edd);
    color: var(--color-bg, #000);
}

.cookie-btn-accept:hover {
    background: var(--color-accent, #c77dff);
    transform: translateY(-1px);
}

@media (max-width: 500px) {
    #cookie-consent-banner {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
}

/* ============================================
   MOBILE-FRIENDLY LOGGED-IN PAGES
   Ensures dashboard, profile, admin pages are usable on mobile
   ============================================ */

/* Base mobile improvements - larger text for readability */
@media (max-width: 768px) {
    /* Increase base font size for better readability on mobile */
    body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }
    
    /* Theme picker mobile adjustments */
    #theme-selector {
        top: 10px;
        right: 10px;
    }
    
    #theme-toggle {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    
    #theme-menu {
        width: calc(100vw - 40px);
        max-width: 300px;
        right: 0;
    }
    
    .theme-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    
    .theme-option {
        padding: 10px 6px;
    }
    
    .theme-emoji {
        font-size: 20px;
    }
    
    .theme-name {
        font-size: 11px;
    }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
    /* Even more compact theme menu */
    #theme-menu {
        width: calc(100vw - 20px);
        max-width: none;
        right: 0;
        left: auto;
        max-height: 70vh;
    }
    
    .theme-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    
    .theme-option {
        padding: 8px 4px;
    }
    
    .theme-emoji {
        font-size: 18px;
    }
    
    .theme-name {
        font-size: 10px;
    }
    
    /* Ensure footer doesn't get cut off */
    .site-footer {
        padding: 1.5rem 1rem;
    }
    
    .footer-text {
        font-size: 0.9rem;
    }
}

/* ============================================
   DASHBOARD MOBILE STYLES
   ============================================ */

@media (max-width: 600px) {
    /* Dashboard header - stack on mobile */
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .dashboard-header .user-info {
        width: 100%;
    }
    
    .dashboard-header .header-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Larger touch targets for buttons */
    .btn,
    .dashboard-header .btn,
    .header-actions .btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    /* User avatar - slightly smaller on mobile */
    .user-avatar {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    
    /* User details - increase font size */
    .user-details h1 {
        font-size: 1.1rem;
    }
    
    .user-details .email {
        font-size: 0.9rem;
    }
    
    /* Membership badge - ensure readable */
    .membership-badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
    }
    
    /* Cards - more padding on mobile */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-header {
        padding: 1rem;
        font-size: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Class items - stack layout on mobile */
    .class-item {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .class-item-info h4 {
        font-size: 1rem;
    }
    
    .class-item-info .meta {
        font-size: 0.9rem;
    }
    
    .class-item-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .class-item-actions .btn {
        flex: 1;
        min-width: 80px;
        justify-content: center;
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Quick links nav - horizontal scroll on mobile */
    .quick-links-nav {
        padding: 0.75rem 0;
        gap: 0.5rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .quick-links-nav::-webkit-scrollbar {
        display: none;
    }
    
    .link-dropdown {
        flex-shrink: 0;
    }
    
    .link-dropdown-toggle {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
    
    /* Dropdown menu - full width on mobile, tap-friendly */
    .link-dropdown-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        padding: 1rem 0;
        z-index: 1000;
    }
    
    .link-dropdown-menu a {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    .link-dropdown-menu .pw-note {
        font-size: 0.8rem;
        margin-left: 2rem;
        padding-bottom: 0.5rem;
    }
    
    /* Schedule items - mobile optimized */
    .schedule-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }
    
    .schedule-time {
        font-size: 1rem;
        min-width: auto;
        margin-bottom: 0.25rem;
    }
    
    .schedule-info {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .schedule-name {
        font-size: 1rem;
    }
    
    .schedule-actions {
        width: 100%;
        gap: 0.5rem;
    }
    
    .schedule-actions .btn,
    .schedule-actions .btn-sm {
        flex: 1;
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
        min-height: 44px;
        justify-content: center;
    }
    
    /* Upcoming classes grid - single column on mobile */
    .upcoming-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .upcoming-card .content {
        padding: 1rem;
    }
    
    .upcoming-card h4 {
        font-size: 1.1rem;
    }
    
    .upcoming-card .desc {
        font-size: 0.9rem;
    }
    
    .upcoming-card .date {
        font-size: 0.85rem;
    }
    
    .upcoming-card .btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
    
    /* Sidebar - full width on mobile */
    .sidebar {
        margin-top: 1rem;
    }
    
    .sidebar .card-body {
        padding: 1rem;
    }
    
    /* Standup section - mobile friendly */
    .standup-section {
        padding: 1rem;
    }
    
    .standup-section label {
        font-size: 0.9rem;
    }
    
    .standup-section select {
        font-size: 1rem;
        padding: 0.75rem;
        min-height: 44px;
    }
    
    .standup-links {
        gap: 0.5rem;
    }
    
    .standup-links .btn {
        flex: 1;
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
        min-height: 44px;
        justify-content: center;
    }
    
    /* Link lists - larger tap targets */
    .link-list a {
        padding: 0.75rem;
        font-size: 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Empty state - more padding */
    .empty-state {
        padding: 2rem 1rem;
    }
    
    .empty-state i {
        font-size: 2rem;
    }
    
    .empty-state p {
        font-size: 1rem;
    }
    
    /* Toast notifications - mobile positioning */
    .toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
        font-size: 0.95rem;
        padding: 0.875rem 1rem;
    }
    
    /* Admin banner - stack on mobile */
    .admin-banner {
        padding: 1rem;
    }
    
    .admin-banner-content {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    
    .admin-banner-btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   FORM MOBILE STYLES (Profile, etc.)
   ============================================ */

@media (max-width: 600px) {
    /* Form inputs - larger for mobile */
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 0.75rem;
        min-height: 44px;
    }
    
    .form-label {
        font-size: 0.95rem;
    }
    
    .form-hint {
        font-size: 0.85rem;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Checkbox groups - larger tap targets */
    .checkbox-group {
        padding: 0.75rem 0;
    }
    
    .checkbox-group input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .checkbox-group label {
        font-size: 1rem;
    }
    
    /* Form actions - stack buttons */
    .form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .form-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
    
    /* Page header - stack on mobile */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .page-header h1 {
        font-size: 1.25rem;
    }
    
    .page-header .header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .page-header .btn {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }
}

/* ============================================
   ADMIN DASHBOARD MOBILE STYLES
   ============================================ */

@media (max-width: 600px) {
    /* Stats grid - 2 columns on mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 0.875rem;
    }
    
    .stat-card .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-card .stat-label {
        font-size: 0.8rem;
    }
    
    /* Admin actions grid - 2 columns */
    .admin-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .action-card a {
        padding: 1rem;
    }
    
    .action-card i {
        font-size: 1.5rem;
    }
    
    .action-card h3 {
        font-size: 0.95rem;
    }
    
    .action-card p {
        font-size: 0.8rem;
    }
    
    /* Admin sections */
    .admin-section {
        padding: 1rem;
    }
    
    .admin-section h2 {
        font-size: 1.1rem;
    }
    
    /* Form rows in admin */
    .form-row {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .form-row label {
        min-width: auto;
    }
    
    .form-row input,
    .form-row select {
        width: 100%;
        font-size: 16px;
        min-height: 44px;
    }
    
    /* Upcoming classes list */
    .upcoming-classes-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem 0.75rem;
    }
    
    .class-enrolled {
        align-self: flex-start;
    }
    
    /* Standup items */
    .standup-item {
        padding: 1rem;
    }
    
    .standup-item h4 {
        font-size: 1rem;
    }
}

/* Extra small mobile devices */
@media (max-width: 375px) {
    .stats-grid,
    .admin-actions {
        grid-template-columns: 1fr;
    }
    
    .header-actions .btn {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   INTERACTIVE DECOR (Dreamcore family, theme-decor.js)
   Sprites that follow the cursor and react to hover/click.
   ============================================ */
.dc-decor-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.dc-decor {
    position: fixed;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.9;
    transform: translate(var(--tx, 0px), var(--ty, 0px));
    transition: transform 0.18s ease, filter 0.25s ease, opacity 0.25s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}
.dc-decor:hover {
    opacity: 1;
    z-index: 6;
    filter: drop-shadow(0 0 12px var(--color-primary, #ffffff)) brightness(1.08);
    transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.4);
}
.dc-eye:hover { animation: dcBlinkHover 0.5s ease; }
.dc-smileyflower:hover { animation: dcSpinHover 1s linear; }
.dc-mushroom-eye:hover { animation: dcWobbleHover 0.6s ease; }
.dc-hand:hover { animation: dcGrabHover 0.5s ease; }
.dc-decor.dc-react { animation: dcReact 0.5s ease; }

@keyframes dcBlinkHover {
    0%, 100% { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.4) scaleY(1); }
    50%      { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.4) scaleY(0.08); }
}
@keyframes dcSpinHover {
    to { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.4) rotate(360deg); }
}
@keyframes dcWobbleHover {
    0%, 100% { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.4) rotate(0deg); }
    25%      { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.4) rotate(-12deg); }
    75%      { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.4) rotate(12deg); }
}
@keyframes dcGrabHover {
    0%, 100% { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.4) rotate(0deg); }
    50%      { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.25) rotate(8deg); }
}
@keyframes dcReact {
    0%   { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1); }
    30%  { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.6); }
    100% { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1); }
}

/* No hover on touch; keep small screens uncluttered */
@media (max-width: 768px) {
    .dc-decor-layer { display: none !important; }
}

/* ============================================
   INTERACTIVE DECOR v2 — proximity-driven (theme-decor.js)
   Transforms for non-bubble sprites are set inline per frame by JS;
   bubbles rise via CSS and pop on proximity. Never blocks clicks.
   ============================================ */
.dc-decor {
    pointer-events: none !important;
    transition: filter 0.2s ease !important;
    transform: none; /* JS owns transform for non-bubble sprites */
}
.dc-decor.dc-near {
    filter: drop-shadow(0 0 14px var(--color-primary, #ffffff)) brightness(1.1);
}
/* Drifting cherry-blossom petals (transform driven per-frame by JS) */
.dcb-fall {
    top: 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.07));
}
/* Rising water bubbles / droplets */
.dcb-bubble {
    transform: translateY(12vh) scale(0.9);
    animation: dcBubbleRise var(--rise, 16s) linear infinite;
}
@keyframes dcBubbleRise {
    0%   { transform: translateY(14vh) scale(0.85); opacity: 0; }
    12%  { opacity: 0.85; }
    85%  { opacity: 0.8; }
    100% { transform: translateY(-90vh) scale(1.05); opacity: 0; }
}
.dc-pop {
    animation: dcPop 0.46s ease forwards !important;
}
@keyframes dcPop {
    0%   { opacity: 0.9; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* Contract layer — semantic defaults and alias bridge */
@import '_contract.css';

/* ============================================
   ADMIN PAGE THEME COMPATIBILITY
   Ensures admin dashboard pages use theme CSS variables
   so text remains readable on both dark and light themes.
   These rules override hardcoded colors in admin inline styles.
   ============================================ */

/* --- Base text and background for admin pages --- */
body[data-page^="admin"],
body[data-page^="admin"] .page-container,
body[data-page^="admin"] .site-main {
    color: var(--color-text, inherit);
}

/* --- Admin page wrapper (used by volunteers, infrastructure, etc.) --- */
body[data-page^="admin"] .admin-page {
    color: var(--color-text, inherit);
}

/* --- Section containers --- */
body[data-page^="admin"] .admin-section {
    background: var(--card-bg, var(--color-bg-card, #2a2a2a));
    border-color: var(--border-color, var(--color-border, #3a3a3a));
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .admin-section h2,
body[data-page^="admin"] .admin-section h3,
body[data-page^="admin"] .admin-section h4 {
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .crm-section {
    background: var(--card-bg, var(--color-bg-card, #2a2a2a));
    border-color: var(--border-color, var(--color-border, #3a3a3a));
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .crm-section h2 {
    color: var(--card-text, var(--color-text, inherit));
    border-bottom-color: var(--border-color, var(--color-border, #3a3a3a));
}

/* --- Stat cards --- */
body[data-page^="admin"] .stat-card {
    background: var(--card-bg, var(--color-bg-card, #2a2a2a));
    border-color: var(--border-color, var(--color-border, #3a3a3a));
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .stat-card .stat-label,
body[data-page^="admin"] .stat-badge .label {
    color: var(--color-text-muted, var(--card-text, inherit));
}

body[data-page^="admin"] .stat-card .stat-value,
body[data-page^="admin"] .stat-badge .value {
    color: var(--accent-color, var(--color-primary, #34a58e));
}

body[data-page^="admin"] .stat-badge {
    background: var(--color-bg-alt, var(--color-bg-card, #f5f5f5));
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Action cards --- */
body[data-page^="admin"] .action-card {
    background: var(--card-bg, var(--color-bg-card, #2a2a2a));
    border-color: var(--border-color, var(--color-border, #3a3a3a));
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .action-card h3 {
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .action-card p {
    color: var(--color-text-muted, var(--card-text, inherit));
}

/* --- Tables (data-table and generic tables) --- */
body[data-page^="admin"] .data-table th {
    color: var(--color-text-muted, inherit);
    border-bottom-color: var(--border-color, var(--color-border, #3a3a3a));
}

body[data-page^="admin"] .data-table td {
    color: var(--card-text, var(--color-text, inherit));
    border-bottom-color: var(--border-color, var(--color-border, #3a3a3a));
}

body[data-page^="admin"] .data-table a {
    color: var(--accent-color, var(--color-primary, #34a58e));
}

body[data-page^="admin"] table th {
    color: var(--color-text-muted, var(--color-text, inherit));
}

body[data-page^="admin"] table td {
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Lists --- */
body[data-page^="admin"] .upcoming-classes-list li {
    color: var(--card-text, var(--color-text, inherit));
    border-bottom-color: var(--border-color, var(--color-border, #3a3a3a));
}

body[data-page^="admin"] .class-name {
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .class-date {
    color: var(--color-text-muted, inherit);
}

/* --- Form elements --- */
body[data-page^="admin"] input[type="text"],
body[data-page^="admin"] input[type="email"],
body[data-page^="admin"] input[type="url"],
body[data-page^="admin"] input[type="number"],
body[data-page^="admin"] input[type="search"],
body[data-page^="admin"] input[type="password"],
body[data-page^="admin"] textarea,
body[data-page^="admin"] select {
    background: var(--input-bg, var(--color-bg-alt, #1a1a1a));
    color: var(--input-text, var(--color-text, inherit));
    border-color: var(--border-color, var(--color-border, #3a3a3a));
}

body[data-page^="admin"] label {
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Tabs (used by volunteers, etc.) --- */
body[data-page^="admin"] .tab {
    color: var(--color-text-muted, var(--color-text, #666));
    background: transparent;
}

body[data-page^="admin"] .tab:hover {
    background: var(--color-bg-alt, rgba(0,0,0,0.05));
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .tab.active {
    background: var(--accent-color, var(--color-primary, #4299e1));
    color: var(--color-text-inverse, #fff);
}

body[data-page^="admin"] .tabs {
    border-bottom-color: var(--border-color, var(--color-border, #e0e0e0));
}

/* --- Submission / volunteer cards --- */
body[data-page^="admin"] .submission-card {
    background: var(--card-bg, var(--color-bg-card, #fff));
    border-color: var(--border-color, var(--color-border, #e0e0e0));
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .submission-name {
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .submission-email {
    color: var(--color-text-muted, var(--color-text, #666));
}

body[data-page^="admin"] .submission-email a {
    color: var(--accent-color, var(--color-primary, #4299e1));
}

body[data-page^="admin"] .detail-item strong {
    color: var(--color-text-muted, var(--color-text, #555));
}

body[data-page^="admin"] .detail-item {
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Filter bar --- */
body[data-page^="admin"] .filter-bar select,
body[data-page^="admin"] .filter-bar input {
    background: var(--input-bg, var(--color-bg-alt, #fff));
    color: var(--input-text, var(--color-text, inherit));
    border-color: var(--border-color, var(--color-border, #ddd));
}

body[data-page^="admin"] .filter-btn {
    color: var(--color-text-muted, var(--color-text, #aaa));
    border-color: var(--border-color, var(--color-border, #3a3a3a));
}

body[data-page^="admin"] .filter-btn:hover {
    background: var(--color-bg-alt, rgba(0,0,0,0.05));
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Notes section --- */
body[data-page^="admin"] .notes-section {
    background: var(--color-bg-alt, var(--color-bg-card, #fff8e1));
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Tags --- */
body[data-page^="admin"] .tag {
    background: var(--color-bg-alt, #e3f2fd);
    color: var(--accent-color, var(--color-primary, #1565c0));
}

/* --- Modal panels --- */
body[data-page^="admin"] .modal-panel {
    background: var(--card-bg, var(--color-bg-card, #fff));
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .modal-panel h2,
body[data-page^="admin"] .modal-panel h3 {
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .modal-panel label {
    color: var(--color-text-muted, var(--color-text, #444));
}

/* --- Empty states --- */
body[data-page^="admin"] .empty-state {
    color: var(--color-text-muted, var(--color-text, #666));
}

body[data-page^="admin"] .empty-state i {
    color: var(--color-text-muted, var(--color-border, #ddd));
}

/* --- Timeline --- */
body[data-page^="admin"] .timeline-event {
    border-bottom-color: var(--border-color, var(--color-border, #3a3a3a));
}

body[data-page^="admin"] .timeline-detail {
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .timeline-time {
    color: var(--color-text-muted, var(--color-text, #aaa));
}

body[data-page^="admin"] .timeline-icon {
    background: var(--color-bg-alt, #1a1a1a);
    color: var(--accent-color, var(--color-primary, #34a58e));
}

body[data-page^="admin"] .timeline-type-badge {
    background: var(--color-bg-alt, #1a1a1a);
    color: var(--color-text-muted, #aaa);
}

/* --- Standup items --- */
body[data-page^="admin"] .standup-item {
    background: var(--color-bg-alt, #1a1a1a);
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .standup-item h4 {
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Page header --- */
body[data-page^="admin"] .page-header h1 {
    color: var(--card-text, var(--color-text, inherit));
}

body[data-page^="admin"] .section-title {
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Back link --- */
body[data-page^="admin"] .back-link {
    color: var(--accent-color, var(--color-primary, #4299e1));
}

/* --- Coupon form and result --- */
body[data-page^="admin"] .coupon-form {
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Toast notifications (keep high-contrast: colored bg + white text) --- */
/* Toasts intentionally use solid colored backgrounds with white text */

/* --- Generic paragraphs and text inside admin sections --- */
body[data-page^="admin"] .admin-section p,
body[data-page^="admin"] .crm-section p {
    color: var(--card-text, var(--color-text, inherit));
}

/* --- Expand/toggle buttons --- */
body[data-page^="admin"] .expand-btn {
    color: var(--accent-color, var(--color-primary, #4299e1));
}

/* --- Applied date and muted text --- */
body[data-page^="admin"] .applied-date {
    color: var(--color-text-muted, var(--color-text, #666));
}

/* --- Submission actions --- */
body[data-page^="admin"] .submission-actions select {
    background: var(--input-bg, var(--color-bg-alt, #fff));
    color: var(--input-text, var(--color-text, inherit));
    border-color: var(--border-color, var(--color-border, #ddd));
}

/* --- General links inside admin pages --- */
body[data-page^="admin"] a:not(.btn):not(.badge):not(.class-enrolled):not(.nav-link):not(.theme-option) {
    color: var(--accent-color, var(--color-primary, #34a58e));
}

/* --- Borders: generic horizontal rules and dividers --- */
body[data-page^="admin"] hr {
    border-color: var(--border-color, var(--color-border, #3a3a3a));
}

/* ============================================
   ADMIN PAGES WITHOUT data-page ATTRIBUTE
   Some admin pages use .admin-page or .crm-page
   wrappers without the data-page body attribute.
   These rules provide the same theme compatibility.
   ============================================ */

.admin-page {
    color: var(--color-text, inherit);
}

.admin-page h1,
.admin-page h2,
.admin-page h3,
.admin-page h4 {
    color: var(--color-text, inherit);
}

.admin-page .submission-card {
    background: var(--card-bg, var(--color-bg-card, #fff));
    border-color: var(--border-color, var(--color-border, #e0e0e0));
    color: var(--color-text, inherit);
}

.admin-page .submission-name {
    color: var(--color-text, inherit);
}

.admin-page .submission-email {
    color: var(--color-text-muted, var(--color-text, #666));
}

.admin-page .detail-item {
    color: var(--color-text, inherit);
}

.admin-page .detail-item strong {
    color: var(--color-text-muted, var(--color-text, #555));
}

.admin-page .stat-badge {
    background: var(--color-bg-alt, var(--color-bg-card, #f5f5f5));
    color: var(--color-text, inherit);
}

.admin-page .stat-badge .value {
    color: var(--accent-color, var(--color-primary, #4299e1));
}

.admin-page .stat-badge .label {
    color: var(--color-text-muted, var(--color-text, #666));
}

.admin-page .tab {
    color: var(--color-text-muted, var(--color-text, #666));
}

.admin-page .tab:hover {
    background: var(--color-bg-alt, rgba(0,0,0,0.05));
}

.admin-page .tab.active {
    background: var(--accent-color, var(--color-primary, #4299e1));
    color: var(--color-text-inverse, #fff);
}

.admin-page .tabs {
    border-bottom-color: var(--border-color, var(--color-border, #e0e0e0));
}

.admin-page .notes-section {
    background: var(--color-bg-alt, var(--color-bg-card, #fff8e1));
    color: var(--color-text, inherit);
}

.admin-page .empty-state {
    color: var(--color-text-muted, var(--color-text, #666));
}

.admin-page .filter-bar select,
.admin-page .filter-bar input {
    background: var(--input-bg, var(--color-bg-alt, #fff));
    color: var(--input-text, var(--color-text, inherit));
    border-color: var(--border-color, var(--color-border, #ddd));
}

.admin-page .modal-panel {
    background: var(--card-bg, var(--color-bg-card, #fff));
    color: var(--color-text, inherit);
}

.admin-page .modal-panel h2,
.admin-page .modal-panel label {
    color: var(--color-text, inherit);
}

.admin-page input[type="text"],
.admin-page input[type="email"],
.admin-page input[type="url"],
.admin-page input[type="number"],
.admin-page input[type="search"],
.admin-page textarea,
.admin-page select {
    background: var(--input-bg, var(--color-bg-alt, #fff));
    color: var(--input-text, var(--color-text, inherit));
    border-color: var(--border-color, var(--color-border, #ddd));
}

/* --- CRM page wrapper --- */
.crm-page {
    color: var(--color-text, inherit);
}

.crm-page h1,
.crm-page h2 {
    color: var(--color-text, inherit);
}

.crm-page .student-header {
    background: var(--card-bg, var(--color-bg-card, #2a2a2a));
    border-color: var(--border-color, var(--color-border, #3a3a3a));
    color: var(--color-text, inherit);
}

.crm-page .student-header-info h1 {
    color: var(--color-text, inherit);
}

.crm-page .student-header-info .meta {
    color: var(--color-text-muted, var(--color-text, #aaa));
}