/*
 * Random Bet Widget — scoped CSS (2026-06-20, fix legibility + expand)
 *
 * CONVENZIONI (speculari a betbuilder.css):
 *  - Nessun colore/font/spacing hardcoded: usiamo le CSS variables del tema
 *    già definite con fallback letterali per le var undefined in layout-blu.
 *  - Tutte le regole hanno prefisso .rb- (o .rb-widget come root) per
 *    evitare collisioni col resto del sito. Nessuna regola globale.
 *  - Nessuno stile inline custom: il tema applica palette e font.
 *  - Layout-only dove il tema non copre già (flex, display, overflow).
 *
 * TOKEN VERIFICATI (layout-blu :root, 2026-06-20):
 *  Testo bianco  : var(--menu-text-color, #ffffff)
 *  Accent giallo : var(--button-primary-bg, #fab615)
 *  Testo su CTA  : var(--quote-button-hover-text, #000000)
 *  Panel surface : var(--tournament-element-bg, #2c2f35)
 *  Header strip  : #3a3e45
 *  Border        : var(--palinsesti-border-color, #3a3e45)
 *  Input bg      : var(--input-bg, #3a3e45)
 *  Radius        : var(--border-radius-md, 10px)
 *  Button 2nd bg : var(--button-secondary-bg, #3a3e45)
 *  --- NON usare --color-text / --color-primary (undefined in questo tema) ---
 *
 * CARICAMENTO: resources/views/layout-blu/layout/header.blade.php
 *   <link rel="stylesheet" href="{{ url('/') }}{{ Theme::url('css/random-bet.scoped.css') }}">
 */

/* ============================================================
   ROOT WIDGET — pannello distinto come i widget coupon fratelli
   ============================================================ */

.rb-widget {
    background: var(--tournament-element-bg, #2c2f35);
    border: 1px solid var(--palinsesti-border-color, #3a3e45);
    border-radius: var(--border-radius-md, 10px);
    overflow: hidden;
    /* Usa col-box del tema per spacing esterno */
}

/* ---- Testata collassabile ---- */

.rb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px 12px;
    min-height: 44px; /* touch target >= 44px */
    user-select: none;
    gap: 8px;
    background: #3a3e45;
    border-radius: var(--border-radius-md, 10px) var(--border-radius-md, 10px) 0 0;
}

/* Quando collassato, il radius si applica a tutti e quattro gli angoli */
.rb-widget:not(.rb-expanded) .rb-header {
    border-radius: var(--border-radius-md, 10px);
}

.rb-header:focus-visible {
    outline: 2px solid var(--button-primary-bg, #fab615);
    outline-offset: -2px;
}

.rb-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.rb-header-icon {
    font-size: var(--font-size-base, 1rem);
    color: var(--button-primary-bg, #fab615);
}

.rb-title-text {
    font-weight: 700;
    font-size: var(--font-size-sm, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--menu-text-color, #ffffff);
}

.rb-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.rb-subtitle {
    font-size: var(--font-size-xs, 0.75rem);
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    text-align: right;
}

.rb-chevron {
    flex: 0 0 auto;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--menu-text-color, #ffffff);
    transition: transform 0.2s ease;
}

.rb-widget.rb-expanded .rb-chevron {
    transform: rotate(180deg);
}

/* ---- Corpo espanso — transizione max-height ---- */

.rb-body {
    padding: 10px 12px 12px;
    /* max-height/opacity gestiti via JS show()/hide() — nessun conflitto */
}

/* ============================================================
   BARRA MODALITA BASE / AVANZATA
   ============================================================ */

.rb-mode-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.rb-mode-toggle {
    display: flex;
    border-radius: var(--border-radius-xs, 4px);
    overflow: hidden;
    flex: 0 0 auto;
}

.rb-mode-btn {
    padding: 5px 10px;
    font-size: var(--font-size-xs, 0.75rem);
    cursor: pointer;
    background: var(--button-secondary-bg, #3a3e45);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid transparent;
    border-radius: 0;
    line-height: 1.3;
    text-transform: uppercase;
}

.rb-mode-btn:first-child {
    border-radius: var(--border-radius-xs, 4px) 0 0 var(--border-radius-xs, 4px);
}

.rb-mode-btn:last-child {
    border-radius: 0 var(--border-radius-xs, 4px) var(--border-radius-xs, 4px) 0;
}

.rb-mode-btn-active {
    background: var(--button-primary-bg, #fab615);
    color: var(--quote-button-hover-text, #000000);
}

.rb-info-link {
    font-size: var(--font-size-xs, 0.75rem);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    flex: 0 0 auto;
}

.rb-info-link:hover {
    color: var(--menu-text-color, #ffffff);
    opacity: 1;
}

/* ============================================================
   SEZIONE AVANZATA (filtri + min-odd)
   ============================================================ */

.rb-advanced-section {
    margin-bottom: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--palinsesti-border-color, #3a3e45);
    border-bottom: 1px solid var(--palinsesti-border-color, #3a3e45);
}

.rb-filters-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.rb-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

.rb-checkbox {
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--button-primary-bg, #fab615);
}

.rb-checkbox-label {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--menu-text-color, #ffffff);
    flex: 1 1 auto;
}

/* ---- Pillole quota minima ---- */

.rb-min-odd-section {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rb-min-odd-label {
    font-size: var(--font-size-xs, 0.75rem);
    color: rgba(255, 255, 255, 0.6);
    flex: 0 0 auto;
}

.rb-min-odd-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1 1 auto;
}

.rb-pill {
    padding: 3px 8px;
    font-size: var(--font-size-2xs, 0.7rem);
    cursor: pointer;
    border-radius: 999px;
    background: var(--button-secondary-bg, #3a3e45);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--palinsesti-border-color, #3a3e45);
    line-height: 1.4;
    white-space: nowrap;
}

.rb-pill-active {
    background: var(--button-primary-bg, #fab615);
    color: var(--quote-button-hover-text, #000000);
    border-color: var(--button-primary-bg, #fab615);
}

/* ============================================================
   SELETTORE SPORT
   ============================================================ */

.rb-sports-section {
    margin-bottom: 10px;
}

.rb-sports-grid {
    display: flex;
    gap: 6px;
    justify-content: space-between;
}

.rb-sport-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    cursor: pointer;
    border-radius: var(--border-radius-xs, 4px);
    background: var(--button-secondary-bg, #3a3e45);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--palinsesti-border-color, #3a3e45);
    font-size: var(--font-size-2xs, 0.7rem);
    text-transform: uppercase;
    line-height: 1.2;
}

.rb-sport-btn-active,
.rb-sport-btn[aria-pressed="true"] {
    background: var(--button-primary-bg, #fab615);
    color: var(--quote-button-hover-text, #000000);
    border-color: var(--button-primary-bg, #fab615);
}

.rb-sport-icon {
    font-size: var(--font-size-base, 1rem);
}

/* ============================================================
   CONTROLLI NUMERICI (Importo / Eventi / Vincita)
   ============================================================ */

.rb-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

/* FIX-VS: ogni control-row è una colonna (label sopra, spinner sotto).
   Questo elimina la troncatura della label "Vincita desiderata" e rende
   le tre righe strutturalmente identiche su 290px. */
.rb-control-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rb-control-label {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--menu-text-color, #ffffff);
    /* FIX-VS: la label occupa tutta la larghezza disponibile — nessuna troncatura. */
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    /* white-space rimosso: non serve più, la label ha tutta la larghezza */
}

.rb-spinner-group {
    display: flex;
    /* FIX-ALIGN: altezze fisse uguali (44px) su input e bottoni + center.
       Lo stretch non bastava perché una regola input del tema (più specifica)
       forza l'input a 35px; ora altezza esplicita con !important sull'input. */
    align-items: center;
    gap: 4px;
    width: 100%;
}

.rb-spinner-btn {
    /* FIX-VS: altezza gestita da align-items:stretch del parent; min-height:44px
       garantisce il touch target anche se il gruppo fosse più basso.
       box-sizing:border-box → dimensioni prevedibili senza sommare padding. */
    flex: 0 0 38px;
    width: 38px;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--border-radius-xs, 4px);
    background: var(--button-secondary-bg, #3a3e45);
    color: var(--menu-text-color, #ffffff);
    border: none;
    font-size: var(--font-size-xs, 0.75rem);
    padding: 0;
    box-sizing: border-box;
}

.rb-spinner-btn:hover {
    background: var(--button-primary-bg, #fab615);
    color: var(--quote-button-hover-text, #000000);
}

.rb-spinner-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.rb-spinner-input {
    /* FIX-VS: con align-items:stretch il flex item si espande all'altezza del gruppo
       (44px). min-height:44px è il guard di sicurezza; box-sizing:border-box assicura
       che padding+border non aggiungano altezza oltre i 44px. */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box;
    text-align: center;
    font-size: var(--font-size-xs, 0.75rem);
    padding: 3px 4px;
    border-radius: var(--border-radius-xs, 4px);
    background: var(--input-bg, #3a3e45);
    color: var(--menu-text-color, #ffffff);
    border: 1px solid var(--palinsesti-border-color, #3a3e45);
}

.rb-spinner-input:focus {
    outline: 2px solid var(--button-primary-bg, #fab615);
    outline-offset: 1px;
}

/* Tooltip inline */

.rb-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: var(--font-size-2xs, 0.65rem);
    font-weight: bold;
    cursor: default;
    background: var(--button-secondary-bg, #3a3e45);
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    flex: 0 0 14px;
}

.rb-tooltip-icon:hover::after,
.rb-tooltip-icon:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1d22;
    color: var(--menu-text-color, #ffffff);
    padding: 6px 8px;
    border-radius: var(--border-radius-xs, 4px);
    font-size: var(--font-size-2xs, 0.65rem);
    white-space: normal;
    max-width: 200px;
    z-index: 1000;
    pointer-events: none;
    font-weight: normal;
    line-height: 1.3;
}

/* ============================================================
   MESSAGGIO DI VALIDAZIONE INLINE
   ============================================================ */

.rb-validation-msg {
    font-size: var(--font-size-xs, 0.75rem);
    padding: 6px 8px;
    border-radius: var(--border-radius-xs, 4px);
    background: var(--button-secondary-bg, #3a3e45);
    color: var(--menu-text-color, #ffffff);
    margin-bottom: 8px;
}

/* ============================================================
   CTA GENERA / RIGENERA
   ============================================================ */

.rb-btn-generate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* .btn .btn-primary dal tema gestiscono colori e padding.
       Forziamo i token verificati come fallback se il tema li
       sovrascrivesse con valori dark. */
    background: var(--button-primary-bg, #fab615) !important;
    color: var(--quote-button-hover-text, #000000) !important;
    border-color: var(--button-primary-bg, #fab615) !important;
}

.rb-btn-generate .rb-btn-icon {
    font-size: var(--font-size-base, 1rem);
}

/* Stato loading: icona animata */
.rb-btn-generate.rb-loading .rb-btn-icon {
    animation: rb-spin 1s linear infinite;
}

@keyframes rb-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   AREA RISULTATI
   ============================================================ */

.rb-results {
    margin-top: 10px;
}

.rb-result-msg {
    font-size: var(--font-size-xs, 0.75rem);
    padding: 6px 0 8px;
    color: rgba(255, 255, 255, 0.6);
}

.rb-notice {
    font-size: var(--font-size-xs, 0.75rem);
    padding: 6px 8px;
    border-radius: var(--border-radius-xs, 4px);
    background: var(--button-secondary-bg, #3a3e45);
    margin-bottom: 8px;
    color: var(--menu-text-color, #ffffff);
}

/* ---- Skeleton loading ---- */

.rb-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.rb-skeleton-row {
    height: 44px;
    border-radius: var(--border-radius-xs, 4px);
    background: var(--button-secondary-bg, #3a3e45);
    animation: rb-shimmer 1.2s ease-in-out infinite;
}

@keyframes rb-shimmer {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ---- Lista eventi ---- */

.rb-legs-list {
    list-style: none;
    margin: 0;
    /* padding-right ridotto a 4px: la scrollbar e' resa sottile e scoped (vedi
       sotto), quindi non serve riservare 10px. scrollbar-gutter: stable mantiene
       lo spazio anche senza scrollbar evitando shift orizzontale del contenuto e
       garantendo simmetria del gutter rispetto al lato sinistro. */
    padding: 0 4px 0 0;
    /* max-height relativizzata: la generazione di default (5 eventi, ~575px a
       runtime) deve stare interamente senza scroll; lo scroll compare solo con
       liste lunghe (7+ eventi). Tarato sui pixel misurati via Playwright. */
    max-height: min(720px, 80vh);
    overflow-y: auto;
    scrollbar-gutter: stable;
    /* Scrollbar sottile e a tema, SCOPED alla sola lista (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--palinsesti-border-color, #3a3e45) transparent;
}

/* Scrollbar sottile e a tema, SCOPED alla sola lista (WebKit) */
.rb-legs-list::-webkit-scrollbar {
    width: 6px;
}

.rb-legs-list::-webkit-scrollbar-thumb {
    background: var(--palinsesti-border-color, #3a3e45);
    border-radius: 3px;
}

.rb-legs-list::-webkit-scrollbar-track {
    background: transparent;
}

.rb-leg-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--palinsesti-border-color, #3a3e45);
}

.rb-leg-item:last-child {
    border-bottom: none;
}

/* Riga superiore: lucchetto + campionato + data/ora */
.rb-leg-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rb-lock-btn {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    /* C-3: estende area tap a ~44px senza modificare il layout visivo */
    padding: 11px;
    box-sizing: content-box;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
}

.rb-lock-btn:hover {
    color: var(--button-primary-bg, #fab615);
}

.rb-lock-btn.rb-locked {
    color: var(--button-primary-bg, #fab615);
}

.rb-leg-league {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-leg-kickoff {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Riga principale: nome match */
.rb-leg-match {
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--menu-text-color, #ffffff);
    padding-left: 28px; /* allineato dopo il lucchetto */
}

/* Riga inferiore: market / esito / quota */
.rb-leg-row-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 28px;
}

.rb-leg-market {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.rb-leg-outcome {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    flex: 0 0 auto;
    white-space: nowrap;
}

.rb-leg-odd {
    font-size: 14px;
    font-weight: 700;
    color: var(--button-primary-bg, #fab615);
    flex: 0 0 auto;
    min-width: 36px;
    text-align: right;
}

/* ---- Riepilogo vincita ---- */

.rb-win-summary {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    font-size: var(--font-size-xs, 0.75rem);
    border-top: 1px solid var(--palinsesti-border-color, #3a3e45);
    margin-top: 4px;
}

.rb-win-label {
    color: rgba(255, 255, 255, 0.6);
}

.rb-win-amount {
    font-size: var(--font-size-sm, 0.85rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--menu-text-color, #ffffff);
}

.rb-win-bonus-note {
    font-size: var(--font-size-2xs, 0.65rem);
    color: rgba(255, 255, 255, 0.5);
    flex: 1 0 100%;
}

/* ---- CTA INSERISCI IN SCHEDINA + ANNULLA ---- */

.rb-results-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: stretch;
}

.rb-btn-insert {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--button-primary-bg, #fab615) !important;
    color: var(--quote-button-hover-text, #000000) !important;
    border-color: var(--button-primary-bg, #fab615) !important;
}

/* Bottone secondario: meno enfasi della CTA verde/gialla, coerente col tema. */
.rb-btn-cancel {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--button-secondary-bg, #3a3e45) !important;
    color: var(--menu-text-color, #ffffff) !important;
    border: 1px solid var(--palinsesti-border-color, #4a4e55) !important;
}

.rb-btn-cancel:hover,
.rb-btn-cancel:focus {
    background: var(--tournament-element-bg, #2c2f35) !important;
    color: var(--menu-text-color, #ffffff) !important;
}

/* ============================================================
   MODAL INFO (reutilizza Bootstrap 3 .modal del tema)
   ============================================================ */

/* Lo sfondo dark del pannello (.modal-content) può ereditare un colore testo
   chiaro dal tema → testo illeggibile su sfondo scuro. Forziamo un colore
   testo leggibile (AA) sul contenuto del popup, scoped a .rb-info-modal. */
.rb-info-modal .modal-content {
    background: var(--tournament-element-bg, #2c2f35);
    color: var(--menu-text-color, #ffffff);
    border: 1px solid var(--palinsesti-border-color, #4a4e55);
}

.rb-info-modal .modal-header {
    border-bottom: 1px solid var(--palinsesti-border-color, #4a4e55);
}

.rb-info-modal .modal-title,
.rb-info-modal .modal-body,
.rb-info-modal .modal-body p,
.rb-info-modal .modal-body strong,
.rb-info-modal .modal-body li {
    color: var(--menu-text-color, #ffffff);
}

/* Testo "muted" (nota piccola): leggibile ma de-enfatizzato. */
.rb-info-modal .modal-body .text-muted,
.rb-info-modal .modal-body small {
    color: rgba(255, 255, 255, 0.6);
}

/* Pulsante di chiusura (×) visibile sul pannello scuro. */
.rb-info-modal .modal-header .close {
    color: var(--menu-text-color, #ffffff);
    opacity: 0.8;
    text-shadow: none;
}
.rb-info-modal .modal-header .close:hover,
.rb-info-modal .modal-header .close:focus {
    color: var(--menu-text-color, #ffffff);
    opacity: 1;
}

.rb-info-modal .modal-footer {
    border-top: 1px solid var(--palinsesti-border-color, #4a4e55);
}

/* CTA "Chiudi" del footer: stile coerente con la CTA primaria del widget. */
.rb-info-modal .modal-footer .btn-primary {
    background: var(--button-primary-bg, #fab615) !important;
    color: var(--quote-button-hover-text, #000000) !important;
    border-color: var(--button-primary-bg, #fab615) !important;
}

/* ============================================================
   COLONNA DESTRA — larghezza minima aumentata (~253px → 290px)
   Scoped: solo .sports-main-right dentro le pagine sport/live che
   usano layout-blu. La colonna centrale (col-md-8 / col-md-10)
   assorbe la differenza perché Bootstrap ricalcola le % sul
   container rimasto. Nessun overflow orizzontale atteso: il totale
   delle tre colonne rimane width:100% del row (Bootstrap flex).
   ============================================================ */

.sports-main-right {
    min-width: 290px;
    width: 290px;
}

/* ============================================================
   RESPONSIVE — colonna destra stretta (~col-md-2, ~224px)
   ============================================================ */

@media (max-width: 320px) {
    .rb-sports-grid {
        flex-wrap: wrap;
    }
    .rb-sport-btn {
        flex: 0 0 calc(50% - 4px);
    }
}

/* Q-3: subtitle superfluo su viewport stretto (tablet/mobile <768px) */
@media (max-width: 767px) {
    .rb-subtitle {
        display: none;
    }
    /* Su mobile la CTA sticky "inserisci in schedina" non deve coprire le ultime
       leg: limito la lista a 40vh cosi' lo scroll interno lascia spazio alla CTA. */
    .rb-legs-list {
        max-height: 40vh;
    }
}