/* ================================================================
   ZAMPANET — zampanet.css
   ================================================================
   Personalizzazioni sopra AdminLTE 4 (che include Bootstrap 5.3).
   Regola: prima si usano le classi di AdminLTE/Bootstrap; qui finisce
   solo quello che non esiste già. Tutto con prefisso "zn-" o "bi-zn-".

   Ordine di caricamento (App.razor):
     tema Radzen "standard" (gratuito) → adminlte.min.css →
     bootstrap-icons.min.css → zampanet.css (questo, vince a parità)

   SEZIONI
     1. Font Source Sans 3 (file locali in wwwroot/fonts)
     2. Componenti Radzen allineati ai colori di Bootstrap/AdminLTE
     3. Icone aggiuntive (zampa)
     4. Area di gestione (avatar, azioni pagina)
     5. Vetrina pubblica
     6. Barra errori di Blazor
     7. Validazione dei form Blazor
   ================================================================ */


/* ── 1. FONT ─────────────────────────────────────────────────────
   AdminLTE usa "Source Sans 3": lo serviamo dai file locali invece
   che da Google Fonts (niente richieste a server esterni). */
@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}


/* ── 2. RADZEN ───────────────────────────────────────────────────
   Usiamo il tema GRATUITO "standard" di Radzen (solo per griglie,
   calendario, date...). Qui ne ridefiniamo le variabili principali
   puntandole a quelle di Bootstrap: così i componenti Radzen prendono
   gli stessi colori di AdminLTE e cambiano da soli con il tema scuro
   (data-bs-theme="dark" su <html>, gestito da Site.js). */
:root {
    --rz-text-font-family:       var(--bs-body-font-family);
    --rz-border-radius:          var(--bs-border-radius);

    --rz-primary:                var(--bs-primary);
    --rz-primary-light:          rgba(var(--bs-primary-rgb), .80);
    --rz-primary-lighter:        var(--bs-primary-bg-subtle);
    --rz-primary-dark:           var(--bs-link-hover-color);
    --rz-primary-darker:         var(--bs-link-hover-color);
    --rz-on-primary:             #ffffff;

    --rz-success:                var(--bs-success);
    --rz-info:                   var(--bs-info);
    --rz-warning:                var(--bs-warning);
    --rz-danger:                 var(--bs-danger);

    --rz-base-background-color:  var(--bs-body-bg);
    --rz-body-background-color:  var(--bs-tertiary-bg);
    --rz-text-color:             var(--bs-body-color);
    --rz-text-secondary-color:   var(--bs-secondary-color);
    --rz-text-tertiary-color:    var(--bs-tertiary-color);
}

/* Tema scuro: la scala dei grigi di Radzen va "rovesciata", altrimenti
   intestazioni di griglie e pannelli restano chiari su fondo scuro.
   Valori presi dalla palette grigi di Bootstrap. */
[data-bs-theme="dark"] {
    --rz-base-50:  #1f2327;
    --rz-base-100: #262b30;
    --rz-base-200: #343a40;
    --rz-base-300: #495057;
    --rz-base-400: #6c757d;
    --rz-base-500: #868e96;
    --rz-base-600: #adb5bd;
    --rz-base-700: #ced4da;
    --rz-base-800: #dee2e6;
    --rz-base-900: #f8f9fa;
}


/* ── 3. ICONE AGGIUNTIVE ─────────────────────────────────────────
   Bootstrap Icons non ha la zampa: la disegniamo con una maschera SVG,
   così prende il colore del testo come le altre icone.
   Uso: <i class="bi bi-zn-paw"></i> */
.bi-zn-paw::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='5' ry='4.2'/%3E%3Cellipse cx='5.5' cy='10.5' rx='2' ry='2.5'/%3E%3Cellipse cx='9.3' cy='6' rx='2' ry='2.6'/%3E%3Cellipse cx='14.7' cy='6' rx='2' ry='2.6'/%3E%3Cellipse cx='18.5' cy='10.5' rx='2' ry='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='5' ry='4.2'/%3E%3Cellipse cx='5.5' cy='10.5' rx='2' ry='2.5'/%3E%3Cellipse cx='9.3' cy='6' rx='2' ry='2.6'/%3E%3Cellipse cx='14.7' cy='6' rx='2' ry='2.6'/%3E%3Cellipse cx='18.5' cy='10.5' rx='2' ry='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ── 4. AREA DI GESTIONE ─────────────────────────────────────────*/

/* Avatar con le iniziali (header e menu utente) */
.zn-avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    vertical-align: middle;
}
.zn-avatar-lg { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }

/* Pulsanti dell'header: bottoni con aspetto da nav-link */
.app-header .btn.nav-link { border: 0; }

/* Azioni della pagina sotto il titolo (riempite da <PageHeader><Actions>) */
.zn-actions        { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.zn-actions:empty  { display: none; }

/* Intestazione del menu utente senza immagine: centriamo l'avatar */
.user-menu .user-header { text-align: center; }


/* ── 5. VETRINA PUBBLICA ─────────────────────────────────────────*/

/* Apertura con sfumatura dal blu notte al colore primario */
.zn-hero {
    background: linear-gradient(135deg, #1f2d3d 0%, #1f2d3d 35%, var(--bs-primary) 100%);
    color: #fff;
}
.zn-hero .lead { color: rgba(255,255,255,.85); }
.zn-hero-img   { max-width: 260px; filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); }

/* Riquadro dell'icona nelle schede delle funzionalità */
.zn-feature-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 1.5rem;
}


/* ── 6. BARRA ERRORI DI BLAZOR ───────────────────────────────────
   Mostrata da Blazor quando il circuito va in errore (App.razor). */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    padding: .6rem 1.25rem .7rem;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }


/* ── 7. VALIDAZIONE DEI FORM BLAZOR ──────────────────────────────
   Blazor marca i campi con le classi "valid"/"invalid" e scrive i messaggi in
   <div class="validation-message">: qui li facciamo sembrare quelli di Bootstrap
   (.is-invalid / .invalid-feedback) senza dover cambiare ogni form. */
.form-control.invalid,
.form-select.invalid {
    border-color: var(--bs-form-invalid-border-color);
}
.form-control.invalid:focus,
.form-select.invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
}
.validation-message {
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-form-invalid-color);
}

/* Campo trappola della registrazione: fuori dallo schermo, invisibile alle persone
   ma presente nella pagina (i programmi automatici lo compilano). */
.zn-trappola {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Pagine di stampa (StampaLayout) ──
   A video: un foglio bianco centrato. In stampa: margini A4 e niente sfondi.
   I blocchi "zn-stampa-voce" non si spezzano tra due pagine. */
.zn-stampa {
    background: var(--bs-secondary-bg);
    min-height: 100vh;
    padding: 1.5rem 1rem;
}
.zn-stampa .zn-foglio {
    background: #fff;
    color: #212529;
    max-width: 210mm;
    margin: 0 auto;
    padding: 15mm;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.15);
}
.zn-stampa-voce { break-inside: avoid; page-break-inside: avoid; }
@media print {
    @page { size: A4; margin: 12mm; }
    .zn-stampa { background: #fff; padding: 0; }
    .zn-stampa .zn-foglio { box-shadow: none; padding: 0; max-width: none; }
}

/* Solo la prima lettera maiuscola ("Lun 2 nov", non "Lun 2 Nov" come con text-capitalize) */
.zn-iniziale::first-letter { text-transform: uppercase; }