/* ================================================================
   BeerAthlon – Custom overrides for AdminLTE 4 / Bootstrap 5
   ================================================================ */

/* SPA pages */
.page { display: none; }
.page.active { display: block; }
.hidden { display: none !important; }

/* Stats view toggle */
.stats-view { display: none; }
.stats-view.active { display: block; }

/* ── Stats Player Tabs ─────────────────────────────────────────── */
.stats-tab-pane { display: none; }
.stats-tab-pane.active { display: block; animation: wizFadeIn .2s ease; }
.stats-tabs .nav-link { font-size: .9rem; font-weight: 500; }
.stats-tabs .nav-link .badge { font-size: .65rem; vertical-align: middle; }

/* ── Timer ─────────────────────────────────────────────────────── */
.timer { font-size: 3.2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.timer .ms, .timer-ms { font-size: 1.8rem; opacity: .5; }
.countdown { font-size: 5rem; font-weight: 800; color: var(--bs-warning); animation: pulse .5s ease-in-out; }
.countdown.go { color: var(--bs-success); font-size: 4rem; }
@keyframes pulse { 0% { transform: scale(1.3); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }
.timer-card.running { border-color: var(--bs-success) !important; box-shadow: 0 0 20px rgba(25, 135, 84, .3); }
.timer-card.finished { border-color: var(--bs-warning) !important; }

/* ── Camera ────────────────────────────────────────────────────── */
.camera-wrapper { position: relative; background: #000; border-radius: .5rem; overflow: hidden; line-height: 0; }
.camera-wrapper img { width: 100%; height: auto; display: block; }
.camera-wrapper canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair; }

/* Settings ROI camera preview */
#roiCamWrapper { max-height: 50vh; }
#roiCamWrapper img { max-height: 50vh; object-fit: contain; }

/* ── Mini tables (gold/silver/bronze) ──────────────────────────── */
.mini-table:not(.no-rank-highlight) tbody tr:first-child:not(.gold):not(.silver):not(.bronze) td { color: var(--bs-success) !important; font-weight: 700; }
.mini-table tbody tr.gold td { color: #ffd700 !important; font-weight: 700; }
.mini-table tbody tr.silver td { color: #c0c0c0 !important; font-weight: 600; }
.mini-table tbody tr.bronze td { color: #cd7f32 !important; font-weight: 600; }
.runs-scroll { max-height: 400px; overflow-y: auto; }
.text-dim { color: var(--bs-secondary-color); font-size: .8rem; }

/* ── Trend ─────────────────────────────────────────────────────── */
.trend-badge.improving { background: rgba(25,135,84,.2) !important; color: var(--bs-success) !important; }
.trend-badge.declining { background: rgba(220,53,69,.2) !important; color: var(--bs-danger) !important; }
.trend-badge.stable { background: rgba(108,117,125,.2) !important; color: var(--bs-secondary-color) !important; }
.chart-container { position: relative; height: 200px; }
.chart-container canvas { width: 100% !important; height: 100% !important; }
.trend-placeholder { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--bs-secondary-color); }

/* ── Settings tabs ─────────────────────────────────────────────── */
.stab-panel { display: none; }
.stab-panel.active { display: block; }

/* ── Wizard Stepper ────────────────────────────────────────────── */
.wizard-stepper { display: flex; align-items: center; justify-content: center; gap: 0; padding: .5rem 0; }
.wiz-step-item { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .5rem .75rem; border-radius: .5rem; transition: all .2s; }
.wiz-step-item:hover { background: rgba(255,255,255,.05); }
.wiz-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; border: 2px solid var(--bs-border-color); color: var(--bs-secondary-color); background: transparent; transition: all .2s; flex-shrink: 0; }
.wiz-label { font-size: .85rem; font-weight: 500; color: var(--bs-secondary-color); transition: color .2s; }
.wiz-step-item.active .wiz-num { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.wiz-step-item.active .wiz-label { color: var(--bs-body-color); font-weight: 600; }
.wiz-step-item.done .wiz-num { background: rgba(25,135,84,.15); border-color: var(--bs-success); color: var(--bs-success); }
.wiz-step-item.done .wiz-label { color: var(--bs-body-color); }
.wiz-connector { flex: 0 0 40px; height: 2px; background: var(--bs-border-color); margin: 0 .25rem; }
.wiz-step-item.done + .wiz-connector, .wiz-connector:has(+ .wiz-step-item.active) { background: var(--bs-primary); }
@media (max-width: 576px) { .wiz-label { display: none; } .wiz-connector { flex: 0 0 24px; } }

/* Wizard step panels */
.wizard-step { display: none; animation: wizFadeIn .25s ease; }
.wizard-step.active { display: block; }
@keyframes wizFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Direction grid (large – step 2) */
.direction-grid-lg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; max-width: 320px; margin: 0 auto; }
.direction-grid-lg .dir-btn { min-height: 56px; font-size: .95rem; }
.dir-center { display: flex; align-items: center; justify-content: center; font-size: 2rem; }

/* ── Settings sections ─────────────────────────────────────────── */
.settings-section { margin-bottom: 2rem; }
.settings-section:last-child { margin-bottom: 0; }
.section-icon { font-size: 1.5rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); border-radius: .75rem; flex-shrink: 0; }
.setting-card { background: var(--bs-tertiary-bg); transition: border-color .15s; }
.setting-card:hover { border-color: var(--bs-primary) !important; }

/* Direction grid */
.direction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.dir-btn.active, .dir-btn.btn-outline-secondary.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

/* ── Profile cards ─────────────────────────────────────────────── */
.profile-cards { display: flex; flex-direction: column; gap: .5rem; }
.profile-card { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; background: var(--bs-tertiary-bg); border: 2px solid var(--bs-border-color); border-radius: .5rem; cursor: pointer; transition: all .15s; }
.profile-card:hover { border-color: var(--bs-primary); }
.profile-card.active { border-color: var(--bs-primary); background: rgba(13,110,253,.08); }
.profile-card .name { font-weight: 600; }
.profile-card .meta { font-size: .75rem; color: var(--bs-secondary-color); }

/* ── Location cards (new list view) ────────────────────────────── */
.location-list { display: flex; flex-direction: column; gap: .75rem; }
.location-card {
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: .75rem;
    cursor: pointer;
    transition: all .2s;
    overflow: hidden;
}
.location-card:hover { border-color: var(--bs-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.location-card.active { border-color: var(--bs-success); background: rgba(25,135,84,.05); }
.loc-card-body { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.loc-card-img { width: 64px; height: 64px; border-radius: .5rem; object-fit: cover; flex-shrink: 0; }
.loc-card-icon { width: 64px; height: 64px; border-radius: .5rem; background: var(--bs-body-bg); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--bs-secondary-color); flex-shrink: 0; }
.loc-card-info { flex: 1; min-width: 0; }
.loc-card-name { font-weight: 700; font-size: 1.1rem; margin-bottom: .25rem; }
.loc-card-badges { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .15rem; }
.loc-card-badges .badge { font-size: .7rem; }
.loc-card-dims { font-size: .8rem; }
.loc-card-comment { font-size: .75rem; }
.loc-card-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.loc-card-actions .btn { padding: .35rem .5rem; }

/* ── Player cards ──────────────────────────────────────────────── */
.player-card { transition: opacity .2s; }
.player-card:hover { border-color: var(--bs-primary) !important; }
.player-card.inactive { opacity: .4; }
.player-avatar-lg { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bs-border-color); display: block; margin: 0 auto; }
.player-avatar-placeholder { width: 56px; height: 56px; border-radius: 50%; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--bs-secondary-color); border: 2px dashed var(--bs-border-color); margin: 0 auto; }
.btn-xs { padding: .2rem .5rem; font-size: .75rem; line-height: 1.3; }
/* Player edit modal photo */
.pe-photo-wrap { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 3px dashed var(--bs-border-color); display: flex; align-items: center; justify-content: center; transition: border-color .15s; }
.pe-photo-wrap:hover { border-color: var(--bs-primary); }
.pe-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-radius: 50%; }
.pe-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pe-gender-btn.active { font-weight: 700; }
/* Toggle switch (custom, since Bootstrap form-switch is also option) */
.toggle-switch { position: relative; width: 44px; height: 24px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; inset: 0; background: #444; border-radius: 12px; transition: .2s; }
.toggle-switch .slider:before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-switch input:checked + .slider { background: var(--bs-primary); }
.toggle-switch input:checked + .slider:before { transform: translateX(20px); }

/* ── Competition list ──────────────────────────────────────────── */
.comp-list { display: flex; flex-direction: column; gap: .5rem; }
.comp-card { display: flex; align-items: center; gap: .75rem; padding: .85rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.comp-card.inactive { opacity: .45; }
.comp-card img { width: 48px; height: 48px; border-radius: .5rem; object-fit: cover; }
.comp-card .comp-info { flex: 1; }
.comp-card .comp-name { font-weight: 600; }
.comp-card .comp-meta { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .15rem; }
.comp-card .comp-actions { display: flex; gap: .25rem; }

/* ── Badge colors (Mode, Drink, Status) ────────────────────────── */
.mode-badge.single { background: rgba(13,110,253,.15) !important; color: #6ea8fe !important; }
.mode-badge.team   { background: rgba(25,135,84,.15) !important; color: #75b798 !important; }

.status-badge.active   { background: rgba(25,135,84,.15) !important; color: var(--bs-success) !important; }
.status-badge.inactive { background: rgba(220,53,69,.15) !important; color: var(--bs-danger) !important; }

.drink-badge         { background: rgba(255,193,7,.15) !important; color: #ffda6a !important; }
.drink-badge.vodka   { background: rgba(111,66,193,.15) !important; color: #a78bfa !important; }
.drink-badge.bier    { background: rgba(255,193,7,.15) !important; color: #f5b942 !important; }
.drink-badge.shot    { background: rgba(214,51,132,.15) !important; color: #f472b6 !important; }
.drink-badge.wein    { background: rgba(220,53,69,.15) !important; color: #e57373 !important; }
.drink-badge.cocktail{ background: rgba(13,202,240,.15) !important; color: #6edff6 !important; }
.drink-badge.wasser  { background: rgba(13,110,253,.15) !important; color: #6ea8fe !important; }

/* ── Difficulty badges ──────────────────────────────────────────── */
.difficulty-badge              { font-weight: 600; border: 1px solid transparent; }
.difficulty-badge.difficulty-schwer  { background: rgba(30,30,30,.8) !important; color: #e0e0e0 !important; border-color: #555 !important; }
.difficulty-badge.difficulty-mittel  { background: rgba(220,53,69,.18) !important; color: #f87171 !important; border-color: rgba(220,53,69,.4) !important; }
.difficulty-badge.difficulty-leicht  { background: rgba(59,130,246,.18) !important; color: #60a5fa !important; border-color: rgba(59,130,246,.4) !important; }

/* ── Rules page ────────────────────────────────────────────────── */
.rules-img-wrap { overflow: hidden; border-radius: .5rem; background: #000; display: flex; align-items: center; justify-content: center; }
.rules-img-wrap img { width: 100%; height: auto; max-height: 500px; object-fit: contain; display: block; }

/* ── Dropzone ──────────────────────────────────────────────────── */
.dropzone { border: 2px dashed var(--bs-border-color); border-radius: .5rem; padding: 1.5rem; text-align: center; cursor: pointer; transition: all .15s; }
.dropzone:hover, .dropzone.dragover { border-color: var(--bs-primary); background: rgba(13,110,253,.05); }
.dz-text { color: var(--bs-secondary-color); }
.dz-preview { max-width: 100%; max-height: 200px; border-radius: .5rem; margin-top: .5rem; }

/* ── Camera Confirmation Modal ─────────────────────────────────── */
.camera-confirm-time { font-size: 2.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--bs-success); letter-spacing: 1px; }
.snapshot-gallery img { transition: transform .15s, border-color .15s; }
.snapshot-gallery img:hover { transform: scale(1.08); border-color: var(--bs-primary) !important; }

/* ── Timing Mode Toggle ───────────────────────────────────────── */
.timing-mode-btn.active { background: var(--bs-primary) !important; color: #fff !important; border-color: var(--bs-primary) !important; }

/* ── Mode Indicator Badge ──────────────────────────────────────── */
#modeIndicator { font-size: .75rem; letter-spacing: .5px; }

/* ── WR / PB / DNF Badges ─────────────────────────────────────── */
.badge.bg-danger { font-size: .65rem; font-weight: 700; letter-spacing: .5px; }
.badge.bg-success { font-size: .65rem; font-weight: 700; letter-spacing: .5px; }

/* ── Results Tab nav (iPad-friendly) ──────────────────────────── */
#resTabs { flex-wrap: wrap; }
#resTabs .nav-link { padding: .5rem 1rem; font-size: .9rem; }

/* ── Race View (fullscreen overlay) ────────────────────────────── */
.race-view {
    position: fixed; inset: 0; z-index: 1045;
    background: #111; color: #fff;
}
.rv-layout {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    padding: .75rem; gap: .5rem;
}
/* Row 1: controls + video side by side */
.rv-row1 {
    flex: 1; min-height: 0;
    display: flex; gap: .75rem;
}
/* Left: timer, stopp, dnf */
.rv-controls {
    flex: 4; min-width: 220px;
    display: flex; flex-direction: column; gap: .5rem;
}
.rv-header { display: flex; flex-direction: column; gap: .1rem; font-size: 1rem; }
.rv-timer {
    text-align: center; font-size: 3rem; font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: 2px;
    line-height: 1.1; white-space: nowrap; padding: .5rem 0;
}
.rv-timer .timer-ms { font-size: 1.6rem; opacity: .5; }
.rv-timer-fast, .rv-timer-fast .timer-ms { color: #22c55e !important; }
.rv-timer-slow, .rv-timer-slow .timer-ms { color: #ef4444 !important; }
.rv-stop-btn {
    flex: 1; min-height: 100px; max-height: 300px; width: 100%;
    font-size: 2.2rem; font-weight: 800; border-radius: .75rem; letter-spacing: 2px;
    transition: transform .15s, box-shadow .15s;
}
/* STOPP disabled during countdown */
.rv-stop-btn:disabled { opacity: .3; }
/* STOPP pulsing glow when race is running */
.rv-running .rv-stop-btn { box-shadow: 0 0 30px rgba(220,53,69,.5); animation: rv-pulse 1.5s ease-in-out infinite; }
@keyframes rv-pulse { 0%,100%{ box-shadow: 0 0 20px rgba(220,53,69,.4); } 50%{ box-shadow: 0 0 40px rgba(220,53,69,.7); } }
.rv-dnf-btn {
    min-height: 48px; width: 100%;
    font-size: .95rem; font-weight: 600; border-radius: .75rem;
}
/* Right: video */
.rv-video-wrap {
    flex: 6; min-width: 0; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-radius: .5rem;
}
.rv-video-wrap img { width: 100%; height: 100%; object-fit: contain; border-radius: .5rem; background: #000; }

/* Row 2: checkpoints full width */
.rv-cp-area {
    flex-shrink: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    max-height: 35vh;
    border-top: 1px solid rgba(255,255,255,.12); padding-top: .5rem;
}

/* Race view checkpoint */
.rv-cp-active { }
.rv-cp-split-btn { min-height: 64px; font-size: 1.15rem; font-weight: 700; border-radius: .75rem; }
.rv-cp-skip-btn { min-height: 64px; min-width: 90px; font-size: 1.2rem; border-radius: .75rem; }
.rv-cp-live { font-variant-numeric: tabular-nums; transition: color .3s; }
.rv-cp-live.faster { color: #22c55e !important; }
.rv-cp-live.slower { color: #ef4444 !important; }

/* Portrait / small screens: stack vertically */
@media (max-width: 767.98px) {
    .rv-row1 { flex-direction: column; }
    .rv-controls { width: 100%; flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem; }
    .rv-timer { flex: 1; font-size: 2rem; padding: .2rem 0; text-align: left; }
    .rv-stop-btn { flex: 1; min-height: 60px; font-size: 1.4rem; }
    .rv-dnf-btn { min-height: 60px; width: auto; min-width: 80px; }
    .rv-header { flex-direction: row; gap: .5rem; width: 100%; justify-content: space-between; }
    .rv-video-wrap { max-height: 28vh; }
}

/* ── Checkpoint Panel ──────────────────────────────────────────── */
.cp-live-time { font-variant-numeric: tabular-nums; }
.cp-editor-num { min-width: 32px; justify-content: center; }
.cp-active-wrap { border-top: 1px solid var(--bs-border-color); padding-top: .75rem; }
.cp-main-split-btn { min-height: 64px; font-size: 1.2rem; font-weight: 700; border-radius: .75rem; }
.cp-skip-btn { min-height: 64px; min-width: 64px; font-size: 1.3rem; border-radius: .75rem; }

/* ── Run Detail Modal ─────────────────────────────────────────── */
#runDetailModal .table { font-size: .85rem; }
#runDetailModal .badge { font-size: .65rem; }
.rd-snapshot { width: 100px; height: 75px; object-fit: cover; border-radius: .4rem; border: 2px solid var(--bs-border-color); cursor: pointer; transition: transform .15s, border-color .15s; }
.rd-snapshot:hover { transform: scale(1.06); border-color: var(--bs-primary); }

/* ── Tablet / iPad optimizations (below xl = < 1200px) ────────── */
@media (max-width: 1199.98px) {
    /* Hide camera toolbar & footer on tablets */
    .cam-toolbar, .cam-footer { display: none !important; }
    .cam-card-body { padding: .5rem !important; }

    /* Limit camera height so controls stay visible */
    .camera-wrapper img { max-height: 38vh; object-fit: contain; }

    /* Much bigger race buttons – easy to hit with sunscreen fingers */
    .btn-race { min-height: 80px; font-size: 1.5rem; font-weight: 700; border-radius: .75rem; }

    /* Bigger dropdowns for touch */
    #page-single .form-select { font-size: 1.1rem; min-height: 48px; }
    #page-single .form-label { font-size: 1rem; }

    /* Prevent timer line-break */
    .timer { font-size: 2.6rem; }
    .timer .ms, .timer-ms { font-size: 1.4rem; }

    /* Bigger checkpoint buttons on tablet */
    .cp-main-split-btn { min-height: 80px; font-size: 1.5rem; }
    .cp-skip-btn { min-height: 80px; min-width: 80px; font-size: 1.5rem; }
    .cp-active-wrap .fs-4 { font-size: 1.5rem !important; }

    /* Race view tablet tweaks */
    .rv-stop-btn { min-height: 120px; max-height: none; font-size: 2.5rem; }
    .rv-dnf-btn { min-height: 52px; font-size: 1.1rem; }
    .rv-cp-split-btn { min-height: 76px; font-size: 1.4rem; }
    .rv-cp-skip-btn { min-height: 76px; min-width: 100px; font-size: 1.4rem; }
    .rv-timer { font-size: 3.5rem; }
    .rv-timer .timer-ms { font-size: 1.8rem; }
}

/* Stats cards side-by-side on lg (tablet landscape) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .stats-col {
        display: flex;
        gap: .75rem;
    }
    .stats-col > .card {
        flex: 1;
        margin-bottom: 0 !important;
    }
}

/* Touch-friendly controls on small tablets / phones */
@media (max-width: 991.98px) {
    .btn-race { min-height: 72px; font-size: 1.3rem; font-weight: 700; border-radius: .75rem; }
    #page-single .form-select { font-size: 1rem; min-height: 44px; }
    .cp-main-split-btn { min-height: 72px; font-size: 1.3rem; }
    .cp-skip-btn { min-height: 72px; min-width: 72px; font-size: 1.3rem; }
}

/* ── Achievement Badges ────────────────────────────────────────── */
.ach-layout { display: flex; gap: 1rem; }
.ach-list { flex: 1; min-width: 0; }
.ach-detail { flex: 0 0 220px; position: sticky; top: 80px; align-self: flex-start; }
.badge-cat-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--bs-secondary-color); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.achievement-badge {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .65rem .5rem; border-radius: .75rem;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    text-align: center; cursor: pointer;
    transition: all .2s;
    position: relative; overflow: hidden;
}
.achievement-badge.unlocked {
    border-color: rgba(255,193,7,.5);
    background: rgba(255,193,7,.08);
}
.achievement-badge.unlocked:hover, .achievement-badge.unlocked.selected {
    border-color: rgba(255,193,7,.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255,193,7,.15);
}
.achievement-badge.locked {
    opacity: .45;
    filter: grayscale(.6);
}
.achievement-badge.locked:hover, .achievement-badge.locked.selected {
    opacity: .7;
    filter: grayscale(.3);
}
.achievement-badge.selected { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 2px rgba(13,110,253,.25); }
.ach-icon { font-size: 1.6rem; line-height: 1; }
.achievement-badge.unlocked .ach-icon { animation: achPop .4s ease; }
@keyframes achPop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.ach-name { font-size: .72rem; font-weight: 700; line-height: 1.2; color: var(--bs-body-color); }
.achievement-badge.unlocked .ach-name { color: #ffc107; }
.ach-progress { width: 80%; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; margin-top: .15rem; }
.ach-progress-bar { height: 100%; background: var(--bs-primary); border-radius: 2px; transition: width .3s; }
.ach-progress-text { font-size: .6rem; color: var(--bs-secondary-color); }

/* ── Achievement Stars ─────────────────────────────────────────── */
.ach-stars { font-size: .65rem; letter-spacing: 1px; line-height: 1; margin-top: .1rem; }
.ach-stars-bronze { color: #cd7f32; }
.ach-stars-silver { color: #c0c0c0; }
.ach-stars-gold   { color: #ffd700; text-shadow: 0 0 4px rgba(255,215,0,.4); }
.ach-stars-lg { font-size: 1.1rem; letter-spacing: 2px; }
.ach-stars-label { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--bs-secondary-color); margin-top: .1rem; }
.ach-detail-stars { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
/* Tier-colored progress bars */
.ach-bar-bronze { background: #cd7f32 !important; }
.ach-bar-silver { background: #c0c0c0 !important; }
.ach-bar-gold   { background: #ffd700 !important; }

/* ── Thresholds / Tier Overview ─────────────────────────────────── */
.ach-thresholds { width: 100%; margin-top: .5rem; }
.ach-th-tier { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: .1rem .35rem; border-radius: .25rem; }
.ach-th-bronze { background: rgba(205,127,50,.15); color: #cd7f32; }
.ach-th-silver { background: rgba(192,192,192,.15); color: #c0c0c0; }
.ach-th-gold   { background: rgba(255,215,0,.15); color: #ffd700; }
.ach-tier-overview { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.ach-tier-row { display: flex; align-items: center; gap: .4rem; opacity: .4; transition: opacity .2s; }
.ach-tier-row.active { opacity: 1; }
.ach-tier-nums { display: flex; gap: .2rem; }
.ach-tier-num { font-size: .65rem; font-variant-numeric: tabular-nums; padding: .1rem .3rem; border-radius: .2rem; background: rgba(255,255,255,.05); color: var(--bs-secondary-color); }
.ach-tier-num.reached { font-weight: 700; }
.ach-tier-row .ach-th-tier { min-width: 48px; text-align: center; }
/* Tier-specific reached colors */
.ach-tier-row:has(.ach-th-bronze) .ach-tier-num.reached { background: rgba(205,127,50,.2); color: #cd7f32; }
.ach-tier-row:has(.ach-th-silver) .ach-tier-num.reached { background: rgba(192,192,192,.2); color: #c0c0c0; }
.ach-tier-row:has(.ach-th-gold) .ach-tier-num.reached   { background: rgba(255,215,0,.2); color: #ffd700; }

/* ── Achievement Detail Panel ──────────────────────────────────── */
.ach-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: 160px; color: var(--bs-secondary-color); font-size: .85rem; text-align: center; border: 2px dashed var(--bs-border-color); border-radius: .75rem; padding: 1rem; }
.ach-detail-empty-icon { font-size: 1.5rem; }
.ach-detail-card { padding: 1.25rem; border-radius: .75rem; border: 2px solid var(--bs-border-color); background: var(--bs-tertiary-bg); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; animation: achFadeIn .2s ease; }
.ach-detail-card.unlocked { border-color: rgba(255,193,7,.5); background: rgba(255,193,7,.05); }
@keyframes achFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ach-detail-icon { font-size: 2.5rem; line-height: 1; }
.ach-detail-name { font-size: 1rem; font-weight: 800; }
.ach-detail-card.unlocked .ach-detail-name { color: #ffc107; }
.ach-detail-status { margin: .15rem 0; }
.ach-detail-desc { font-size: .82rem; line-height: 1.45; color: var(--bs-secondary-color); }
.ach-detail-progress-wrap { width: 100%; margin-top: .35rem; }
.ach-detail-progress { width: 100%; height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.ach-detail-progress-bar { height: 100%; background: var(--bs-primary); border-radius: 3px; transition: width .3s; }
.ach-detail-progress-text { font-size: .7rem; color: var(--bs-secondary-color); margin-top: .25rem; }

@media (max-width: 768px) {
    .ach-layout { flex-direction: column; }
    .ach-detail { flex: none; position: static; }
    .badge-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* On phones: hide inline detail, use modal instead */
@media (max-width: 575.98px) {
    .ach-detail { display: none !important; }
    .badge-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .4rem; }
}

/* ================================================================
   THEME TOGGLE – Light / Dark
   ================================================================ */
.theme-toggle-btn { font-size: 1.1rem; transition: transform .3s, color .2s; }
.theme-toggle-btn:hover { transform: rotate(30deg); }

/* ── Reconnect banner ──────────────────────────────────────────── */
.reconnect-banner {
    position: fixed; top: -60px; left: 50%; transform: translateX(-50%);
    z-index: 9999; padding: .6rem 1.5rem; border-radius: 0 0 .75rem .75rem;
    font-weight: 600; font-size: .9rem; transition: top .3s;
    background: var(--bs-danger); color: #fff;
}
.reconnect-banner.show { top: 0; }
.reconnect-banner.connected { background: var(--bs-success); }

/* ── Toast container ───────────────────────────────────────────── */
#toastContainer {
    position: fixed; top: 70px; right: 1rem; z-index: 1090;
    display: flex; flex-direction: column; gap: .5rem;
}

/* ================================================================
   LIGHT MODE OVERRIDES
   Activated when <html data-bs-theme="light">
   Bootstrap 5.3 already handles most variables, we only need to
   fix hardcoded dark-specific colors used in our custom CSS.
   ================================================================ */

/* Camera wrapper black bg → light neutral */
[data-bs-theme="light"] .camera-wrapper { background: #e9ecef; }

/* Race view overlay */
[data-bs-theme="light"] .race-view { background: #f4f6f8; color: #212529; }

/* Race view timer fast/slow keep vibrant */
[data-bs-theme="light"] .rv-timer-fast, [data-bs-theme="light"] .rv-timer-fast .timer-ms { color: #198754 !important; }
[data-bs-theme="light"] .rv-timer-slow, [data-bs-theme="light"] .rv-timer-slow .timer-ms { color: #dc3545 !important; }

/* Toggle switch track (was hardcoded #444) */
[data-bs-theme="light"] .toggle-switch .slider { background: #adb5bd; }

/* Drink badges – make pastel tints darker in light mode */
[data-bs-theme="light"] .drink-badge         { background: rgba(255,193,7,.18) !important; color: #946c00 !important; }
[data-bs-theme="light"] .drink-badge.vodka   { background: rgba(111,66,193,.12) !important; color: #6f42c1 !important; }
[data-bs-theme="light"] .drink-badge.bier    { background: rgba(255,193,7,.18) !important; color: #946c00 !important; }
[data-bs-theme="light"] .drink-badge.shot    { background: rgba(214,51,132,.12) !important; color: #d63384 !important; }
[data-bs-theme="light"] .drink-badge.wein    { background: rgba(220,53,69,.12) !important; color: #b02a37 !important; }
[data-bs-theme="light"] .drink-badge.cocktail{ background: rgba(13,202,240,.12) !important; color: #087990 !important; }
[data-bs-theme="light"] .drink-badge.wasser  { background: rgba(13,110,253,.12) !important; color: #0a58ca !important; }

/* Difficulty badges */
[data-bs-theme="light"] .difficulty-badge.difficulty-schwer { background: rgba(33,37,41,.12) !important; color: #212529 !important; border-color: #adb5bd !important; }
[data-bs-theme="light"] .difficulty-badge.difficulty-mittel { background: rgba(220,53,69,.12) !important; color: #b02a37 !important; border-color: rgba(220,53,69,.3) !important; }
[data-bs-theme="light"] .difficulty-badge.difficulty-leicht { background: rgba(59,130,246,.12) !important; color: #0a58ca !important; border-color: rgba(59,130,246,.3) !important; }

/* Mode badges */
[data-bs-theme="light"] .mode-badge.single { background: rgba(13,110,253,.1) !important; color: #0a58ca !important; }
[data-bs-theme="light"] .mode-badge.team   { background: rgba(25,135,84,.1) !important; color: #146c43 !important; }

/* Achievement badges */
[data-bs-theme="light"] .ach-progress { background: rgba(0,0,0,.08); }
[data-bs-theme="light"] .ach-detail-progress { background: rgba(0,0,0,.08); }
[data-bs-theme="light"] .ach-tier-num { background: rgba(0,0,0,.05); }

/* Rules image wrap */
[data-bs-theme="light"] .rules-img-wrap { background: #e9ecef; }

/* Race view checkpoint border */
[data-bs-theme="light"] .rv-cp-area { border-top-color: rgba(0,0,0,.1); }

/* Chart label fix – ensure chart labels are dark in light mode
   (handled dynamically in JS, but provide a CSS fallback for canvas overlays) */