/* Stili della Dashboard GiroEsattori sul design system Intranet di Ricreativo B (tokens.css).
   Si usano solo le variabili dei token, mai valori grezzi. */

html, body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--text-body);
    background: var(--surface-page);
}

h1, h2, h3, h4 {
    color: var(--text-heading);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--link);
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: var(--link-hover);
    }

/* ---------- Avvio ---------- */

.avvio {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background: var(--surface-app);
    color: var(--text-inverse);
}

/* ---------- Testata (navy) ---------- */

.ge-testata {
    background: var(--surface-app);
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 66px;
}

.ge-marchio {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-inverse);
    font-weight: var(--fw-bold);
    font-size: 1.1rem;
    white-space: nowrap;
}

    .ge-marchio:hover {
        color: var(--text-inverse);
    }

.ge-sottotitolo {
    color: var(--slate-300);
    font-size: var(--fs-small);
    border-left: 1px solid var(--navy-500);
    padding-left: var(--space-4);
}

.ge-testata-destra {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ge-utente {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--slate-300);
    font-size: var(--fs-small);
    padding-left: var(--space-3);
    border-left: 1px solid var(--navy-500);
}

.ge-icona-testata {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-300);
    font-size: 1.1rem;
}

    .ge-icona-testata:hover {
        background: var(--navy-500);
        color: var(--text-inverse);
    }

/* ---------- Navbar a pillola ---------- */

.ge-barra-sezioni {
    background: var(--surface-page);
    padding: var(--space-4) var(--space-6) 14px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    position: sticky;
    top: 66px;
    z-index: 1010;
    border-bottom: 1px solid var(--border-subtle);
}

.ge-pillole {
    display: inline-flex;
    background: var(--surface-muted);
    border-radius: var(--radius-pill);
    padding: 6px;
    gap: var(--space-1);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.ge-pillola, .ge-altro > .ge-pillola {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--link);
    font-weight: var(--fw-semibold);
    font-size: 14px;
    white-space: nowrap;
}

    .ge-pillola:hover {
        color: var(--link-hover);
    }

    .ge-pillola.active {
        background: var(--surface-card);
        color: var(--text-heading);
        box-shadow: var(--shadow-card);
    }

.ge-altro > .ge-pillola {
    background: var(--surface-muted);
    padding: 15px 18px;
}

.ge-altro .dropdown-menu {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: var(--space-2);
}

.ge-altro .dropdown-item {
    border-radius: var(--radius-sm);
    color: var(--text-heading);
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .ge-altro .dropdown-item.active, .ge-altro .dropdown-item:active {
        background: var(--surface-muted);
        color: var(--text-heading);
    }

/* ---------- Contenuto ---------- */

.ge-contenuto {
    flex: 1 1 0%;
    padding: var(--space-5) var(--space-6) var(--space-7);
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

.ge-titolo-pagina {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-5);
}

.ge-pila {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ---------- Card ---------- */

.ge-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
}

.ge-card-testa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-3);
}

    .ge-card-testa h2 {
        margin: 0;
        font-size: var(--fs-h2);
        font-weight: var(--fw-bold);
    }

.ge-etichetta {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    color: var(--text-muted);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}

/* ---------- KPI ---------- */

.ge-kpi-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}

.ge-kpi {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 20px var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.ge-kpi-valore {
    font-size: var(--fs-stat);
    font-weight: var(--fw-bold);
    color: var(--text-heading);
    margin-top: 6px;
}

.ge-kpi-icona {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-inverse);
    font-size: 1.2rem;
}

.ge-accento-success { background: var(--brand-teal); }
.ge-accento-primary { background: var(--brand-purple); }
.ge-accento-warning { background: var(--brand-orange); }
.ge-accento-danger { background: var(--brand-red); }
.ge-accento-dark { background: var(--dark-900); }

/* ---------- Tabelle ---------- */

.ge-tabella {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

    .ge-tabella thead th {
        font-size: var(--fs-label);
        letter-spacing: var(--ls-label);
        color: var(--text-muted);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        padding: 0 var(--space-4) 10px;
        border-bottom: 1px solid var(--border-subtle);
        white-space: nowrap;
    }

    .ge-tabella tbody td {
        padding: 12px var(--space-4);
        border-bottom: 1px solid var(--border-subtle);
        color: var(--text-heading);
        vertical-align: middle;
    }

    .ge-tabella tbody tr:nth-child(even) td {
        background: var(--surface-page);
    }

    .ge-tabella .ge-prima {
        color: var(--link);
        font-weight: var(--fw-semibold);
    }

    .ge-tabella tr.ge-cliccabile {
        cursor: pointer;
    }

        .ge-tabella tr.ge-cliccabile:hover td {
            background: var(--border-subtle);
        }

    .ge-tabella tr.ge-allarme td {
        background: color-mix(in srgb, var(--brand-red) 10%, var(--surface-card));
    }

    .ge-tabella .btn {
        white-space: nowrap;
    }

    /* Intestazioni ordinabili: stesso aspetto delle altre, con l'indicatore dell'ordine */
    .ge-tabella .ge-ordina {
        border: none;
        background: none;
        padding: 0;
        font: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
        color: inherit;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }

        .ge-tabella .ge-ordina i {
            font-size: 0.7rem;
            opacity: 0.5;
        }

        .ge-tabella .ge-ordina:hover, .ge-tabella .ge-ordina.attiva {
            color: var(--text-heading);
        }

            .ge-tabella .ge-ordina.attiva i {
                opacity: 1;
            }

    .ge-tabella .ge-num {
        text-align: right;
        white-space: nowrap;
    }

/* ---------- Stati e badge ---------- */

.ge-stato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
}

    .ge-stato::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

.ge-stato-success { color: var(--teal-500); }
.ge-stato-primary { color: var(--purple-500); }
.ge-stato-warning { color: var(--orange-600); }
.ge-stato-danger { color: var(--red-500); }
.ge-stato-muted { color: var(--text-muted); }

.ge-badge {
    display: inline-block;
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    background: var(--surface-muted);
    color: var(--text-heading);
}

.ge-badge-danger {
    background: var(--brand-red);
    color: var(--text-inverse);
}

/* ---------- Form ---------- */

.form-control, .form-select {
    font-size: var(--fs-body);
    color: var(--text-heading);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 8px 14px;
}

.form-select {
    padding-right: 2.25rem;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--link);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 25%, transparent);
    }

.form-label {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    color: var(--text-muted);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}

.btn {
    border-radius: var(--radius-pill);
    font-weight: var(--fw-semibold);
    padding: 8px 18px;
}

.btn-primary {
    background: var(--surface-app);
    border-color: var(--surface-app);
}

    .btn-primary:hover, .btn-primary:focus {
        background: var(--navy-900);
        border-color: var(--navy-900);
    }

.btn-outline-secondary {
    color: var(--text-heading);
    border-color: var(--surface-muted);
}

    .btn-outline-secondary:hover {
        background: var(--surface-muted);
        border-color: var(--surface-muted);
        color: var(--text-heading);
    }

.btn-sm {
    padding: 4px 12px;
}

/* ---------- Messaggi ---------- */

.ge-avviso {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--fs-body);
}

.ge-avviso-errore {
    background: color-mix(in srgb, var(--brand-red) 12%, var(--surface-card));
    color: var(--navy-900);
}

.ge-avviso-info {
    background: var(--surface-page);
    color: var(--text-heading);
}

.ge-avviso-successo {
    background: color-mix(in srgb, var(--brand-teal) 15%, var(--surface-card));
    color: var(--navy-900);
}

.ge-vuoto {
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-6) var(--space-4);
}

/* Pagina a tutto schermo (Accesso negato, Non raggiungibile) */
.ge-schermata {
    min-height: 100vh;
    background: var(--surface-app);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

    .ge-schermata .ge-card {
        max-width: 520px;
        text-align: center;
        padding: var(--space-6);
    }

    .ge-schermata .ge-kpi-icona {
        margin: 0 auto var(--space-4);
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

/* ---------- Mappe ---------- */

.ge-mappa {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    z-index: 0;
}

.ge-segnaposto {
    color: var(--text-inverse);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--fw-bold);
    font-family: var(--font-sans);
    box-shadow: 0 2px 6px rgba(52, 71, 103, 0.35);
    border: 2px solid var(--white);
}

.leaflet-popup-content {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    color: var(--text-heading);
}

/* ---------- Finestre di dialogo ---------- */

.ge-dialogo-sfondo {
    position: fixed;
    inset: 0;
    background: rgba(23, 43, 77, 0.45);
    z-index: 1050;
}

.ge-dialogo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    z-index: 1060;
}

.ge-dialogo-largo {
    width: min(1100px, calc(100vw - 32px));
}

    .ge-dialogo .ge-card {
        box-shadow: var(--shadow-pop);
    }

/* ---------- Schede (sottosezioni) e filtri ---------- */

.ge-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}

    .ge-filtri > div {
        min-width: 160px;
    }

.ge-dati {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

    .ge-dati .ge-valore {
        font-weight: var(--fw-semibold);
        color: var(--text-heading);
    }

.ge-calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1);
}

    .ge-calendario .ge-giorno {
        min-height: 72px;
        border-radius: var(--radius-sm);
        background: var(--surface-page);
        padding: var(--space-1) var(--space-2);
        font-size: var(--fs-label);
    }

    .ge-calendario .ge-giorno-fuori {
        opacity: 0.4;
    }

    .ge-calendario .ge-giorno-oggi {
        outline: 2px solid var(--link);
    }

    .ge-calendario .ge-intestazione {
        text-align: center;
        font-size: var(--fs-label);
        letter-spacing: var(--ls-label);
        color: var(--text-muted);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
    }

.ge-voce-calendario {
    display: block;
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    margin-top: 2px;
    color: var(--text-inverse);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Errori Blazor ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--orange-400);
    color: var(--navy-900);
    bottom: 0;
    box-shadow: var(--shadow-pop);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: var(--brand-red);
    border-radius: var(--radius-md);
    padding: 1rem;
    color: var(--text-inverse);
}

    .blazor-error-boundary::after {
        content: "Si è verificato un errore nella sezione.";
    }

@media (max-width: 768px) {
    .ge-testata, .ge-barra-sezioni, .ge-contenuto {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .ge-sottotitolo, .ge-utente span {
        display: none;
    }
}

/* Scelta del giorno: frecce e calendario in un'unica pillola */
.ge-giorno {
    display: inline-flex;
    align-items: center;
    background: var(--surface-muted);
    border-radius: var(--radius-pill);
    padding: 4px;
    gap: 2px;
}
.ge-giorno button {
    border: 0;
    background: transparent;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--bs-body-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ge-giorno button:hover:not(:disabled) { background: var(--bs-body-bg); }
.ge-giorno button:disabled { opacity: .35; }
.ge-giorno input[type=date] {
    border: 0;
    background: var(--bs-body-bg);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font: inherit;
    font-weight: 600;
    color: inherit;
    outline: none;
}
.ge-giorno input[type=date]:focus-visible { box-shadow: 0 0 0 3px rgba(13, 110, 253, .25); }

/* Nuvoletta informativa (Componenti/Info.razor): spiegazione della funzione accanto a titoli e campi. */
.ge-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.ge-info-pulsante {
    border: 0;
    background: transparent;
    color: var(--link);
    padding: 0 var(--space-1);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.ge-info-pulsante:hover,
.ge-info-pulsante[aria-expanded="true"] {
    color: var(--link-hover);
}

.ge-info-nuvola {
    position: absolute;
    top: calc(100% + 6px);
    left: -8px;
    z-index: 1070;
    display: block;
    width: min(380px, calc(100vw - 48px));
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    color: var(--text-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    white-space: normal;
}

.ge-info-nuvola.ge-info-destra {
    left: auto;
    right: -8px;
}

.ge-info-sezione {
    display: block;
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Valutazione temporanea dei giri reali */
.ge-badge-warning {
    background: var(--brand-orange);
    color: var(--text-inverse);
}
.ge-avviso-attenzione {
    background: color-mix(in srgb, var(--brand-orange) 14%, var(--bs-body-bg));
    color: var(--text-heading);
}
.ge-legenda {
    display: inline-block;
    width: 18px;
    height: 4px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}
.ge-pallino {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ge-scelta-giri { max-height: 680px; overflow-y: auto; }
.ge-scelta-giri h2 { font-size: var(--fs-h3, 1.1rem); }
.ge-scelta-zona { padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.ge-scelta-zona:last-child { border-bottom: 0; }