/* ================================================================
    styles.css — Spartan Recruiting Global Stylesheet
    Supplements Tailwind CSS with custom properties, base styles,
    utility classes, and reusable component patterns extracted from
    the site's design language.
   ================================================================ */

/* ---
    FONTS — Google Fonts
    Lexend:  Headlines, labels, navigation
    Manrope: Body text
    Material Symbols Outlined: Icon font
   --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ---
    CSS CUSTOM PROPERTIES — Material Design 3 Theme Tokens
    Mirrors the Tailwind config palette for use outside Tailwind
    utility classes (JS, dynamic styles, non-Tailwind contexts).
   --- */
:root {
    /* -- Primary -- */
    --color-primary: #051625;
    --color-on-primary: #ffffff;
    --color-primary-container: #1b2b3a;
    --color-on-primary-container: #8292a5;
    --color-primary-fixed: #d3e4f8;
    --color-primary-fixed-dim: #b8c8dc;
    --color-on-primary-fixed: #0c1d2b;
    --color-on-primary-fixed-variant: #384858;
    --color-inverse-primary: #b8c8dc;
    /* -- Secondary -- */
    --color-secondary: #7c5730;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #fdcb9b;
    --color-on-secondary-container: #79542d;
    --color-secondary-fixed: #ffdcbd;
    --color-secondary-fixed-dim: #eebd8e;
    --color-on-secondary-fixed: #2c1600;
    --color-on-secondary-fixed-variant: #61401b;
    /* -- Tertiary -- */
    --color-tertiary: #00172a;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #0a2c45;
    --color-on-tertiary-container: #7794b2;
    --color-tertiary-fixed: #cee5ff;
    --color-tertiary-fixed-dim: #acc9ea;
    --color-on-tertiary-fixed: #001d33;
    --color-on-tertiary-fixed-variant: #2c4964;
    /* -- Error -- */
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    /* -- Surface -- */
    --color-surface: #f7f9fc;
    --color-on-surface: #191c1e;
    --color-surface-variant: #e0e3e6;
    --color-on-surface-variant: #43474c;
    --color-surface-dim: #d8dadd;
    --color-surface-bright: #f7f9fc;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f2f4f7;
    --color-surface-container: #eceef1;
    --color-surface-container-high: #e6e8eb;
    --color-surface-container-highest: #e0e3e6;
    --color-surface-tint: #506071;
    --color-inverse-surface: #2d3133;
    --color-inverse-on-surface: #eff1f4;
    /* -- Outline -- */
    --color-outline: #74777c;
    --color-outline-variant: #c4c6cc;
    /* -- Background -- */
    --color-background: #f7f9fc;
    --color-on-background: #191c1e;
    /* -- Shadows -- */
    --shadow-bronze: 0 20px 40px -12px rgba(124, 87, 48, 0.15);
    --shadow-bronze-soft: 0 20px 40px -12px rgba(124, 87, 48, 0.08);
    /* -- Theme helper tokens -- */
    --color-primary-text: var(--color-primary);
    --color-secondary-text: var(--color-secondary);
    --color-primary-rgb: 5, 22, 37;
    --color-secondary-rgb: 124, 87, 48;
    --color-secondary-accent-rgb: 124, 87, 48;
    --color-secondary-container-rgb: 253, 203, 155;
    --color-outline-variant-rgb: 196, 198, 204;
    --color-on-primary-container-rgb: 130, 146, 165;
    --color-on-secondary-container-rgb: 121, 84, 45;
    /* -- Font families -- */
    --font-headline: 'Lexend', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-label: 'Lexend', sans-serif;
}

/* ---
   THEME-AWARE SEMANTIC UTILITIES
   Keep shared Tailwind-style semantic classes synced with the CSS
   variables so template text stays readable in both light and dark
   themes.
   --- */
.bg-surface-header { background-color: var(--color-surface-container-low); }
.bg-surface-popup { background-color: var(--color-surface-container); }
.bg-surface-footer { background-color: var(--color-surface-container-low); }
.border-surface-outline { border-color: var(--color-outline-variant); }

.text-primary { color: var(--color-primary-text); }
.text-secondary { color: var(--color-secondary-text); }
.text-on-background { color: var(--color-on-background); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-on-primary-container { color: var(--color-on-primary-container); }
.text-on-secondary-container { color: var(--color-on-secondary-container); }
.text-outline { color: var(--color-outline); }
.text-on-secondary-container\/80 { color: rgba(var(--color-on-secondary-container-rgb), 0.8); }

.hover\:text-secondary:hover { color: var(--color-secondary-text); }
.group:hover .group-hover\:text-secondary { color: var(--color-secondary-text); }

:root.dark {
    --color-primary: #051625;
    --color-on-primary: #ffffff;
    --color-primary-container: #162635;
    --color-on-primary-container: #c7d4e4;
    --color-primary-fixed: #d3e4f8;
    --color-primary-fixed-dim: #b8c8dc;
    --color-on-primary-fixed: #0c1d2b;
    --color-on-primary-fixed-variant: #384858;
    --color-inverse-primary: #d3e4f8;

    --color-secondary: #7c5730;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #42301f;
    --color-on-secondary-container: #ffdcbd;
    --color-secondary-fixed: #ffdcbd;
    --color-secondary-fixed-dim: #eebd8e;
    --color-on-secondary-fixed: #2c1600;
    --color-on-secondary-fixed-variant: #61401b;

    --color-tertiary: #acc9ea;
    --color-on-tertiary: #001d33;
    --color-tertiary-container: #23394b;
    --color-on-tertiary-container: #cee5ff;
    --color-tertiary-fixed: #cee5ff;
    --color-tertiary-fixed-dim: #acc9ea;
    --color-on-tertiary-fixed: #001d33;
    --color-on-tertiary-fixed-variant: #2c4964;

    --color-error: #ffb4ab;
    --color-on-error: #690005;
    --color-error-container: #601410;
    --color-on-error-container: #ffdad6;

    --color-surface: #0f1724;
    --color-on-surface: #eff4fb;
    --color-surface-variant: #243041;
    --color-on-surface-variant: #bcc7d6;
    --color-surface-dim: #0b111b;
    --color-surface-bright: #1a2534;
    --color-surface-container-lowest: #0a1018;
    --color-surface-container-low: #121b29;
    --color-surface-container: #182231;
    --color-surface-container-high: #1f2b3b;
    --color-surface-container-highest: #2a3748;
    --color-surface-tint: #b8c8dc;
    --color-inverse-surface: #eff1f4;
    --color-inverse-on-surface: #2d3133;

    --color-outline: #8fa0b3;
    --color-outline-variant: #425166;

    --color-background: #0b111b;
    --color-on-background: #f8fafc;

    --shadow-bronze: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
    --shadow-bronze-soft: 0 20px 40px -12px rgba(0, 0, 0, 0.25);

    --color-primary-text: #eff4fb;
    --color-secondary-text: #eebd8e;
    --color-primary-rgb: 5, 22, 37;
    --color-secondary-rgb: 124, 87, 48;
    --color-secondary-accent-rgb: 238, 189, 142;
    --color-secondary-container-rgb: 66, 48, 31;
    --color-outline-variant-rgb: 66, 81, 102;
    --color-on-primary-container-rgb: 199, 212, 228;
    --color-on-secondary-container-rgb: 255, 220, 189;
}

/* ---
   DARK MODE TAILWIND TOKEN OVERRIDES
   Keep page structure intact while remapping neutral surfaces and text.
   --- */
.dark .bg-surface { background-color: var(--color-surface); }
.dark .bg-surface-variant { background-color: var(--color-surface-variant); }
.dark .bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
.dark .bg-surface-container-low { background-color: var(--color-surface-container-low); }
.dark .bg-surface-container { background-color: var(--color-surface-container); }
.dark .bg-surface-container-high { background-color: var(--color-surface-container-high); }
.dark .bg-surface-container-highest { background-color: var(--color-surface-container-highest); }
.dark .bg-primary { background-color: var(--color-primary); }
.dark .bg-primary-container { background-color: var(--color-primary-container); }
.dark .bg-secondary-container { background-color: var(--color-secondary-container); }

/* Semantic text tokens need dark-specific selectors because Tailwind CDN
   generates utility classes at runtime and can otherwise win the cascade. */
.dark .text-primary { color: var(--color-primary-text); }
.dark .text-secondary { color: var(--color-secondary-text); }
.dark .text-on-background { color: var(--color-on-background); }
.dark .text-on-surface { color: var(--color-on-surface); }
.dark .text-on-surface-variant { color: var(--color-on-surface-variant); }
.dark .text-on-primary-container { color: var(--color-on-primary-container); }
.dark .text-on-secondary-container { color: var(--color-on-secondary-container); }
.dark .text-outline { color: var(--color-outline); }
.dark .text-primary-fixed-dim { color: var(--color-primary-fixed-dim); }
.dark .text-secondary-fixed-dim { color: var(--color-secondary-fixed-dim); }
.dark .text-on-secondary-container\/80 { color: rgba(var(--color-on-secondary-container-rgb), 0.8); }
/* Removed redundant shared-layout dark overrides */

.dark .text-slate-500 { color: #94a3b8; }

/* Page-specific shims */
.dark .bg-white { background-color: var(--color-surface-container-lowest); }
.dark .text-slate-900 { color: var(--color-on-surface); }
.dark .hover\:text-slate-900:hover { color: var(--color-on-surface); }

.dark .bg-secondary\/20 { background-color: rgba(var(--color-secondary-accent-rgb), 0.2); }
.dark .border-secondary\/50 { border-color: rgba(var(--color-secondary-accent-rgb), 0.5); }
.dark .text-on-secondary-container\/80 { color: rgba(var(--color-on-secondary-container-rgb), 0.8); }
.dark .from-primary\/80 {
    --tw-gradient-from: rgba(var(--color-primary-rgb), 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(var(--color-primary-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark .to-primary { --tw-gradient-to: var(--color-primary) var(--tw-gradient-to-position); }
.dark .border-outline-variant\/10 { border-color: rgba(var(--color-outline-variant-rgb), 0.1); }
.dark .bg-outline-variant\/30 { background-color: rgba(var(--color-outline-variant-rgb), 0.3); }
.dark .hover\:bg-secondary\/10:hover { background-color: rgba(var(--color-secondary-accent-rgb), 0.1); }
.dark .hover\:bg-secondary-container\/20:hover { background-color: rgba(var(--color-secondary-container-rgb), 0.2); }
.dark .hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.05); }

/* ---
   BASE ELEMENT STYLES
   --- */
body {
    font-family: var(--font-body);
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
}
label {
    font-family: var(--font-label);
}

/* ---
   MATERIAL SYMBOLS — Icon font configuration
   Default: outlined, 400 weight, no fill, 24px optical size.
   --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ---
   SHADOW UTILITIES
   Warm bronze-toned shadows from the design language.
   --- */
/* Strong variant — featured cards, CTAs, hero elements */
.bronze-glow {
    box-shadow: var(--shadow-bronze);
}
/* Soft variant — content cards, search results, secondary panels */
.bronze-glow-soft {
    box-shadow: var(--shadow-bronze-soft);
}

/* ---
   GRADIENT UTILITIES
   --- */
/* Primary-to-container dark gradient — hero sections (contact page) */
.hero-gradient {
    background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-container));
}

/* ---
   LAYOUT UTILITIES
   --- */
/* 12-column editorial grid for asymmetric page layouts */
.editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

/* ---
   CARD HOVER — Subtle lift with warm shadow
   Used on list rows, result cards, and interactive panels.
   --- */
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    background-color: var(--color-surface-container-lowest);
    box-shadow: var(--shadow-bronze-soft);
    transform: translateY(-2px);
}
.dark .card-hover:hover {
    background-color: var(--color-surface-container-low);
}

/* Athlete list row hover — transition only on :hover (in-animation only).
   Near-identical to .card-hover but kept as an alias to preserve the
   original athlete_management.html behavior exactly. */
.athlete-card-hover:hover {
    background-color: #ffffff;
    box-shadow: 0 20px 40px -12px rgba(124, 87, 48, 0.08);
    transform: translateY(-2px);
    transition: all 0.3s ease;
    cursor: pointer;
}
.dark .athlete-card-hover:hover {
    background-color: var(--color-surface-container);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
}

/* ---
   SECTION ACCENT BAR
   Colored left-border bar used next to section headings.
   Default secondary color; override with Tailwind bg- classes.
   --- */
.section-accent {
    width: 0.375rem;
    height: 2rem;
    background-color: var(--color-secondary);
    flex-shrink: 0;
    border-radius: 1px;
}

/* ---
   STATUS BADGES
   Base class — pair with Tailwind bg/text color classes for variants.
   --- */
.badge-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---
   FORM COMPONENTS
   --- */
/* Uppercase micro-label for form fields */
.form-label {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-on-surface-variant);
}

/* ---
   BUTTON PATTERNS
   Base patterns — compose with Tailwind sizing utilities.
   --- */
/* Primary action button */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-label);
    font-weight: 700;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(5, 22, 37, 0.1);
    transition: all 0.2s ease;
}
/* Hover: amber/secondary ring + lift — consistent with nav-link amber accent on hover */
.btn-primary:hover,
html .bg-primary:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -4px rgba(5, 22, 37, 0.18), 0 0 0 2px rgba(180, 83, 9, 0.45);
}
.btn-primary:active,
html .bg-primary:active {
    transform: scale(0.95);
}
/* Secondary / ghost button */
.btn-secondary {
    background-color: var(--color-surface-container-high);
    color: var(--color-primary-text);
    font-family: var(--font-label);
    font-weight: 600;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}
.btn-secondary:hover {
    background-color: var(--color-surface-variant);
    color: var(--color-secondary-text);
}
/* Canonical site button: use this for all real buttons and link-buttons. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border: 1px solid var(--color-outline);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(5, 22, 37, 0.1);
    transition: all 0.2s ease;
}
.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    border-color: rgba(180, 83, 9, 0.45);
    box-shadow: 0 10px 20px -4px rgba(5, 22, 37, 0.18), 0 0 0 2px rgba(180, 83, 9, 0.45);
}
.btn:active {
    transform: scale(0.95);
}
.btn-full {
    width: 100%;
}
/* Compatibility for existing utility-styled ghost buttons not yet migrated. */
html button.bg-surface-container-high.text-primary:hover,
html a.bg-surface-container-high.text-primary:hover {
    background-color: var(--color-surface-variant);
    color: var(--color-secondary-text);
}
/* CTA / accent button (bronze gradient) */
.btn-cta {
    background: linear-gradient(to top right, var(--color-secondary), var(--color-secondary-fixed-dim));
    color: #ffffff;
    font-family: var(--font-headline);
    font-weight: 700;
    border-radius: 0.375rem;
    box-shadow: var(--shadow-bronze);
    transition: all 0.2s ease;
}
.btn-cta:active {
    transform: scale(0.95);
}
/* ---
   THEME PICKER
   --- */
.theme-option-button[data-selected="true"] {
    border-color: #b45309;
    background-color: rgba(180, 83, 9, 0.08);
}

.theme-option-indicator[data-selected="true"] {
    border-color: #b45309;
    background-color: #b45309;
}

.dark .theme-option-button[data-selected="true"] {
    border-color: #f59e0b;
    background-color: rgba(124, 87, 48, 0.28);
}

.dark .theme-option-indicator[data-selected="true"] {
    border-color: #f59e0b;
    background-color: #f59e0b;
}

/* ---
   MOBILE NAVIGATION — Modified by DeepSeek-v4 | 2026-05-06_01
   Slide-down menu for screens below md (768px).
   --- */
#mobile-menu {
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#mobile-menu:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}
#mobile-menu.hidden {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* Dark mode mobile nav active link background */
.dark #mobile-menu nav a.bg-surface-container-high {
    background-color: var(--color-surface-container-high);
}

/* ---
   WEB IMPORT PROGRESS BAR — indeterminate shimmer animation.
   Used inside #athletic-import-status during long-running web imports.
   --- */
@keyframes progress-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

.progress-bar-track {
    overflow: hidden;
    border-radius: 9999px;
    background-color: var(--color-surface-container-highest);
}

.progress-bar-fill {
    height: 100%;
    width: 25%;
    border-radius: 9999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-secondary) 50%,
        transparent 100%
    );
    animation: progress-shimmer 2.2s ease-in-out infinite;
}

.dark .progress-bar-track {
    background-color: var(--color-surface-container-high);
}

.dark .progress-bar-fill {
    background: linear-gradient(
        90deg,
        transparent 0%,
        #ffdcbd 50%,
        transparent 100%
    );
}