/* Youth Section - Dark Mode Styles */
/* Optimized for reduced eye strain and modern aesthetics */
/* WCAG AA Compliant - All text meets 4.5:1 contrast ratio minimum */

/* In-site dark mode: driven by .dark-mode class, not device preference */
html.dark-mode,
.dark-mode {
    color-scheme: dark;
}

.dark-mode {
    /* Dark mode color palette - WCAG AA Compliant */
    --youth-bg: #0f172a;              /* Slate 900 - Deep background */
    --youth-bg-secondary: #1e293b;    /* Slate 800 - Card backgrounds */
    --youth-text: #f1f5f9;            /* Slate 100 - Primary text (15.8:1 contrast) */
    --youth-text-secondary: #cbd5e1;  /* Slate 300 - Secondary text (9.8:1 contrast) */
    --youth-border: #334155;          /* Slate 700 - Borders */

    /* Aliases so Q&A/forms use correct dark values (no bleed from light) */
    --primary-color: #818cf8;
    --primary-color-dark: #6366f1;
    --secondary-color: #a78bfa;
    --card-bg: #1e293b;
    --bg-color: #0f172a;
    --text-color: #f1f5f9;
    --heading-color: #f1f5f9;
    --text-muted: #cbd5e1;
    --border-color: #334155;
    
    /* Adjusted primary colors for dark mode - Enhanced visibility */
    --youth-primary: #818cf8;         /* Indigo 400 - Primary actions */
    --youth-primary-dark: #6366f1;    /* Indigo 500 - Hover states */
    --youth-secondary: #a78bfa;       /* Violet 400 - Secondary actions */
    --youth-accent: #f472b6;          /* Pink 400 - Accent elements */
    
    /* Success, warning, danger colors - Dark mode optimized */
    --youth-success: #34d399;         /* Emerald 400 */
    --youth-warning: #fbbf24;         /* Amber 400 */
    --youth-danger: #f87171;          /* Red 400 */
    
    /* Shadows for dark mode - modern, layered */
    --youth-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.25), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
    --youth-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.35), 0 2px 6px -2px rgba(0, 0, 0, 0.25);
    --youth-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 8px -2px rgba(0, 0, 0, 0.2);
    --youth-shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.5);
    --youth-shadow-glow: 0 0 0 1px rgba(129, 140, 248, 0.2), 0 4px 14px -2px rgba(129, 140, 248, 0.15);
    /* Design token overrides (for dashboard and components using --color-*) */
    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-surface-elevated: #334155;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
    --color-border: #334155;
    --color-border-hover: #475569;
    --color-divider: #1e293b;
    --color-hover-overlay: rgba(255, 255, 255, 0.05);
    --color-active-overlay: rgba(255, 255, 255, 0.1);
}

/* Apply dark mode to body and main content */
.dark-mode body,
.dark-mode .youth-main,
.dark-mode .main-content {
    background-color: var(--youth-bg);
    color: var(--youth-text);
}

/* Standalone youth pages: nav, footer, theme toggle (no bleed) - modern dark */
.dark-mode .youth-nav {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--youth-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .youth-nav .nav-logo {
    color: var(--youth-primary);
}

.dark-mode .youth-nav .nav-links a {
    color: var(--youth-text);
}

.dark-mode .youth-nav .nav-links a:hover,
.dark-mode .youth-nav .nav-links a.active {
    color: var(--youth-primary);
    background: rgba(129, 140, 248, 0.15);
}

.dark-mode .youth-footer {
    background-color: var(--youth-bg-secondary);
    border-top-color: var(--youth-border);
    color: var(--youth-text-secondary);
}

.dark-mode .youth-footer .footer-links a {
    color: var(--youth-text-secondary);
}

.dark-mode .youth-footer .footer-links a:hover {
    color: var(--youth-primary);
}

.dark-mode .theme-toggle-container .theme-toggle-btn {
    background: var(--youth-bg-secondary);
    border-color: var(--youth-border);
}

.dark-mode .theme-toggle-container .theme-toggle-btn:hover {
    background: var(--youth-primary);
    border-color: var(--youth-primary);
    color: white;
    box-shadow: var(--youth-shadow-glow);
}

/* Mobile bottom nav - dark mode */
.dark-mode .youth-mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.95);
    border-top-color: var(--youth-border);
    box-shadow: 0 -4px 12px -2px rgba(0, 0, 0, 0.4);
}

.dark-mode .youth-mobile-bottom-nav__item {
    color: var(--youth-text-secondary);
}

.dark-mode .youth-mobile-bottom-nav__item:hover {
    background: var(--youth-bg-secondary);
}

.dark-mode .youth-mobile-bottom-nav__item.is-active {
    color: var(--youth-primary);
}

/* Q&A: question cards, lists, badges, forms in dark mode */
.dark-mode .question-card,
.dark-mode .question-item,
.dark-mode .question-content,
.dark-mode .related-questions,
.dark-mode .related-item {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .question-card h3,
.dark-mode .question-item h3,
.dark-mode .question-content h1,
.dark-mode .answer-header h2,
.dark-mode .related-questions h2,
.dark-mode .related-item h3 {
    color: var(--heading-color);
}

.dark-mode .question-preview,
.dark-mode .question-date,
.dark-mode .answer-date,
.dark-mode .helpful-count {
    color: var(--text-muted);
}

.dark-mode .section-header {
    border-bottom-color: var(--youth-primary);
}

.dark-mode .section-header::after {
    background: linear-gradient(90deg, var(--youth-primary), var(--youth-secondary));
}

.dark-mode .section-header h1,
.dark-mode .section-header p {
    color: var(--youth-text);
}

.dark-mode .section-header p {
    color: var(--youth-text-secondary);
}

.dark-mode .info-box {
    background: var(--card-bg);
    border-color: var(--youth-primary);
}

.dark-mode .info-box h3 {
    color: var(--youth-primary);
}

.dark-mode .info-box li {
    color: var(--text-color);
}

.dark-mode .loading-state,
.dark-mode .error-state {
    color: var(--youth-text);
}

.dark-mode .breadcrumb a,
.dark-mode .breadcrumb span {
    color: var(--youth-text-secondary);
}

.dark-mode .question-cta {
    background: linear-gradient(135deg, var(--youth-primary), var(--youth-secondary));
}

.dark-mode .form-actions .btn-secondary {
    background: var(--youth-bg-secondary);
    color: var(--youth-text);
    border: 1px solid var(--youth-border);
}

.dark-mode .form-actions .btn-secondary:hover {
    background: var(--youth-border);
}

.dark-mode .success-message {
    background: var(--card-bg);
    border: 2px solid var(--youth-success);
    color: var(--text-color);
}

.dark-mode .success-message h3 {
    color: var(--youth-success);
}

/* Hero section in dark mode */
.dark-mode .youth-hero {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

/* Quick access section – subtle depth in dark */
.dark-mode .youth-quick-access {
    background-color: var(--youth-bg-secondary);
}

/* Cards in dark mode */
.dark-mode .quick-access-card {
    background: var(--youth-bg-secondary);
    color: var(--youth-text);
    border-color: var(--youth-border);
}

.dark-mode .quick-access-card:hover {
    border-color: var(--youth-primary);
    box-shadow: 0 10px 15px -3px rgba(129, 140, 248, 0.3);
}

.dark-mode .quick-access-card h3 {
    color: var(--youth-text);
}

.dark-mode .quick-access-card p {
    color: var(--youth-text-secondary);
}

/* App-icon grid in dark mode */
.dark-mode .youth-app-icon {
    color: var(--youth-text);
}

.dark-mode .youth-app-icon__glyph {
    background: var(--youth-bg-secondary);
    box-shadow: var(--youth-shadow-md);
}

.dark-mode .youth-app-icon:hover .youth-app-icon__glyph {
    background: var(--youth-border);
    box-shadow: 0 10px 15px -3px rgba(129, 140, 248, 0.2);
}

.dark-mode .youth-app-icon__label {
    color: var(--youth-text);
}

/* Devotional navigation in dark mode */
.dark-mode .devotional-navigation {
    background-color: var(--youth-bg-secondary);
    border: 1px solid var(--youth-border);
    border-radius: var(--youth-radius-lg);
    padding: var(--youth-spacing-md);
    margin-top: var(--youth-spacing-lg);
}

.dark-mode .devotional-navigation .btn {
    background-color: var(--youth-bg);
    color: var(--youth-text);
    border: 1px solid var(--youth-border);
}

.dark-mode .devotional-navigation .btn:hover {
    background-color: var(--youth-primary);
    color: white;
}

.dark-mode .devotional-navigation .btn-primary {
    background-color: var(--youth-primary);
    color: white;
}

.dark-mode .devotional-navigation .btn-primary:hover {
    background-color: var(--youth-primary-dark);
}

.dark-mode .devotional-navigation .btn-secondary {
    background-color: var(--youth-bg-secondary);
    color: var(--youth-text);
}

.dark-mode .devotional-navigation .btn-secondary:hover {
    background-color: var(--youth-border);
}

.dark-mode .devotional-navigation .btn-outline {
    background-color: transparent;
    color: var(--youth-text-secondary);
    border: 1px solid var(--youth-border);
}

.dark-mode .devotional-navigation .btn-outline:hover {
    background-color: var(--youth-bg-secondary);
    color: var(--youth-text);
}

/* Devotionals index: topic section and title in dark mode */
.dark-mode .devotional-topic-group {
    border-top-color: var(--youth-border);
}

.dark-mode .topic-title {
    color: var(--youth-text, #f1f5f9);
    border-bottom-color: var(--youth-primary, #818cf8);
}

/* Banner container in dark mode */
.dark-mode .banner-container {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(10px);
}

/* Banner content - ensure text is visible in dark mode */
.dark-mode .banner-slide h2,
.dark-mode .banner-slide p {
    color: var(--youth-text);
}

.dark-mode .banner-controls button {
    color: var(--youth-text);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-mode .banner-controls button:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Theme toggle in dark mode */
.dark-mode .theme-toggle-btn {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.3);
}

.dark-mode .theme-toggle-btn:hover {
    background: rgba(30, 41, 59, 1);
}

/* Buttons in dark mode */
.dark-mode .btn-primary {
    background-color: var(--youth-primary);
    color: var(--youth-bg);
}

.dark-mode .btn-primary:hover {
    background-color: var(--youth-primary-dark);
}

.dark-mode .btn-secondary {
    background-color: var(--youth-secondary);
    color: var(--youth-bg);
}

.dark-mode .btn-secondary:hover {
    background-color: #9333ea;
}

/* Notifications in dark mode */
.dark-mode .youth-notification {
    background: var(--youth-bg-secondary);
    color: var(--youth-text);
    border: 1px solid var(--youth-border);
}

/* Section titles in dark mode */
.dark-mode .section-title {
    color: var(--youth-text);
}

/* Focus styles for dark mode */
.dark-mode *:focus-visible {
    outline-color: var(--youth-primary);
}

/* Ensure proper contrast for accessibility (WCAG AA) */
/* Primary text: 15.8:1 contrast ratio */
/* Secondary text: 9.8:1 contrast ratio */
/* Links: 7.2:1 contrast ratio */
.dark-mode a {
    color: var(--youth-primary);
}

.dark-mode a:hover {
    color: var(--youth-primary-dark);
}

/* Form elements in dark mode */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: var(--youth-bg-secondary);
    color: var(--youth-text);
    border-color: var(--youth-border);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--youth-text-secondary);
    opacity: 0.7;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--youth-primary);
    outline-color: var(--youth-primary);
}

/* Header and footer in dark mode */
.dark-mode .site-header {
    background-color: var(--youth-bg-secondary);
    border-bottom: 1px solid var(--youth-border);
}

.dark-mode .site-footer {
    background-color: var(--youth-bg-secondary);
    border-top: 1px solid var(--youth-border);
    color: var(--youth-text);
}

.dark-mode .nav-link {
    color: var(--youth-text);
}

.dark-mode .nav-link:hover {
    color: var(--youth-primary);
}

/* Breadcrumb in dark mode */
.dark-mode .breadcrumb-bar {
    background-color: var(--youth-bg-secondary);
    border-bottom: 1px solid var(--youth-border);
}

.dark-mode .breadcrumb a {
    color: var(--youth-text-secondary);
}

.dark-mode .breadcrumb a:hover {
    color: var(--youth-primary);
}

.dark-mode .breadcrumb-current {
    color: var(--youth-text);
}

/* Smooth transition when switching themes */
body,
.youth-main,
.quick-access-card,
.banner-container,
.theme-toggle-btn,
.site-header,
.site-footer,
input,
textarea,
select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Loading states in dark mode */
.dark-mode .loading {
    opacity: 0.5;
}

/* Skeleton screens in dark mode */
.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        var(--youth-bg-secondary) 0%,
        var(--youth-border) 50%,
        var(--youth-bg-secondary) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Code blocks in dark mode */
.dark-mode code,
.dark-mode pre {
    background-color: var(--youth-bg-secondary);
    color: var(--youth-text);
    border: 1px solid var(--youth-border);
}

/* Tables in dark mode */
.dark-mode table {
    border-color: var(--youth-border);
}

.dark-mode th {
    background-color: var(--youth-bg-secondary);
    color: var(--youth-text);
}

.dark-mode td {
    border-color: var(--youth-border);
    color: var(--youth-text);
}

.dark-mode tr:hover {
    background-color: var(--youth-bg-secondary);
}

/* Modal/Dialog in dark mode */
.dark-mode .modal,
.dark-mode .dialog {
    background-color: var(--youth-bg-secondary);
    color: var(--youth-text);
    border: 1px solid var(--youth-border);
}

.dark-mode .modal-overlay {
    background-color: rgba(15, 23, 42, 0.8);
}

/* Dividers in dark mode */
.dark-mode hr {
    border-color: var(--youth-border);
}

/* Badges and tags in dark mode */
.dark-mode .badge,
.dark-mode .tag {
    background-color: var(--youth-bg-secondary);
    color: var(--youth-text);
    border: 1px solid var(--youth-border);
}

/* Tooltips in dark mode */
.dark-mode .tooltip {
    background-color: var(--youth-bg-secondary);
    color: var(--youth-text);
    border: 1px solid var(--youth-border);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .dark-mode *,
    .dark-mode *::before,
    .dark-mode *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dark-mode {
        --youth-bg: #000000;
        --youth-bg-secondary: #1a1a1a;
        --youth-text: #ffffff;
        --youth-border: #666666;
    }
    
    .dark-mode .quick-access-card {
        border-width: 3px;
    }
}

/* Color scheme preference detection */
@media (prefers-color-scheme: dark) {
    /* These styles apply if user hasn't manually toggled and prefers dark mode */
    /* The Alpine.js component will handle the initial state */
}

/* Dark Mode - Online Status and Notifications */
.dark-mode .online-status-indicator.online {
    background-color: var(--youth-success);
}

.dark-mode .online-status-indicator.offline {
    background-color: var(--youth-warning);
}

.dark-mode #pwa-install-button {
    background-color: var(--youth-primary);
}

.dark-mode #pwa-install-button:hover {
    background-color: var(--youth-primary-dark);
}

.dark-mode .youth-notification {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}


/* ===================================
   Search Page & Container Dark Mode
   =================================== */

.dark-mode .youth-container {
  background-color: var(--youth-bg);
  color: var(--youth-text);
}

.dark-mode .youth-header {
  background: var(--youth-bg-secondary);
  border-color: var(--youth-border);
  color: var(--youth-text);
}

.dark-mode .youth-back-link {
  color: var(--youth-primary);
}

/* ===================================
   Search Dark Mode Styles
   =================================== */

.dark-mode .search-input {
  background: var(--youth-bg-secondary);
  border-color: var(--youth-border);
  color: var(--youth-text);
}

.dark-mode .search-input:focus {
  border-color: var(--youth-primary);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

.dark-mode .tag-button {
  background: var(--youth-bg-secondary);
  border-color: var(--youth-border);
  color: var(--youth-text);
}

.dark-mode .tag-button:hover {
  background: var(--youth-primary);
  color: var(--youth-bg);
}

.dark-mode .result-card {
  background: var(--youth-bg-secondary);
  border-color: var(--youth-border);
  color: var(--youth-text);
}

.dark-mode .result-card:hover {
  border-color: var(--youth-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .result-title mark,
.dark-mode .result-excerpt mark {
  background: rgba(251, 191, 36, 0.35);
  color: var(--youth-warning);
}

.dark-mode .result-tags .tag {
  background: rgba(255, 255, 255, 0.1);
  color: var(--youth-text-secondary);
}

.dark-mode .popular-searches h2,
.dark-mode .result-group-title,
.dark-mode .search-loading,
.dark-mode .search-count,
.dark-mode .no-results-message {
  color: var(--youth-text);
}

.dark-mode .search-container {
  color: var(--youth-text-secondary);
}


/* ========================================
   Small Groups Dark Mode Styles
   ======================================== */

.dark-mode .small-group-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-color);
}

.dark-mode .small-group-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dark-mode .group-status-bar,
.dark-mode .group-info-section,
.dark-mode .group-leader-contact {
  background: var(--dark-bg-primary);
}

.dark-mode .filter-select,
.dark-mode .form-input {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-color);
  color: var(--dark-text-primary);
}

.dark-mode .filter-select:hover,
.dark-mode .form-input:focus {
  border-color: var(--primary-color);
}

.dark-mode .form-section {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-color);
}

.dark-mode .consent-box {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.dark-mode .faq-item {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-color);
}

.dark-mode .faq-question:hover {
  background: var(--dark-bg-primary);
}

.dark-mode .success-message-box {
  background: var(--dark-bg-secondary);
}

.dark-mode .highlight-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
}


/* Dark Mode - Testimonies Section */
.dark-mode .youth-testimonies {
    background-color: var(--youth-dark-bg-secondary);
}

.dark-mode .section-title {
    color: var(--youth-dark-text);
}

.dark-mode .view-all-link {
    color: var(--youth-dark-primary);
}

.dark-mode .view-all-link:hover {
    color: var(--youth-dark-primary-light);
}

.dark-mode .testimony-card {
    background: var(--youth-dark-bg-card);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .testimony-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

.dark-mode .testimony-title {
    color: var(--youth-dark-text);
}

.dark-mode .testimony-excerpt {
    color: var(--youth-dark-text-secondary);
}

.dark-mode .testimony-footer {
    border-top-color: var(--youth-dark-border);
}

.dark-mode .testimony-author {
    color: var(--youth-dark-text-secondary);
}

.dark-mode .testimony-encourage-btn {
    border-color: var(--youth-dark-border);
    color: var(--youth-dark-text-secondary);
}

.dark-mode .testimony-encourage-btn:hover:not(:disabled) {
    background: rgba(236, 72, 153, 0.2);
    border-color: var(--youth-accent);
    color: var(--youth-accent);
}

.dark-mode .testimony-encourage-btn:disabled,
.dark-mode .testimony-encourage-btn.encouraged {
    background: rgba(236, 72, 153, 0.2);
    border-color: var(--youth-accent);
    color: var(--youth-accent);
}

.dark-mode .testimony-link {
    color: var(--youth-dark-primary);
}

.dark-mode .testimony-link:hover {
    color: var(--youth-dark-primary-light);
}


/* ========================================
   LEADERS' RESOURCES - DARK MODE
   ======================================== */

.dark-mode .leaders-resources-section {
    background: var(--youth-bg-dark);
}

.dark-mode .leaders-resources-section .section-title {
    color: var(--youth-text-dark);
}

.dark-mode .leaders-resources-section .section-intro {
    color: var(--youth-text-secondary-dark);
}

.dark-mode .resource-card {
    background: var(--youth-card-bg-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .resource-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark-mode .resource-title {
    color: var(--youth-text-dark);
}

.dark-mode .resource-description {
    color: var(--youth-text-secondary-dark);
}

.dark-mode .resource-meta {
    color: var(--youth-text-secondary-dark);
}

.dark-mode .training-category {
    background: var(--youth-card-bg-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .training-category h3 {
    color: var(--youth-text-dark);
}

.dark-mode .training-item {
    border-bottom-color: var(--youth-border-dark);
}

.dark-mode .training-item-content h4 {
    color: var(--youth-text-dark);
}

.dark-mode .training-item-content p {
    color: var(--youth-text-secondary-dark);
}

.dark-mode .safeguarding-section {
    background: var(--youth-bg-secondary-dark);
}

.dark-mode .policy-card {
    background: var(--youth-card-bg-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .policy-header h3 {
    color: var(--youth-text-dark);
}

.dark-mode .policy-description {
    color: var(--youth-text-secondary-dark);
}

.dark-mode .policy-highlights {
    background: var(--youth-bg-dark);
}

.dark-mode .policy-highlights h4 {
    color: var(--youth-text-dark);
}

.dark-mode .policy-highlights li {
    color: var(--youth-text-secondary-dark);
}

.dark-mode .contact-section {
    background: var(--youth-bg-dark);
}

.dark-mode .staff-card {
    background: var(--youth-card-bg-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .staff-info h3 {
    color: var(--youth-text-dark);
}

.dark-mode .contact-detail a {
    color: var(--youth-text-dark);
}

.dark-mode .contact-detail a:hover {
    color: var(--youth-primary);
}

.dark-mode .staff-availability {
    color: var(--youth-text-secondary-dark);
}

.dark-mode .emergency-contacts {
    background: var(--youth-bg-secondary-dark);
}

.dark-mode .emergency-contacts h3 {
    color: var(--youth-text-dark);
}

.dark-mode .emergency-card {
    background: var(--youth-card-bg-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .emergency-card h4 {
    color: var(--youth-text-dark);
}

.dark-mode .emergency-card p {
    color: var(--youth-text-secondary-dark);
}