/* ---------------------------------------------------------------------------
   BeIndustry License Cloud - tema di marca del portale.

   Va caricato SEMPRE dopo il CSS di Bootstrap: qui si riscrivono solo le
   variabili dei componenti, nessun override "!important" a tappeto, cosi'
   Bootstrap continua a funzionare come previsto.

   Palette identica al sito prodotto (sito-beindustry\css\style.css) e al
   gestionale desktop (Classi\Tema.cs): il verde del logo #379B02.
   I colori SEMANTICI (rosso errore/eliminazione, giallo avviso, azzurro info)
   NON vanno unificati con l'accento: veicolano informazione, non stile.
--------------------------------------------------------------------------- */

:root {
    --brand: #379b02;
    --brand-dark: #2b7a01;
    --brand-soft: #eef7e6;
    --brand-border: #c2e0ad;
    --ink: #222222;
    --ink-dim: #6b7280;
    --line: #e7eaf0;
    --surface: #ffffff;
    --surface-alt: #f6f8fb;
    --nav-bg: #1b2028;

    /* Bootstrap: "primary" del portale = verde di marca. */
    --bs-primary: #379b02;
    --bs-primary-rgb: 55, 155, 2;
    --bs-link-color: #2b7a01;
    --bs-link-color-rgb: 43, 122, 1;
    --bs-link-hover-color: #379b02;
    --bs-body-color: #222222;
    --bs-body-bg: #f6f8fb;
    --bs-border-color: #e7eaf0;
}

body {
    background: var(--surface-alt);
    color: var(--ink);
    font-family: "Segoe UI", Calibri, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* --- Barra di navigazione -------------------------------------------------- */

.navbar.bg-dark {
    background-color: var(--nav-bg) !important;
    border-bottom: 3px solid var(--brand);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.navbar-brand img,
.brand-logo {
    height: 34px;
    width: auto;
    display: block;
}

.navbar .btn-outline-light {
    --bs-btn-border-color: rgba(255, 255, 255, .35);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}

/* Sezione corrente del portale (admin / rivenditore / cliente). */
.navbar .nav-area {
    color: rgba(255, 255, 255, .6);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- Pulsanti -------------------------------------------------------------- */

.btn-primary,
.btn-success {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-primary,
.btn-outline-success {
    --bs-btn-color: var(--brand-dark);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}

.btn-dark {
    --bs-btn-bg: var(--nav-bg);
    --bs-btn-border-color: var(--nav-bg);
    --bs-btn-hover-bg: #2c333d;
    --bs-btn-hover-border-color: #2c333d;
}

.btn {
    border-radius: .55rem;
    font-weight: 500;
}

/* --- Card, tabelle, form --------------------------------------------------- */

.card {
    border-radius: 14px;
    border-color: var(--line);
}

.card.shadow-sm {
    box-shadow: 0 6px 24px -12px rgba(34, 34, 34, .18) !important;
}

.table > thead.table-dark th {
    background-color: var(--nav-bg);
    border-color: var(--nav-bg);
    font-weight: 600;
    letter-spacing: .02em;
}

.table > tbody > tr:hover > * {
    background-color: var(--brand-soft);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(55, 155, 2, .18);
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(55, 155, 2, .18);
}

/* --- Badge ----------------------------------------------------------------- */

.badge.text-bg-success {
    background-color: var(--brand) !important;
    color: #fff !important;
}

.badge.text-bg-primary {
    background-color: var(--brand-dark) !important;
    color: #fff !important;
}

.badge.text-bg-dark {
    background-color: var(--nav-bg) !important;
}

/* Badge del rivenditore in elenco licenze: verde tenue, non azzurro "info". */
.badge.text-bg-info {
    background-color: var(--brand-soft) !important;
    color: var(--brand-dark) !important;
    border: 1px solid var(--brand-border);
}

.text-primary {
    color: var(--brand-dark) !important;
}

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

.display-6.text-primary {
    color: var(--brand-dark) !important;
}

/* --- Pagina di accesso ----------------------------------------------------- */

.portal-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 15% 15%, rgba(55, 155, 2, .18) 0, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(55, 155, 2, .10) 0, transparent 50%),
        linear-gradient(160deg, #ffffff 0%, #f2f6ee 55%, #e8f1e1 100%);
}

.portal-login-card {
    width: 460px;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 24px 60px -30px rgba(34, 34, 34, .45);
    overflow: hidden;
}

.portal-login-card .card-body {
    padding: 2.5rem 2.25rem;
}

.portal-login-logo {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto 1.25rem;
}

.portal-login-title {
    text-align: center;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: .25rem;
}

.portal-login-sub {
    text-align: center;
    color: var(--ink-dim);
    font-size: .92rem;
    margin-bottom: 1.75rem;
}

.portal-login-card .form-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--ink-dim);
}

.portal-footer-note {
    text-align: center;
    color: var(--ink-dim);
    font-size: .8rem;
    margin-top: 1.5rem;
}

.portal-footer-note a {
    color: var(--brand-dark);
    text-decoration: none;
}

/* Striscia verde in testa alla card di accesso. */
.portal-accent-bar {
    height: 6px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
}

/* --- Intestazione di pagina ------------------------------------------------ */

.page-title {
    font-weight: 700;
}

.page-subtitle {
    color: var(--ink-dim);
}

/* --- Pulsanti di navigazione con icona ------------------------------------
   Stessa forma di quelli della web UI del gestionale: riquadro con bordo,
   icona Material Symbols a sinistra ed etichetta a destra; la voce attiva e
   il logout usano il pieno (verde di marca / rosso semantico).
   Sotto i 1200px resta la sola icona, cosi' la barra non va a capo.        */

.nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-radius: .6rem;
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    text-decoration: none;
    font-size: .95rem;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.nav-btn .material-symbols-outlined {
    font-size: 21px;
    line-height: 1;
}

/* Voce della sezione in cui ci si trova. */
.nav-btn.attivo {
    background: var(--brand);
    border-color: var(--brand);
    font-weight: 600;
}

.nav-btn.attivo:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* Uscita: rosso semantico, non l'accento. */
.nav-btn.uscita {
    background: #b3261e;
    border-color: #b3261e;
    font-weight: 600;
}

.nav-btn.uscita:hover {
    background: #8f1d17;
    border-color: #8f1d17;
}

/* Pallino di notifica sul pulsante (richieste in attesa e simili). */
.nav-btn .conteggio {
    background: #fff;
    color: #1b2028;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .4rem;
    line-height: 1.3;
}

.nav-btn.attivo .conteggio,
.nav-btn.uscita .conteggio {
    background: rgba(0, 0, 0, .25);
    color: #fff;
}

@media (max-width: 1199.98px) {
    .nav-btn .testo {
        display: none;
    }

    .nav-btn {
        padding: .5rem .6rem;
    }
}

/* Il font delle icone porta i suoi legamenti: senza questa regola, prima che
   arrivi il webfont si vedrebbe il nome dell'icona scritto per esteso. */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}