/* ============================================================
   STATISTICS DASHBOARD - MOBILE FIRST
   Verbeterde versie met klassiek groen thema
   ============================================================ */

/* ========================================
   0. BASE RESET & BODY STYLES
   ======================================== */
* {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100%;
}

/* ========================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ======================================== */
:root {
    /* Primary Colors - Klassiek Groen */
    --primary-color: #2c5530;
    --primary-light: #3f7a48;
    --primary-dark: #1a3d1f;
    --primary-soft: rgba(44, 85, 48, 0.14);
    --primary-border: rgba(44, 85, 48, 0.28);
    --primary-contrast: #ffffff;
    --primary-hover: #234523;

    /* Accent Colors */
    --accent-blue: #2196F3;
    --accent-blue-light: #64B5F6;
    --accent-purple: #9C27B0;
    --accent-orange: #FF9800;
    --accent-orange-light: #FFB74D;
    --accent-red: #f44336;
    --accent-red-light: #ef5350;
    --accent-teal: #009688;
    --accent-pink: #E91E63;
    --accent-lime: #CDDC39;

    /* Success/Warning/Error */
    --success-color: #2c5530;
    --success-light: #3f7a48;
    --success-contrast: #ffffff;
    --warning-color: #FF9800;
    --warning-light: #FFB74D;
    --warning-contrast: #ffffff;
    --error-color: #f44336;
    --error-light: #ef5350;
    --error-contrast: #ffffff;

    /* Text Colors */
    --text-color: #2c3e50;
    --text-secondary: #546e7a;
    --text-muted: #90a4ae;

    /* Surface Colors */
    --surface-color: #ffffff;
    --surface-muted: #f8f9fa;
    --surface-border: #e0e0e0;
    --bg-light: #f8f9fa;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Transitions */
    --transition: 0.3s ease;
    --transition-fast: 0.15s ease;
    --transition-slow: 0.5s ease;

    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;

    /* Layout */
    --content-max-width: 1400px;
    --card-padding-mobile: 1rem;
    --card-padding-tablet: 1.5rem;
    --card-padding-desktop: 2rem;
}

/* ========================================
   2. UTILITY CLASSES
   ======================================== */
.hidden { display: none !important; }
.d-none { display: none !important; }
.mb-12 { margin-bottom: 12px !important; }
.mt-18 { margin-top: 18px !important; }
.span-2 { grid-column: span 2; }

/* Tailwind-like utilities for backwards compatibility */
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-xs { font-size: var(--font-size-xs) !important; }

.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }

.text-primary { color: var(--primary-color) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }

/* Card Index Classes (voor stacking/ordering) */
.card-index-0 { --card-index: 0; }
.card-index-1 { --card-index: 1; }
.card-index-2 { --card-index: 2; }
.card-index-3 { --card-index: 3; }
.card-index-4 { --card-index: 4; }
.card-index-9 { --card-index: 9; }

/* ========================================
   3. LAYOUT CONTAINERS
   ======================================== */
.comprehensive-stats-wrapper {
    padding: var(--space-lg) var(--space-md);
    max-width: 1800px; /* Increased from 1400px for better screen usage */
    margin: 0 auto;
}

/* Mobile: reduce padding to maximize content space */
@media (max-width: 767px) {
    .comprehensive-stats-wrapper {
        padding: var(--space-md) var(--space-xs);
    }

    .dashboard-header,
    .stats-header,
    .analysis-header {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }

    .dashboard-header h1,
    .stats-header h1,
    .analysis-header h1 {
        font-size: var(--font-size-xl);
    }

    .section-title {
        font-size: var(--font-size-lg);
    }
}

.statistics-content {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Analysis section - wider for statistics */
.analysis-section {
    max-width: 100%;
    margin-bottom: var(--space-2xl);
}

/* Mobile: reduce spacing */
@media (max-width: 600px) {
    .analysis-section {
        margin-bottom: var(--space-lg);
    }
}

/* ========================================
   4. HEADERS
   ======================================== */
.dashboard-header,
.analysis-header {
    background: linear-gradient(135deg, var(--surface-color) 0%, var(--surface-muted) 100%);
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
    border: 1px solid var(--surface-border);
}

.dashboard-header h1,
.analysis-header h1 {
    font-size: var(--font-size-3xl);
    color: var(--text-color);
    margin-bottom: var(--space-sm);
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-header p,
.analysis-header p {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin: 0;
}

/* Stats Header */
.stats-header {
    background: var(--surface-color);
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.stats-header h1 {
    margin: 0 0 var(--space-sm) 0;
    color: var(--text-color);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    padding-bottom: var(--space-md);
    border-bottom: 3px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.stats-header h1 i {
    color: var(--primary-color);
}

.stats-subtitle,
.stats-header .subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin: var(--space-md) 0 0 0;
}

/* ========================================
   5. SECTION TITLES
   ======================================== */
.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-color);
    margin: var(--space-2xl) 0 var(--space-lg) 0;
    padding-bottom: var(--space-md);
    border-bottom: 3px solid var(--primary-color);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--accent-blue);
}

.overview-title {
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ========================================
   6. STAT CARDS (Mobile First)
   ======================================== */
.stats-overview,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.stat-card {
    background: var(--surface-color);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--surface-border);
    text-align: center;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-border);
}

.stat-card .stat-icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-md);
}

.stat-card .stat-value {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: var(--space-sm);
    line-height: 1;
}

.stat-card .stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Stat Form Styling */
.stat-form {
    max-width: 700px;
    margin: 0 auto var(--space-2xl) auto;
}

.stat-filter-header {
    text-align: center;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--primary-color);
}

.stat-filter-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 var(--space-sm) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.stat-filter-title i {
    font-size: 1.2em;
}

.stat-filter-subtitle {
    color: var(--text-secondary);
    margin: 0;
    font-size: var(--font-size-sm);
}

.metrics-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.metric-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.metric-row label.metric-name {
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.metric-row label.metric-name i {
    color: var(--primary-color);
    width: 20px;
}

/* Form inputs */
.metric-row input[type="date"],
.metric-row select {
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
    background: var(--surface-color);
}

.metric-row input[type="date"]:focus,
.metric-row select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Checkbox rows */
.checkbox-row {
    padding: var(--space-sm) 0;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.checkbox-wrapper:hover {
    background: var(--primary-soft);
}

.checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.checkbox-label {
    margin: 0;
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    color: var(--text-color);
}

.checkbox-label i {
    color: var(--primary-color);
}

/* Form actions */
.form-actions {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--surface-border);
}

.form-actions button[type="submit"] {
    width: 100%;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-lg);
}

/* Collapsible content */
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.collapsible-content[data-collapsed="false"] {
    max-height: 2000px;
}

/* ========================================
   7. CHART CONTAINERS (Mobile First)
   ======================================== */
.overview-grid,
.category-grid,
.insights-grid,
.charts-grid,
.chart-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default: 1 column */
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.chart-card,
.chart-container {
    max-width: 900px; /* Prevent charts from becoming too wide */
}

/* On mobile, force single column */
@media (max-width: 767px) {
    .overview-grid,
    .category-grid,
    .insights-grid,
    .charts-grid,
    .chart-grid {
        grid-template-columns: 1fr;
    }

    .chart-card,
    .chart-container {
        max-width: 100%; /* Full width on mobile */
    }

    .chart-wrapper {
        height: 280px;
        min-height: 280px;
    }

    .chart-wrapper canvas {
        min-height: 280px !important;
    }
}

/* On tablets and up, allow max 2 columns */
@media (min-width: 768px) {
    .overview-grid,
    .category-grid,
    .insights-grid,
    .charts-grid,
    .chart-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        max-width: 100%;
    }

    /* If there's only 1 item, center it and limit width */
    .charts-grid > *:only-child,
    .chart-grid > *:only-child {
        max-width: 800px;
        margin: 0 auto;
        justify-self: center;
    }
}

/* On larger screens, still max 2 columns but charts can grow */
@media (min-width: 1200px) {
    .charts-grid,
    .chart-grid {
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    }

    .chart-wrapper {
        height: 400px;
        min-height: 400px;
    }

    .chart-wrapper canvas {
        min-height: 400px !important;
    }
}

/* On very large screens, max 2 columns with constrained size */
@media (min-width: 1600px) {
    .charts-grid,
    .chart-grid {
        grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
        max-width: 1600px; /* Reduced from 1800px */
        margin-left: auto;
        margin-right: auto;
    }

    /* Never more than 2 columns */
    .charts-grid > *:nth-child(n+3),
    .chart-grid > *:nth-child(n+3) {
        grid-column: auto;
    }

    .chart-wrapper {
        height: 450px;
        min-height: 450px;
    }

    .chart-wrapper canvas {
        min-height: 450px !important;
    }
}

.charts-section {
    margin-bottom: var(--space-xl);
}

.chart-container,
.chart-card {
    background: var(--surface-color);
    padding: var(--card-padding-mobile);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--surface-border);
    transition: all var(--transition);
}

.chart-container:hover,
.chart-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

/* Mobile: reduce padding for better space usage */
@media (max-width: 767px) {
    .chart-container,
    .chart-card {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }

    .chart-header {
        margin-bottom: var(--space-md);
        padding-bottom: var(--space-sm);
    }

    .chart-header h3,
    .chart-title {
        font-size: var(--font-size-base);
    }

    .chart-badge {
        font-size: var(--font-size-xs);
        padding: 2px var(--space-sm);
    }
}

.chart-container h3,
.chart-card h3 {
    font-size: var(--font-size-xl);
    color: var(--text-color);
    margin-bottom: var(--space-lg);
    font-weight: 700;
}

.chart-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--surface-border);
}

.chart-header h3 {
    margin: 0;
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.chart-title i {
    color: var(--primary-color);
}

.chart-badge {
    background: var(--primary-soft);
    color: var(--primary-color);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    align-self: flex-start;
}

.chart-wrapper {
    position: relative;
    height: 320px; /* Increased from 280px */
    width: 100%;
    overflow: hidden; /* Prevent chart overflow on mobile */
    min-height: 280px; /* Minimum height to prevent squishing */
}

/* Ensure charts scale properly on mobile */
.chart-wrapper canvas {
    max-width: 100%;
    height: auto !important;
    min-height: 280px !important; /* Force minimum height */
}

.full-width-chart,
.chart-card.full-width {
    grid-column: 1 / -1;
    max-width: 1400px; /* Maximum width for readability */
    margin-left: auto;
    margin-right: auto;
}

.full-width-chart .chart-wrapper,
.chart-card.full-width .chart-wrapper {
    height: 400px; /* Increased from 320px */
    min-height: 400px;
}

.full-width-chart .chart-wrapper canvas,
.chart-card.full-width .chart-wrapper canvas {
    min-height: 400px !important;
}

/* Larger full-width charts on big screens */
@media (min-width: 1400px) {
    .full-width-chart,
    .chart-card.full-width {
        max-width: 1600px;
    }

    .full-width-chart .chart-wrapper,
    .chart-card.full-width .chart-wrapper {
        height: 450px;
        min-height: 450px;
    }

    .full-width-chart .chart-wrapper canvas,
    .chart-card.full-width .chart-wrapper canvas {
        min-height: 450px !important;
    }
}

/* ========================================
   8. INSIGHT BOXES
   ======================================== */
.insight-box {
    background: var(--primary-soft);
    border-left: 4px solid var(--primary-color);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.insight-box > i {
    color: var(--primary-color);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    margin-top: 2px;
}

.insight-box h4 {
    color: var(--primary-color);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-sm);
    font-weight: 700;
}

.insight-box p {
    margin: 0;
    color: var(--text-color);
    line-height: 1.6;
    flex: 1;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   9. CARDS (Insight, Highlight, Category)
   ======================================== */
.insight-card,
.highlight-card,
.recommendations-card,
.category-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 2px solid rgba(44, 85, 48, 0.12);
    padding: var(--card-padding-mobile);
    margin-bottom: var(--space-lg);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

/* Decorative top border */
.insight-card::before,
.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--accent-blue) 100%);
    opacity: 0.8;
}

.insight-card:hover,
.highlight-card:hover,
.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(44, 85, 48, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.insight-card:hover::before,
.category-card:hover::before {
    opacity: 1;
    height: 5px;
}

.recommendations-card {
    background: linear-gradient(135deg, rgba(44, 85, 48, 0.08) 0%, var(--surface-color) 100%);
    border-color: var(--primary-border);
}

.highlight-card {
    background: linear-gradient(135deg, #ffffff 0%, rgba(44, 85, 48, 0.04) 100%);
    border-left: 5px solid var(--primary-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.category-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--surface-border);
}

.category-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--text-color);
}

.category-badge {
    background: var(--primary-soft);
    color: var(--primary-color);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    align-self: flex-start;
}

/* ========================================
   10. METRICS
   ======================================== */
.metrics-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.metric-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.metric-name {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.metric-score {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    font-weight: 700;
}

.metric-bar {
    height: 8px;
    background: var(--surface-muted);
    border-radius: var(--space-xs);
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue));
    border-radius: var(--space-xs);
    transition: width 0.6s ease;
}

/* ========================================
   11. RADAR SECTION
   ======================================== */
.radar-section {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--surface-border);
}

.radar-section h3 {
    text-align: center;
    color: var(--text-color);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-xl);
}

.radar-container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--surface-color);
    padding: var(--card-padding-mobile);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-border);
    min-height: 400px; /* Prevent squishing */
}

.radar-container canvas {
    min-height: 350px !important;
}

/* ========================================
   12. CATEGORY TABS
   ======================================== */
.category-tabs {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    background: var(--surface-color);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.category-tab {
    background: var(--surface-muted);
    color: var(--text-color);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex: 1 1 auto;
    min-width: 120px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.category-tab i {
    font-size: 1.1em;
    transition: transform var(--transition-fast);
}

.category-tab:hover,
.category-tab:focus {
    background: var(--primary-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
    outline: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.category-tab:hover i,
.category-tab:focus i {
    transform: scale(1.1);
}

.category-tab.active {
    background: var(--primary-color);
    color: var(--primary-contrast);
    border-color: var(--primary-dark);
    box-shadow: var(--shadow-md);
}

.category-tab.active i {
    color: var(--primary-contrast);
}

/* Responsive tabs */
@media (max-width: 768px) {
    .category-tabs {
        flex-direction: column;
    }

    .category-tab {
        width: 100%;
    }

    .category-tab span {
        font-size: var(--font-size-sm);
    }
}

/* ========================================
   13. CATEGORY STATS SECTIONS
   ======================================== */
section.category-stats {
    background: var(--surface-color);
    padding: var(--card-padding-mobile);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: none;
}

section.category-stats.active {
    display: block;
}

section.category-stats h2 {
    margin-top: 0;
    color: var(--text-color);
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-xl);
    font-size: var(--font-size-2xl);
}

/* ========================================
   14. RANKING & BADGES
   ======================================== */
.ranking-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    height: 2em;
    text-align: center;
    font-weight: 700;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-color);
    margin-right: var(--space-sm);
    font-size: var(--font-size-base);
}

.ranking-badge.gold {
    background: gold;
    color: #fff;
}

.ranking-badge.silver {
    background: #bdbdbd;
    color: #fff;
}

.ranking-badge.bronze {
    background: #cd7f32;
    color: #fff;
}

.score-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #fff;
    margin-right: var(--space-sm);
}

.score-badge.high {
    background: var(--success-color);
}

.score-badge.medium {
    background: var(--warning-color);
}

.score-badge.low {
    background: var(--error-color);
}

/* ========================================
   15. STRENGTH/WEAKNESS ITEMS
   ======================================== */
.category-item.strength-item,
.category-item.weakness-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-base);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.category-item.strength-item {
    border-left: 4px solid var(--primary-color);
}

.category-item.weakness-item {
    border-left: 4px solid var(--accent-red);
}

.category-item .category-stats {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.category-score {
    font-weight: 700;
    color: var(--primary-color);
    font-size: var(--font-size-lg);
}

/* ========================================
   16. IMPROVEMENT METRICS
   ======================================== */
.improvement-metric {
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    border-left: 4px solid var(--surface-border);
    transition: all var(--transition);
}

.improvement-metric:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.improvement-metric.positive {
    border-left-color: var(--success-color);
    background: linear-gradient(135deg, var(--surface-muted) 0%, rgba(44, 85, 48, 0.08) 100%);
}

.improvement-metric.info {
    border-left-color: var(--accent-blue);
    background: linear-gradient(135deg, var(--surface-muted) 0%, rgba(33, 150, 243, 0.08) 100%);
}

.improvement-metric.warning {
    border-left-color: var(--accent-orange);
    background: linear-gradient(135deg, var(--surface-muted) 0%, rgba(255, 152, 0, 0.08) 100%);
}

.improvement-metric .metric-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.improvement-metric.positive .metric-icon {
    background: var(--success-color);
    color: var(--success-contrast);
}

.improvement-metric.info .metric-icon {
    background: var(--accent-blue);
    color: #ffffff;
}

.improvement-metric.warning .metric-icon {
    background: var(--accent-orange);
    color: #ffffff;
}

.improvement-metric .metric-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.improvement-metric .metric-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 600;
}

.improvement-metric .metric-value {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.4;
}

/* ========================================
   17. ACTION ITEMS
   ======================================== */
.action-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.action-number {
    background: var(--primary-color);
    color: var(--primary-contrast);
    border-radius: 50%;
    min-width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.action-text {
    flex: 1;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.5;
}

/* ========================================
   18. TRENDS
   ======================================== */
.key-insights {
    margin-top: var(--space-xl);
}

.trend-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    border-left: 3px solid transparent;
}

.trend-item.positive {
    border-left-color: var(--primary-color);
}

.trend-item.negative {
    border-left-color: var(--accent-red);
}

.trend-icon {
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
}

.trend-content {
    flex: 1;
}

.trend-metric {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.trend-value {
    font-size: var(--font-size-base);
    color: var(--text-color);
    font-weight: 700;
}

/* ========================================
   19. TRAINER FEEDBACK
   ======================================== */
.trainer-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.trainer-metric {
    text-align: center;
    padding: var(--space-md);
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
}

.feedback-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.feedback-item {
    padding: var(--space-sm);
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ========================================
   20. DATA TABLES
   ======================================== */
.data-table-container {
    background: var(--surface-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--surface-border);
    padding: var(--card-padding-mobile);
    margin-bottom: var(--space-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Mobile: ensure table can scroll horizontally */
@media (max-width: 600px) {
    .data-table-container {
        padding: var(--space-sm);
        margin-left: calc(var(--space-md) * -1);
        margin-right: calc(var(--space-md) * -1);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-top: var(--space-sm);
}

.data-table thead {
    background: var(--surface-muted);
}

.data-table th,
.data-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--surface-border);
    text-align: left;
}

.data-table th {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.data-table th i {
    color: var(--primary-color);
    margin-right: var(--space-xs);
}

.data-table td {
    color: var(--text-color);
    font-size: var(--font-size-sm);
}

.data-table tbody tr {
    transition: background-color var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--surface-muted);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ========================================
   21. COMPARISON BARS
   ======================================== */
.comparison-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.comparison-bar-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.comparison-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 600;
}

.comparison-bar {
    height: 32px;
    background: var(--surface-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    border: 2px solid var(--surface-border);
    display: flex;
    align-items: center;
}

.comparison-bar.mental {
    background: linear-gradient(90deg, rgba(33, 150, 243, 0.1) 0%, var(--primary-soft) 100%);
}

.comparison-bar.technical {
    background: linear-gradient(90deg, rgba(255, 152, 0, 0.1) 0%, var(--primary-soft) 100%);
}

.comparison-fill {
    height: 100%;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--space-md);
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--primary-contrast);
    background: var(--primary-color);
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comparison-bar.mental .comparison-fill {
    background: linear-gradient(90deg, var(--accent-blue) 0%, var(--primary-light) 100%);
}

.comparison-bar.technical .comparison-fill {
    background: linear-gradient(90deg, var(--accent-orange) 0%, var(--primary-light) 100%);
}

.comparison-score {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary-contrast);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========================================
   22. SYMMETRY DISPLAY
   ======================================== */
.symmetry-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid var(--surface-border);
}

.symmetry-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
}

.symmetry-label {
    color: var(--accent-blue);
    font-weight: 600;
}

.symmetry-value {
    color: var(--primary-color);
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.symmetry-difference {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.difference-label {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.difference-value {
    color: var(--accent-orange);
    font-weight: 700;
    font-size: var(--font-size-base);
}

/* ========================================
   23. FILTERS
   ======================================== */
.filter-collapse-wrapper {
    margin-bottom: var(--space-lg);
}

#filterCollapse {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stat-filter-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--space-sm);
}

.flex-align-gap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ========================================
   24. COLLAPSIBLE CONTENT
   ======================================== */
.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 1000px;
    opacity: 1;
}

.collapsible-content[data-collapsed="true"] {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.collapsible-icon {
    transition: transform 0.3s ease;
    display: inline-block;
    margin-right: var(--space-sm);
}

.collapsible-icon.rotated {
    transform: rotate(-90deg);
}

/* ========================================
   25. LICENSE PAGE STYLES
   ======================================== */
.license-status-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.current-license-card {
    background: linear-gradient(135deg, var(--primary-soft), var(--surface-color));
    border-radius: var(--radius-xl);
    padding: var(--card-padding-mobile);
    border: 2px solid var(--primary-border);
    position: relative;
    overflow: hidden;
}

.license-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.license-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.license-status {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: flex-start;
}

.license-status.active {
    background-color: var(--success-color);
    color: var(--success-contrast);
}

.license-status.expired {
    background-color: var(--error-color);
    color: var(--error-contrast);
}

.license-status.pending {
    background-color: var(--warning-color);
    color: var(--warning-contrast);
}

.license-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.license-detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.license-detail-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.license-detail-value {
    font-size: var(--font-size-base);
    color: var(--text-color);
    font-weight: 600;
}

.license-usage-stats {
    background-color: var(--surface-muted);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-top: var(--space-md);
}

.usage-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.usage-stat:last-child {
    margin-bottom: 0;
}

.usage-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.usage-value {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
}

.usage-progress {
    width: 100%;
    height: 6px;
    background-color: var(--surface-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: var(--space-sm);
}

.usage-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.usage-progress-bar.warning {
    background: linear-gradient(90deg, var(--warning-color), var(--warning-light));
}

.usage-progress-bar.danger {
    background: linear-gradient(90deg, var(--error-color), var(--error-light));
}

/* License Grid */
.licenses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.license-type-card {
    background-color: var(--surface-color);
    border-radius: var(--radius-xl);
    border: 2px solid var(--surface-border);
    padding: var(--card-padding-mobile);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.license-type-card:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.license-type-card.recommended {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-soft), var(--surface-color));
}

.license-type-card.recommended::before {
    content: '⭐ Aanbevolen';
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary-color);
    color: var(--primary-contrast);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-bottom-left-radius: var(--radius-lg);
}

.license-type-header {
    margin-bottom: var(--space-md);
}

.license-type-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 var(--space-sm) 0;
}

.license-type-price {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.license-type-price .currency {
    font-size: var(--font-size-base);
    font-weight: 500;
}

.license-type-description {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}

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

.license-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.license-features li::before {
    content: '✓';
    color: var(--success-color);
    font-weight: 600;
    flex-shrink: 0;
}

.license-features li.limited::before {
    content: '⚠';
    color: var(--warning-color);
}

.license-features li.disabled {
    color: var(--text-muted);
}

.license-features li.disabled::before {
    content: '✗';
    color: var(--error-color);
}

.license-type-actions {
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-sm);
    flex-direction: column;
}

/* License History */
.license-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.license-history-item {
    background-color: var(--surface-muted);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    border-left: 4px solid var(--surface-border);
}

.license-history-item.expired {
    border-left-color: var(--error-color);
}

.license-history-item.completed {
    border-left-color: var(--success-color);
}

.license-history-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.license-history-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-color);
}

.license-history-dates {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ========================================
   26. LOADING & EMPTY STATES
   ======================================== */
.loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--text-muted);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--surface-border);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.empty-state-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-color);
}

.empty-state-description {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* ========================================
   27. RESPONSIVE BREAKPOINTS (Mobile First)
   ======================================== */

/* Extra small mobile: < 480px (includes 393px) */
@media (max-width: 480px) {
    .comprehensive-stats-wrapper {
        padding: var(--space-sm);
    }

    .chart-wrapper {
        height: 240px !important;
        min-height: 200px !important;
    }

    .chart-wrapper canvas {
        min-height: 200px !important;
    }

    .full-width-chart .chart-wrapper,
    .chart-card.full-width .chart-wrapper {
        height: 280px !important;
        min-height: 280px !important;
    }

    .chart-card,
    .chart-container,
    .insight-card,
    .category-card {
        padding: var(--space-sm) !important;
    }

    .category-tabs {
        flex-direction: column;
        gap: var(--space-xs);
        padding: var(--space-sm);
    }

    .category-tab {
        width: 100%;
        text-align: left;
        padding: var(--space-md) var(--space-lg);
        font-size: var(--font-size-sm);
    }

    .dashboard-header h1,
    .stats-header h1,
    .section-title {
        font-size: var(--font-size-xl);
    }

    .improvement-metric {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-md) var(--space-sm);
    }

    .improvement-metric .metric-content {
        align-items: center;
    }

    .overview-grid,
    .insights-grid {
        gap: var(--space-sm);
    }
}

/* Small tablets: 600px */
@media (min-width: 600px) {
    .comprehensive-stats-wrapper {
        padding: var(--space-xl) var(--space-lg);
    }

    .comparison-bar-wrapper {
        flex-direction: row;
        align-items: center;
        gap: var(--space-md);
    }

    .comparison-label {
        min-width: 100px;
    }

    .comparison-bar {
        height: 28px;
    }

    .trainer-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .chart-badge,
    .category-badge {
        align-self: auto;
    }

    .category-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .license-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .license-status {
        align-self: auto;
    }

    .license-history-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Dashboard Responsive - 600px */
    .profile-card__summary {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .rides-list-item__footer {
        flex-direction: row;
    }

    .rides-card-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .rides-card-header-actions {
        flex-wrap: nowrap;
    }

    .profile-card .rides-card-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Tablets: 768px */
@media (min-width: 768px) {
    .chart-container,
    .chart-card,
    .category-card,
    .data-table-container,
    .radar-container {
        padding: var(--card-padding-tablet);
    }

    .current-license-card,
    .license-type-card {
        padding: var(--card-padding-tablet);
    }

    section.category-stats {
        padding: var(--card-padding-tablet);
    }

    .chart-wrapper {
        height: 320px;
    }

    .full-width-chart .chart-wrapper,
    .chart-card.full-width .chart-wrapper {
        height: 400px;
    }

    .license-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .licenses-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .license-type-actions {
        flex-direction: row;
    }

    /* Dashboard Responsive - 768px */
    .page-container {
        padding: var(--space-xl);
    }

    .rides-card {
        padding: var(--card-padding-tablet);
    }

    .rides-card-header {
        margin: calc(var(--card-padding-tablet) * -1);
        margin-bottom: var(--space-lg);
        padding: var(--space-lg) var(--card-padding-tablet);
    }

    .profile-card .rides-card-header {
        margin: calc(var(--card-padding-tablet) * -1);
        margin-bottom: var(--space-lg);
        padding: var(--space-lg) var(--card-padding-tablet);
    }

    .page-title {
        font-size: var(--font-size-4xl);
    }

    .cta-button-container {
        flex-direction: row;
        align-items: center;
    }
}

/* Desktop: 1024px */
@media (min-width: 1024px) {
    .comprehensive-stats-wrapper {
        padding: var(--space-2xl) var(--space-xl);
    }

    .full-width-chart,
    .chart-card.full-width {
        grid-column: 1 / -1;
    }

    .insight-card.action-plan-card {
        grid-column: span 2;
    }

    .chart-container,
    .chart-card,
    .category-card,
    .data-table-container {
        padding: var(--card-padding-desktop);
    }

    .current-license-card,
    .license-type-card {
        padding: var(--card-padding-desktop);
    }

    section.category-stats {
        padding: var(--card-padding-desktop);
    }

    .dashboard-header,
    .analysis-header {
        padding: var(--space-2xl) var(--space-xl);
    }

    .dashboard-header h1,
    .analysis-header h1 {
        font-size: var(--font-size-4xl);
    }
}

/* Large Desktop: 1280px */
@media (min-width: 1280px) {
    .licenses-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .license-details {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Extra Large Desktop: 1440px */
@media (min-width: 1440px) {
    .stats-overview,
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* ========================================
   28. DASHBOARD PAGE STYLES
   ======================================== */

/* Page Shell & Container */
.page-shell {
    background: var(--bg-light);
    min-height: 100vh;
    padding: var(--space-md);
    overflow-x: hidden;
}

.page-container {
    max-width: 1800px; /* Increased for better screen usage */
    margin: 0 auto;
    padding: 0;
}

/* Statistics pages need even more width */
.statistics-content .page-container,
body.statistics-page .page-container {
    max-width: 100%;
    padding: 0 var(--space-md);
}

/* Page Header */
.page-header {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: var(--space-sm);
}

.page-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin: 0;
}

/* Rides Card */
.rides-card {
    background: var(--surface-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--surface-border);
    margin-bottom: var(--space-xl);
    padding: var(--card-padding-mobile);
    transition: all var(--transition);
}

.rides-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-border);
}

.rides-card:last-child {
    margin-bottom: 0;
}

/* Rides Card Header */
.rides-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: var(--primary-color);
    color: var(--primary-contrast);
    margin: calc(var(--card-padding-mobile) * -1);
    margin-bottom: var(--space-lg);
    padding: var(--space-lg) var(--card-padding-mobile);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.rides-card-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--primary-contrast);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.rides-card-header h3 i {
    font-size: 0.9em;
}

.rides-section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--primary-contrast);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.rides-section-title i {
    font-size: 0.9em;
}

.rides-card-header-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Override for profile card - white background */
.profile-card .rides-card-header {
    background: var(--surface-color);
    border-bottom: 2px solid var(--surface-border);
    margin: calc(var(--card-padding-mobile) * -1);
    margin-bottom: var(--space-lg);
    padding: var(--space-lg) var(--card-padding-mobile);
    border-radius: 0;
}

.profile-card .rides-card-header h3,
.profile-card .profile-card__title {
    color: var(--text-color);
}

.profile-card .rides-card-header h3 i {
    color: var(--primary-color);
}

/* Rides Card Content */
.rides-card-content {
    padding-bottom: var(--space-sm);
}

/* Profile Card */
.profile-card__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.profile-card__summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-muted);
    display: block;
    border: 3px solid var(--surface-border);
}

.profile-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: var(--font-size-4xl);
}

.profile-card__grid {
    margin-top: var(--space-md);
    width: 100%;
}

.profile-card__grid dt {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.profile-card__grid dt i {
    color: var(--primary-color);
    font-size: 0.9em;
}

.profile-card__grid dd {
    margin-bottom: var(--space-md);
    color: var(--text-color);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.profile-empty-state {
    color: var(--text-muted) !important;
    font-style: italic;
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}

.profile-empty-state i {
    color: var(--warning-color);
    margin-top: 2px;
    flex-shrink: 0;
}

.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--primary-soft);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.mode-badge i {
    font-size: 0.9em;
}

/* Rides Buttons */
.rides-btn {
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-weight: 600;
    white-space: nowrap;
}

.rides-btn i {
    font-size: 0.9em;
}

.rides-btn-primary {
    background: var(--primary-color);
    color: var(--primary-contrast);
    border: 2px solid var(--primary-color);
}

.rides-btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.rides-btn-secondary {
    background: var(--surface-color);
    color: var(--text-color);
    border: 2px solid var(--surface-border);
}

.rides-btn-secondary:hover {
    background: var(--surface-muted);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.rides-btn-sm {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-md);
}

/* Rides List Items */
.rides-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rides-list-item {
    background: var(--surface-color);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    transition: all var(--transition);
}

.rides-list-item:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.rides-list-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--surface-border);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.rides-list-item__header-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.rides-list-item__date {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.rides-list-item__date i {
    color: var(--primary-color);
}

.rides-list-item__horse {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.rides-list-item__horse i {
    color: var(--primary-color);
}

.ride-score-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--primary-contrast);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.ride-score-badge i {
    font-size: 0.9em;
}

.rides-list-item__body {
    margin-bottom: var(--space-md);
}

.rides-list-item__details {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

.ride-detail {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: var(--space-xs) 0;
}

.ride-detail__icon {
    color: var(--primary-color);
    font-size: 1em;
    width: 1.2em;
    text-align: center;
    flex-shrink: 0;
}

.rides-list-item__footer {
    padding-top: var(--space-md);
    border-top: 1px solid var(--surface-border);
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Responsive: 2 kolommen op grotere schermen */
@media (min-width: 600px) {
    .rides-list-item__header-main {
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg);
    }

    .rides-list-item__date {
        font-size: var(--font-size-base);
    }

    .rides-list-item__details {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Location List */
.location-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-item {
    background: var(--surface-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    border: 1px solid var(--surface-border);
    border-left: 4px solid var(--primary-color);
    transition: all var(--transition);
}

.location-item:hover {
    border-color: var(--primary-border);
    border-left-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.location-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-md);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.location-item__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
}

.location-item__title .location-item__icon {
    color: var(--primary-color);
    font-size: var(--font-size-base);
}

.location-badge {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.location-badge--private {
    background: var(--warning-color);
    color: var(--warning-contrast);
}

.location-badge--public {
    background: var(--accent-blue);
    color: #ffffff;
}

.location-item__body {
    margin-bottom: var(--space-md);
}

.location-item__detail {
    margin: 0 0 var(--space-sm) 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.location-item__detail .location-item__icon {
    color: var(--primary-color);
    margin-top: 2px;
    flex-shrink: 0;
}

.location-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.location-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.location-meta-tag--manage {
    background: var(--primary-soft);
    color: var(--primary-color);
}

.location-item__footer {
    padding-top: var(--space-md);
    border-top: 1px solid var(--surface-border);
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

/* Empty State for Locations */
.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: var(--space-lg);
    opacity: 0.3;
    color: var(--primary-color);
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-color);
}

.empty-state-description {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state .rides-btn {
    margin-top: var(--space-md);
}

/* Stats Cards */
.rides-stats-card {
    background: var(--surface-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: 0;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--surface-border);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.rides-stats-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-border);
}

.rides-stats-card .stat-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-xs);
}

.rides-stats-card .stat-number,
.rides-stats-card strong {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-color);
    display: block;
    line-height: 1;
    margin: 0;
}

.rides-stats-card .stat-label,
.rides-stats-card small,
.rides-stats-card p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Stat number and label without icon (backwards compatibility) */
.rides-stats-card p:first-child:not(.stat-label):not(.stat-icon) {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-color);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.rides-stats-card p:last-child {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Grid Layouts */
.rides-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-md);
    margin-bottom: 0;
}

/* Stats grid should always be 2 columns on mobile, then 3 */
@media (min-width: 480px) {
    .rides-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   30. RIDE SHARE PAGE STYLES
   ======================================== */

/* Page Layout */
.ride-share-page {
    background: var(--bg-light);
    min-height: 100vh;
    padding: var(--space-md);
}

/* Share Grid */
.rides-grid-share {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

/* Full width cards */
.rides-grid-share .full-width {
    grid-column: 1 / -1;
}

/* Card Headers */
.card-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--surface-border);
}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.card-title i {
    color: var(--primary-color);
}

.card-header-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 var(--space-lg) 0;
    padding-bottom: var(--space-md);
    border-bottom: 3px solid var(--surface-border);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
}

.card-header-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    transition: width var(--transition);
}

.insight-card:hover .card-header-title::after,
.category-card:hover .card-header-title::after {
    width: 120px;
}

.card-header-title i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-lg);
}

.card-content {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Ride Info List */
.ride-info-list {
    margin: 0;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--surface-border);
    gap: var(--space-md);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row dt {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 140px;
}

.info-row dt i {
    color: var(--primary-color);
    width: 1.2em;
    text-align: center;
}

.info-row dd {
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-base);
    text-align: right;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

.badge-dressuur {
    background: var(--accent-purple);
    color: #ffffff;
}

.badge-jumping,
.badge-springen {
    background: var(--accent-orange);
    color: #ffffff;
}

.badge-environment {
    background: var(--accent-blue);
    color: #ffffff;
}

.badge-yes {
    background: var(--success-color);
    color: var(--success-contrast);
}

.badge-no {
    background: var(--surface-muted);
    color: var(--text-secondary);
}

.badge-placement {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--primary-contrast);
    font-weight: 700;
}

.badge-new {
    background: var(--accent-red);
    color: #ffffff;
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    margin-left: var(--space-sm);
}

/* Stirrups Butterfly Display */
.stirrups-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--surface-border);
}

.stirrups-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.stirrups-title i {
    color: var(--primary-color);
}

.stirrups-butterfly-display {
    background: linear-gradient(135deg, var(--primary-soft), rgba(74, 124, 89, 0.03));
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-border);
    padding: var(--space-lg);
}

.butterfly-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 80px;
    width: 100%;
}

.butterfly-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.butterfly-side--left {
    padding-right: var(--space-sm);
}

.butterfly-side--right {
    padding-left: var(--space-sm);
}

.butterfly-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.butterfly-side--left .butterfly-label {
    text-align: right;
}

.butterfly-side--right .butterfly-label {
    text-align: left;
}

.butterfly-bar-container {
    width: 100%;
    display: flex;
}

.butterfly-side--left .butterfly-bar-container {
    justify-content: flex-end;
}

.butterfly-side--right .butterfly-bar-container {
    justify-content: flex-start;
}

.butterfly-bar {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 var(--space-md);
    color: white;
    min-width: 50px;
    transition: width 0.5s ease;
    font-weight: 700;
}

.butterfly-bar--left {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: linear-gradient(90deg, #d97706, #f59e0b);
    justify-content: flex-end;
}

.butterfly-bar--right {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: linear-gradient(90deg, #10b981, #059669);
    justify-content: flex-start;
}

.butterfly-value {
    font-size: var(--font-size-lg);
}

.butterfly-center {
    position: relative;
    width: 2px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

.center-line {
    position: absolute;
    width: 2px;
    height: 80px;
    background: var(--primary-color);
    left: 50%;
    transform: translateX(-50%);
}

.center-icon {
    position: relative;
    z-index: 10;
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-md);
    color: var(--primary-color);
}

.asymmetry-indicator {
    text-align: center;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--surface-border);
}

.diff-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-right: var(--space-sm);
}

.diff-value {
    font-weight: 600;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

/* Feedback Boxes */
.feedback-box {
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    border-left: 4px solid var(--primary-color);
}

.feedback-box:last-child {
    margin-bottom: 0;
}

.feedback-box--trainer {
    background: var(--primary-soft);
    border-left-color: var(--primary-dark);
}

.feedback-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.feedback-title i {
    color: var(--primary-color);
}

.trainer-score {
    background: var(--primary-color);
    color: var(--primary-contrast);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    margin-left: auto;
}

.feedback-box p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Performance Score Circle */
.score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
}

.score-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0;
}

.score-circle {
    position: relative;
    width: 150px;
    height: 150px;
}

.score-circle svg {
    transform: rotate(-90deg);
}

.score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--primary-color);
}

.goal-achievement {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.goal-achievement i {
    color: var(--success-color);
    font-size: var(--font-size-lg);
}

/* Media Grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}

.media-item {
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition);
    cursor: pointer;
}

.media-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.media-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.media-info {
    padding: var(--space-sm) var(--space-md);
}

.media-filename {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--space-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Detailed Scores */
/* Container for all score categories */
.detailed-scores-card .card-content,
.detailed-scores-card > .card-content,
section.detailed-scores-card .card-content,
.rides-stats-card.detailed-scores-card .card-content {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: var(--space-lg) !important;
}

/* Also handle if the categories are directly in the card */
.detailed-scores-card {
    display: grid;
    grid-template-columns: 1fr;
}

.detailed-scores-card:has(.score-category) {
    display: block;
}

.detailed-scores-card:has(.score-category) > *:not(.card-header) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
}

.score-category {
    margin-bottom: 0;
    padding: var(--space-lg);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-border);
}

/* If score-categories are siblings, make their parent a grid */
.score-category + .score-category {
    /* Signal that there are multiple categories as siblings */
}

/* Make parent of multiple score-category siblings a grid */
:has(> .score-category + .score-category) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: var(--space-lg) !important;
}

.category-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.category-title i {
    color: var(--primary-color);
}

.score-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
}

.score-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.metric-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-value {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--primary-color);
}

.metric-bar {
    height: 8px;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.metric-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue));
    border-radius: var(--radius-sm);
    transition: width 0.6s ease;
}

/* Kids Questions */
.questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-sm);
}

.question-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    gap: var(--space-md);
}

.question-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.answer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

.answer--ja {
    background: var(--success-color);
    color: var(--success-contrast);
}

.answer--nee {
    background: var(--error-color);
    color: var(--error-contrast);
}

/* CTA Card */
.cta-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-2xl);
    align-items: center;
}

.cta-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.cta-headline {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    line-height: 1.2;
}

.cta-headline i {
    color: var(--primary-color);
}

.cta-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.cta-button-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-2xl);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--primary-contrast);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition);
    box-shadow: var(--shadow-md);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color));
}

.cta-button-icon {
    font-size: var(--font-size-xl);
    transition: transform var(--transition);
}

.cta-button:hover .cta-button-icon {
    transform: translateX(4px);
}

.cta-subtext {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.cta-subtext i {
    color: var(--success-color);
}

.cta-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.horse-circles {
    position: relative;
    width: 200px;
    height: 200px;
}

.horse-circles .circle {
    position: absolute;
    border-radius: 50%;
    background: var(--primary-soft);
    animation: pulse 3s ease-in-out infinite;
}

.horse-circles .circle:nth-child(1) {
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.horse-circles .circle:nth-child(2) {
    width: 150px;
    height: 150px;
    top: 25px;
    left: 25px;
    animation-delay: 0.5s;
}

.horse-circles .circle:nth-child(3) {
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
    animation-delay: 1s;
}

.horse-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--primary-color);
    z-index: 10;
}

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

/* Photo Modal */
.photo-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}

.photo-modal.open {
    display: flex;
}

.photo-modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    transition: all var(--transition-fast);
}

.photo-modal-close:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

.photo-modal-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    animation: zoom 0.3s;
}

@keyframes zoom {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ========================================
   31. ERROR PAGE (404) STYLES
   ======================================== */

/* Error Page Layout */
.error-page {
    background: linear-gradient(135deg, var(--bg-light) 0%, #f0f4f0 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Background Decoration */
.background-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
}

.horse-icon {
    position: absolute;
    font-size: 6rem;
    color: var(--primary-color);
    animation: float 6s ease-in-out infinite;
}

.horse-icon-1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.horse-icon-2 {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.horse-icon-3 {
    bottom: 15%;
    left: 20%;
    animation-delay: 4s;
}

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

/* Error Container */
.error-container {
    max-width: 600px;
    width: 100%;
    position: relative;
    z-index: 1;
    margin: auto;
}

.error-card {
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: visible;
    opacity: 0;
    transform: translateY(20px);
    margin: var(--space-lg) 0;
}

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

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error Header */
.error-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--primary-contrast);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.error-code {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-md);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.error-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Error Content */
.error-content {
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.horse-emoji {
    font-size: 4rem;
    margin-bottom: var(--space-lg);
    color: var(--primary-color);
    animation: bounce 2s ease-in-out infinite;
}

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

.expired-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--warning-color);
    color: var(--warning-contrast);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.error-message {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-2xl) 0;
}

/* Error Details */
.error-details {
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-2xl);
    text-align: left;
}

.error-details h2 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.error-details h2 i {
    color: var(--primary-color);
}

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

.error-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.error-list li i {
    color: var(--primary-color);
    margin-top: 2px;
    flex-shrink: 0;
    width: 1.2em;
}

/* Error Actions */
.error-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--primary-contrast);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--surface-muted);
    color: var(--text-color);
    border: 2px solid var(--surface-border);
}

.btn-secondary:hover {
    background: var(--surface-border);
    border-color: var(--primary-color);
}

/* Info Box */
.info-box {
    background: var(--primary-soft);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    text-align: left;
}

.info-box i {
    color: var(--primary-color);
    font-size: var(--font-size-lg);
    margin-top: 2px;
    flex-shrink: 0;
}

.info-box div {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.info-box strong {
    color: var(--text-color);
}

/* ========================================
   32. RESPONSIVE - ERROR PAGE
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus States */
button:focus-visible,
.category-tab:focus-visible,
[data-action="toggle-history"]:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .license-type-card,
    .current-license-card,
    .chart-container,
    .chart-card,
    .category-card {
        border-width: 3px;

    }

    .license-status {
        border: 2px solid currentColor;
    }
}

/* Print Styles */
@media print {
    .category-tabs,
    .filter-collapse-wrapper,
    .license-type-actions {
        display: none;
    }

    .chart-container,
    .chart-card,
    .category-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    section.category-stats {
        display: block !important;
    }
}



/* ============================================================
   NAVIGATION STYLES - GREEN THEME
   Bottom Navigation & Mobile Menu
   ============================================================ */

/* ========================================
   BOTTOM NAVIGATION
   ======================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--surface-color);
    border-top: 1px solid var(--surface-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;
    z-index: 100;
}
.main-content {
    padding-bottom: 4.5rem; /* Zodat de save bar mooi aansluit op de nav bar.*/
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex: 1;
    max-width: 120px;
    border-radius: var(--radius-sm);
}

.nav-item:hover {
    background: var(--primary-soft);
    color: var(--primary-color);
}

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

.nav-item.active .nav-icon {
    background: var(--primary-soft);
}

.nav-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.nav-item.active .nav-icon i,
.nav-item:hover .nav-icon i {
    color: var(--primary-color);
}

.nav-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
}

/* Mobile optimizations */
@media (max-width: 375px) {
    .nav-item {
        padding: 0.5rem 0.5rem;
    }

    .nav-label {
        font-size: 0.6875rem;
    }

    .nav-icon {
        font-size: 1.25rem;
        width: 2rem;
        height: 2rem;
    }
}

/* ========================================
   MOBILE MENU
   ======================================== */
.main-menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: all var(--transition);
    pointer-events: none;
}

.main-menu-mobile[data-menu-open="true"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.main-menu-mobile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--transition);
}

.main-menu-mobile[data-menu-open="true"]::before {
    opacity: 1;
}

.main-menu-sheet {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 400px;
    height: 100vh; /* Full viewport height */
    background: var(--surface-color);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto; /* Allow internal scrolling */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.main-menu-mobile[data-menu-open="true"] .main-menu-sheet {
    transform: translateX(0);
}

/* Menu content wrapper to enable scrolling */
.menu-sheet-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Menu Header */
.menu-sheet-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--primary-contrast);
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    flex-shrink: 0; /* Don't shrink when scrolling */
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.user-info strong {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-contrast);
}

.user-info small {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
    opacity: 0.9;
}

.menu-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--primary-contrast);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.menu-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Menu Actions */
.menu-actions {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--surface-border);
    flex-shrink: 0; /* Don't shrink */
}

/* Scrollable content wrapper */
.menu-sheet-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0; /* Important for flex scrolling */
}

.menu-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    color: var(--primary-color);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.menu-action-btn:hover {
    background: var(--primary-color);
    color: var(--primary-contrast);
    transform: translateX(4px);
}

.menu-action-btn i {
    font-size: var(--font-size-lg);
}

/* Menu Items */
.main-menu-sheet hr {
    border: none;
    border-top: 1px solid var(--surface-border);
    margin: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-color);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    font-size: var(--font-size-base);
    font-weight: 500;
}

.menu-item:hover {
    background: var(--primary-soft);
    border-left-color: var(--primary-color);
    color: var(--primary-color);
}

.menu-item i {
    width: 1.5rem;
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

.menu-item:hover i {
    color: var(--primary-color);
}

.menu-item-button {
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

/* Active Menu Item */
.menu-item[data-nav].active,
.menu-item[aria-current="page"] {
    background: var(--primary-soft);
    border-left-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.menu-item[data-nav].active i {
    color: var(--primary-color);
}

/* Badge in Menu */
.menu-item .badge-new {
    margin-left: auto;
    font-size: var(--font-size-xs);
    padding: 2px 8px;
}

/* ========================================
   LOADING & TOAST
   ======================================== */
.loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    background: var(--surface-color);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.loading-indicator.hidden {
    display: none;
}

.toast-container {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Toast notifications */
.toast {
    background: var(--surface-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-md) var(--space-lg);
    min-width: 300px;
    max-width: 400px;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    border-left: 4px solid var(--primary-color);
    animation: slideIn 0.3s ease;
}

.toast.success {
    border-left-color: var(--success-color);
}

.toast.error {
    border-left-color: var(--error-color);
}

.toast.warning {
    border-left-color: var(--warning-color);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* Focus states */
.nav-item:focus-visible,
.menu-item:focus-visible,
.menu-close:focus-visible,
.menu-action-btn:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 375px) {
    .main-menu-sheet {
        width: 90%;
    }

    .toast-container {
        right: var(--space-sm);
        left: var(--space-sm);
    }

    .toast {
        min-width: auto;
        max-width: none;
    }
}

@media (min-width: 768px) {
    /* Hide bottom nav on larger screens if needed */
    .bottom-nav {
        /* Could hide on desktop if you want top nav instead */
    }
}

/* ========================================
   THEME SUPPORT (if keeping multiple themes)
   ======================================== */
[data-theme="forest"] {
    /* Green theme is default */
}

/* Ocean theme variant */
[data-theme="ocean"] {
    --primary-color: #0369a1;
    --primary-light: #0ea5e9;
    --primary-dark: #075985;
}

/* Sunset theme variant */
[data-theme="sunset"] {
    --primary-color: #ea580c;
    --primary-light: #fb923c;
    --primary-dark: #c2410c;
}

/* Midnight theme variant */
[data-theme="midnight"] {
    --primary-color: #7c3aed;
    --primary-light: #a78bfa;
    --primary-dark: #6d28d9;
}


/* ============================================================
   FAQ PAGE STYLES
   Uses design tokens from statistics-dashboard-improved.css
   Make sure to load statistics-dashboard-improved.css first!
   ============================================================ */

/* ========================================
   FAQ HEADER
   ======================================== */
.faq-header {
    background: linear-gradient(135deg, var(--surface-color) 0%, var(--surface-muted) 100%);
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
    border: 1px solid var(--surface-border);
}

.faq-title {
    font-size: var(--font-size-3xl);
    color: var(--text-color);
    margin: 0 0 var(--space-sm) 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.faq-title i {
    color: var(--primary-color);
}

.faq-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin: 0;
}

/* ========================================
   SEARCH
   ======================================== */
.faq-search-container {
    margin-bottom: var(--space-2xl);
    display: flex;
    justify-content: center;
}

.faq-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.faq-search-icon {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    pointer-events: none;
}

#faq-search {
    width: 100%;
    padding: var(--space-md) var(--space-md) var(--space-md) 3rem;
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    background: var(--surface-color);
    font-family: inherit;
}

#faq-search:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

#faq-search::placeholder {
    color: var(--text-muted);
}

/* ========================================
   STATS
   ======================================== */
.faq-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}

.faq-stat {
    text-align: center;
    padding: var(--space-md);
    background: var(--surface-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--surface-border);
    min-width: 120px;
    transition: all var(--transition);
}

.faq-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
}

.faq-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--primary-color);
    display: block;
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.faq-stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.faq-stat-label i {
    color: var(--primary-color);
}

/* ========================================
   CATEGORIES
   ======================================== */
.faq-category {
    background: var(--surface-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--surface-border);
    margin-bottom: var(--space-xl);
    overflow: hidden;
    transition: all var(--transition);
}

.faq-category:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-border);
}

.faq-category-title {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--primary-contrast);
    padding: var(--space-lg) var(--space-xl);
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 2px solid var(--primary-dark);
}

.faq-category-title i {
    font-size: 1.2em;
}

.faq-items {
    padding: var(--space-md);
}

/* ========================================
   FAQ ITEMS
   ======================================== */
.faq-item {
    border-bottom: 1px solid var(--surface-border);
    padding: var(--space-lg);
    transition: all var(--transition-fast);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item:hover {
    background: var(--surface-muted);
}

.faq-question {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    user-select: none;
    transition: color var(--transition-fast);
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-toggle {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-color);
    border-radius: 50%;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    font-size: var(--font-size-base);
}

.faq-toggle:hover {
    background: var(--primary-color);
    color: var(--primary-contrast);
}

.faq-item.open .faq-toggle {
    background: var(--primary-color);
    color: var(--primary-contrast);
    transform: rotate(90deg);
}

.faq-answer {
    display: none;
    margin-top: var(--space-md);
    margin-left: 3rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: var(--font-size-base);
    padding: var(--space-md);
    background: var(--primary-soft);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-color);
}

.faq-item.open .faq-answer {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   EMPTY STATES
   ======================================== */
.faq-empty-state {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--text-muted);
    background: var(--surface-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--surface-border);
}

.faq-empty-icon {
    font-size: 4rem;
    margin-bottom: var(--space-lg);
    opacity: 0.3;
    color: var(--primary-color);
}

.faq-empty-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-color);
}

.faq-empty-description {
    font-size: var(--font-size-base);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .faq-header {
        padding: var(--space-lg) var(--space-md);
    }

    .faq-title {
        font-size: var(--font-size-2xl);
        flex-direction: column;
    }

    .faq-subtitle {
        font-size: var(--font-size-base);
    }

    .faq-search-wrapper {
        max-width: 100%;
    }

    .faq-stats {
        gap: var(--space-md);
    }

    .faq-stat {
        min-width: 100px;
        padding: var(--space-sm);
    }

    .faq-stat-value {
        font-size: var(--font-size-2xl);
    }

    .faq-category-title {
        font-size: var(--font-size-lg);
        padding: var(--space-md) var(--space-lg);
    }

    .faq-items {
        padding: var(--space-sm);
    }

    .faq-item {
        padding: var(--space-md);
    }

    .faq-question {
        font-size: var(--font-size-base);
        gap: var(--space-sm);
    }

    .faq-toggle {
        width: 1.75rem;
        height: 1.75rem;
        font-size: var(--font-size-sm);
    }

    .faq-answer {
        margin-left: 0;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .faq-title {
        font-size: var(--font-size-xl);
    }

    .faq-category-title {
        font-size: var(--font-size-base);
        padding: var(--space-sm) var(--space-md);
    }

    .faq-stats {
        flex-direction: column;
        align-items: stretch;
    }

    .faq-stat {
        width: 100%;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.faq-question:focus-visible,
#faq-search:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .faq-item.open .faq-answer {
        animation: none;
    }

    .faq-toggle,
    .faq-question,
    .faq-item,
    .faq-stat {
        transition: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .faq-category,
    .faq-stat {
        border-width: 2px;
    }

    .faq-toggle {
        border: 2px solid currentColor;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .faq-search-container,
    .faq-stats {
        display: none;
    }

    .faq-item {
        page-break-inside: avoid;
    }

    .faq-answer {
        display: block !important;
        margin-left: 0;
    }

    .faq-toggle {
        display: none;
    }
}



/* ============================================================
   PROFILE PAGE STYLES
   Add these to the end of your styling.css file
   ============================================================ */

/* ========================================
   PROFILE AVATAR
   ======================================== */
.profile-avatar-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--surface-border);
}

.profile-avatar--xl {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.profile-avatar--placeholder-xl {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-soft), var(--primary-color));
    border: 4px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--font-size-4xl);
    color: var(--primary-contrast);
    box-shadow: var(--shadow-md);
}

.profile-avatar-info {
    flex: 1;
}

.profile-avatar-name {
    font-weight: 700;
    font-size: var(--font-size-xl);
    color: var(--text-color);
    margin: 0 0 var(--space-xs) 0;
}

.profile-avatar-email {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0;
}

/* ========================================
   PROFILE FORM INPUTS
   ======================================== */
.profile-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.metric-row input[type="text"],
.metric-row input[type="email"],
.metric-row input[type="tel"],
.metric-row input[type="date"],
.metric-row textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    background: var(--surface-color);
    color: var(--text-color);
    transition: all var(--transition-fast);
    font-family: inherit;
}

.metric-row input:focus,
.metric-row textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.metric-row input::placeholder,
.metric-row textarea::placeholder {
    color: var(--text-muted);
}

/* File input */
.metric-row input[type="file"] {
    width: 100%;
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border: 2px dashed var(--surface-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--surface-color);
}

.metric-row input[type="file"]:hover {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}

/* Select dropdown - hide native multi-select */
.metric-row select[multiple] {
    display: none;
}

/* Single select styling */
.metric-row select:not([multiple]) {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    background: var(--surface-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.metric-row select:not([multiple]):focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ========================================
   FAVORITE HORSES GRID
   ======================================== */
.favorite-horses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.horse-card {
    background: var(--surface-color);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.horse-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.horse-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.horse-card.selected::after {
    content: '';
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.horse-card.selected::before {
    content: '✓';
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    width: 24px;
    height: 24px;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-sm);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.horse-photo {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: var(--surface-muted);
}

.horse-photo-placeholder {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, var(--primary-soft), var(--surface-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    color: var(--primary-color);
}

.horse-name {
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    background: var(--surface-color);
}

.horse-card.selected .horse-name {
    background: var(--primary-soft);
    color: var(--primary-color);
}

/* Empty state for horses */
.favorite-horses-empty {
    text-align: center;
    padding: var(--space-xl);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    border: 2px dashed var(--surface-border);
}

.favorite-horses-empty i {
    font-size: 3rem;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: var(--space-md);
}

.favorite-horses-empty p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ========================================
   SIZE PREFERENCE CARDS
   ======================================== */
.size-preference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.size-card {
    background: var(--surface-muted);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.size-card:hover {
    background: var(--primary-soft);
    border-color: var(--primary-color);
}

.size-card.selected {
    background: var(--primary-color);
    border-color: var(--primary-dark);
    color: white;
}

.size-card-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-xs);
    color: var(--text-color);
}

.size-card.selected .size-card-icon {
    color: white;
}

.size-card-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
}

.size-card.selected .size-card-label {
    color: white;
}

/* ========================================
   THEME PREVIEW
   ======================================== */
.theme-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.theme-preview {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    border: 2px solid var(--surface-border);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.theme-preview:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.theme-preview.selected {
    border-width: 3px;
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.theme-preview.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: var(--font-size-xl);
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Theme colors */
.theme-preview.forest {
    background: linear-gradient(135deg, #2c5530, #3f7a48);
    border-color: #2c5530;
}

.theme-preview.ocean {
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
    border-color: #0369a1;
}

.theme-preview.sunset {
    background: linear-gradient(135deg, #ea580c, #fb923c);
    border-color: #ea580c;
}

.theme-preview.midnight {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    border-color: #7c3aed;
}

/* ========================================
   FORM ERROR MESSAGES
   ======================================== */
.form-error {
    color: var(--error-color);
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.form-error::before {
    content: '⚠';
    flex-shrink: 0;
}

/* ========================================
   PROFILE SAVE BAR
   ======================================== */
.profile-save-bar {
    position: sticky;
    /* bottom: 4.5rem; Above bottom-nav */
    background: var(--surface-color);
    border-top: 2px solid var(--surface-border);
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-xl) calc(var(--space-md) * -1) 0;
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.profile-save-bar button {
    width: 100%;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-lg);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--primary-contrast);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
    font-family: inherit;
}

.profile-save-bar button:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color));
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.profile-save-bar button:active {
    transform: translateY(0);
}

.profile-save-bar button i {
    font-size: var(--font-size-xl);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 480px) {
    .profile-avatar-wrap {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .favorite-horses-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .horse-photo,
    .horse-photo-placeholder {
        height: 100px;
    }

    .size-preference-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .profile-avatar-wrap {
        padding-bottom: var(--space-xl);
        margin-bottom: var(--space-xl);
    }

    .favorite-horses-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .horse-photo,
    .horse-photo-placeholder {
        height: 140px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.horse-card:focus-visible,
.size-card:focus-visible,
.theme-preview:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .profile-save-bar {
        display: none;
    }

    .horse-card,
    .size-card {
        break-inside: avoid;
    }
}

/* ============================================================
   END OF PROFILE PAGE STYLES
   ============================================================ */
/* ============================================================
   INLINE PHOTO UPLOAD - Beautiful Integration
   Add this to profile-additions.css
   ============================================================ */

/* ========================================
   PHOTO UPLOAD CARD
   ======================================== */
.photo-upload-card {
    background: linear-gradient(135deg, var(--surface-color) 0%, var(--surface-muted) 100%);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    transition: all var(--transition);
}

.photo-upload-card:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-md);
}

/* Current photo display */
.current-photo-display {
    position: relative;
    flex-shrink: 0;
}

.current-photo-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
    box-shadow: var(--shadow-lg);
}

.current-photo-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-soft), var(--primary-color));
    border: 4px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-contrast);
    box-shadow: var(--shadow-lg);
}

/* Photo badge overlay */
.photo-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: var(--primary-color);
    border: 3px solid var(--surface-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-contrast);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.photo-badge:hover {
    background: var(--primary-light);
    transform: scale(1.1);
}

/* Upload actions area */
.photo-upload-actions {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.photo-upload-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.photo-upload-description {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0;
}

/* Hide native input */
.photo-upload-actions input[type="file"] {
    display: none;
}

/* Upload buttons */
.photo-upload-buttons {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.photo-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    text-decoration: none;
}

.photo-btn-primary {
    background: var(--primary-color);
    color: var(--primary-contrast);
    border-color: var(--primary-color);
}

.photo-btn-primary:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.photo-btn-secondary {
    background: var(--surface-color);
    color: var(--text-color);
    border-color: var(--surface-border);
}

.photo-btn-secondary:hover {
    background: var(--surface-muted);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.photo-btn-danger {
    background: transparent;
    color: var(--error-color);
    border-color: var(--error-color);
}

.photo-btn-danger:hover {
    background: var(--error-color);
    color: white;
}

/* Preview state */
.photo-upload-card.has-preview {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-soft), var(--surface-color));
}

.photo-upload-card.has-preview .current-photo-avatar {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-lg);
}

/* File info display */
.photo-file-info {
    display: none;
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-color);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-color);
    font-size: var(--font-size-xs);
}

.photo-file-info.show {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.photo-file-info i {
    color: var(--primary-color);
}

.photo-file-name {
    font-weight: 600;
    color: var(--text-color);
}

.photo-file-size {
    color: var(--text-muted);
}

/* Error display */
.photo-upload-error {
    display: none;
    padding: var(--space-sm) var(--space-md);
    background: rgba(244, 67, 54, 0.1);
    border-left: 3px solid var(--error-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--error-color);
}

.photo-upload-error.show {
    display: block;
}

/* Hints */
.photo-upload-hints {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.photo-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.photo-hint i {
    color: var(--primary-color);
    font-size: 1em;
}

/* Loading state */
.photo-upload-card.uploading .current-photo-display::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 600px) {
    .photo-upload-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg);
    }

    .current-photo-avatar,
    .current-photo-placeholder {
        width: 100px;
        height: 100px;
    }

    .photo-badge {
        width: 32px;
        height: 32px;
    }

    .photo-upload-buttons {
        justify-content: center;
    }

    .photo-upload-hints {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 400px) {
    .photo-upload-buttons {
        flex-direction: column;
        width: 100%;
    }

    .photo-btn {
        width: 100%;
        justify-content: center;
    }
}



/* ============================================================
   RIDE DETAIL PAGE STYLES
   Add to the end of styling.css
   ============================================================ */

/* ========================================
   VIEW MODE (Read-only state)
   ======================================== */
.ride-view-mode input:not([type="checkbox"]):not([type="range"]):not([type="file"]),
.ride-view-mode select,
.ride-view-mode textarea {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
    resize: none;
    padding-left: 0;
}

.ride-view-mode input[type="range"] {
    pointer-events: none;
}

.ride-view-mode input[type="checkbox"] {
    pointer-events: none;
}

/* Hide select arrow in view mode */
.ride-view-mode select {
    background-image: none !important;
}

/* ========================================
   STICKY SAVE BAR
   ======================================== */
.ride-save-bar {
    position: fixed;
    bottom: 64px; /* Above bottom-nav */
    left: 0;
    right: 0;
    background: var(--surface-color);
    border-top: 2px solid var(--primary-border);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    z-index: 200;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

.ride-save-bar.hidden {
    display: none;
}

/* ========================================
   META CHIPS
   ======================================== */
.ride-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-lg);
}

.ride-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--primary-dark);
}

.ride-meta-chip i {
    color: var(--primary-color);
    font-size: 0.85em;
}

/* ============================================================
   COMPLETE FIX: Score Sliders Full Width
   Replace entire SCORE SLIDERS & BADGES section in CSS
   ============================================================ */

/* ========================================
   SCORE SLIDERS & BADGES
   ======================================== */
.score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

@media (max-width: 480px) {
    .score-grid {
        grid-template-columns: 1fr;
    }
}

.score-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%; /* TOEVOEGING */
}

.score-label {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs); /* TOEVOEGING voor spacing */
}

.score-label i {
    color: var(--primary-color);
    width: 16px;
    flex-shrink: 0;
}

.score-slider-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%; /* BELANGRIJKE FIX */
}

.score-slider-wrap input[type="range"] {
    flex: 1;
    min-width: 0; /* BELANGRIJKE FIX - voorkomt overflow */
    width: 100%;
    height: 8px;
    accent-color: var(--primary-color);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

/* ── Webkit (Chrome, Safari, Edge) ── */
.score-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(to right,
        var(--surface-border) 0%,
        var(--surface-border) 100%);
    border-radius: var(--radius-sm);
    border: none;
}

.score-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: -8px; /* Centers thumb on 8px track */
    border: 3px solid white;
    transition: all var(--transition-fast);
}

.score-slider-wrap input[type="range"]:hover::-webkit-slider-thumb {
    background: var(--primary-light);
    transform: scale(1.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.score-slider-wrap input[type="range"]:active::-webkit-slider-thumb {
    background: var(--primary-dark);
    transform: scale(1.1);
}

/* ── Firefox ── */
.score-slider-wrap input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: var(--surface-border);
    border-radius: var(--radius-sm);
    border: none;
}

.score-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 3px solid white;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast);
}

.score-slider-wrap input[type="range"]:hover::-moz-range-thumb {
    background: var(--primary-light);
    transform: scale(1.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.score-slider-wrap input[type="range"]:active::-moz-range-thumb {
    background: var(--primary-dark);
    transform: scale(1.1);
}

/* ── Focus states (accessibility) ── */
.score-slider-wrap input[type="range"]:focus {
    outline: none;
}

.score-slider-wrap input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--primary-soft), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.score-slider-wrap input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--primary-soft), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ── Score badge ── */
.score-value-badge {
    min-width: 2.8rem;
    flex-shrink: 0; /* BELANGRIJKE FIX */
    text-align: center;
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: 1;
    color: var(--primary-contrast);
    background: var(--surface-border);
    border-radius: var(--radius-full);
    padding: 6px 12px;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.score-value-badge.score-low {
    background: linear-gradient(135deg, var(--error-color), var(--error-light));
}

.score-value-badge.score-mid {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-light));
}

.score-value-badge.score-high {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

/* ========================================
   OVERALL SCORE DISPLAY FIX
   ======================================== */
.overall-score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl) 0;
}

/* Slider in overall score should also be full width */
.overall-score-display .score-slider-wrap {
    width: 100%;
    max-width: 400px; /* Limit maximum width for aesthetics */
}

.overall-score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--primary-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4xl);
    font-weight: 800;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition);
    border: 4px solid white;
}

.overall-score-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 480px) {
    .score-slider-wrap input[type="range"]::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
        margin-top: -6px;
    }

    .score-slider-wrap input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }

    .score-value-badge {
        min-width: 2.5rem;
        padding: 4px 10px;
        font-size: var(--font-size-sm);
    }

    .overall-score-circle {
        width: 80px;
        height: 80px;
        font-size: var(--font-size-3xl);
    }
}
/* ========================================
   TWO-COLUMN METRICS GRID
   ======================================== */
.metrics-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

@media (max-width: 480px) {
    .metrics-2col {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   PAGE HEADER ACTIONS
   ======================================== */
.page-header-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

/* ========================================
   RESPONSIVE - SAVE BAR
   ======================================== */
@media (max-width: 600px) {
    .ride-save-bar {
        flex-direction: column-reverse;
        padding: var(--space-sm);
        gap: var(--space-xs);
    }

    .ride-save-bar .rides-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   COMPETITION SECTION (conditional)
   ======================================== */
#competition-card {
    /* Can be hidden via JavaScript if not applicable */
}

#competition-card.hidden {
    display: none;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.score-slider-wrap input[type="range"]:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .ride-save-bar,
    .page-header-actions,
    .rides-card-header .rides-btn {
        display: none;
    }

    .ride-view-mode input,
    .ride-view-mode select,
    .ride-view-mode textarea {
        border: 1px solid #ddd !important;
        background: white !important;
    }

    .score-slider-wrap {
        display: none;
    }

    .score-value-badge {
        display: inline-block;
        border: 2px solid currentColor;
    }
}
.horse-filter-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
    transition: opacity 0.2s ease;
    opacity: 1;
}

.ride-view-mode .horse-filter-buttons {
    opacity: 0;
    pointer-events: none;
    /* Don't use display: none for transition */
    height: 0;
    margin: 0;
    overflow: hidden;
}

/* Hide checkbox but keep functionality */
.checkbox-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Make label clickable */
.checkbox-wrapper {
    cursor: pointer;
    user-select: none;
}

/* Disable in view mode */
.ride-view-mode .checkbox-wrapper {
    cursor: default;
    pointer-events: none;
}
input[type="checkbox"]:checked + span::before {
    background: var(--primary-color);
}


/* ============================================================
   SHARE MODAL STYLES
   Add this to the end of your styling.css file
   ============================================================ */

/* ========================================
   SHARE MODAL
   ======================================== */
.share-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    animation: fadeIn 0.2s ease;
}

.share-modal.active {
    display: flex; /* Show when active */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Content */
.share-modal-content {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s ease;
    position: relative;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 2px solid var(--surface-border);
    position: sticky;
    top: 0;
    background: var(--surface-color);
    z-index: 10;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.share-modal-header h3 {
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.share-modal-header h3 i {
    color: var(--primary-color);
}

.share-modal-close {
    background: var(--surface-muted);
    border: none;
    color: var(--text-secondary);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-size-xl);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.share-modal-close:hover {
    background: var(--error-color);
    color: white;
    transform: rotate(90deg);
}

/* Modal Body */
.share-modal-body {
    padding: var(--space-lg);
}

.share-modal-body p {
    margin: 0 0 var(--space-lg) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

/* Share Options */
.share-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.share-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface-color);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
    width: 100%;
}

.share-option:hover {
    border-color: var(--primary-color);
    background: var(--primary-soft);
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.share-option:active {
    transform: translateX(2px);
}

.share-option-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition);
}

.share-option:hover .share-option-icon {
    background: var(--primary-color);
}

.share-option-icon i {
    font-size: var(--font-size-xl);
    color: var(--primary-color);
    transition: color var(--transition);
}

.share-option:hover .share-option-icon i {
    color: var(--primary-contrast);
}

.share-option-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.share-option-text strong {
    color: var(--text-color);
    font-size: var(--font-size-base);
    font-weight: 600;
}

.share-option-text span {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Responsive */
@media (max-width: 600px) {
    .share-modal {
        padding: var(--space-sm);
    }

    .share-modal-content {
        max-width: 100%;
        max-height: 95vh;
    }

    .share-modal-header {
        padding: var(--space-md);
    }

    .share-modal-header h3 {
        font-size: var(--font-size-lg);
    }

    .share-modal-body {
        padding: var(--space-md);
    }

    .share-option {
        padding: var(--space-md);
    }

    .share-option-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .share-option-icon i {
        font-size: var(--font-size-lg);
    }

    .share-option-text strong {
        font-size: var(--font-size-sm);
    }

    .share-option-text span {
        font-size: var(--font-size-xs);
    }
}

/* Accessibility */
.share-option:focus-visible,
.share-modal-close:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Click outside to close - backdrop */
.share-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* ============================================================
   SHARE DATA DISPLAY STYLES
   Add to styling.css
   ============================================================ */

/* ========================================
   SHARE DATA CONTAINER
   ======================================== */
.share-data-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ========================================
   SHARE STATS GRID
   ======================================== */
.share-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.share-stat-card {
    background: linear-gradient(135deg, var(--surface-color), var(--surface-muted));
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.share-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    opacity: 0.5;
    transition: opacity var(--transition);
}

.share-stat-card:hover {
    border-color: var(--primary-border);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

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

/* Stat Icon */
.share-stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.share-stat-icon i {
    font-size: var(--font-size-2xl);
    color: var(--primary-contrast);
}

.share-stat-icon.expiry {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-light));
}

/* Stat Content */
.share-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.share-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-color);
    line-height: 1;
}

.share-stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========================================
   SHARE LINK DISPLAY
   ======================================== */
.share-link-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid var(--surface-border);
}

.share-link-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.share-link-label i {
    color: var(--primary-color);
}

.share-link-wrapper {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}

.share-link-input {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--surface-color);
    color: var(--text-color);
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-link-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.share-copy-btn {
    padding: var(--space-md) var(--space-lg);
    background: var(--primary-color);
    color: var(--primary-contrast);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    font-weight: 600;
}

.share-copy-btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.share-copy-btn:active {
    transform: translateY(0);
}

.share-copy-btn.copied {
    background: var(--success-color);
}

/* ========================================
   SHARE INFO BOX
   ======================================== */
.share-info-box {
    background: var(--primary-soft);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.share-info-box i {
    color: var(--primary-color);
    font-size: var(--font-size-lg);
    margin-top: 2px;
    flex-shrink: 0;
}

.share-info-box p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.share-info-box strong {
    color: var(--text-color);
    font-weight: 600;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 600px) {
    .share-stats-grid {
        grid-template-columns: 1fr;
    }

    .share-stat-card {
        padding: var(--space-md);
    }

    .share-stat-icon {
        width: 50px;
        height: 50px;
    }

    .share-stat-icon i {
        font-size: var(--font-size-xl);
    }

    .share-stat-value {
        font-size: var(--font-size-2xl);
    }

    .share-link-wrapper {
        flex-direction: column;
    }

    .share-copy-btn {
        width: 100%;
    }

    .share-link-input {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 400px) {
    .share-stat-card {
        flex-direction: column;
        text-align: center;
    }

    .share-stat-content {
        align-items: center;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.share-copy-btn:focus-visible,
.share-link-input:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .share-copy-btn {
        display: none;
    }

    .share-link-input {
        border: 1px solid #ddd;
    }
}

/* ============================================================
   SHARE DATA DISPLAY - Updated for Modal
   Replace the .share-copy-btn styles with this
   ============================================================ */

.share-action-btn {
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--primary-contrast);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-width: 7rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.share-action-btn:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.share-action-btn:active {
    transform: translateY(0);
}

.share-action-btn i {
    font-size: var(--font-size-lg);
}

/* ========================================
   RESPONSIVE UPDATE
   ======================================== */
@media (max-width: 600px) {
    .share-link-wrapper {
        flex-direction: column;
    }

    .share-action-btn {
        width: 100%;
        padding: var(--space-md);
    }

    .share-link-input {
        font-size: var(--font-size-xs);
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.share-action-btn:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* ============================================================
   END OF SHARE DATA DISPLAY STYLES
   ============================================================ */
/* ============================================================
   END OF RIDE DETAIL PAGE STYLES
   ============================================================ */


   /* ============================================================
   LANDING PAGE STYLES
   Uses design tokens from styling.css
   Add this to the end of your styling.css file
   ============================================================ */

/* ========================================
   LANDING HERO
   ======================================== */
.landing-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    padding: var(--space-2xl) var(--space-lg);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.landing-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path fill="rgba(255,255,255,0.05)" d="M0,0 L1200,0 L1200,100 Q600,120 0,100 Z"/></svg>') no-repeat bottom;
    background-size: cover;
    opacity: 0.5;
}

.landing-hero__content {
    max-width: 800px;
    position: relative;
    z-index: 1;
}

.landing-hero__title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--primary-contrast);
    margin: 0 0 var(--space-lg) 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.landing-hero__title i {
    font-size: 1.2em;
}

.landing-hero__subtitle {
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 var(--space-2xl) 0;
    line-height: 1.6;
}

.landing-hero__actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.landing-hero__actions .rides-btn {
    padding: var(--space-md) var(--space-2xl);
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-lg);
}

.landing-hero__actions .rides-btn-primary {
    background: var(--surface-color);
    color: var(--primary-color);
    border-color: var(--surface-color);
}

.landing-hero__actions .rides-btn-primary:hover {
    background: var(--surface-muted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.landing-hero__actions .rides-btn-secondary {
    background: transparent;
    color: var(--primary-contrast);
    border-color: rgba(255, 255, 255, 0.5);
}

.landing-hero__actions .rides-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-contrast);
}

/* ========================================
   LANDING SECTIONS
   ======================================== */
.landing-section {
    padding: var(--space-2xl) var(--space-lg);
}

.landing-section--alt {
    background: var(--bg-light);
}

.landing-section__container {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.landing-section__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.landing-kicker {
    display: inline-block;
    padding: var(--space-xs) var(--space-lg);
    background: var(--primary-soft);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.landing-heading {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.landing-heading i {
    color: var(--primary-color);
}

.landing-subheading {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ========================================
   FEATURE GRID
   ======================================== */
.landing-grid--features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.landing-card {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--surface-border);
    transition: all var(--transition);
    text-align: center;
}

.landing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-border);
}

.landing-card__icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-lg);
    background: linear-gradient(135deg, var(--primary-soft), var(--primary-color));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    color: var(--primary-color);
    transition: all var(--transition);
}

.landing-card__icon i {
    color: var(--primary-contrast);
}

.landing-card:hover .landing-card__icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    transform: scale(1.1) rotate(5deg);
}

.landing-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 var(--space-md) 0;
}

.landing-card__copy {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   PRICING SECTION
   ======================================== */
.landing-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.landing-pricing-card {
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--surface-border);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    position: relative;
}

.landing-pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-border);
}

.landing-pricing-card--featured {
    border-color: var(--primary-color);
    box-shadow: 0 8px 32px rgba(44, 85, 48, 0.2);
}

.landing-pricing-card--featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.landing-pricing-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
}

.landing-pricing-badge {
    padding: var(--space-xs) var(--space-md);
    background: var(--primary-soft);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.landing-pricing-badge--featured {
    background: var(--primary-color);
    color: var(--primary-contrast);
}

.landing-pricing-price-wrap {
    margin-bottom: var(--space-lg);
}

.landing-pricing__price {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin: 0;
}

.landing-pricing__note {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: var(--space-xs) 0 0 0;
}

.landing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xl) 0;
    flex: 1;
}

.landing-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: var(--font-size-base);
    color: var(--text-color);
    line-height: 1.5;
}

.landing-list li i {
    color: var(--primary-color);
    font-size: var(--font-size-lg);
    margin-top: 2px;
    flex-shrink: 0;
}

.landing-pricing-card .rides-btn {
    width: 100%;
    padding: var(--space-md);
    font-size: var(--font-size-base);
    justify-content: center;
}

/* ========================================
   STATS SECTION
   ======================================== */
.landing-stats-section {
    background: linear-gradient(135deg, var(--primary-soft), var(--surface-muted));
    border-top: 1px solid var(--primary-border);
    border-bottom: 1px solid var(--primary-border);
}

.landing-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-xl);
}

.landing-stat-card {
    text-align: center;
    padding: var(--space-xl);
}

.landing-stat-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-md);
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.landing-stat-icon i {
    font-size: var(--font-size-2xl);
    color: var(--primary-contrast);
}

.landing-stat-value {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.landing-stat-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 600;
}

/* ========================================
   CTA SECTION
   ======================================== */
.landing-cta {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    position: relative;
    overflow: hidden;
}

.landing-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: float 10s ease-in-out infinite;
}

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

.landing-cta__container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.landing-cta__icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--space-lg);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4xl);
    color: var(--primary-contrast);
}

.landing-cta__title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--primary-contrast);
    margin: 0 0 var(--space-lg) 0;
    line-height: 1.2;
}

.landing-cta__subtitle {
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 var(--space-2xl) 0;
    line-height: 1.6;
}

.landing-cta__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
}

.landing-cta__note i {
    color: var(--success-color);
    font-size: var(--font-size-lg);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .landing-hero {
        min-height: 50vh;
        padding: var(--space-xl) var(--space-md);
    }

    .landing-hero__title {
        font-size: var(--font-size-2xl);
        flex-direction: column;
    }

    .landing-hero__subtitle {
        font-size: var(--font-size-base);
    }

    .landing-hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .landing-hero__actions .rides-btn {
        width: 100%;
        justify-content: center;
    }

    .landing-section {
        padding: var(--space-xl) var(--space-md);
    }

    .landing-heading {
        font-size: var(--font-size-2xl);
        flex-direction: column;
    }

    .landing-subheading {
        font-size: var(--font-size-base);
    }

    .landing-grid--features {
        grid-template-columns: 1fr;
    }

    .landing-pricing {
        grid-template-columns: 1fr;
    }

    .landing-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-cta__title {
        font-size: var(--font-size-2xl);
    }

    .landing-cta__subtitle {
        font-size: var(--font-size-base);
    }

    .landing-cta__note {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .landing-hero__title {
        font-size: var(--font-size-xl);
    }

    .landing-stats-grid {
        grid-template-columns: 1fr;
    }

    .landing-card {
        padding: var(--space-xl) var(--space-lg);
    }

    .landing-pricing-card {
        padding: var(--space-xl) var(--space-lg);
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .landing-hero::before,
    .landing-cta::before,
    .landing-card,
    .landing-pricing-card,
    .landing-stat-card {
        animation: none;
        transition: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .landing-hero {
        background: var(--surface-color);
        color: var(--text-color);
    }

    .landing-hero__title,
    .landing-hero__subtitle {
        color: var(--text-color);
    }

    .landing-cta {
        background: var(--surface-color);
    }

    .landing-cta__title,
    .landing-cta__subtitle {
        color: var(--text-color);
    }

    .landing-hero__actions,
    .landing-pricing-card .rides-btn {
        display: none;
    }
}

/* ============================================================
   END OF LANDING PAGE STYLES
   ============================================================ */

   /* ============================================================
   MANAGEMENT PAGE STYLES
   Additional styles for the "Voor Manegehouders" page
   Add this after landing-page-styles.css
   ============================================================ */

/* ========================================
   MANAGEMENT HERO VARIANT
   ======================================== */
.landing-hero--manage {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
}

.landing-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary-contrast);
    margin-bottom: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.landing-hero__badge i {
    font-size: var(--font-size-lg);
}

/* ========================================
   TIMELINE COMPONENT
   ======================================== */
.landing-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.landing-timeline-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
    position: relative;
}

.landing-timeline-item:last-child {
    margin-bottom: 0;
}

.landing-timeline-item:last-child .landing-timeline-line {
    display: none;
}

/* Timeline Marker */
.landing-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.landing-timeline-number {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--primary-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    box-shadow: var(--shadow-lg);
    border: 4px solid var(--surface-color);
    position: relative;
    z-index: 2;
}

.landing-timeline-line {
    width: 4px;
    flex: 1;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-soft));
    margin-top: var(--space-md);
    border-radius: var(--radius-sm);
}

/* Timeline Content */
.landing-timeline-content {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--surface-border);
    transition: all var(--transition);
}

.landing-timeline-item:hover .landing-timeline-content {
    transform: translateX(8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-border);
}

.landing-timeline-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.landing-timeline-icon i {
    font-size: var(--font-size-xl);
    color: var(--primary-color);
}

.landing-timeline-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 var(--space-sm) 0;
}

.landing-timeline-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   RESULTS GRID
   ======================================== */
.landing-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.landing-result-card {
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--surface-border);
    text-align: center;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.landing-result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    opacity: 0;
    transition: opacity var(--transition);
}

.landing-result-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-border);
}

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

.landing-result-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--space-lg);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-soft), var(--primary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
}

.landing-result-card:hover .landing-result-icon {
    transform: scale(1.1) rotate(5deg);
}

.landing-result-icon i {
    font-size: var(--font-size-3xl);
    color: var(--primary-contrast);
}

.landing-result-stat {
    font-size: 4rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: var(--space-md);
}

.landing-result-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 var(--space-md) 0;
}

.landing-result-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   TESTIMONIALS
   ======================================== */
.landing-testimonials {
    background: linear-gradient(135deg, var(--primary-soft), var(--surface-muted));
}

.landing-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.landing-testimonial-card {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--surface-border);
    transition: all var(--transition);
    position: relative;
}

.landing-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-border);
}

.landing-testimonial-quote {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    font-size: var(--font-size-3xl);
    color: var(--primary-soft);
    opacity: 0.5;
}

.landing-testimonial-text {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0 0 var(--space-xl) 0;
    font-style: italic;
}

.landing-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 2px solid var(--surface-border);
}

.landing-testimonial-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-soft), var(--primary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.landing-testimonial-avatar i {
    font-size: var(--font-size-lg);
    color: var(--primary-contrast);
}

.landing-testimonial-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.landing-testimonial-info strong {
    font-size: var(--font-size-base);
    color: var(--text-color);
    font-weight: 600;
}

.landing-testimonial-info span {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ========================================
   FAQ GRID
   ======================================== */
.landing-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.landing-faq-card {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--surface-border);
    transition: all var(--transition);
}

.landing-faq-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
}

.landing-faq-question {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.landing-faq-question i {
    color: var(--primary-color);
    font-size: 1em;
}

.landing-faq-answer {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   RESPONSIVE - TIMELINE
   ======================================== */
@media (max-width: 767px) {
    .landing-timeline-item {
        grid-template-columns: 60px 1fr;
        gap: var(--space-lg);
        margin-bottom: var(--space-xl);
    }

    .landing-timeline-number {
        width: 60px;
        height: 60px;
        font-size: var(--font-size-2xl);
    }

    .landing-timeline-content {
        padding: var(--space-lg);
    }

    .landing-timeline-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .landing-timeline-icon i {
        font-size: var(--font-size-lg);
    }

    .landing-timeline-title {
        font-size: var(--font-size-lg);
    }

    .landing-timeline-description {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .landing-timeline-item {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .landing-timeline-marker {
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: var(--space-md);
    }

    .landing-timeline-line {
        width: 100%;
        height: 4px;
        margin-top: 0;
        margin-left: var(--space-md);
    }

    .landing-timeline-item:last-child .landing-timeline-marker {
        margin-bottom: 0;
    }

    .landing-results-grid {
        grid-template-columns: 1fr;
    }

    .landing-result-stat {
        font-size: 3rem;
    }

    .landing-testimonials-grid {
        grid-template-columns: 1fr;
    }

    .landing-faq-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .landing-timeline-content,
    .landing-result-card,
    .landing-testimonial-card,
    .landing-faq-card,
    .landing-result-icon {
        transition: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .landing-timeline-line {
        background: #ddd;
    }

    .landing-timeline-number {
        background: var(--primary-color);
        box-shadow: none;
    }

    .landing-result-card,
    .landing-testimonial-card,
    .landing-faq-card {
        break-inside: avoid;
    }
}

/* ============================================================
   END OF MANAGEMENT PAGE STYLES
   ============================================================ */


   /* ============================================================
   LANDING BASE STYLES
   Header, Navigation, Footer for landing pages
   Add this after landing-page-styles.css
   ============================================================ */

/* ========================================
   LANDING WRAPPER & BODY
   ======================================== */
.landing-body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.landing-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.landing-main {
    flex: 1;
}

/* ========================================
   HEADER
   ======================================== */
.landing-header {
    background: var(--surface-color);
    border-bottom: 2px solid var(--surface-border);
    padding: var(--space-md) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.landing-header__container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

/* Brand */
.landing-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    font-size: var(--font-size-lg);
    transition: all var(--transition-fast);
}

.landing-header__brand:hover {
    color: var(--primary-color);
}

.landing-header__logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-contrast);
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-sm);
}

.landing-header__name {
    white-space: nowrap;
}

/* Desktop Navigation */
.landing-nav {
    display: none;
    gap: var(--space-xs);
}

@media (min-width: 768px) {
    .landing-nav {
        display: flex;
    }
}

.landing-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.landing-nav__link:hover {
    background: var(--primary-soft);
    color: var(--primary-color);
}

.landing-nav__link i {
    font-size: 0.9em;
    opacity: 0.7;
}

.landing-nav__link:hover i {
    opacity: 1;
}

/* Header Actions */
.landing-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.landing-header__desktop-actions {
    display: none;
}

@media (min-width: 768px) {
    .landing-header__desktop-actions {
        display: flex;
        gap: var(--space-sm);
    }
}

.landing-header__buttons {
    display: flex;
    gap: var(--space-sm);
}

/* Mobile Toggle */
.landing-mobile-toggle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    border: 1px solid var(--surface-border);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-xl);
}

.landing-mobile-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary-color);
    border-color: var(--primary-border);
}

@media (min-width: 768px) {
    .landing-mobile-toggle {
        display: none;
    }
}

/* ========================================
   MOBILE MENU
   ======================================== */
.landing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.landing-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.landing-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 400px;
    background: var(--surface-color);
    box-shadow: var(--shadow-xl);
    z-index: 1200;
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--space-xl) 0;
}

.landing-mobile-menu[aria-hidden="false"] {
    transform: translateX(0);
}

.landing-mobile-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--surface-muted);
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-xl);
}

.landing-mobile-close:hover {
    background: var(--error-color);
    color: white;
    transform: rotate(90deg);
}

/* Mobile Navigation */
.landing-mobile-nav {
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.landing-mobile-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.landing-mobile-nav__link:hover {
    background: var(--primary-soft);
    border-left-color: var(--primary-color);
    color: var(--primary-color);
}

.landing-mobile-nav__link i {
    width: 1.5rem;
    text-align: center;
    font-size: var(--font-size-lg);
}

/* Mobile Actions */
.landing-mobile-actions {
    padding: var(--space-lg);
    border-top: 1px solid var(--surface-border);
    margin-top: auto;
}

.landing-mobile-auth {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ========================================
   FOOTER
   ======================================== */
.landing-footer {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    color: var(--primary-contrast);
    padding: var(--space-2xl) 0;
    margin-top: var(--space-2xl);
}

.landing-footer__container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Footer Brand */
.landing-footer__brand {
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.landing-footer__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.landing-footer__logo i {
    font-size: var(--font-size-2xl);
}

.landing-footer__tagline {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-base);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Footer Links */
.landing-footer__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.landing-footer__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.landing-footer__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--primary-contrast);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.landing-footer__title i {
    font-size: 0.9em;
}

.landing-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.landing-footer__list li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
    display: inline-block;
}

.landing-footer__list li a:hover {
    color: var(--primary-contrast);
    transform: translateX(4px);
}

/* Footer Bottom */
.landing-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}

.landing-footer__copyright {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-sm);
    margin: 0;
}

.landing-footer__social {
    display: flex;
    gap: var(--space-md);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .landing-header__container {
        padding: 0 var(--space-md);
    }

    .landing-header__name {
        display: none;
    }

    .landing-footer__links {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: center;
    }

    .landing-footer__column {
        align-items: center;
    }

    .landing-footer__title {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .landing-header__container {
        padding: 0 var(--space-sm);
    }

    .landing-footer {
        padding: var(--space-xl) 0;
    }

    .landing-footer__container {
        padding: 0 var(--space-md);
    }
}

@media (min-width: 768px) {
    .landing-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }

    .landing-footer__brand {
        text-align: left;
    }

    .landing-footer__logo {
        justify-content: flex-start;
    }

    .landing-footer__tagline {
        margin: 0;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.landing-nav__link:focus-visible,
.landing-mobile-nav__link:focus-visible,
.landing-mobile-toggle:focus-visible,
.landing-mobile-close:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-color);
    color: var(--primary-contrast);
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    z-index: 10000;
}

.skip-to-main:focus {
    top: 0;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .landing-header,
    .landing-mobile-menu,
    .landing-overlay,
    .landing-footer {
        display: none;
    }

    .landing-main {
        padding: 0;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .landing-mobile-menu,
    .landing-overlay,
    .landing-nav__link,
    .landing-mobile-nav__link {
        transition: none;
        animation: none;
    }
}

/* ============================================================
   END OF LANDING BASE STYLES
   ============================================================ */


   /* ============================================================
   RIDES OVERVIEW & FILTERING STYLES
   ============================================================ */

/* ========================================
   QUICK STATS CARDS
   ======================================== */
.rides-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.quick-stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    border: 2px solid var(--surface-border);
    transition: all var(--transition);
}

.quick-stat-card:hover {
    border-color: var(--primary-border);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quick-stat-card i {
    font-size: var(--font-size-2xl);
    color: var(--primary-color);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    border-radius: var(--radius-md);
}

.quick-stat-card .stat-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}

.quick-stat-card .stat-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* ========================================
   FILTER SECTION
   ======================================== */
.filter-section {
    margin-bottom: var(--space-xl);
}

.filter-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface-color);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-toggle-btn:hover {
    background: var(--surface-muted);
    border-color: var(--primary-border);
}

.filter-toggle-btn i:first-child {
    color: var(--primary-color);
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--space-xs);
    background: var(--primary-color);
    color: var(--primary-contrast);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.filter-chevron {
    color: var(--text-muted);
    transition: transform var(--transition);
}

/* Filter Collapse */
.filter-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.filter-collapse[data-collapsed="false"] {
    max-height: 2000px;
    transition: max-height 0.5s ease-in;
}

.filter-form {
    padding: var(--space-xl);
    background: var(--surface-muted);
    border: 2px solid var(--surface-border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Filter Rows */
.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.filter-row:last-of-type {
    margin-bottom: 0;
}

/* Filter Groups */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.filter-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
}

.filter-label i {
    color: var(--primary-color);
    font-size: var(--font-size-base);
}

/* Filter Inputs */
.filter-input,
.filter-select {
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-color);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--text-color);
    transition: all var(--transition-fast);
}

.filter-input:hover:not(:disabled),
.filter-select:hover:not(:disabled) {
    border-color: var(--primary-border);
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.filter-input:disabled,
.filter-select:disabled {
    background: var(--surface-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Filter Actions */
.filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--surface-border);
}

.filter-actions-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
}

.filter-actions-info i {
    color: var(--primary-color);
}

/* ========================================
   ACTIVE FILTERS
   ======================================== */
.active-filters {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-lg);
    background: var(--primary-soft);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    border: 2px solid var(--primary-border);
}

.active-filters-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.active-filters-list {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    flex: 1;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: var(--surface-color);
    border: 2px solid var(--primary-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
}

.filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-chip-remove:hover {
    background: var(--danger-dark);
    transform: scale(1.1);
}

.filter-chip-remove i {
    font-size: var(--font-size-xs);
}

/* ========================================
   RIDES RESULTS INFO
   ======================================== */
.rides-results-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.rides-results-info i {
    color: var(--primary-color);
    margin-right: var(--space-xs);
}

/* ========================================
   RIDES LIST
   ======================================== */
.rides-list {
    display: grid;
    gap: var(--space-lg);
}

/* Ride Card */
.ride-card {
    background: var(--surface-color);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
}

.ride-card:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Card Header */
.ride-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-muted);
    border-bottom: 2px solid var(--surface-border);
}

.ride-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ride-card-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.ride-card-meta i {
    color: var(--primary-color);
}

.ride-card-actions {
    display: flex;
    gap: var(--space-sm);
}

.ride-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--surface-color);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.ride-action-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-contrast);
    transform: scale(1.05);
}

/* Card Body */
.ride-card-body {
    padding: var(--space-lg);
}

.ride-info-row {
    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-md);
}

.ride-info-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    font-weight: 500;
}

.ride-info-item i {
    color: var(--primary-color);
}

.ride-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--primary-soft);
    color: var(--primary-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.ride-score {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.star-rating {
    display: flex;
    gap: 2px;
}

.star-rating i {
    color: var(--accent-orange);
    font-size: var(--font-size-sm);
}

.score-value {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-secondary);
}

.ride-notes {
    padding: var(--space-md);
    background: var(--surface-muted);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.ride-notes p {
    margin: 0;
}

/* Card Footer */
.ride-card-footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-muted);
    border-top: 2px solid var(--surface-border);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.ride-photo-count {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.ride-photo-count i {
    color: var(--primary-color);
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl);
    background: var(--surface-muted);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--surface-border);
}

.empty-state-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-lg);
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 var(--space-sm) 0;
}

.empty-state-text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0 0 var(--space-xl) 0;
    max-width: 400px;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.spinner {
    width: 3rem;
    height: 3rem;
    border: 4px solid var(--surface-border);
    border-top-color: var(--primary-color);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-content span {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-color);
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination-container {
    margin-top: var(--space-xl);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 var(--space-sm);
    background: var(--surface-color);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-md);
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.pagination-link:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-contrast);
    transform: translateY(-2px);
}

.pagination-info {
    padding: 0 var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .rides-quick-stats {
       grid-template-columns: repeat(2, 1fr);
    }

    .filter-row {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-actions-info {
        text-align: center;
        justify-content: center;
    }

    .active-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .ride-info-row {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .ride-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}

/* ============================================================
   END OF RIDES OVERVIEW & FILTERING STYLES
   ============================================================ */

   /* ============================================================
   RIDE CARDS - INCREMENTAL IMPROVEMENTS
   Add these to the END of your styling.css
   These enhance existing .ride-card styles without overwriting
   ============================================================ */

/* ========================================
   ENHANCED PRIMARY INFO SECTION
   ======================================== */
.ride-primary-info {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Override existing .ride-info-item if needed */
.ride-card-body .ride-info-item.ride-location i {
    color: var(--primary-color);
}

.ride-card-body .ride-info-item.ride-horse i {
    color: var(--accent-color, #6b4423);
}

/* ========================================
   NEW: BADGES SECTION
   ======================================== */
.ride-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ride-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
}

.ride-badge i {
    font-size: 0.875rem;
}

.ride-badge-type {
    background: #e3f2fd;
    color: #1976d2;
}

.ride-badge-competition {
    background: #fff3e0;
    color: #f57c00;
}

.ride-badge-test {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* ========================================
   ENHANCED SCORE SECTION
   ======================================== */
.ride-score-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Keep existing .star-rating but enhance colors */
.ride-card-body .star-rating i.fa-solid {
    color: #ffa726;
}

.ride-card-body .star-rating i.fa-regular {
    color: #e0e0e0;
}

.ride-card-body .score-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary, #546e7a);
}

/* ========================================
   NEW: EQUIPMENT ROW (Compact Display)
   ======================================== */
.ride-equipment {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 0.5rem;
}

.equipment-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, #546e7a);
}

.equipment-item i {
    font-size: 0.875rem;
    color: var(--primary-color, #2e7d32);
}

/* ========================================
   ENHANCED ACTION BUTTONS
   ======================================== */
.ride-action-btn.ride-action-view:hover {
    background: #1976d2;
    border-color: #1976d2;
}

.ride-action-btn.ride-action-edit:hover {
    background: #f57c00;
    border-color: #f57c00;
}

/* ========================================
   CARD HOVER ENHANCEMENT
   ======================================== */
.ride-card {
    transition: all 0.3s ease;
}

.ride-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
    .ride-primary-info {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ride-equipment {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ride-badges {
        gap: 0.375rem;
    }

    .ride-badge {
        font-size: 0.75rem;
        padding: 0.3125rem 0.625rem;
    }
}

/* ============================================================
   END OF INCREMENTAL IMPROVEMENTS
   ============================================================ */

/* ========================================
   END OF FILE
   ======================================== */