/* SSv5 Webpage Enhancements v0.7.5 */
/* ==========================================================================
   Enhancements Branding – customise enhancement-specific UI elements
   that don't inherit from the meet's branding.css / style.css.

   Edit the CSS variables below to match the meet's visual identity.
   These only affect elements added by meet-tools (search, stats, cards).
   ========================================================================== */

:root {
    /* ── Swimmer search box (sidebar) ── */
    --mt-search-bg: #313143;
    --mt-search-border: #535362;
    --mt-search-focus-bg: #3c3c4d;
    --mt-search-focus-border: #8d8d97;
    --mt-search-text: inherit;
    --mt-search-placeholder: #8d8d97;

    /* ── Sidebar tool buttons (Statistics) ── */
    --mt-sidebar-btn-bg: #2c2c3f;
    --mt-sidebar-btn-border: #353547;
    --mt-sidebar-btn-hover-bg: #434354;

    /* ── Autocomplete dropdown ── */
    --mt-autocomplete-bg: var(--brand-primary);
    --mt-autocomplete-border: #484858;
    --mt-autocomplete-hover-bg: #3c3c4d;

    /* ── Stat cards (statistics page) ── */
    --mt-stat-card-bg: #f8f9fa;
    --mt-stat-card-radius: 8px;
    --mt-stat-value-color: var(--brand-primary);
    --mt-stat-label-color: #666666;

    /* ── Schedule / Meet Swims cards (swimmer page) ── */
    --mt-schedule-card-bg: #f8f9fa;
    --mt-schedule-card-radius: 8px;
    --mt-schedule-card-border: var(--brand-primary);
    --mt-schedule-num-color: var(--brand-primary);
    --mt-schedule-event-name-color: #333333;
    --mt-schedule-time-color: #333333;
    --mt-schedule-sublabel-color: #555555;

    /* ── Section titles ── */
    --mt-section-title-color: #f8f9fa;

    /* ── Swimmer card header ── */
    --mt-swimmer-header-bg: #f8f9fa;
    --mt-swimmer-header-radius: 8px;
    --mt-swimmer-name-color: var(--brand-primary);
    --mt-swimmer-meta-color: #666666;

    /* ── Time difference badges ── */
    --mt-diff-faster-bg: #d4edda;
    --mt-diff-faster-color: #155724;
    --mt-diff-slower-bg: #f8d7da;
    --mt-diff-slower-color: #721c24;

    /* ── Buttons (entry time comparison, show more) ── */
    --mt-overlay-btn-bg: var(--brand-primary);
    --mt-overlay-btn-color: #ffffff;
    --mt-show-more-bg: var(--brand-primary);
    --mt-show-more-color: #ffffff;

    /* ── Stats page heading ── */
    --mt-stats-heading-color: var(--brand-primary);
    --mt-stats-heading-size: 1.3rem;
    --mt-stats-heading-weight: 700;
    --mt-stats-section-title-color: var(--mt-section-title-color);
}

/* ── Apply variables to elements ── */

.mt-search-input {
    background: var(--mt-search-bg);
    border-color: var(--mt-search-border);
    color: var(--mt-search-text);
}
.mt-search-input::placeholder { color: var(--mt-search-placeholder); }
.mt-search-input:focus {
    background: var(--mt-search-focus-bg);
    border-color: var(--mt-search-focus-border);
}

.mt-sidebar-btn {
    background: var(--mt-sidebar-btn-bg);
    border-color: var(--mt-sidebar-btn-border);
}
.mt-sidebar-btn:hover { background: var(--mt-sidebar-btn-hover-bg); }

.mt-autocomplete {
    background: var(--mt-autocomplete-bg);
    border-color: var(--mt-autocomplete-border);
}
.mt-autocomplete-item:hover,
.mt-autocomplete-item.active { background: var(--mt-autocomplete-hover-bg); }

.mt-stat-card {
    background: var(--mt-stat-card-bg);
    border-radius: var(--mt-stat-card-radius);
}
.mt-stat-value { color: var(--mt-stat-value-color); }
.mt-stat-label { color: var(--mt-stat-label-color); }

.mt-schedule-item {
    background: var(--mt-schedule-card-bg);
    border-radius: var(--mt-schedule-card-radius);
    border-left-color: var(--mt-schedule-card-border);
}
.mt-schedule-event-num { color: var(--mt-schedule-num-color); }
.mt-schedule-event-name { color: var(--mt-schedule-event-name-color); }
.mt-schedule-time { color: var(--mt-schedule-time-color); }
.mt-schedule-heat-lane { color: var(--mt-schedule-sublabel-color); }

.mt-section-title { color: var(--mt-section-title-color); }

.mt-swimmer-header-card {
    background: var(--mt-swimmer-header-bg);
    border-radius: var(--mt-swimmer-header-radius);
}
.mt-swimmer-name { color: var(--mt-swimmer-name-color); }
.mt-swimmer-meta { color: var(--mt-swimmer-meta-color); }

.mt-diff-faster {
    background: var(--mt-diff-faster-bg);
    color: var(--mt-diff-faster-color);
}
.mt-diff-slower {
    background: var(--mt-diff-slower-bg);
    color: var(--mt-diff-slower-color);
}

.mt-overlay-toggle {
    background: var(--mt-overlay-btn-bg);
    color: var(--mt-overlay-btn-color);
}

.mt-show-more {
    background: var(--mt-show-more-bg);
    color: var(--mt-show-more-color);
}

.mt-stats h2 {
    color: var(--mt-stats-heading-color);
    font-size: var(--mt-stats-heading-size);
    font-weight: var(--mt-stats-heading-weight);
}
.mt-stats .mt-section-title { color: var(--mt-stats-section-title-color); }