/* =====================================================================
   Portale Gestione Calibri — tema Parker
   Colori dalle linee guida brand Parker: Parker Gold (Pantone 1235 C),
   Black, Cool Gray 11 C / 7 C. Gli hex sono conversioni Pantone standard,
   da verificare col cliente. Il nero #231F20 è quello del logo fornito.
   Raggi minimi: le linee guida Parker chiedono forme tese, niente curve.
   Font: Barlow / Barlow Semi Condensed (licenza OFL), ospitati in locale.
   ===================================================================== */

/* ---------- Font locali ---------- */
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    src: url('../fonts/BarlowSemiCondensed-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    src: url('../fonts/BarlowSemiCondensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Variabili ---------- */
:root {
    --pc-nero: #231F20;
    --pc-oro: #FFB81C;
    --pc-oro-scuro: #E0A000;
    --pc-oro-tenue: #FFF3D6;
    --pc-grigio-scuro: #53565A;
    --pc-grigio-medio: #97999B;
    --pc-grigio-bordo: #D9DADB;
    --pc-grigio-sfondo: #F4F4F3;
    --pc-bianco: #FFFFFF;
    --pc-ok: #2E7D4F;
    --pc-ok-tenue: #E6F2EA;
    --pc-errore: #B3261E;
    --pc-errore-tenue: #FBEAE8;
    --pc-font-testo: 'Barlow', 'Segoe UI', system-ui, sans-serif;
    --pc-font-titoli: 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', sans-serif;
    --pc-raggio: 3px;
    /* Mappatura sulle variabili di Bootstrap 5.3 */
    --bs-body-font-family: var(--pc-font-testo);
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--pc-nero);
    --bs-body-bg: var(--pc-bianco);
    --bs-secondary-color: var(--pc-grigio-scuro);
    --bs-border-color: var(--pc-grigio-bordo);
    --bs-border-radius: var(--pc-raggio);
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: var(--pc-raggio);
    --bs-link-color: var(--pc-nero);
    --bs-link-color-rgb: 35, 31, 32;
    --bs-link-hover-color: var(--pc-grigio-scuro);
    --bs-link-hover-color-rgb: 83, 86, 90;
    --bs-success-text-emphasis: var(--pc-ok);
    --bs-success-bg-subtle: var(--pc-ok-tenue);
    --bs-success-border-subtle: #B7D9C3;
    --bs-danger-text-emphasis: var(--pc-errore);
    --bs-danger-bg-subtle: var(--pc-errore-tenue);
    --bs-danger-border-subtle: #EBB9B4;
    --bs-warning-text-emphasis: var(--pc-nero);
    --bs-warning-bg-subtle: var(--pc-oro-tenue);
    --bs-warning-border-subtle: var(--pc-oro);
}

/* ---------- Base ---------- */
html {
    font-size: 16px;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--pc-grigio-sfondo);
}

h1, h2, .h1, .h2 {
    font-family: var(--pc-font-titoli);
    font-weight: 700;
}

h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
    font-family: var(--pc-font-titoli);
    font-weight: 600;
}

a {
    text-decoration-color: var(--pc-oro);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* Focus visibile sia su fondo chiaro (bordo nero) sia sulla testata (alone oro) */
:focus-visible {
    outline: 2px solid var(--pc-nero);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--pc-oro);
}

/* ---------- Testata ---------- */
.testata {
    background: var(--pc-nero);
}

    .testata .navbar {
        --bs-navbar-padding-y: 0.5rem;
        --bs-navbar-color: rgba(255, 255, 255, 0.82);
        --bs-navbar-hover-color: #FFFFFF;
        --bs-navbar-active-color: #FFFFFF;
    }

.marchio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .marchio img {
        height: 36px;
        width: auto;
        display: block;
    }

.marchio-testo {
    font-family: var(--pc-font-titoli);
    font-weight: 600;
    font-size: 1.15rem;
    color: #FFFFFF;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.testata .nav-link {
    font-weight: 500;
}

    .testata .nav-link.active {
        box-shadow: inset 0 -3px 0 var(--pc-oro);
    }

.testata .dropdown-menu {
    --bs-dropdown-bg: var(--pc-nero);
    --bs-dropdown-border-color: rgba(255, 255, 255, 0.15);
    --bs-dropdown-link-color: rgba(255, 255, 255, 0.85);
    --bs-dropdown-link-hover-color: #FFFFFF;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-dropdown-link-active-color: var(--pc-nero);
    --bs-dropdown-link-active-bg: var(--pc-oro);
}

@media (max-width: 991.98px) {
    .testata .nav-link {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

        .testata .nav-link.active {
            box-shadow: inset 3px 0 0 var(--pc-oro);
            padding-left: 0.75rem;
        }
}

/* Fascia oro/nero sotto la testata: l'unico elemento decorativo del tema */
.fascia {
    height: 6px;
    background: repeating-linear-gradient(135deg, var(--pc-oro) 0 12px, var(--pc-nero) 12px 24px);
}

/* ---------- Contenuto e piede ---------- */
.contenuto {
    flex: 1;
    padding: 1.75rem 0 3rem;
}

.piede {
    background: var(--pc-bianco);
    border-top: 1px solid var(--pc-grigio-bordo);
    color: var(--pc-grigio-scuro);
    font-size: 0.85rem;
    padding: 0.75rem 0;
}

.pannello {
    background: var(--pc-bianco);
    border: 1px solid var(--pc-grigio-bordo);
    border-radius: var(--pc-raggio);
    padding: 1.5rem;
}

/* ---------- Pulsanti ---------- */
.btn {
    --bs-btn-font-weight: 600;
}

.btn-primary {
    --bs-btn-color: var(--pc-nero);
    --bs-btn-bg: var(--pc-oro);
    --bs-btn-border-color: var(--pc-oro);
    --bs-btn-hover-color: var(--pc-nero);
    --bs-btn-hover-bg: var(--pc-oro-scuro);
    --bs-btn-hover-border-color: var(--pc-oro-scuro);
    --bs-btn-active-color: var(--pc-nero);
    --bs-btn-active-bg: #C98F00;
    --bs-btn-active-border-color: #C98F00;
    --bs-btn-disabled-color: var(--pc-nero);
    --bs-btn-disabled-bg: var(--pc-oro);
    --bs-btn-disabled-border-color: var(--pc-oro);
    --bs-btn-focus-shadow-rgb: 255, 184, 28;
}

.btn-dark {
    --bs-btn-bg: var(--pc-nero);
    --bs-btn-border-color: var(--pc-nero);
    --bs-btn-hover-bg: #3A3536;
    --bs-btn-hover-border-color: #3A3536;
}

.btn-outline-secondary {
    --bs-btn-color: var(--pc-nero);
    --bs-btn-border-color: var(--pc-grigio-medio);
    --bs-btn-hover-color: var(--pc-nero);
    --bs-btn-hover-bg: var(--pc-grigio-sfondo);
    --bs-btn-hover-border-color: var(--pc-grigio-scuro);
    --bs-btn-active-color: var(--pc-nero);
    --bs-btn-active-bg: var(--pc-grigio-bordo);
}

/* ---------- Moduli ---------- */
.form-label {
    font-weight: 500;
    color: var(--pc-grigio-scuro);
    margin-bottom: 0.25rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--pc-grigio-scuro);
    box-shadow: 0 0 0 0.2rem rgba(255, 184, 28, 0.45);
}

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

.form-check-input:focus {
    border-color: var(--pc-grigio-scuro);
    box-shadow: 0 0 0 0.2rem rgba(255, 184, 28, 0.45);
}

/* ---------- Tabelle ---------- */
.table {
    --bs-table-bg: var(--pc-bianco);
    --bs-table-hover-bg: var(--pc-oro-tenue);
    font-variant-numeric: tabular-nums;
}

    .table > thead th {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--pc-grigio-scuro);
        border-bottom: 2px solid var(--pc-nero);
        white-space: nowrap;
    }

.codice-calibro {
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ---------- Stati del calibro (§3.1 requisiti) ---------- */
.stato {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.15em 0.55em;
    border: 1px solid transparent;
    border-radius: 2px;
    white-space: nowrap;
}

    .stato::before {
        content: "";
        width: 0.55em;
        height: 0.55em;
        border-radius: 50%;
        background: currentColor;
    }

.stato-disponibile {
    color: var(--pc-ok);
    background: var(--pc-ok-tenue);
}

.stato-in-reparto {
    color: var(--pc-grigio-scuro);
    background: #ECECEB;
}

.stato-in-taratura {
    color: var(--pc-nero);
    background: var(--pc-oro-tenue);
}

    .stato-in-taratura::before {
        background: var(--pc-oro-scuro);
    }

.stato-fuori-servizio {
    color: var(--pc-errore);
    background: var(--pc-errore-tenue);
}

.stato-dismesso {
    color: var(--pc-grigio-scuro);
    background: transparent;
    border: 1px dashed var(--pc-grigio-medio);
}

/* ---------- Scadenze ---------- */
.scadenza-scaduta {
    color: var(--pc-errore);
    font-weight: 600;
}

.scadenza-imminente {
    background: var(--pc-oro-tenue);
    padding: 0.1em 0.35em;
    border-radius: 2px;
}
/* ---------- Pagine di accesso ---------- */
.accesso {
    max-width: 380px;
    margin: 2rem auto 0;
}

/* ---------- Elenchi ---------- */
.pannello-tabella {
    padding: 0;
    overflow: hidden;
}

.riga-eliminata td {
    color: var(--pc-grigio-scuro);
    font-style: italic;
}

.riga-eliminata .codice-calibro {
    text-decoration: line-through;
}

.valore-ereditato {
    color: var(--pc-grigio-scuro);
}
/* ---------- Barra delle azioni nelle maschere ----------
   Resta agganciata al fondo dello schermo durante lo scorrimento
   e si ferma al suo posto quando si arriva in fondo alla maschera. */
.barra-azioni {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--pc-bianco);
    border: 1px solid var(--pc-grigio-bordo);
    border-top: 3px solid var(--pc-oro);
    border-radius: var(--pc-raggio);
    box-shadow: 0 -4px 12px rgba(35, 31, 32, 0.08);
}
/* ---------- Elenco calibri: schede su smartphone ---------- */
.schede-calibri {
    display: grid;
    gap: 0.5rem;
}

.scheda-calibro {
    position: relative;
    background: var(--pc-bianco);
    border: 1px solid var(--pc-grigio-bordo);
    border-left: 4px solid var(--pc-grigio-bordo);
    border-radius: var(--pc-raggio);
    padding: 0.75rem 1rem;
}

    .scheda-calibro.scaduta {
        border-left-color: var(--pc-errore);
    }

    .scheda-calibro.imminente {
        border-left-color: var(--pc-oro);
    }

.scheda-calibro-testa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.scheda-calibro-piede {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--pc-grigio-scuro);
}
/* ---------- Scheda calibro: dati in sola lettura ---------- */
.dati {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
}

    .dati dt {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--pc-grigio-scuro);
    }

    .dati dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .dati .ampio {
        grid-column: 1 / -1;
    }

        .dati .ampio dd {
            white-space: pre-line;
        }

/* ---------- Scadenziario: riquadri riepilogativi ---------- */
.contatori {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.contatore {
    display: block;
    background: var(--pc-bianco);
    border: 1px solid var(--pc-grigio-bordo);
    border-left: 4px solid var(--pc-grigio-medio);
    border-radius: var(--pc-raggio);
    padding: 0.75rem 1rem;
    color: var(--pc-nero);
    text-decoration: none;
}

    .contatore:hover {
        background: var(--pc-oro-tenue);
    }

.contatore-numero {
    font-family: var(--pc-font-titoli);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
}

.contatore-etichetta {
    font-size: 0.9rem;
    color: var(--pc-grigio-scuro);
}

.contatore.critico {
    border-left-color: var(--pc-errore);
}

    .contatore.critico .contatore-numero {
        color: var(--pc-errore);
    }

.contatore.attenzione {
    border-left-color: var(--pc-oro);
}

.contatore.vuoto .contatore-numero {
    color: var(--pc-grigio-medio);
}
/* ---------- Dashboard: contenitore dei grafici ---------- */
.grafico {
    position: relative;
    height: 280px;
}

/* ---------- Stampa ---------- */
@media print {
    .testata, .piede, .barra-azioni {
        display: none;
    }

    body {
        background: #FFFFFF;
    }
}