/* ---------- GEAR PLAN DESIGN SYSTEM ---------- */

/*
    TRE LIVELLI DI COLORE, UN SIGNIFICATO CIASCUNO.

    1. BRAND (--gp-red)
       Identita' e azione primaria. Sempre RIEMPIMENTO PIENO:
       navbar, .gp-btn, elemento di nav attivo, focus.
       Mai usato per stato ne' per tipo di veicolo.

    2. STATO (--gp-state-*)
       Scadenze, priorita', esito. Sempre PILLOLA TINTA
       (.gp-state-*): sfondo al 12%, testo colorato.
       La differenza pieno/tinta e' cio' che distingue
       "azione" da "stato", dato che il rosso brand e il rosso
       danger di Bootstrap sono quasi identici.

    3. TIPO VEICOLO (--vehicle-accent, passato inline dal template)
       Solo accento: bordo superiore della card e cerchio icona.
       Mai su pulsanti o badge. Il rosso brand non fa parte di
       questa palette, per non confondere identita' e tassonomia.

    Azioni distruttive: btn-outline-danger nelle pagine di lavoro,
    btn-danger pieno solo nella schermata di conferma.
*/

:root {
    /* BRAND
       --gp-red        e' il rosso di RIEMPIMENTO (con testo bianco: 5.12)
       --gp-red-text   e' lo stesso rosso nel ruolo di TESTO su sfondo.
                       Serve un valore distinto perche' #D71A3B come testo
                       sta a 3.01 sul fondo scuro e a 4.22 sulla pillola
                       tinta: sotto la soglia AA di 4.5. Verificato con
                       calcolo WCAG in entrambi i temi. */
    --gp-red: #D71A3B;
    --gp-red-dark: #B81431;
    --gp-red-soft: rgba(215, 26, 59, .12);
    --gp-red-text: #CD1938;

    /* PRIMARY BUTTON = rosso brand (linea guida UI 8.1) */
    --gp-btn-bg: var(--gp-red);
    --gp-btn-border: var(--gp-red);
    --gp-btn-hover: var(--gp-red-dark);
    --gp-btn-active: #9F1129;
    --gp-btn-text: #FFFFFF;

    /* OUTLINE BUTTON: neutro, si colora al passaggio */
    --gp-btn-outline-text: #2B3035;
    --gp-btn-outline-border: #ADB5BD;

    /* DISABLED */
    --gp-btn-disabled-bg: #ADB5BD;
    --gp-btn-disabled-border: #ADB5BD;
    --gp-btn-disabled-text: #FFFFFF;

    /* STATO */
    --gp-state-ok: #146C43;
    --gp-state-ok-soft: rgba(20, 108, 67, .12);
    --gp-state-warn: #8A5D00;
    --gp-state-warn-soft: rgba(255, 193, 7, .18);
    --gp-state-late: #B02A37;
    --gp-state-late-soft: rgba(176, 42, 55, .12);
    --gp-state-neutral: #5C636A;
    --gp-state-neutral-soft: rgba(92, 99, 106, .12);

    /* PIANO: segnala una funzione inclusa in un abbonamento.
       Non e' uno stato -- non dice come sta un dato, dice cosa manca a
       questo utente -- quindi ha un token suo invece di riusare "warn",
       che significa un'altra cosa.
       Il goldenrod classico (#B8860B) sul fondo chiaro sta a 3.25 e non
       passa AA: questi due stanno a 5.54 e 9.05. */
    --gp-plan: #8A6100;
    --gp-plan-soft: rgba(138, 97, 0, .12);

    /* Sulla navbar il fondo e' il rosso brand in TUTTI E DUE i temi, e
       l'oro scuro ci sta sopra a 1.08: invisibile. Nessun oro chiaro
       arriva a 4.5 sul rosso (il migliore sta a 4.26 ed e' quasi bianco),
       quindi si schiarisce la pillola invece dell'oro: sul fondo chiaro
       l'oro torna a 5.5.
       Dichiarati una volta sola e non per tema, perche' la navbar non
       cambia colore. */
    --gp-plan-on-brand: #8A6100;
    --gp-plan-on-brand-bg: rgba(255, 255, 255, .92);

    /* GRAFICI: magnitudine di una serie singola.
       Non e' un colore di stato ne' di categoria: le barre di queste
       pagine mostrano "quanto", non "che cosa". Per questo non riusa
       ne' il rosso brand ne' i --gp-state-*. */
    --gp-chart-bar: #6C757D;
    --gp-chart-track: rgba(0, 0, 0, .06);

    /* SHARED */
    --gp-radius: 0.9rem;
    --gp-radius-sm: 0.6rem;

    --gp-shadow-sm: 0 2px 6px rgba(0,0,0,.06);
    --gp-shadow-md: 0 6px 18px rgba(0,0,0,.08);

    --gp-border-light: rgba(0,0,0,.08);
    --gp-border-dark: rgba(255,255,255,.08);

    /* altezza della bottom nav mobile, per non coprire il contenuto */
    --gp-bottom-nav-h: 60px;
}

[data-bs-theme="dark"] {
    /* il rosso di riempimento resta identico (identita' del brand);
       cambia il rosso-testo, che sul fondo scuro va schiarito */
    --gp-red-text: #EC647C;

    --gp-btn-outline-text: #DEE2E6;
    --gp-btn-outline-border: #6C757D;

    --gp-btn-disabled-bg: #343A40;
    --gp-btn-disabled-border: #343A40;
    --gp-btn-disabled-text: #6C757D;

    --gp-state-ok: #75B798;
    --gp-state-ok-soft: rgba(117, 183, 152, .16);
    --gp-state-warn: #FFDA6A;
    --gp-state-warn-soft: rgba(255, 218, 106, .16);
    --gp-state-late: #EA868F;
    --gp-state-late-soft: rgba(234, 134, 143, .16);
    --gp-state-neutral: #ADB5BD;
    --gp-state-neutral-soft: rgba(173, 181, 189, .14);

    --gp-plan: #F0C040;
    --gp-plan-soft: rgba(240, 192, 64, .16);

    --gp-chart-bar: #8D959D;
    --gp-chart-track: rgba(255, 255, 255, .08);
}

/* ---------- TYPOGRAPHY ---------- */

.gp-font-brand {
    font-family: 'Montserrat', sans-serif;
}

.gp-page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.gp-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.gp-meta-label {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: .75;
}

/* ---------- NAVBAR ---------- */

.gp-navbar {
    background-color: var(--gp-red);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.gp-navbar .navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: white;
}

.gp-navbar .navbar-brand:hover {
    color: rgba(255,255,255,.9);
}

.gp-navbar .navbar-brand img {
    width: 30px;
    vertical-align: bottom;
    margin-left: 2px;
    margin-right: 2px;
}

/* ---------- CARDS ---------- */

.gp-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-shadow-sm);
    overflow: hidden;
}

.gp-card-elevated {
    border: none;
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-shadow-md);
}

/* ---------- BUTTONS ---------- */

.btn {
    border-radius: var(--gp-radius-sm);
    padding: 0.6rem 1rem;
}

.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.gp-btn {
    --bs-btn-color: var(--gp-btn-text);
    --bs-btn-bg: var(--gp-btn-bg);
    --bs-btn-border-color: var(--gp-btn-border);

    --bs-btn-hover-color: var(--gp-btn-text);
    --bs-btn-hover-bg: var(--gp-btn-hover);
    --bs-btn-hover-border-color: var(--gp-btn-hover);

    --bs-btn-active-color: var(--gp-btn-text);
    --bs-btn-active-bg: var(--gp-btn-active);
    --bs-btn-active-border-color: var(--gp-btn-active);

    --bs-btn-disabled-color: var(--gp-btn-disabled-text);
    --bs-btn-disabled-bg: var(--gp-btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--gp-btn-disabled-border);

    font-weight: 600;
}

/* Outline brand */
.gp-btn-outline {
    --bs-btn-color: var(--gp-btn-outline-text);
    --bs-btn-border-color: var(--gp-btn-outline-border);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--gp-red);
    --bs-btn-hover-border-color: var(--gp-red);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--gp-red-dark);
    --bs-btn-active-border-color: var(--gp-red-dark);

    --bs-btn-disabled-color: #6C757D;
    --bs-btn-disabled-border-color: #6C757D;

    font-weight: 600;
}


/* I vecchi .gp-badge-soft / .gp-badge-important sono stati rimossi:
   duplicavano .gp-state-* con un rosso non verificato sul tema scuro.
   Usare .gp-state + .gp-state-brand. */

/* ---------- PANELS / SECTIONS ---------- */

.gp-panel {
    padding: 1rem;
    border-radius: var(--gp-radius);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

/* ---------- LIST ITEMS ---------- */

.gp-list-item {
    padding: .9rem 1rem;
    border-radius: var(--gp-radius-sm);
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.gp-list-item + .gp-list-item {
    margin-top: .75rem;
}

/* ---------- FORMS ---------- */

.form-control,
.form-select {
    border-radius: var(--gp-radius-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gp-red);
    box-shadow: 0 0 0 .2rem rgba(215,26,59,.15);
}

/* ---------- UTILITIES ---------- */

.gp-text-brand {
    color: var(--gp-red-text) !important;
}

.gp-bg-brand {
    background-color: var(--gp-red) !important;
}

.gp-border-brand {
    border-color: var(--gp-red) !important;
}

.gp-shadow-sm {
    box-shadow: var(--gp-shadow-sm);
}

.gp-shadow-md {
    box-shadow: var(--gp-shadow-md);
}

/* ---------- STATO (pillole tinte) ---------- */

.gp-state {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    padding: .3em .7em;
    border-radius: 999px;
    white-space: nowrap;
}

.gp-state-ok       { background: var(--gp-state-ok-soft);       color: var(--gp-state-ok); }
.gp-state-warn     { background: var(--gp-state-warn-soft);     color: var(--gp-state-warn); }
.gp-state-late     { background: var(--gp-state-late-soft);     color: var(--gp-state-late); }
.gp-state-neutral  { background: var(--gp-state-neutral-soft);  color: var(--gp-state-neutral); }
.gp-state-brand    { background: var(--gp-red-soft);            color: var(--gp-red-text); }

/* Etichetta di piano: la corona accanto a una funzione a pagamento.
   Stessa forma delle pillole di stato ma piu' piccola, perche' affianca
   un'etichetta di campo e non deve pesare piu' di quella. */
.gp-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--gp-plan-soft);
    color: var(--gp-plan);
}

.gp-navbar .gp-plan-badge {
    background: var(--gp-plan-on-brand-bg);
    color: var(--gp-plan-on-brand);
}

/* Bordo di stato: stessa semantica delle pillole, applicata al bordo
   sinistro di una card. Il token e' lo stesso, quindi segue i due temi. */
.gp-border-state-warn {
    border-left: 4px solid var(--gp-state-warn);
}

.gp-border-state-late {
    border-left: 4px solid var(--gp-state-late);
}

/* ---------- NAV ATTIVA ---------- */

.gp-navbar .nav-link.active {
    font-weight: 600;
    color: #fff;
    border-bottom: 2px solid #fff;
}

/* ---------- BOTTOM NAV (mobile) ---------- */

.gp-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--gp-bottom-nav-h);
    display: flex;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
}

.gp-bottom-nav a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--bs-secondary-color);
    font-size: .7rem;
    font-weight: 500;
}

.gp-bottom-nav a i {
    font-size: 1.25rem;
    line-height: 1;
}

.gp-bottom-nav a.active {
    color: var(--gp-red-text);
}

/* spazio per non far coprire il footer dalla bottom nav */
@media (max-width: 991.98px) {
    body.has-bottom-nav {
        padding-bottom: var(--gp-bottom-nav-h);
    }
}

/* ---------- CARD VEICOLO (accento = tipo) ---------- */

.gp-vehicle-card {
    /* il default e' neutro, non il rosso brand: l'accento e'
       tassonomia, non identita' */
    border-top: 4px solid var(--vehicle-accent, var(--bs-border-color));
    transition: transform .15s ease, box-shadow .15s ease;
}

.gp-vehicle-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--gp-shadow-md);
}

.gp-vehicle-card.disposed {
    opacity: .55;
}

.gp-vehicle-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--vehicle-accent, var(--bs-secondary-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gp-vehicle-icon img {
    width: 30px;
    height: 30px;
    /* Le icone SVG usano stroke="currentColor", ma caricate via <img>
       non ereditano il colore e restano nere sopra il cerchio colorato.
       brightness(0) le porta a nero pieno, invert(1) a bianco. */
    filter: brightness(0) invert(1);
}

/* ---------- CARD CLICCABILI ---------- */

.gp-clickable {
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}

.gp-clickable:hover {
    transform: translateY(-1px);
    box-shadow: var(--gp-shadow-md);
}

.gp-clickable:active {
    transform: scale(.995);
}

/* ---------- VALIDAZIONE ---------- */

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--gp-state-late);
}

.invalid-feedback {
    color: var(--gp-state-late);
    font-size: .8rem;
}

/* ---------- AUTENTICAZIONE ---------- */

.card-wrapper {
    display: flex;
    align-items: center;
    padding: 1rem;
}

.auth-card {
    border-radius: 1rem;
}

.auth-card .center {
    text-align: center;
}

.auth-card img.logo {
    width: min(300px, 80vw);
    margin-bottom: 1.5rem;
}

/* ---------- FOOTER ---------- */

footer .logo.logo-gp { height: 25px; }
footer .logo.logo-sm { height: 20px; }

/* ---------- MOBILE TUNING ---------- */

@media (max-width: 576px) {
    .gp-page-title {
        font-size: 1.3rem;
    }

    .gp-card,
    .gp-panel {
        border-radius: .75rem;
    }

    /* target touch: la linea guida chiede pulsanti raggiungibili
       e ben distanziati */
    .btn {
        min-height: 44px;
    }
}


/* ---------- STATISTICHE ---------- */

.gp-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
}

/* Barre orizzontali a serie singola. Il numero resta sempre scritto
   accanto: la barra aiuta il confronto, non porta l'informazione da sola. */
.gp-bars {
    display: flex;
    flex-direction: column;
    /* 2px di superficie fra barre adiacenti: separa senza disegnare bordi */
    gap: 2px;
}

.gp-bar-row {
    display: grid;
    grid-template-columns: minmax(6rem, 9rem) 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .25rem 0;
}

.gp-bar-label {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

.gp-bar-track {
    background: var(--gp-chart-track);
    border-radius: 2px;
    /* marca sottile: un blocco spesso urla e non aggiunge informazione */
    height: 10px;
}

.gp-bar-fill {
    background: var(--gp-chart-bar);
    height: 100%;
    /* estremita' arrotondata solo dal lato del dato, squadrata sulla base */
    border-radius: 0 4px 4px 0;
    min-width: 2px;
}

.gp-bar-value {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sotto i 420px l'etichetta va sopra: tre colonne su uno schermo stretto
   lasciano alla barra una trentina di pixel, e non si legge piu' niente. */
@media (max-width: 420px) {
    .gp-bar-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label value"
            "track track";
        gap: .15rem .75rem;
    }

    .gp-bar-label { grid-area: label; }
    .gp-bar-value { grid-area: value; }
    .gp-bar-track { grid-area: track; }
}