/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard-spezifische Komponenten

   Aus site.css extrahiert. Diese Klassen werden ausschließlich auf der
   Dashboard-Seite (`/Index`) verwendet. Der Bundler führt sie zur
   Laufzeit wieder mit site.css zu site.min.css zusammen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard / Training-Index: Live-Karten für laufende Trainingsspiele ─
   Kommt als Karte im row-grid (`col-12 col-md-6`); auf Desktop also 2-spaltig
   bis zu 4 Karten. Akzent links für „eigenes Spiel" (`--mine`) markiert
   die Spiele, an denen der angemeldete Anwender beteiligt ist. */
.bm-active-card {
    padding: 0.85rem 1rem;
    border-left: 4px solid transparent;
    transition: border-color 0.15s ease;
}

.bm-active-card--mine {
    border-left-color: var(--bm-accent);
}

.bm-active-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.bm-active-card__body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.bm-active-card__side {
    min-width: 0;
    overflow: hidden;
}

.bm-active-card__side .bm-text--md,
.bm-active-card__side .bm-text--sm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-active-card__score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
}

.bm-active-card__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Pulsing dot — signalisiert „läuft live". Token-gebundene Akzentfarbe,
   2-Sekunden-Cycle damit's nicht hektisch wirkt. */
.bm-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bm-loss);
    box-shadow: 0 0 0 0 rgba(139, 26, 26, 0.5);
    animation: bm-live-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes bm-live-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(139, 26, 26, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(139, 26, 26, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(139, 26, 26, 0);   }
}

/* Kurzer Hintergrund-Flash, wenn sich der Score einer Karte gegenüber
   dem letzten Poll geändert hat. Subtile Akzent-Hervorhebung — kein
   grelles Farbgewitter, nur ein „hier hat sich was bewegt"-Signal. */
.bm-active-card--flash {
    animation: bm-active-flash 0.9s ease-out;
}

@keyframes bm-active-flash {
    0%   { background-color: rgba(207, 123, 47, 0.25); }
    100% { background-color: transparent; }
}

/* prefers-reduced-motion: Anwender, die Animationen bewusst reduzieren
   wollen (vestibuläre Empfindlichkeit, Akku-Sparen, …), bekommen keinen
   Pulse und keinen Flash. Funktional ändert sich nichts. */
@media (prefers-reduced-motion: reduce) {
    .bm-live-dot          { animation: none; }
    .bm-active-card--flash { animation: none; }
}

/* ── Dashboard: Admin-TODO ─────────────────────────────────────────────── */
.bm-card--admin {
    border-left: 4px solid var(--bm-accent);
    background: linear-gradient(180deg, rgba(244, 214, 184, 0.25) 0%, var(--bm-panel) 70%);
}

.bm-todo-list__item + .bm-todo-list__item {
    border-top: 1px solid var(--bm-border);
}

.bm-todo-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.25rem;
    color: var(--bm-ink);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.bm-todo-link:hover,
.bm-todo-link:focus {
    background: rgba(207, 123, 47, 0.08);
    color: var(--bm-accent-dark);
}

.bm-todo-link__label {
    flex: 1 1 auto;
    min-width: 0;
}

.bm-todo-link__count {
    flex-shrink: 0;
    min-width: 2.25rem;
    text-align: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: #e9e3d7;
    color: var(--bm-ink-soft);
    font-weight: 600;
    font-size: 0.95rem;
}

.bm-todo-link__count--active {
    background: var(--bm-warn);
    color: #fff;
}

/* ── Dashboard: Meine Saisonbilanz ─────────────────────────────────────── */
.bm-mystats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bm-mystats__rate {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.bm-mystats__pct {
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bm-accent);
}

.bm-mystats__pct-label {
    color: var(--bm-ink-soft);
    font-size: 0.9rem;
}

.bm-mystats__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.bm-mystats__num {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--bm-ink);
}

.bm-mystats__num--win {
    color: var(--bm-win);
}

.bm-mystats__num--loss {
    color: var(--bm-loss);
}

.bm-mystats__lbl {
    display: block;
    font-size: 0.8rem;
    color: var(--bm-ink-soft);
}

/* ── Dashboard: Aktivitäts-Streak ──────────────────────────────────────── */
.bm-streak {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bm-streak__headline {
    color: var(--bm-ink);
}

.bm-streak__bar {
    position: relative;
    width: 100%;
    height: 10px;
    background: #efe7d7;
    border-radius: 999px;
    overflow: hidden;
}

.bm-streak__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bm-accent) 0%, var(--bm-accent-dark) 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* ── Dashboard: Verfügbarkeits-Heatmap ─────────────────────────────────── */
.bm-heatmap {
    padding-top: 0.75rem;
    border-top: 1px dashed var(--bm-border);
}

.bm-heatmap__summary {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bm-heatmap__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--bm-border);
    background: #fff;
    color: var(--bm-ink);
}

.bm-heatmap__chip--yes {
    background: rgba(45, 106, 45, 0.1);
    border-color: rgba(45, 106, 45, 0.35);
    color: var(--bm-win);
}

.bm-heatmap__chip--no {
    background: rgba(139, 26, 26, 0.08);
    border-color: rgba(139, 26, 26, 0.3);
    color: var(--bm-loss);
}

.bm-heatmap__chip--open {
    background: rgba(180, 83, 9, 0.1);
    border-color: rgba(180, 83, 9, 0.3);
    color: var(--bm-warn);
}

.bm-heatmap__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.4rem;
}

/* Auf Mobile: Namensraster komplett aus — die Summen-Chips reichen.
   Steht direkt nach der Basisregel, damit die Quellen-Reihenfolge
   `display:none` über `display:grid` gewinnen lässt. */
@media (max-width: 767.98px) {
    .bm-heatmap__grid {
        display: none;
    }
}

.bm-heatmap__cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.6rem;
    border: 1px solid var(--bm-border);
    background: #fff;
    font-size: 0.9rem;
}

.bm-heatmap__cell--yes {
    background: rgba(45, 106, 45, 0.1);
    border-color: rgba(45, 106, 45, 0.3);
    color: var(--bm-win);
}

.bm-heatmap__cell--no {
    background: rgba(139, 26, 26, 0.08);
    border-color: rgba(139, 26, 26, 0.25);
    color: var(--bm-loss);
}

.bm-heatmap__cell--open {
    background: rgba(180, 83, 9, 0.08);
    border-color: rgba(180, 83, 9, 0.25);
    color: var(--bm-warn);
}

.bm-heatmap__name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Dashboard: Top-3-Leaderboard ──────────────────────────────────────── */
.bm-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bm-leaderboard__row {
    display: grid;
    grid-template-columns: 2.2rem 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.25rem;
    border-bottom: 1px solid var(--bm-border);
}

.bm-leaderboard__row:last-child {
    border-bottom: none;
}

.bm-leaderboard__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: var(--bm-ink-soft);
}

.bm-leaderboard__rank--gold {
    background: #d4a244;
}

.bm-leaderboard__rank--silver {
    background: #9ea7ae;
}

.bm-leaderboard__rank--bronze {
    background: #b4743a;
}

.bm-leaderboard__name {
    font-weight: 600;
    color: var(--bm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-leaderboard__name:hover,
.bm-leaderboard__name:focus {
    color: var(--bm-accent-dark);
}

.bm-leaderboard__games {
    font-size: 0.85rem;
    color: var(--bm-ink-soft);
}

.bm-leaderboard__pct {
    font-weight: 700;
    color: var(--bm-accent);
    min-width: 3rem;
    text-align: right;
}

@media (max-width: 480px) {
    .bm-leaderboard__row {
        grid-template-columns: 2rem 1fr auto;
    }

    .bm-leaderboard__games {
        display: none;
    }

    .bm-mystats__row {
        gap: 0.25rem;
    }

    .bm-mystats__num {
        font-size: 1.15rem;
    }

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