/* Church Child Check-In System - Custom Styles */

/* Root Variables for Light and Dark Theme */
:root {
    /* Light Theme Color Palette - Modern & Accessible */
    --primary-color: #2563eb;        /* Bright Blue */
    --secondary-color: #64748b;      /* Slate Gray */
    --success-color: #059669;        /* Emerald Green */
    --warning-color: #d97706;        /* Amber Orange */
    --danger-color: #dc2626;         /* Red */
    --info-color: #0891b2;           /* Cyan */
    
    /* Light Mode Surface Colors */
    --surface-primary: #ffffff;      /* Pure White */
    --surface-secondary: #f8fafc;    /* Cool Gray 50 */
    --surface-tertiary: #f1f5f9;     /* Cool Gray 100 */
    --surface-accent: #e2e8f0;       /* Cool Gray 200 */
    --surface-muted: #cbd5e1;        /* Cool Gray 300 */
    
    /* Light Mode Text Colors */
    --text-primary: #0f172a;         /* Very Dark Blue */
    --text-secondary: #334155;       /* Dark Gray Blue */
    --text-muted: #64748b;           /* Medium Gray */
    --text-inverse: #ffffff;         /* White for dark backgrounds */
    
    /* Theme Variables */
    --bg-color: var(--surface-primary);
    --text-color: var(--text-primary);
    --card-bg: var(--surface-primary);
    --border-color: var(--surface-accent);
    --nav-bg: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
    --nav-text: var(--text-inverse);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Dark Theme */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #FFFFFF;
    --card-bg: #374151;
    --border-color: rgba(255, 255, 255, 0.15);
    --nav-bg: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    --nav-text: #ffffff;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Child-friendly colors - Enhanced contrast */
:root {
    --child-primary: #FF6B6B;
    --child-secondary: #4ECDC4;
    --child-accent: #FFE66D;
    --child-success: #00cec9;
    --child-warning: #e17055;
    --child-purple: #6c5ce7;
    --child-pink: #fd79a8;
    --child-coral: #FF6B9D;

    /* High contrast text colors */
    --text-high-contrast: #FFFFFF;
    --text-medium-contrast: #F8F9FA;
    --text-light-contrast: #E9ECEF;
    --text-dark-bg: #212529;
    --text-muted-light: #ADB5BD;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
    --gradient-success: linear-gradient(135deg, var(--success-color) 0%, #34d399 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning-color) 0%, #fbbf24 100%);
    --gradient-child: linear-gradient(135deg, var(--child-primary) 0%, var(--child-secondary) 100%);

    /* Enhanced shadows for better depth */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --shadow-child: 0 8px 25px -5px rgba(255, 107, 107, 0.4);
    --text-shadow-strong: 2px 2px 4px rgba(0, 0, 0, 0.8);
    --text-shadow-medium: 1px 1px 3px rgba(0, 0, 0, 0.6);
    --text-shadow-light: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Global Styles with Theme Support */
body {
    font-family: 'Poppins', 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    line-height: 1.6;
    font-size: 16px;
}

/* Light theme background - modern gradient */
body:not([data-theme="dark"]) {
    background: linear-gradient(135deg, var(--surface-primary) 0%, var(--surface-secondary) 100%);
    color: var(--text-primary);
}

/* Dark theme background */
[data-theme="dark"] body {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 50%, #1a202c 100%);
    background-attachment: fixed;
    color: #FFFFFF !important;
}

/* Light Mode Typography */
body:not([data-theme="dark"]) h1, 
body:not([data-theme="dark"]) h2, 
body:not([data-theme="dark"]) h3, 
body:not([data-theme="dark"]) h4, 
body:not([data-theme="dark"]) h5, 
body:not([data-theme="dark"]) h6 {
    color: var(--text-primary) !important;
    font-weight: 700;
    margin-bottom: 1rem;
}

body:not([data-theme="dark"]) .text-dark {
    color: var(--text-primary) !important;
}

body:not([data-theme="dark"]) .text-muted {
    color: var(--text-muted) !important;
}

body:not([data-theme="dark"]) p {
    color: var(--text-secondary) !important;
}

body:not([data-theme="dark"]) .card-text {
    color: var(--text-secondary) !important;
}

/* Dark theme heading styles - Enhanced Visibility */
[data-theme="dark"] h1,
[data-theme="dark"] h2, 
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .text-dark {
    color: #FFFFFF !important;
}

[data-theme="dark"] .text-muted {
    color: #E8EAED !important;
}

/* Dark theme paragraph and general text */
[data-theme="dark"] p {
    color: #E8EAED !important;
}

[data-theme="dark"] .lead {
    color: #F8F9FA !important;
}

[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: #E8EAED !important;
}

/* Dark theme general element colors */
[data-theme="dark"] div,
[data-theme="dark"] span,
[data-theme="dark"] li {
    color: inherit;
}

[data-theme="dark"] .container,
[data-theme="dark"] .row,
[data-theme="dark"] .col,
[data-theme="dark"] .col-* {
    color: #FFFFFF;
}

/* Enhanced dark theme text contrast - Fixed for readability */
[data-theme="dark"] .card-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .card-text,
[data-theme="dark"] p,
[data-theme="dark"] .lead {
    color: #F8F9FA !important;
    text-shadow: none;
}

[data-theme="dark"] .text-muted {
    color: #ADB5BD !important;
}

/* Additional card text targeting for dark mode */
[data-theme="dark"] .card p,
[data-theme="dark"] .card .card-text,
[data-theme="dark"] .card-body p,
[data-theme="dark"] .card-body .card-text,
[data-theme="dark"] .child-card p,
[data-theme="dark"] .child-card .card-text {
    color: #F8F9FA !important;
    text-shadow: none !important;
}

[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6,
[data-theme="dark"] .card .card-title {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Navigation Enhancements */
.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-brand {
    font-size: 1.5rem;
    color: var(--primary-color) !important;
    font-weight: 700;
}

/* Enhanced Navigation with Theme Support */
.navbar {
    background: var(--nav-bg) !important;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    z-index: 1050;
    position: relative;
    transition: all 0.3s ease;
}

.navbar-brand {
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 1.3rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.navbar-brand:hover {
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.nav-link {
    color: #FFFFFF !important;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 4px;
    padding: 8px 12px !important;
}

.nav-link:hover {
    background: rgba(255,255,255,0.1);
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.dropdown-menu {
    background: #FFFFFF;
    border: 2px solid rgba(0,0,0,0.1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-radius: 12px;
    z-index: 1060;
    position: absolute;
}

/* Dark mode dropdown styling */
[data-theme="dark"] .dropdown-menu {
    background: #374151;
    border: 2px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.dropdown-item {
    color: #2d3436 !important;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 4px 8px;
}

[data-theme="dark"] .dropdown-item {
    color: #F8F9FA !important;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFFFFF !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #FFFFFF !important;
}

/* Theme Toggle Button */
.theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 8px 16px;
    color: var(--nav-text);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.theme-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-icon {
    transform: rotate(180deg);
}

/* Card theming */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

[data-theme="dark"] .card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Form controls theming */
.form-control, .form-select {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--card-bg);
    border-color: var(--child-primary);
    color: var(--text-color);
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
}

/* Form labels and inputs dark mode contrast - Enhanced */
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: #F8F9FA !important;
    font-weight: 600;
}

[data-theme="dark"] .form-control {
    background-color: #3c4043 !important;
    border-color: #5f6368 !important;
    color: #F8F9FA !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: #3c4043 !important;
    border-color: #8ab4f8 !important;
    color: #F8F9FA !important;
    box-shadow: 0 0 0 0.25rem rgba(138, 180, 248, 0.25) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: #9aa0a6 !important;
}

[data-theme="dark"] .form-select {
    background-color: #3c4043 !important;
    border-color: #5f6368 !important;
    color: #F8F9FA !important;
}

[data-theme="dark"] .form-select:focus {
    background-color: #3c4043 !important;
    border-color: #8ab4f8 !important;
    color: #F8F9FA !important;
    box-shadow: 0 0 0 0.25rem rgba(138, 180, 248, 0.25) !important;
}

[data-theme="dark"] .form-select option {
    background: #3c4043 !important;
    color: #F8F9FA !important;
}

/* Step progress indicators dark mode styling - Enhanced */
[data-theme="dark"] .step-circle {
    background: #5f6368 !important;
    color: #FFFFFF !important;
    border: 2px solid #8ab4f8 !important;
}

[data-theme="dark"] .step-item.active .step-circle {
    background: #34a853 !important;
    color: #FFFFFF !important;
    border: 2px solid #34a853 !important;
}

[data-theme="dark"] .step-item.completed .step-circle {
    background: #34a853 !important;
    color: #FFFFFF !important;
    border: 2px solid #34a853 !important;
}

[data-theme="dark"] .step-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .step-item.active .step-label {
    color: #81c995 !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .step-line {
    background: #5f6368 !important;
}

/* Safety information text dark mode styling */
/* Make safety information text dark in dark mode */
[data-theme="dark"] .card-body h1,
[data-theme="dark"] .card-body h2,
[data-theme="dark"] .card-body h3,
[data-theme="dark"] .card-body h4,
[data-theme="dark"] .card-body h5,
[data-theme="dark"] .card-body h6,
[data-theme="dark"] .card-body p {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

/* Make Welcome to Chapel Check heading dark in dark mode */
[data-theme="dark"] .hero-content h1 {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

/* Make church card titles dark in dark mode */
[data-theme="dark"] .church-item h5 {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

/* Specific targeting for safety text container */
[data-theme="dark"] .p-3.rounded-3[style*="background: rgba(255,255,255,0.9)"] {
    background: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .p-3.rounded-3 p[style*="color: #2d3436"] {
    color: #1F2937 !important;
}

/* Hero Section with Theme Support */
.hero-section {
    background: linear-gradient(135deg, #FF6B9D 0%, #C44569 25%, #F8B500 50%, #FFD93D 75%, #6C5CE7 100%);
    border-radius: 25px;
    color: white;
    box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
    position: relative;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.3);
    min-height: 400px;
    z-index: 1;
    transition: all 0.3s ease;
}

[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #FF6B9D 50%, #6C5CE7 75%, #00b894 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.2'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M20 5l2 5h5l-4 3 1.5 5L20 15l-4.5 3L17 13l-4-3h5z'/%3E%3Cpolygon points='30,8 32,12 36,12 33,15 34,19 30,17 26,19 27,15 24,12 28,12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.4;
}

.hero-section::after {
    content: '🌟 ⭐ 🎈 🎉 🌈 ✨ 🎊 🌟';
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    font-size: 24px;
    text-align: center;
    animation: float 3s ease-in-out infinite;
    z-index: 2;
}

.hero-section > * {
    position: relative;
    z-index: 3;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Feature Cards - Super Colorful */
.card-hover {
    transition: all 0.4s ease;
    border: 3px solid rgba(255, 255, 255, 0.4) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(15px);
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(255, 107, 107, 0.2);
    position: relative;
    overflow: hidden;
    color: var(--text-dark-bg) !important;
}

.card-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #FFD93D15, #FF6B6B15, #4ECDC415, #45B7D115);
    opacity: 0;
    transition: all 0.3s ease;
}

.card-hover:hover::before {
    opacity: 1;
}

.card-hover:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(255, 107, 107, 0.3);
    border-color: rgba(255, 215, 61, 0.6) !important;
}

.feature-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border-radius: 50%;
    position: relative;
    animation: iconPulse 2s ease-in-out infinite;
}

.bg-primary.bg-gradient {
    background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%) !important;
}

.bg-success.bg-gradient {
    background: linear-gradient(135deg, #00D2FF 0%, #3A7BD5 100%) !important;
}

.bg-warning.bg-gradient {
    background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%) !important;
}

.bg-info.bg-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

@keyframes iconPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
    }
}

.feature-icon-sm {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Child-Friendly Form Styling */
.child-friendly-form {
    background: var(--gradient-child);
    border-radius: 20px;
    padding: 2rem;
    color: white;
    box-shadow: var(--shadow-child);
}

.child-friendly-form .form-control {
    border-radius: 15px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    padding: 12px 16px;
    transition: all 0.3s ease;
}

.child-friendly-form .form-control:focus {
    border-color: var(--child-accent);
    box-shadow: 0 0 0 0.2rem rgba(69, 183, 209, 0.25);
    transform: scale(1.02);
}

.child-friendly-form .btn {
    border-radius: 25px;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.child-friendly-form .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Registration Form Enhancements */
.guardian-item {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 15px !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.guardian-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px);
}

.child-info-section, .emergency-contact-section, .guardians-section {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Check-in/out Forms */
.checkin-form, .checkout-form {
    background: linear-gradient(135deg, var(--success-color) 0%, #34d399 100%);
    border-radius: 20px;
    color: white;
    box-shadow: 0 8px 25px -5px rgba(16, 185, 129, 0.3);
}

.checkout-form {
    background: var(--gradient-warning);
    box-shadow: 0 8px 25px -5px rgba(245, 158, 11, 0.3);
}

/* Enhanced text contrast for checkout forms */
.checkout-form h1,
.checkout-form h2,
.checkout-form h3,
.checkout-form h4,
.checkout-form h5,
.checkout-form h6,
.checkin-form h1,
.checkin-form h2,
.checkin-form h3,
.checkin-form h4,
.checkin-form h5,
.checkin-form h6 {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    font-weight: 800 !important;
}

.checkout-form p,
.checkout-form .text-muted,
.checkout-form .small,
.checkin-form p,
.checkin-form .text-muted,
.checkin-form .small {
    color: #F8F9FA !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
    font-weight: 600 !important;
}

.checkout-form .card-text,
.checkin-form .card-text {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
    font-weight: 600 !important;
}

/* High contrast for form labels and inputs in checkout/checkin */
.checkout-form label,
.checkin-form label {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    font-weight: 700 !important;
}

/* Light mode overrides for checkout confirmation text */
body:not([data-theme="dark"]) .checkout-form h1,
body:not([data-theme="dark"]) .checkout-form h2,
body:not([data-theme="dark"]) .checkout-form h3,
body:not([data-theme="dark"]) .checkout-form h4,
body:not([data-theme="dark"]) .checkout-form h5,
body:not([data-theme="dark"]) .checkout-form h6,
body:not([data-theme="dark"]) .checkin-form h1,
body:not([data-theme="dark"]) .checkin-form h2,
body:not([data-theme="dark"]) .checkin-form h3,
body:not([data-theme="dark"]) .checkin-form h4,
body:not([data-theme="dark"]) .checkin-form h5,
body:not([data-theme="dark"]) .checkin-form h6 {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

body:not([data-theme="dark"]) .checkout-form p,
body:not([data-theme="dark"]) .checkout-form .text-muted,
body:not([data-theme="dark"]) .checkout-form .small,
body:not([data-theme="dark"]) .checkout-form .card-text,
body:not([data-theme="dark"]) .checkin-form p,
body:not([data-theme="dark"]) .checkin-form .text-muted,
body:not([data-theme="dark"]) .checkin-form .small,
body:not([data-theme="dark"]) .checkin-form .card-text {
    color: #2d3436 !important;
    text-shadow: none !important;
}

body:not([data-theme="dark"]) .checkout-form label,
body:not([data-theme="dark"]) .checkin-form label {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

/* Light mode overrides for modal content */
body:not([data-theme="dark"]) .modal-content,
body:not([data-theme="dark"]) .modal-body,
body:not([data-theme="dark"]) .modal-header {
    color: #1a1a1a !important;
}

body:not([data-theme="dark"]) .modal-content h1,
body:not([data-theme="dark"]) .modal-content h2,
body:not([data-theme="dark"]) .modal-content h3,
body:not([data-theme="dark"]) .modal-content h4,
body:not([data-theme="dark"]) .modal-content h5,
body:not([data-theme="dark"]) .modal-content h6,
body:not([data-theme="dark"]) .modal-body h1,
body:not([data-theme="dark"]) .modal-body h2,
body:not([data-theme="dark"]) .modal-body h3,
body:not([data-theme="dark"]) .modal-body h4,
body:not([data-theme="dark"]) .modal-body h5,
body:not([data-theme="dark"]) .modal-body h6 {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

body:not([data-theme="dark"]) .modal-content p,
body:not([data-theme="dark"]) .modal-body p,
body:not([data-theme="dark"]) .modal-content .text-muted,
body:not([data-theme="dark"]) .modal-body .text-muted,
body:not([data-theme="dark"]) .modal-content div,
body:not([data-theme="dark"]) .modal-body div {
    color: #2d3436 !important;
    text-shadow: none !important;
}

/* Light Mode Admin Dashboard - Modern Design */
body:not([data-theme="dark"]) .admin-dashboard {
    background: var(--surface-primary);
    border-radius: 16px;
    margin-bottom: 2rem;
    border: 1px solid var(--surface-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body:not([data-theme="dark"]) .stats-card {
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid var(--surface-accent);
    background: var(--surface-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body:not([data-theme="dark"]) .stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

body:not([data-theme="dark"]) .stats-card .card-body {
    background: transparent;
    padding: 1.5rem;
}

body:not([data-theme="dark"]) .stats-card .card-title {
    color: var(--text-primary) !important;
    font-weight: 700;
    font-size: 1.1rem;
}

body:not([data-theme="dark"]) .stats-card .card-text {
    color: var(--text-secondary) !important;
}

body:not([data-theme="dark"]) .stats-card h1,
body:not([data-theme="dark"]) .stats-card h2,
body:not([data-theme="dark"]) .stats-card h3,
body:not([data-theme="dark"]) .stats-card h4,
body:not([data-theme="dark"]) .stats-card h5,
body:not([data-theme="dark"]) .stats-card h6 {
    color: var(--text-primary) !important;
}

body:not([data-theme="dark"]) .stats-card .text-muted {
    color: var(--text-muted) !important;
}

/* Light Mode Card System - Complete Redesign */
body:not([data-theme="dark"]) .card {
    background: var(--surface-primary) !important;
    border: 1px solid var(--surface-accent) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
}

body:not([data-theme="dark"]) .card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

body:not([data-theme="dark"]) .card-header {
    background: var(--surface-tertiary) !important;
    border-bottom: 1px solid var(--surface-accent) !important;
    color: var(--text-primary) !important;
}

body:not([data-theme="dark"]) .card-body {
    background: var(--surface-primary) !important;
    color: var(--text-primary) !important;
}

body:not([data-theme="dark"]) .card-title {
    color: var(--text-primary) !important;
    font-weight: 700;
}

body:not([data-theme="dark"]) .card-text {
    color: var(--text-secondary) !important;
}

body:not([data-theme="dark"]) .card h1,
body:not([data-theme="dark"]) .card h2,
body:not([data-theme="dark"]) .card h3,
body:not([data-theme="dark"]) .card h4,
body:not([data-theme="dark"]) .card h5,
body:not([data-theme="dark"]) .card h6 {
    color: var(--text-primary) !important;
}

body:not([data-theme="dark"]) .card p {
    color: var(--text-secondary) !important;
}

body:not([data-theme="dark"]) .card .text-muted {
    color: var(--text-muted) !important;
}

body:not([data-theme="dark"]) .card small,
body:not([data-theme="dark"]) .card .small {
    color: var(--text-muted) !important;
}

/* Dark theme card adjustments - Enhanced */
[data-theme="dark"] .card {
    background-color: #2d3142 !important;
    border-color: #5f6368 !important;
    color: #F8F9FA !important;
}

[data-theme="dark"] .card-header {
    background-color: #3c4043 !important;
    border-color: #5f6368 !important;
    color: #F8F9FA !important;
}

[data-theme="dark"] .card-body {
    background-color: #2d3142 !important;
    color: #F8F9FA !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-title h1,
[data-theme="dark"] .card-title h2,
[data-theme="dark"] .card-title h3,
[data-theme="dark"] .card-title h4,
[data-theme="dark"] .card-title h5,
[data-theme="dark"] .card-title h6 {
    color: #F8F9FA !important;
}

[data-theme="dark"] .card-text {
    color: #E8EAED !important;
}

/* Light mode admin dashboard specific card styling */
body:not([data-theme="dark"]) .admin-dashboard .card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Light mode - Dark cards (Currently Checked In, Checked Out Today, etc.) */
body:not([data-theme="dark"]) .card[style*="background: #374151"],
body:not([data-theme="dark"]) .card[style*="background:#374151"],
body:not([data-theme="dark"]) .card.bg-secondary {
    background: #374151 !important;
    color: #ffffff !important;
}

body:not([data-theme="dark"]) .card[style*="background: #374151"] .card-title,
body:not([data-theme="dark"]) .card[style*="background:#374151"] .card-title,
body:not([data-theme="dark"]) .card.bg-secondary .card-title,
body:not([data-theme="dark"]) .card[style*="background: #374151"] h1,
body:not([data-theme="dark"]) .card[style*="background: #374151"] h2,
body:not([data-theme="dark"]) .card[style*="background: #374151"] h3,
body:not([data-theme="dark"]) .card[style*="background: #374151"] h4,
body:not([data-theme="dark"]) .card[style*="background: #374151"] h5,
body:not([data-theme="dark"]) .card[style*="background: #374151"] h6 {
    color: #ffffff !important;
    text-shadow: none !important;
}

body:not([data-theme="dark"]) .card[style*="background: #374151"] .card-text,
body:not([data-theme="dark"]) .card[style*="background:#374151"] .card-text,
body:not([data-theme="dark"]) .card.bg-secondary .card-text,
body:not([data-theme="dark"]) .card[style*="background: #374151"] p {
    color: #e2e8f0 !important;
}

/* Light mode - Generic dark background cards for better contrast */
body:not([data-theme="dark"]) .card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dark gray cards in light mode - improve contrast */
body:not([data-theme="dark"]) .card.bg-dark,
body:not([data-theme="dark"]) .card[class*="bg-dark"],
body:not([data-theme="dark"]) .card[class*="bg-secondary"] {
    background: #2d3748 !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

body:not([data-theme="dark"]) .card.bg-dark .card-title,
body:not([data-theme="dark"]) .card[class*="bg-dark"] .card-title,
body:not([data-theme="dark"]) .card[class*="bg-secondary"] .card-title,
body:not([data-theme="dark"]) .card.bg-dark h1,
body:not([data-theme="dark"]) .card.bg-dark h2,
body:not([data-theme="dark"]) .card.bg-dark h3,
body:not([data-theme="dark"]) .card.bg-dark h4 {
    color: #ffffff !important;
}

body:not([data-theme="dark"]) .card.bg-dark .card-text,
body:not([data-theme="dark"]) .card[class*="bg-dark"] .card-text,
body:not([data-theme="dark"]) .card[class*="bg-secondary"] .card-text,
body:not([data-theme="dark"]) .card.bg-dark p {
    color: #e2e8f0 !important;
}

/* Light mode - Specific styling for admin dashboard dark cards */
body:not([data-theme="dark"]) .card[style*="background-color: #374151"],
body:not([data-theme="dark"]) .card[style*="background-color:#374151"],
body:not([data-theme="dark"]) .card[style*="background: #374151"],
body:not([data-theme="dark"]) .card[style*="background:#374151"] {
    background: #374151 !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

body:not([data-theme="dark"]) .card[style*="background-color: #374151"] *,
body:not([data-theme="dark"]) .card[style*="background-color:#374151"] *,
body:not([data-theme="dark"]) .card[style*="background: #374151"] *,
body:not([data-theme="dark"]) .card[style*="background:#374151"] * {
    color: #ffffff !important;
}

body:not([data-theme="dark"]) .card[style*="background-color: #374151"] .card-title,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] h1,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] h2,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] h3,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] h4,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] h5,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] h6 {
    color: #ffffff !important;
}

body:not([data-theme="dark"]) .card[style*="background-color: #374151"] .card-text,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] p,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] .small,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] small {
    color: #e2e8f0 !important;
}

/* Light mode - Fix for any remaining dark background elements */
body:not([data-theme="dark"]) .card[style*="background"],
body:not([data-theme="dark"]) .card[class*="bg-"] {
    color: inherit;
}

body:not([data-theme="dark"]) .card[style*="background-color: #374151"] label,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] .form-label,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] .form-text,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] span,
body:not([data-theme="dark"]) .card[style*="background-color: #374151"] div {
    color: #ffffff !important;
}

/* Light mode - Additional targeting for keyword management cards */
body:not([data-theme="dark"]) .card-body[style*="background-color: #374151"],
body:not([data-theme="dark"]) .card-body[style*="background-color:#374151"] {
    background: #374151 !important;
    color: #ffffff !important;
}

body:not([data-theme="dark"]) .card-body[style*="background-color: #374151"] *,
body:not([data-theme="dark"]) .card-body[style*="background-color:#374151"] * {
    color: #ffffff !important;
}

/* Light mode - Universal dark background text contrast fixes */
body:not([data-theme="dark"]) div[style*="background-color: #374151"],
body:not([data-theme="dark"]) div[style*="background:#374151"],
body:not([data-theme="dark"]) div[style*="background-color:#374151"],
body:not([data-theme="dark"]) div[style*="background: #374151"] {
    color: #ffffff !important;
}

body:not([data-theme="dark"]) div[style*="background-color: #374151"] *,
body:not([data-theme="dark"]) div[style*="background:#374151"] *,
body:not([data-theme="dark"]) div[style*="background-color:#374151"] *,
body:not([data-theme="dark"]) div[style*="background: #374151"] * {
    color: #ffffff !important;
}

body:not([data-theme="dark"]) div[style*="background-color: #374151"] h1,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] h2,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] h3,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] h4,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] h5,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] h6,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] label,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] p,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] span,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] .form-label,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] .text-muted,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] small {
    color: #ffffff !important;
}

/* Light mode - Specific fixes for keyword management cards */
body:not([data-theme="dark"]) .col-md-4 > div[style*="background"],
body:not([data-theme="dark"]) .keyword-card,
body:not([data-theme="dark"]) div[class*="rounded"][style*="background"] {
    color: #ffffff !important;
}

body:not([data-theme="dark"]) .col-md-4 > div[style*="background"] *,
body:not([data-theme="dark"]) .keyword-card *,
body:not([data-theme="dark"]) div[class*="rounded"][style*="background"] * {
    color: #ffffff !important;
}

/* Light mode - Catch-all for any dark backgrounds */
body:not([data-theme="dark"]) [style*="background-color: #2d3748"],
body:not([data-theme="dark"]) [style*="background-color:#2d3748"],
body:not([data-theme="dark"]) [style*="background-color: #374151"],
body:not([data-theme="dark"]) [style*="background-color:#374151"],
body:not([data-theme="dark"]) [style*="background-color: #1f2937"],
body:not([data-theme="dark"]) [style*="background-color:#1f2937"],
body:not([data-theme="dark"]) [style*="background: #2d3748"],
body:not([data-theme="dark"]) [style*="background:#2d3748"],
body:not([data-theme="dark"]) [style*="background: #374151"],
body:not([data-theme="dark"]) [style*="background:#374151"],
body:not([data-theme="dark"]) [style*="background: #1f2937"],
body:not([data-theme="dark"]) [style*="background:#1f2937"] {
    color: #ffffff !important;
}

body:not([data-theme="dark"]) [style*="background-color: #2d3748"] *,
body:not([data-theme="dark"]) [style*="background-color:#2d3748"] *,
body:not([data-theme="dark"]) [style*="background-color: #374151"] *,
body:not([data-theme="dark"]) [style*="background-color:#374151"] *,
body:not([data-theme="dark"]) [style*="background-color: #1f2937"] *,
body:not([data-theme="dark"]) [style*="background-color:#1f2937"] *,
body:not([data-theme="dark"]) [style*="background: #2d3748"] *,
body:not([data-theme="dark"]) [style*="background:#2d3748"] *,
body:not([data-theme="dark"]) [style*="background: #374151"] *,
body:not([data-theme="dark"]) [style*="background:#374151"] *,
body:not([data-theme="dark"]) [style*="background: #1f2937"] *,
body:not([data-theme="dark"]) [style*="background:#1f2937"] * {
    color: #ffffff !important;
}

/* Light mode - Text input styling for dark background forms */
body:not([data-theme="dark"]) [style*="background-color: #374151"] .form-control,
body:not([data-theme="dark"]) [style*="background: #374151"] .form-control,
body:not([data-theme="dark"]) div[style*="background-color: #374151"] input,
body:not([data-theme="dark"]) div[style*="background: #374151"] input {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Light mode - Small text elements (timestamps, etc.) */
body:not([data-theme="dark"]) .card .small,
body:not([data-theme="dark"]) .card small,
body:not([data-theme="dark"]) .card .text-muted {
    color: #6c757d !important;
}

body:not([data-theme="dark"]) .card.bg-dark .small,
body:not([data-theme="dark"]) .card.bg-dark small,
body:not([data-theme="dark"]) .card.bg-dark .text-muted,
body:not([data-theme="dark"]) .card[class*="bg-dark"] .small,
body:not([data-theme="dark"]) .card[class*="bg-dark"] small,
body:not([data-theme="dark"]) .card[class*="bg-dark"] .text-muted {
    color: #cbd5e0 !important;
}

/* Light Mode Button System - Modern Design */
body:not([data-theme="dark"]) .btn {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}

body:not([data-theme="dark"]) .btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-inverse) !important;
}

body:not([data-theme="dark"]) .btn-primary:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: var(--text-inverse) !important;
}

body:not([data-theme="dark"]) .btn-success:hover {
    background-color: #047857 !important;
    border-color: #047857 !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: var(--text-inverse) !important;
}

body:not([data-theme="dark"]) .btn-warning:hover {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .btn-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
    color: var(--text-inverse) !important;
}

body:not([data-theme="dark"]) .btn-info:hover {
    background-color: #0e7490 !important;
    border-color: #0e7490 !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: var(--text-inverse) !important;
}

body:not([data-theme="dark"]) .btn-danger:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--text-inverse) !important;
}

body:not([data-theme="dark"]) .btn-secondary:hover {
    background-color: #475569 !important;
    border-color: #475569 !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

/* Light Mode Outline Buttons */
body:not([data-theme="dark"]) .btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

body:not([data-theme="dark"]) .btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .btn-outline-success {
    color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    background-color: transparent !important;
}

body:not([data-theme="dark"]) .btn-outline-success:hover {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .btn-outline-danger {
    color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    background-color: transparent !important;
}

body:not([data-theme="dark"]) .btn-outline-danger:hover {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

body:not([data-theme="dark"]) .btn-outline-secondary {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    background-color: transparent !important;
}

body:not([data-theme="dark"]) .btn-outline-secondary:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

/* Dark theme modal adjustments */
[data-theme="dark"] .modal-content {
    background-color: #2d3142 !important;
    border-color: #5f6368 !important;
    color: #F8F9FA !important;
}

[data-theme="dark"] .modal-header {
    background-color: #3c4043 !important;
    border-color: #5f6368 !important;
    color: #F8F9FA !important;
}

[data-theme="dark"] .modal-body {
    background-color: #2d3142 !important;
    color: #F8F9FA !important;
}

[data-theme="dark"] .modal-footer {
    background-color: #3c4043 !important;
    border-color: #5f6368 !important;
}

/* Status Badges */
.badge {
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.status-checked-in {
    background: var(--child-success) !important;
    color: white;
}

.status-checked-out {
    background: var(--child-warning) !important;
    color: white;
}

/* Super Admin Dashboard */
.superadmin-dashboard {
    background: linear-gradient(135deg, var(--dark-color) 0%, #374151 100%);
    color: white;
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* Form Validation Enhancements */
.was-validated .form-control:valid {
    border-color: var(--child-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2396ceb4' d='m2.3 6.73.94-.94 1.7 1.7L7.86 4.56l.94.94-4.86 4.86z'/%3e%3c/svg%3e");
}

.was-validated .form-control:invalid {
    border-color: var(--child-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff6b6b'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 5.8 4.4 4.4M10.2 5.8l-4.4 4.4'/%3e%3c/svg%3e");
}

/* Alert Enhancements */
.alert {
    border-radius: 15px;
    border: none;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(5px);
}

.alert-success {
    background: linear-gradient(135deg, rgba(150, 206, 180, 0.9) 0%, rgba(150, 206, 180, 0.7) 100%);
    color: #065f46;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(254, 202, 87, 0.9) 0%, rgba(254, 202, 87, 0.7) 100%);
    color: #92400e;
}

.alert-danger, .alert-error {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.7) 100%);
    color: #7f1d1d;
}

.alert-info {
    background: linear-gradient(135deg, rgba(69, 183, 209, 0.9) 0%, rgba(69, 183, 209, 0.7) 100%);
    color: #1e3a8a;
}

/* Dark theme alert styles */
[data-theme="dark"] .alert-info {
    background: linear-gradient(135deg, rgba(0, 172, 193, 0.9) 0%, rgba(0, 172, 193, 0.7) 100%);
    color: #FFFFFF !important;
    border: 1px solid #00acc1;
}

[data-theme="dark"] .alert-success {
    background: linear-gradient(135deg, rgba(52, 168, 83, 0.9) 0%, rgba(52, 168, 83, 0.7) 100%);
    color: #FFFFFF !important;
    border: 1px solid #34a853;
}

[data-theme="dark"] .alert-warning {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.9) 0%, rgba(255, 152, 0, 0.7) 100%);
    color: #000000 !important;
    border: 1px solid #ff9800;
}

[data-theme="dark"] .alert-danger {
    background: linear-gradient(135deg, rgba(234, 67, 53, 0.9) 0%, rgba(234, 67, 53, 0.7) 100%);
    color: #FFFFFF !important;
    border: 1px solid #ea4335;
}

/* Button Enhancements - Improved Contrast and Readability */
.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    text-transform: none;
    font-size: 0.95rem;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #FFFFFF !important;
    text-shadow: none;
    min-contrast: 4.5;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    color: #ffffff !important;
}

.btn-success {
    background-color: #198754;
    border-color: #198754;
    color: #ffffff !important;
}

.btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
    color: #ffffff !important;
}

.btn-info {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    color: #000000 !important;
}

.btn-info:hover {
    background-color: #31d2f2;
    border-color: #25cff2;
    color: #000000 !important;
}

.btn-warning {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: #ffffff !important;
}

.btn-warning:hover {
    background-color: #e06b0a;
    border-color: #e06b0a;
    color: #ffffff !important;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
    color: #ffffff !important;
}

@keyframes buttonGlow {
    from {
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    }
    to {
        box-shadow: 0 4px 25px rgba(78, 205, 196, 0.6);
    }
}

/* Table Enhancements - Improved Contrast */
.table {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    overflow: hidden;
    color: #212529;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.table thead th {
    background: rgba(79, 70, 229, 0.85);
    border: none;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 1rem;
    text-shadow: none;
}

.table tbody tr {
    border: none;
    transition: all 0.3s ease;
    color: #212529;
    background: rgba(255, 255, 255, 0.9);
}

.table tbody tr:hover {
    background: rgba(79, 70, 229, 0.05);
    transform: scale(1.01);
}

.table tbody td {
    border: none;
    padding: 1rem;
    vertical-align: middle;
    color: #212529;
    font-weight: 500;
}

/* Improved badge contrast */
.table .badge {
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

.table .badge.bg-success {
    background-color: #198754 !important;
    color: #ffffff !important;
}

.table .badge.bg-warning {
    background-color: #fd7e14 !important;
    color: #ffffff !important;
}

.table .badge.bg-primary {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

/* Dark theme table adjustments */
[data-theme="dark"] .table {
    background: rgba(55, 65, 81, 0.95);
    color: #F8F9FA;
    border: 1px solid rgba(255, 255, 255, 0.125);
}

[data-theme="dark"] .table tbody tr {
    background: rgba(55, 65, 81, 0.8);
    color: #F8F9FA;
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(79, 70, 229, 0.15);
}

[data-theme="dark"] .table tbody td {
    color: #F8F9FA;
}

[data-theme="dark"] .table thead th {
    color: #F8F9FA;
    background: rgba(79, 70, 229, 0.85);
}

/* Bootstrap table-light override for better contrast */
.table-light th {
    background-color: rgba(79, 70, 229, 0.85) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
}

/* More specific targeting for collapsible table headers */
.collapse .table .table-light th,
.collapse .table thead.table-light th,
.table thead.table-light th {
    background-color: rgba(79, 70, 229, 0.85) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
}

/* Dark theme table-light override */
[data-theme="dark"] .table-light th {
    background-color: rgba(79, 70, 229, 0.85) !important;
    color: #F8F9FA !important;
    font-weight: 800 !important;
    border: none !important;
}

/* Collapsible table content contrast fixes */
.collapse .table td, .collapse .table th {
    color: #212529 !important;
}

.collapse .table tbody td {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.collapse .table tbody tr:hover {
    background-color: rgba(79, 70, 229, 0.05) !important;
}

/* Dark theme collapsible table */
[data-theme="dark"] .collapse .table td, 
[data-theme="dark"] .collapse .table th {
    color: #F8F9FA !important;
}

[data-theme="dark"] .collapse .table tbody td {
    background-color: rgba(55, 65, 81, 0.8) !important;
    color: #F8F9FA !important;
}

[data-theme="dark"] .collapse .table tbody tr:hover {
    background-color: rgba(79, 70, 229, 0.15) !important;
}

/* Force better contrast for all table elements in collapsible sections */
#absentTodayCollapse .table-light th,
#absentTodayCollapse thead th,
#absentTodayCollapse .table th {
    background-color: rgba(79, 70, 229, 0.85) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
    text-transform: uppercase !important;
}

/* Ensure all text in collapsible table headers is visible */
#absentTodayCollapse .table thead th {
    background-color: rgba(79, 70, 229, 0.85) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
    text-transform: uppercase !important;
}

/* Light mode: Make collapsible header text black */
body:not([data-theme="dark"]) .card-header button {
    color: #212529 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

body:not([data-theme="dark"]) .card-header button i {
    color: #212529 !important;
}

body:not([data-theme="dark"]) .card-header small {
    color: #495057 !important;
    font-weight: 600 !important;
}

/* Specific targeting for the absent children collapsible header */
body:not([data-theme="dark"]) .card-header[style*="background: linear-gradient(135deg, #6c757d 0%, #495057 100%)"] button,
body:not([data-theme="dark"]) .card-header[style*="background: linear-gradient(135deg, #6c757d 0%, #495057 100%)"] small {
    color: #000000 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

/* Keep dark mode styling for collapsible headers */
[data-theme="dark"] .card-header button {
    color: #ffffff !important;
}

[data-theme="dark"] .card-header button i {
    color: #ffffff !important;
}

[data-theme="dark"] .card-header small {
    color: #ffffff !important;
}

/* Collapsible header styling with classes */
.collapsible-header-btn {
    color: #ffffff !important;
}

.collapsible-header-icon {
    color: #ffffff !important;
}

.collapsible-header-small {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Light mode overrides for collapsible headers */
body:not([data-theme="dark"]) .collapsible-header-btn {
    color: #212529 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

body:not([data-theme="dark"]) .collapsible-header-icon {
    color: #212529 !important;
}

body:not([data-theme="dark"]) .collapsible-header-small {
    color: #495057 !important;
    font-weight: 600 !important;
}

/* Dark theme badge improvements */
[data-theme="dark"] .table .badge.bg-success {
    background-color: #34a853 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table .badge.bg-warning {
    background-color: #ff9800 !important;
    color: #000000 !important;
}

[data-theme="dark"] .table .badge.bg-primary {
    background-color: #4285f4 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table .badge.bg-info {
    background-color: #00acc1 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table .badge.bg-danger {
    background-color: #ea4335 !important;
    color: #ffffff !important;
}xt-medium-contrast);
}

/* Loading States */
.loading {
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Mobile-First Responsive Design */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
    /* Container and spacing adjustments */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Hero section mobile optimization */
    .hero-section {
        padding: 2rem 0 !important;
        margin-bottom: 2rem !important;
    }
    
    .hero-content {
        padding: 1.5rem !important;
        border-radius: 15px !important;
    }
    
    /* Typography scaling */
    .display-3 {
        font-size: 2rem !important;
    }
    
    .lead {
        font-size: 1rem !important;
    }
    
    /* Navigation improvements */
    .navbar-brand {
        font-size: 1.1rem !important;
    }
    
    .nav-link {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Card optimizations */
    .card {
        margin-bottom: 1rem;
        border-radius: 12px !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-header {
        padding: 1rem !important;
    }
    
    /* Feature cards mobile layout */
    .child-card {
        transform: none !important;
        margin-bottom: 1.5rem;
    }
    
    .feature-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 2rem !important;
    }
    
    /* Button improvements */
    .btn-lg {
        padding: 0.8rem 1.5rem;
        font-size: 1rem !important;
    }
    
    .wiggle-button {
        padding: 0.8rem 1.2rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Form elements */
    .form-control-lg, .form-select-lg {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    
    /* Table responsiveness */
    .table-responsive {
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .table {
        font-size: 0.85rem;
    }
    
    .table td, .table th {
        padding: 0.5rem !important;
        white-space: nowrap;
    }
    
    /* Dashboard mobile fixes */
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    .d-flex.gap-2 {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Statistics cards */
    .col-md-3 {
        margin-bottom: 1rem;
    }
    
    /* Modal improvements */
    .modal-dialog {
        margin: 1rem;
    }
    
    .modal-content {
        border-radius: 12px;
    }
    
    /* Step progress indicator */
    .step-progress {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
    
    .step-item {
        min-width: 80px;
        text-align: center;
    }
    
    .step-label {
        font-size: 0.8rem;
    }
    
    /* Guardian items */
    .guardian-item {
        margin-bottom: 1rem;
        padding: 1rem;
        border-radius: 8px;
        background: #f8f9fa;
    }
    
    /* Floating shapes adjustment */
    .floating-shapes .shape {
        font-size: 1.2rem;
    }
    
    /* Admin dashboard mobile */
    .attendance-table-container {
        max-height: 250px;
    }
    
    /* Print hide on mobile */
    .d-print-none {
        display: none !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-section {
        padding: 3rem 0;
    }
    
    .hero-content {
        padding: 2rem;
    }
    
    .display-3 {
        font-size: 2.5rem;
    }
    
    .feature-icon {
        width: 70px;
        height: 70px;
        font-size: 2.2rem;
    }
    
    .child-card {
        transform: rotate(0deg) !important;
    }
    
    .table td, .table th {
        padding: 0.75rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-content {
        padding: 2.5rem;
    }
    
    .display-3 {
        font-size: 3rem;
    }
    
    /* Dashboard header adjustments */
    .d-flex.justify-content-between .d-flex.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
}

/* Legacy mobile support */
@media (max-width: 768px) {
    .hero-section {
        margin: 0 -15px;
        border-radius: 0;
    }

    .child-friendly-form,
    .checkin-form,
    .checkout-form {
        margin: 0 -15px;
        border-radius: 0;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .guardian-item {
        margin-bottom: 1rem;
    }

    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Additional mobile improvements */
    .emoji-large { 
        font-size: 2.5rem; 
    }
    
    .rainbow-text { 
        font-size: 2rem !important; 
    }
    
    .shape { 
        font-size: 1.5rem; 
    }
    
    .child-card { 
        transform: rotate(0deg) !important; 
        margin-bottom: 2rem; 
    }
}

/* Print Styles */
@media print {
    .navbar,
    .btn,
    .alert,
    .modal {
        display: none !important;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    body {
        background: white !important;
    }
}

/* Accessibility Enhancements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus States */
.form-control:focus,
.btn:focus {
    outline: 3px solid rgba(79, 70, 229, 0.3);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0000ff;
        --success-color: #008000;
        --warning-color: #ff8000;
        --danger-color: #ff0000;
    }
}

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

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    }

    .card {
        background: rgba(31, 41, 55, 0.9) !important;
        color: white;
    }

    .navbar {
        background: rgba(31, 41, 55, 0.95) !important;
    }

    .table {
        background: rgba(31, 41, 55, 0.9);
        color: white;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

/* Mobile-Optimized Table Responsiveness */
.mobile-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.mobile-table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.mobile-table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.mobile-table-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.mobile-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Mobile Card-Style Tables */
@media (max-width: 767px) {
    .table-responsive-mobile {
        border: 0;
    }
    
    .table-responsive-mobile .table,
    .table-responsive-mobile .table thead,
    .table-responsive-mobile .table tbody,
    .table-responsive-mobile .table th,
    .table-responsive-mobile .table td,
    .table-responsive-mobile .table tr {
        display: block;
    }
    
    .table-responsive-mobile .table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .table-responsive-mobile .table tr {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .table-responsive-mobile .table td {
        border: none;
        position: relative;
        padding: 0.5rem 0;
        text-align: left !important;
        border-bottom: 1px solid #eee;
    }
    
    .table-responsive-mobile .table td:last-child {
        border-bottom: none;
    }
    
    .table-responsive-mobile .table td:before {
        content: attr(data-label) ": ";
        font-weight: bold;
        color: var(--primary-color);
        display: inline-block;
        width: 100px;
        min-width: 100px;
    }
}

/* Touch-Friendly Button Improvements */
@media (max-width: 767px) {
    .btn {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    .btn-sm {
        min-height: 36px;
        min-width: 36px;
        padding: 0.5rem 0.75rem;
    }
    
    .btn-group .btn {
        min-height: 44px;
    }
}

/* FINAL OVERRIDE - Modern Light Mode Admin Interface */
/* This section overrides all previous problematic dark styling */
body:not([data-theme="dark"]) {
    /* Override any inline style dark backgrounds with light theme */
    & [style*="background-color: #374151"],
    & [style*="background-color:#374151"],
    & [style*="background: #374151"],
    & [style*="background:#374151"],
    & [style*="background-color: #2d3748"],
    & [style*="background-color:#2d3748"],
    & [style*="background: #2d3748"],
    & [style*="background:#2d3748"],
    & [style*="background-color: #1f2937"],
    & [style*="background-color:#1f2937"],
    & [style*="background: #1f2937"],
    & [style*="background:#1f2937"] {
        background: var(--surface-primary) !important;
        border: 1px solid var(--surface-accent) !important;
        color: var(--text-primary) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Override all child elements in these containers */
    & [style*="background-color: #374151"] *,
    & [style*="background-color:#374151"] *,
    & [style*="background: #374151"] *,
    & [style*="background:#374151"] *,
    & [style*="background-color: #2d3748"] *,
    & [style*="background-color:#2d3748"] *,
    & [style*="background: #2d3748"] *,
    & [style*="background:#2d3748"] *,
    & [style*="background-color: #1f2937"] *,
    & [style*="background-color:#1f2937"] *,
    & [style*="background: #1f2937"] *,
    & [style*="background:#1f2937"] * {
        color: var(--text-primary) !important;
    }
    
    /* Special handling for text elements */
    & [style*="background-color: #374151"] h1,
    & [style*="background-color: #374151"] h2,
    & [style*="background-color: #374151"] h3,
    & [style*="background-color: #374151"] h4,
    & [style*="background-color: #374151"] h5,
    & [style*="background-color: #374151"] h6 {
        color: var(--text-primary) !important;
        font-weight: 700 !important;
    }
    
    & [style*="background-color: #374151"] p,
    & [style*="background-color: #374151"] .card-text,
    & [style*="background-color: #374151"] .text-muted,
    & [style*="background-color: #374151"] small,
    & [style*="background-color: #374151"] span,
    & [style*="background-color: #374151"] label,
    & [style*="background-color: #374151"] .form-label {
        color: var(--text-secondary) !important;
    }
    
    /* Form elements within these containers */
    & [style*="background-color: #374151"] .form-control,
    & [style*="background-color: #374151"] input,
    & [style*="background-color: #374151"] textarea,
    & [style*="background-color: #374151"] select {
        background-color: var(--surface-primary) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--surface-accent) !important;
        border-radius: 6px !important;
    }
    
    & [style*="background-color: #374151"] .form-control:focus,
    & [style*="background-color: #374151"] input:focus,
    & [style*="background-color: #374151"] textarea:focus,
    & [style*="background-color: #374151"] select:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25) !important;
    }
}

/* Enhanced Step Progress for Mobile */
.step-progress-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.step-progress-mobile .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    position: relative;
}

.step-progress-mobile .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.step-progress-mobile .step-item.active .step-circle {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.step-progress-mobile .step-item.completed .step-circle {
    background: var(--success-color);
    color: white;
}

.step-progress-mobile .step-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    color: #6c757d;
    line-height: 1.2;
}

.step-progress-mobile .step-item.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

.step-progress-mobile .step-line {
    flex: 1;
    height: 2px;
    background: #e9ecef;
    margin: 0 0.5rem;
    position: relative;
    top: -25px;
}

.step-progress-mobile .step-item.completed + .step-line {
    background: var(--success-color);
}

/* Mobile Form Improvements */
@media (max-width: 575px) {
    .form-floating {
        margin-bottom: 1rem;
    }
    
    .form-control, .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 8px;
    }
    
    .input-group {
        flex-wrap: wrap;
    }
    
    .input-group > .form-control,
    .input-group > .form-select {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* Mobile Modal Improvements */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-header {
        padding: 1rem;
        flex-wrap: wrap;
    }
    
    .modal-title {
        font-size: 1.1rem;
        line-height: 1.3;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .modal-footer .btn {
        flex: 1;
        min-width: calc(50% - 0.25rem);
    }
}

/* Child-Friendly Animations and Styles */
.floating-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.shape {
    position: absolute;
    font-size: 2rem;
    animation: float 6s ease-in-out infinite;
    opacity: 0.7;
}

.shape-1 { top: 10%; left: 10%; animation-delay: 0s; }
.shape-2 { top: 20%; right: 10%; animation-delay: 1s; }
.shape-3 { top: 50%; left: 5%; animation-delay: 2s; }
.shape-4 { top: 70%; right: 15%; animation-delay: 3s; }
.shape-5 { bottom: 20%; left: 20%; animation-delay: 4s; }
.shape-6 { bottom: 10%; right: 20%; animation-delay: 5s; }

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

.bounce-animation {
    animation: bounceIn 1s ease-out;
}

@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.wiggle-animation {
    animation: wiggle 2s ease-in-out infinite;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    75% { transform: rotate(-1deg); }
}

.pulse-animation {
    animation: colorPulse 3s ease-in-out infinite;
}

@keyframes colorPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.rainbow-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #a29bfe, #fd79a8, #feca57);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow 3s ease-in-out infinite;
}

@keyframes rainbow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.emoji-large {
    font-size: 4rem;
    display: inline-block;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.fun-badge {
    display: inline-block;
    background: linear-gradient(135deg, #feca57, #ff9ff3);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 8px 20px rgba(254, 202, 87, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.5);
}

.child-card {
    transition: all 0.3s ease;
    border: 3px solid rgba(255, 255, 255, 0.4) !important;
}

.child-card:hover {
    transform: translateY(-10px) rotate(0deg) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
}

.child-card .card-title {
    color: var(--text-high-contrast) !important;
    text-shadow: var(--text-shadow-strong) !important;
    font-weight: 800 !important;
}

.child-card .card-text {
    color: var(--text-high-contrast) !important;
    text-shadow: var(--text-shadow-medium) !important;
    font-weight: 600 !important;
}

.bounce-on-hover {
    transition: all 0.3s ease;
}

.bounce-on-hover:hover {
    animation: bounceHover 0.6s ease;
}

@keyframes bounceHover {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.wiggle-button {
    transition: all 0.3s ease;
    font-size: 1.1rem !important;
    padding: 12px 25px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.wiggle-button:hover {
    animation: buttonWiggle 0.5s ease;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

@keyframes buttonWiggle {
    0%, 100% { transform: rotate(0deg) translateY(-3px); }
    25% { transform: rotate(2deg) translateY(-3px); }
    75% { transform: rotate(-2deg) translateY(-3px); }
}

.floating-badge {
    animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

.church-item {
    transition: all 0.3s ease !important;
}

.church-item:hover {
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3) !important;
}

/* Fun hover effects for feature cards */
.child-card:nth-child(1):hover { animation: tiltLeft 0.6s ease; }
.child-card:nth-child(2):hover { animation: tiltRight 0.6s ease; }
.child-card:nth-child(3):hover { animation: tiltLeft 0.6s ease; }
.child-card:nth-child(4):hover { animation: tiltRight 0.6s ease; }

@keyframes tiltLeft {
    0%, 100% { transform: rotate(-1deg) translateY(-10px); }
    50% { transform: rotate(2deg) translateY(-15px); }
}

@keyframes tiltRight {
    0%, 100% { transform: rotate(1deg) translateY(-10px); }
    50% { transform: rotate(-2deg) translateY(-15px); }
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .emoji-large { font-size: 2.5rem; }
    .rainbow-text { font-size: 2rem !important; }
    .shape { font-size: 1.5rem; }
    .child-card { transform: rotate(0deg) !important; margin-bottom: 2rem; }
}

/* Light mode button text - make sure buttons have dark text */
body:not([data-theme="dark"]) .btn,
body:not([data-theme="dark"]) .btn-primary,
body:not([data-theme="dark"]) .btn-success,
body:not([data-theme="dark"]) .btn-warning,
body:not([data-theme="dark"]) .btn-info,
body:not([data-theme="dark"]) .btn-danger,
body:not([data-theme="dark"]) .btn-light,
body:not([data-theme="dark"]) .wiggle-button {
    color: #1a1a1a !important;
    text-shadow: none !important;
    font-weight: bold !important;
}

/* Outline button styles for better contrast */
.btn-outline-primary {
    color: #0d6efd !important;
    border-color: #0d6efd;
    background-color: transparent;
}

.btn-outline-primary:hover {
    color: #ffffff !important;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-outline-secondary {
    color: #6c757d !important;
    border-color: #6c757d;
    background-color: transparent;
}

.btn-outline-secondary:hover {
    color: #ffffff !important;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-success {
    color: #198754 !important;
    border-color: #198754;
    background-color: transparent;
}

.btn-outline-success:hover {
    color: #ffffff !important;
    background-color: #198754;
    border-color: #198754;
}

.btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545;
    background-color: transparent;
}

.btn-outline-danger:hover {
    color: #ffffff !important;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-info {
    color: #0dcaf0 !important;
    border-color: #0dcaf0;
    background-color: transparent;
}

.btn-outline-info:hover {
    color: #000000 !important;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}

/* Dark theme button styles - Enhanced Contrast */
[data-theme="dark"] .btn-primary {
    background-color: #4285f4 !important;
    border-color: #4285f4 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #3367d6 !important;
    border-color: #3367d6 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-success {
    background-color: #34a853 !important;
    border-color: #34a853 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-success:hover {
    background-color: #2d8f41 !important;
    border-color: #2d8f41 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-info {
    background-color: #00acc1 !important;
    border-color: #00acc1 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-info:hover {
    background-color: #00838f !important;
    border-color: #00838f !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-warning {
    background-color: #ff9800 !important;
    border-color: #ff9800 !important;
    color: #000000 !important;
}

[data-theme="dark"] .btn-warning:hover {
    background-color: #f57c00 !important;
    border-color: #f57c00 !important;
    color: #000000 !important;
}

[data-theme="dark"] .btn-danger {
    background-color: #ea4335 !important;
    border-color: #ea4335 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-danger:hover {
    background-color: #d33b2c !important;
    border-color: #d33b2c !important;
    color: #ffffff !important;
}

/* Dark theme outline buttons */
[data-theme="dark"] .btn-outline-primary {
    color: #8ab4f8 !important;
    border-color: #8ab4f8 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #8ab4f8 !important;
    border-color: #8ab4f8 !important;
    color: #000000 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #e8eaed !important;
    border-color: #5f6368 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #5f6368 !important;
    border-color: #5f6368 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-success {
    color: #81c995 !important;
    border-color: #81c995 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: #81c995 !important;
    border-color: #81c995 !important;
    color: #000000 !important;
}

[data-theme="dark"] .btn-outline-danger {
    color: #f28b82 !important;
    border-color: #f28b82 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #f28b82 !important;
    border-color: #f28b82 !important;
    color: #000000 !important;
}

[data-theme="dark"] .btn-outline-info {
    color: #78d9ec !important;
    border-color: #78d9ec !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-info:hover {
    background-color: #78d9ec !important;
    border-color: #78d9ec !important;
    color: #000000 !important;
}

/* Dark theme general button styles */
[data-theme="dark"] .btn,
[data-theme="dark"] .wiggle-button {
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}