/*
 * Identita' visiva HQH Services Configurator (§2).
 *
 * I colori stanno qui come variabili CSS e non sparsi negli attributi style
 * delle viste: il PDF e il pannello admin usano gli stessi valori, e averli in
 * un punto solo evita che due schermate divergano.
 *
 * Il file e' servito da public/: nessuna CDN, nessun passaggio di build, come
 * richiede la Content-Security-Policy con script-src 'self' (§10.6).
 */

:root {
    --hq-sfondo: #1a2e20;
    --hq-card: #1e3028;
    --hq-bordo: #3a5244;
    --hq-accento: #c6dbac;
    --hq-verde-scuro: #253a2e;
    --hq-testo-attenuato: #8aab96;
    --hq-testo-debole: #5c7a68;
    --hq-ambra: #ffb400;

    --hq-stato-bozza: #8aab96;
    --hq-stato-inviato: #60a5fa;
    --hq-stato-accettato: #6fcf97;
    --hq-stato-rifiutato: #f0a0a0;
}

body {
    background-color: var(--hq-sfondo);
    color: #e8f0e8;
    min-height: 100vh;
}

a {
    color: var(--hq-accento);
}

a:hover {
    color: #dbeac8;
}

.hq-card {
    background-color: var(--hq-card);
    border: 1px solid var(--hq-bordo);
    border-radius: 0.75rem;
}

.hq-attenuato {
    color: var(--hq-testo-attenuato);
}

.hq-debole {
    color: var(--hq-testo-debole);
}

.hq-navbar {
    background-color: var(--hq-verde-scuro);
    border-bottom: 1px solid var(--hq-bordo);
}

.hq-marchio {
    color: var(--hq-accento);
    font-weight: 600;
    text-decoration: none;
}

/* Campi su fondo scuro: Bootstrap li rende bianchi, qui servono scuri. */
.hq-card .form-control,
.hq-card .form-select {
    background-color: #16251c;
    border-color: var(--hq-bordo);
    color: #e8f0e8;
}

.hq-card .form-control:focus,
.hq-card .form-select:focus {
    background-color: #16251c;
    border-color: var(--hq-accento);
    color: #e8f0e8;
    box-shadow: 0 0 0 0.2rem rgba(198, 219, 172, 0.25);
}

.hq-card .form-control::placeholder {
    color: var(--hq-testo-debole);
}

.btn-hq {
    background-color: var(--hq-accento);
    border-color: var(--hq-accento);
    color: var(--hq-verde-scuro);
    font-weight: 600;
}

.btn-hq:hover,
.btn-hq:focus {
    background-color: #dbeac8;
    border-color: #dbeac8;
    color: var(--hq-verde-scuro);
}

.btn-hq-contorno {
    border-color: var(--hq-bordo);
    color: var(--hq-accento);
}

.btn-hq-contorno:hover {
    background-color: var(--hq-bordo);
    color: var(--hq-accento);
}

/* Il riquadro centrato delle pagine di autenticazione. */
.hq-riquadro-accesso {
    max-width: 26rem;
    margin: 0 auto;
}

/* I messaggi flash: verde per l'esito positivo, rosso per l'errore. */
.hq-avviso-successo {
    background-color: rgba(111, 207, 151, 0.12);
    border: 1px solid var(--hq-stato-accettato);
    color: #cdeedb;
}

.hq-avviso-errore {
    background-color: rgba(240, 160, 160, 0.12);
    border: 1px solid var(--hq-stato-rifiutato);
    color: #f6d5d5;
}

/* ------------------------------------------------------------------------ */
/* Configuratore (§7.2)                                                      */
/* ------------------------------------------------------------------------ */

.hq-hero {
    background:
        radial-gradient(circle at 20% 20%, rgba(198, 219, 172, 0.10), transparent 55%),
        linear-gradient(160deg, var(--hq-verde-scuro), var(--hq-card));
}

/* Le card dei servizi in homepage: nessuna immagine remota e' caricabile con
   la CSP del §10.6, quindi la testata e' un gradiente sulla tinta del servizio. */
.hq-card-immagine {
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--hq-tinta, var(--hq-accento));
    background: linear-gradient(140deg, rgba(37, 58, 46, 0.9), rgba(30, 48, 40, 0.4));
    border-bottom: 1px solid var(--hq-bordo);
    border-radius: 0.75rem 0.75rem 0 0;
}

.hq-voce {
    background-color: #16251c;
    border: 1px solid var(--hq-bordo);
    border-radius: 0.5rem;
    cursor: pointer;
    margin: 0;
}

.hq-voce:hover {
    border-color: var(--hq-accento);
}

/* Il controllo non deve restringersi quando il nome del servizio e' lungo. */
.hq-voce-controllo {
    flex: 0 0 auto;
}

.hq-quantita {
    width: 8.5rem;
}

/* Le frecce native del campo numerico duplicano i pulsanti −/+ e su schermo
   stretto rubano spazio al valore. */
.hq-quantita input[type="number"] {
    -moz-appearance: textfield;
}

.hq-quantita input[type="number"]::-webkit-outer-spin-button,
.hq-quantita input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hq-codice {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--hq-testo-attenuato);
    border: 1px solid var(--hq-bordo);
    border-radius: 0.25rem;
    padding: 0 0.35rem;
}

.hq-badge-una-tantum {
    background-color: rgba(255, 180, 0, 0.15);
    border: 1px solid var(--hq-ambra);
    color: var(--hq-ambra);
    font-size: 0.65rem;
}

.hq-badge-sconto {
    background-color: rgba(198, 219, 172, 0.15);
    border: 1px solid var(--hq-accento);
    color: var(--hq-accento);
}

/* Il riepilogo resta visibile mentre si scorre l'elenco delle voci (§7.2). */
.hq-riepilogo {
    position: sticky;
    top: 1rem;
}

.hq-riepilogo-voci {
    max-height: 40vh;
    overflow-y: auto;
}

.hq-separatore {
    border-color: var(--hq-bordo);
    opacity: 1;
}

.hq-blocco-una-tantum {
    background-color: rgba(255, 180, 0, 0.08);
    border: 1px solid var(--hq-ambra);
    border-radius: 0.5rem;
    color: var(--hq-ambra);
}

/* ------------------------------------------------------------------------ */
/* Documento stampabile lato browser (§7.2)                                  */
/* ------------------------------------------------------------------------ */

/* Fuori dalla stampa non deve esistere: e' un documento, non una sezione della
   pagina. `display: none` lo tiene anche fuori dai lettori di schermo. */
.hq-solo-stampa {
    display: none;
}

@media print {
    body {
        background: #ffffff !important;
        color: #000000;
    }

    /* In stampa resta solo il documento: navigazione, riepilogo e controlli
       non hanno senso su carta. */
    body > *:not(#documento-stampa) {
        display: none !important;
    }

    .hq-solo-stampa {
        display: block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11pt;
    }

    .ds-intestazione {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 2px solid #253a2e;
        padding-bottom: 8pt;
        margin-bottom: 14pt;
    }

    .ds-marchio {
        font-size: 15pt;
        font-weight: bold;
        color: #253a2e;
    }

    .ds-sottotitolo,
    .ds-data,
    .ds-sconto {
        font-size: 9pt;
        color: #5c7a68;
    }

    .ds-destra {
        text-align: right;
    }

    .ds-tabella {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 14pt;
    }

    .ds-tabella th {
        text-align: left;
        font-size: 9pt;
        text-transform: uppercase;
        color: #5c7a68;
        border-bottom: 1px solid #cfd9d2;
        padding: 4pt 3pt;
    }

    .ds-tabella td {
        padding: 4pt 3pt;
        border-bottom: 1px solid #ecefed;
    }

    .ds-num {
        text-align: right;
    }

    /* La colonna del listino ha senso solo con uno sconto attivo. */
    .ds-colonna-listino {
        text-decoration: line-through;
    }

    .ds-titolo-sezione {
        font-size: 11pt;
        color: #ffb400;
        margin-bottom: 4pt;
    }

    .ds-totali {
        width: 45%;
        margin-left: auto;
        border-collapse: collapse;
    }

    .ds-totali td {
        padding: 4pt 3pt;
        border-top: 1px solid #cfd9d2;
    }

    .ds-nota {
        margin-top: 18pt;
        font-size: 9pt;
        color: #5c7a68;
    }

    .d-none {
        display: none !important;
    }
}

/* ------------------------------------------------------------------------ */
/* Tabelle, badge di stato e menu su fondo scuro                             */
/* ------------------------------------------------------------------------ */

.hq-tabella {
    color: #e8f0e8;
    --bs-table-bg: transparent;
    --bs-table-color: #e8f0e8;
}

.hq-tabella thead th {
    color: var(--hq-testo-attenuato);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom-color: var(--hq-bordo);
}

.hq-tabella td {
    border-bottom-color: rgba(58, 82, 68, 0.5);
}

/* Il colore dello stato arriva dall'enum QuoteStatus: un solo elenco di
   colori, condiviso da elenco, dettaglio e PDF. */
.hq-badge-stato {
    background-color: color-mix(in srgb, var(--hq-stato) 18%, transparent);
    border: 1px solid var(--hq-stato);
    color: var(--hq-stato);
}

.hq-riquadro-totali {
    background-color: rgba(37, 58, 46, 0.6);
    border: 1px solid var(--hq-bordo);
    border-radius: 0.5rem;
}

.hq-menu {
    background-color: var(--hq-card);
    border: 1px solid var(--hq-bordo);
}

.hq-menu .dropdown-item {
    color: #e8f0e8;
}

.hq-menu .dropdown-item:hover,
.hq-menu .dropdown-item:focus {
    background-color: var(--hq-verde-scuro);
    color: var(--hq-accento);
}

/* Interruttori, radio e caselle prendono il verde accento: il blu predefinito
   di Bootstrap e' l'unico colore fuori dall'identita' visiva (§2). */
.form-check-input:checked {
    background-color: var(--hq-accento);
    border-color: var(--hq-accento);
}

.form-check-input:focus {
    border-color: var(--hq-accento);
    box-shadow: 0 0 0 0.2rem rgba(198, 219, 172, 0.25);
}

/* Il pallino dell'interruttore acceso deve restare leggibile sul verde. */
.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23253a2e'/%3e%3c/svg%3e");
}

.form-check-input {
    background-color: #16251c;
    border-color: var(--hq-bordo);
}

/* ------------------------------------------------------------------------ */
/* Pannello di amministrazione (§8)                                          */
/* ------------------------------------------------------------------------ */

.hq-admin {
    display: flex;
    min-height: 100vh;
}

/* Sidebar fissa: resta ferma mentre il contenuto scorre, cosi' la navigazione
   e' sempre a portata di clic anche su elenchi lunghi. */
.hq-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15rem;
    background-color: var(--hq-verde-scuro);
    border-right: 1px solid var(--hq-bordo);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.hq-sidebar-marchio {
    padding: 1rem;
    color: var(--hq-accento);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--hq-bordo);
}

.hq-sidebar-voci {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    flex-grow: 1;
}

.hq-sidebar-voci a,
.hq-sidebar-fondo a,
.hq-sidebar-fondo button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    color: #cfe0d3;
    text-decoration: none;
    font-size: 0.9rem;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}

.hq-sidebar-voci a:hover,
.hq-sidebar-fondo a:hover,
.hq-sidebar-fondo button:hover {
    background-color: rgba(198, 219, 172, 0.08);
    color: var(--hq-accento);
}

.hq-sidebar-voci a.attiva {
    background-color: rgba(198, 219, 172, 0.14);
    color: var(--hq-accento);
    border-left: 3px solid var(--hq-accento);
}

.hq-contatore {
    margin-left: auto;
    background-color: var(--hq-ambra);
    color: var(--hq-verde-scuro);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 0.4rem;
}

.hq-sidebar-fondo {
    border-top: 1px solid var(--hq-bordo);
    padding: 0.5rem 0;
}

.hq-admin-contenuto {
    margin-left: 15rem;
    flex-grow: 1;
    min-width: 0;
}

.hq-admin-barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.5rem;
    background-color: var(--hq-card);
    border-bottom: 1px solid var(--hq-bordo);
    position: sticky;
    top: 0;
    z-index: 10;
}

@media (max-width: 767.98px) {
    .hq-sidebar {
        position: static;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hq-admin {
        flex-direction: column;
    }

    .hq-admin-contenuto {
        margin-left: 0;
    }
}

/* Riquadri dei contatori della dashboard (§8.1). */
.hq-contatore-grande {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--hq-accento);
    line-height: 1.1;
}

/* Righe disattivate del catalogo: visibili ma chiaramente fuori servizio. */
.hq-disattivo {
    opacity: 0.5;
}

/* Righe del catalogo e trascinamento (§8.2). */
.hq-riga-catalogo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background-color: #16251c;
    border: 1px solid var(--hq-bordo);
    border-radius: 0.4rem;
    margin-bottom: 0.4rem;
}

.hq-maniglia {
    cursor: grab;
    color: var(--hq-testo-debole);
}

.hq-maniglia:active {
    cursor: grabbing;
}

/* La riga in movimento resta visibile ma chiaramente "sollevata". */
.hq-in-trascinamento {
    opacity: 0.45;
    outline: 1px dashed var(--hq-accento);
}

/* Schede dell'editor dei template email (§9.5). Bootstrap le disegna per un
   fondo chiaro: senza questo blocco la scheda attiva sparisce nel fondo. */
.hq-schede {
    border-bottom-color: var(--hq-bordo);
}

.hq-schede .nav-link {
    color: var(--hq-testo-attenuato);
    border-color: transparent;
}

.hq-schede .nav-link:hover {
    border-color: var(--hq-bordo);
    color: var(--hq-accento);
}

.hq-schede .nav-link.active {
    background-color: var(--hq-card);
    border-color: var(--hq-bordo) var(--hq-bordo) var(--hq-card);
    color: var(--hq-accento);
}

/* L'HTML dei template si legge molto meglio a spaziatura fissa. */
.hq-editor-html {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Il pannello laterale dei preventivi.

   Bootstrap imposta sull'offcanvas le proprie variabili di colore, che sono
   pensate per un fondo chiaro: senza questo blocco titoli ed etichette
   risultano scuri su scuro e praticamente illeggibili. */
.offcanvas {
    --bs-offcanvas-bg: var(--hq-card);
    --bs-offcanvas-color: #e8f0e8;
    --bs-offcanvas-border-color: var(--hq-bordo);
}

.offcanvas .form-label,
.offcanvas h1,
.offcanvas h2,
.offcanvas h3 {
    color: #e8f0e8;
}

/* I prodotti stanno visivamente dentro la loro sezione: e' l'annidamento
   chiesto dal §8.2, e rende evidente quale sezione governa il comportamento
   di quelle voci nel configuratore. */
.hq-prodotti-sezione {
    margin-left: 1.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--hq-bordo);
    margin-bottom: 0.6rem;
}