/* Normatiivid page (TOPi Ujumisklubi) */
:root {
    --top-blue: #0b4f8a;
    --top-blue-dark: #083a66;
    --top-accent: #19a7ce;
    --page-bg: #f3f6f9;
}
body { background: var(--page-bg); min-height: 100vh; }

.top-header { background: linear-gradient(120deg, var(--top-blue-dark), var(--top-blue) 60%, var(--top-accent)); color: #fff; }
.top-header .brand { font-weight: 700; letter-spacing: 0.02em; }
.top-header .brand small { display: block; font-weight: 400; opacity: 0.8; font-size: 0.8rem; letter-spacing: 0; }
.top-header .btn-swimmer { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.35); text-align: left; }
.top-header .btn-swimmer:hover, .top-header .btn-swimmer:focus { background: rgba(255,255,255,0.25); color: #fff; }
.top-header .btn-swimmer .sub { display: block; font-size: 0.75rem; opacity: 0.85; }

.gate-card { max-width: 420px; }

.swimmer-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Swimmer picker */
.picker-filters .btn { min-width: 84px; }
.picker-list { max-height: 60vh; overflow-y: auto; }
.picker-year { position: sticky; top: 0; background: #fff; z-index: 1; font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; padding: 8px 4px 4px; border-bottom: 1px solid #e9ecef; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; padding: 6px 0 10px; }
.picker-item { border: 1px solid #e3e8ee; border-radius: 8px; background: #fff; padding: 7px 10px; text-align: left; width: 100%;
    display: flex; align-items: center; gap: 8px; }
.picker-item:hover, .picker-item:focus-visible { border-color: var(--top-accent); background: #f0f9fc; outline: none; }
.picker-item.active { border-color: var(--top-blue); background: #e7f1fb; }
.picker-item .name { font-weight: 600; line-height: 1.2; }
.picker-item .meta { font-size: 0.75rem; color: #6c757d; }
.picker-item .g { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.picker-item .g.Female { background: #e0559a; }
.picker-item .g.Male { background: #2f7fd1; }
.picker-item.no-data { opacity: 0.6; }

/* Standards ladder and target view */
.olympic-section-title { font-weight: 600; margin-bottom: 0.5rem; }
.olympic-tile { border: 1px solid #e9ecef; border-radius: 10px; padding: 12px 14px; background: #fff; }
.olympic-tile-label { font-size: 0.8rem; color: #6c757d; }
.olympic-tile-value { font-size: 1.4rem; font-weight: 600; line-height: 1.3; }
.olympic-tile-sub { font-size: 0.8rem; color: #6c757d; }
.olympic-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; white-space: nowrap; }
.olympic-status i { color: var(--status-color); }
.olympic-converted { color: #6c757d; font-weight: 600; }
.olympic-est { font-size: 0.7rem; color: #6c757d; border: 1px solid #ced4da; border-radius: 4px; padding: 0 3px; }
.olympic-table td, .olympic-table th { white-space: nowrap; font-size: 0.9rem; }
.olympic-advice { background: #f8f9fa; border-radius: 8px; padding: 10px 12px; }
.olympic-milestone { border: 1px solid #e9ecef; border-radius: 8px; padding: 4px 10px; display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; }
.olympic-milestone span { color: #6c757d; }
.ladder-table { font-size: 0.8rem; }
.ladder-table th, .ladder-table td { text-align: center; vertical-align: middle; white-space: nowrap; padding: 0.25rem 0.3rem; }
.ladder-table .ladder-event { text-align: left; font-weight: 600; position: sticky; left: 0; background: #fff; z-index: 1; }
.ladder-group { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; border-bottom: 2px solid #dee2e6 !important; }
.ladder-col { cursor: pointer; font-weight: 600; min-width: 64px; }
.ladder-sub { font-weight: 400; font-size: 0.7rem; color: #6c757d; }
.ladder-pct { font-weight: 400; font-size: 0.68rem; color: #6c757d; line-height: 1.1; }
.ladder-cell { cursor: pointer; border-left: 2px solid #fff; }
.ladder-cell:hover { outline: 2px solid #0d6efd; outline-offset: -2px; }
.ladder-na { cursor: default; }
.ladder-na:hover { outline: none; }
/* Bootstrap paints table cells from --bs-table-bg, so set the variable rather than background */
.ladder-table td.ladder-na { --bs-table-bg: #f8f9fa; }
.ladder-table td.ladder-met, .ladder-table td.ladder-likely, .ladder-table td.ladder-close,
.ladder-table td.ladder-developing, .ladder-table td.ladder-long_term {
    --bs-table-bg: color-mix(in srgb, var(--status-color) 18%, #fff); }
.ladder-table td.ladder-met { --bs-table-bg: color-mix(in srgb, var(--status-color) 32%, #fff); font-weight: 600; }
.ladder-table td.ladder-cell-active { outline: 2px solid #0d6efd; outline-offset: -2px; }
.ladder-table th.ladder-col-active { --bs-table-bg: #e7f1ff; }
/* Let long championship names wrap so the ladder fits on laptop screens */
.ladder-table th.ladder-col { white-space: normal; line-height: 1.15; }
.ladder-table .ladder-sub { white-space: nowrap; }

/* Phones: one championship group in the ladder, compact cells, secondary table columns hidden */
.ladder-groups .btn { font-size: 0.78rem; padding: 0.3rem 0.2rem; }
@media (max-width: 767.98px) {
    .ladder-table { font-size: 0.72rem; }
    .ladder-table th, .ladder-table td { padding: 0.25rem 0.15rem; }
    .ladder-table .ladder-event { padding-left: 0.25rem; font-size: 0.75rem; }
    .ladder-col { min-width: 0; }
    .ladder-pct { font-size: 0.62rem; }
    .olympic-table td, .olympic-table th { font-size: 0.8rem; padding: 0.4rem 0.3rem; }
    .olympic-table .opt-col, .olympic-table .opt-text, .olympic-table .status-text { display: none; }
    .olympic-tile { padding: 8px 10px; }
    .olympic-tile-value { font-size: 1.15rem; }
    #olympics-target h5 { font-size: 1.05rem; }
    #olympics-target-select { width: 100% !important; }
    .swimmer-card h4 { font-size: 1.25rem; }
}

/* Let vertical swipes over charts scroll the page on touch screens */
#olympics-gap-chart .nsewdrag, #olympics-progress-chart .nsewdrag,
#olympics-gap-chart .main-svg, #olympics-progress-chart .main-svg { touch-action: pan-y !important; }