/* ============================================
   BETTING — hub « Mes paris », assistant de creation
   Pages : /paris (pages/bet_hub.py), /bet_creation (dash-bootstrap-components)
   Mobile : specs/mobile/betting/SPEC.md
   ============================================ */

/* === HUB === (components/hub.py) */
.hub-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 640px;
}
.hub-card, .hub-card:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease;
}
.hub-card:hover { background: var(--color-bg-surface-hover); border-color: var(--color-border-strong); }
.hub-card.featured { border: 2px solid var(--color-primary); }
.hub-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-primary-subtle);
    color: var(--color-primary-hover);
}
.hub-id { flex: 1; min-width: 0; }
.hub-title { color: var(--color-text-primary); font-weight: 700; }
.hub-text { color: var(--color-text-muted); font-size: 12px; }
.hub-status { color: var(--color-warning-text); font-size: 12px; white-space: nowrap; }
.hub-card.featured .hub-status { color: var(--color-success-text); }
.hub-chev { color: var(--color-text-light); font-size: 18px; }

/* === RECAPITULATIF D'UN PARI === (components/betting/recap.py) */
.bet-recap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bet-recap-event {
    padding: 8px 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-surface-alt);
}
.bet-recap-title { margin-bottom: 4px; color: var(--color-text-primary); font-size: 13px; font-weight: 700; }
.bet-recap-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.bet-recap-row span { color: var(--color-text-muted); }
.bet-recap-row b { color: var(--color-text-secondary); font-weight: 600; text-align: right; }

/* === ASSISTANT : MOBILE === */
@media (max-width: 1023.98px) {   /* bp mobile */
    .bet-wizard { padding: 0 0 72px !important; }   /* place de la barre d'actions */
    .bet-wizard .card {
        border-color: var(--color-border);
        background: var(--color-bg-surface);
        color: var(--color-text-secondary);
    }
    .bet-wizard .text-muted { color: var(--color-text-muted) !important; }

    /* Carte d'etape : nom, « Étape n / 8 », barre fine, 8 pastilles de 40 px */
    .bet-progress .card-body { padding: 10px 12px; }
    .bet-step-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
    .bet-step-head b { color: var(--color-text-primary); }
    .bet-step-head span { color: var(--color-text-muted); font-size: 12px; }
    .bet-bar { height: 4px !important; margin-bottom: 8px !important; }
    .bet-dots { flex-wrap: nowrap !important; justify-content: space-between !important; }
    .bet-dot {
        display: grid !important;
        place-items: center;
        width: 36px;
        height: 36px;
        margin: 2px 0 !important;
        padding: 0 !important;
        border: 1px solid var(--color-border);
        border-radius: 50% !important;
        background: var(--color-bg-surface-alt) !important;
        color: var(--color-text-muted) !important;
        font-size: 12.5px !important;
    }
    .bet-dot.done {
        border-color: var(--color-success);
        background: var(--color-success-subtle) !important;
        color: var(--color-success-text) !important;
    }
    .bet-dot.on {
        border-color: var(--color-primary);
        background: var(--color-primary) !important;
        color: var(--color-text-primary) !important;   /* texte clair sur bleu */
    }

    /* Le nom de l'etape est dans la carte d'etape */
    #bet-step-content > .card > .card-header { display: none; }
    #bet-step-content .card-body { padding: 12px; }

    /* Types de pari : grille de boutons 2 colonnes */
    .bet-types { --bs-gutter-x: 8px; }
    .bet-types > div { margin-bottom: 8px !important; }
    .bet-types .card-body { padding: 8px; }
    .bet-types h6 { margin-bottom: 6px; font-size: 13px; }
    .bet-types .btn { min-height: 40px; }

    /* Actions collees en bas, au-dessus de la barre d'app */
    .bet-actions {
        position: fixed;
        right: 0;
        bottom: var(--app-bar-h);
        left: 0;
        z-index: 700;
        display: flex;
        gap: 8px;
        margin: 0 !important;
        padding: 10px 16px !important;
        background: var(--color-bg-page);
        border-top: 1px solid var(--color-border);
    }
    .bet-actions .btn { flex: 1; min-height: 44px; margin: 0 !important; }

    /* Montant : panneau bas (S18, .sheet-modal dans 03-components.css) */
}