/* =====================================================================
   PWA STAFF — stile «app» e tema chiaro/scuro (solo telefono)
   ---------------------------------------------------------------------
   Riprende la PWA dei tecnici di CRI Impianti: testata navy con il titolo
   della pagina, barra in basso vetrata con la voce attiva a pastiglia,
   comandi grandi un dito, etichette maiuscole, pastiglie di stato a fondo
   tenue. I colori restano quelli di Censea Clarity.

   Vale SOLO sotto i 768px, dove c'è la barra in basso: il backend da
   computer resta Clarity chiaro, com'era.

   Il tema si sceglie con l'attributo data-tema su <html> ("chiaro" o
   "scuro"): lo mette lo script in testa a layouts/main.php prima che la
   pagina si disegni (niente lampo bianco), leggendo la scelta salvata in
   localStorage 'censea-tema' o, se non c'è, quella del telefono.

   Il tema scuro (token --cc-* e componenti Bootstrap/AdminLTE al buio) e'
   in tema-scuro.css, caricato subito dopo questo, solo sotto i 768px.
   ===================================================================== */

:root {
    /* Testata e barre di sistema: il navy della sidebar. */
    --app-testata: #121a2e;
    --app-testata-2: #0e1424;
    /* Fondo dei comandi pieni: resta scuro anche col tema scuro, perché
       sopra ci va sempre testo bianco. */
    --app-azione: #007bff;
    --app-azione-viva: #0069d9;
    /* Barra in basso, vetrata. */
    --app-nav-fondo: rgba(255, 255, 255, .94);
    /* Campi e riquadri sopra la carta. */
    --app-campo: #ffffff;
    /* Stati: fondo tenue, testo pieno (si leggono al sole). */
    --app-ok: #067647;        --app-ok-tenue: #e3f6ec;
    --app-avviso: #a15c07;    --app-avviso-tenue: #fdf1dc;
    --app-errore: #c0262d;    --app-errore-tenue: #fdeaec;
    --app-info: #0b6aa2;      --app-info-tenue: #e4f3fb;
    --app-neutro: #475467;    --app-neutro-tenue: #eef1f5;
    --app-ombra-alta: 0 6px 20px rgba(16, 24, 43, .14);
    --app-alt-comandi: 2.9rem;
    --app-sicuro-alto: env(safe-area-inset-top, 0px);
    --app-sicuro-basso: env(safe-area-inset-bottom, 0px);
}

/* Da computer c'è la navbar: la testata dell'app non esiste. */
.app-testata { display: none; }

@media (max-width: 768px) {

    /* -------------------------------------------------------- Base */
    html, body { background: var(--cc-bg); }
    body.pwa-mobile-nav {
        color: var(--cc-ink);
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    body.pwa-mobile-nav .content-wrapper { background: var(--cc-bg) !important; }
    body.pwa-mobile-nav .content-wrapper > .content { padding: .75rem .7rem 0; }
    body.pwa-mobile-nav .content-wrapper > .content > .container-fluid { padding: 0; }

    /* Il titolo sta nella testata: quelli dentro la pagina (spesso h1 da 2.5rem, che
       col nome di un cliente occupano mezzo schermo) scendono a misura di telefono. */
    body.pwa-mobile-nav .content h1, body.pwa-mobile-nav .content .h1 { font-size: 1.35rem; line-height: 1.25; }
    body.pwa-mobile-nav .content h2, body.pwa-mobile-nav .content .h2 { font-size: 1.2rem; line-height: 1.25; }
    body.pwa-mobile-nav .content h3:not(.card-title), body.pwa-mobile-nav .content .h3 { font-size: 1.08rem; }

    /* Il banner «ambiente di sviluppo» è fisso in cima e coprirebbe la
       testata: sul telefono lo sostituisce la targhetta DEV nella testata. */
    body.pwa-mobile-nav .cc-dev-banner { display: none !important; }

    /* =================================================================
       TESTATA — navy sfumato, titolo della pagina, bersagli da pollice.
       ================================================================= */
    .app-testata {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1035;
        display: flex;
        align-items: center;
        gap: .35rem;
        padding: .5rem .55rem;
        padding-top: calc(.5rem + var(--app-sicuro-alto));
        background: linear-gradient(180deg, var(--app-testata) 0%, var(--app-testata-2) 100%);
        color: #fff;
        box-shadow: 0 2px 10px rgba(14, 20, 36, .22);
    }
    html[data-tema="scuro"] .app-testata { border-bottom: 1px solid var(--cc-border); box-shadow: none; }

    .app-testata-titolo {
        flex: 1;
        min-width: 0;
        font-size: 1.05rem;
        font-weight: 650;
        letter-spacing: -.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .app-testata-btn {
        flex: 0 0 auto;
        width: 2.5rem;
        height: 2.5rem;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: none;
        color: #fff;
        padding: 0;
        transition: background-color .15s;
    }
    .app-testata-btn:hover, .app-testata-btn:focus { color: #fff; outline: none; }
    .app-testata-btn:active { background: rgba(255, 255, 255, .18); }
    .app-testata-btn svg.i { width: 1.4rem; height: 1.4rem; stroke-width: 2; }
    .app-testata-marchio {
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        margin: 0 .25rem 0 .2rem;
        border-radius: .55rem;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    }
    .app-testata-esci { display: flex; margin: 0; }
    /* In home il saluto sta nella testata: via nome e frase dalla dashboard. */
    .cc-dash .cc-phead__saluto { display: none; }
    /* «Personalizza» sta nella testata (solo in home, #app-btn-personalizza). */
    .cc-dash .cc-btn-personalizza { display: none; }
    .app-testata-dev {
        flex: 0 0 auto;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .08em;
        padding: .18rem .45rem;
        border-radius: 1rem;
        background: #ff9800;
        color: #1b1300;
    }

    /* Sotto i 768px la testata sostituisce la navbar. pwa-mobile.css la nasconde
       solo quando pwa-app.js ha messo body.pwa-mobile-nav, cioè a pagina già
       disegnata: qui si nasconde subito, senza il lampo di due testate. */
    .main-header.navbar { display: none !important; }

    /* La testata porta già la safe-area di iOS: il contenuto non la
       riserva più (vedi pwa-mobile.css, body.platform-ios). */
    body.pwa-mobile-nav.platform-ios .content-wrapper { padding-top: 0 !important; }
    /* La fascia sotto la status bar prende il colore della testata. */
    #pwa-top-shield,
    body.platform-ios #pwa-top-shield { background: var(--app-testata); }

    /* =================================================================
       BARRA IN BASSO — vetrata, voce attiva a pastiglia.
       ================================================================= */
    .pwa-bottom-nav {
        background: var(--app-nav-fondo);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--cc-border);
        box-shadow: none;
        align-items: stretch;
        padding: .3rem .2rem calc(.3rem + var(--pwa-safe-bottom));
        height: auto;
        gap: .1rem;
    }
    .pwa-bottom-nav-item {
        flex: 1 1 0;
        min-width: 0;
        padding: .35rem .1rem .3rem;
        border-radius: var(--cc-radius-sm);
        color: var(--cc-muted);
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .01em;
        transition: color .15s, background-color .15s;
    }
    .pwa-bottom-nav-item svg { width: 1.45rem; height: 1.45rem; margin-bottom: .15rem; stroke-width: 1.9; }
    .pwa-bottom-nav-item.active { color: var(--cc-brand); background: var(--cc-brand-tint); }
    .pwa-bottom-nav-item.active svg { transform: translateY(-1px); }
    .pwa-bottom-nav-item::after { display: none; }
    .pwa-bottom-nav-item:active { background: var(--cc-surface-2); }
    .pwa-bottom-nav-item:active svg { transform: scale(.92); }
    .pwa-bottom-nav-badge {
        top: .15rem;
        right: calc(50% - 1.3rem);
        background: var(--cc-danger);
        box-shadow: 0 0 0 2px var(--cc-surface);
    }
    body.pwa-mobile-nav .content-wrapper {
        padding-bottom: calc(4.4rem + var(--pwa-safe-bottom)) !important;
    }

    /* =================================================================
       SCHEDE — la card di Clarity con la testata «da app»: maiuscoletto
       piccolo e tenue, come le schede della PWA CRI.
       ================================================================= */
    body.pwa-mobile-nav .card { margin-bottom: .8rem; }
    body.pwa-mobile-nav .card-header { padding: .7rem .9rem; }
    /* h1/h2 esclusi: in quelle testate il titolo è contenuto (oggetto dell'email,
       esito di un F24), non l'etichetta di una sezione. */
    body.pwa-mobile-nav .card-header .card-title:not(h1):not(h2) {
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--cc-muted);
    }
    body.pwa-mobile-nav .card-header .card-title svg.i,
    body.pwa-mobile-nav .card-header .card-title i { font-size: .95rem; }
    body.pwa-mobile-nav .card-body { padding: .9rem; }
    body.pwa-mobile-nav .card-footer {
        background: var(--cc-surface-2);
        border-top: 1px solid var(--cc-border);
    }

    /* =================================================================
       COMANDI E MODULI — grandi un dito, 16px (sotto, iOS ingrandisce
       la pagina al focus).
       ================================================================= */
    body.pwa-mobile-nav .btn { font-weight: 600; }
    body.pwa-mobile-nav .btn:active { transform: translateY(1px); }
    body.pwa-mobile-nav .btn-primary {
        background-color: var(--app-azione) !important;
        border-color: var(--app-azione) !important;
        color: #fff !important;
    }
    body.pwa-mobile-nav .btn-primary:hover,
    body.pwa-mobile-nav .btn-primary:focus {
        background-color: var(--app-azione-viva) !important;
        border-color: var(--app-azione-viva) !important;
    }

    body.pwa-mobile-nav .form-control,
    body.pwa-mobile-nav .custom-select {
        min-height: var(--app-alt-comandi);
        font-size: 1rem;
        color: var(--cc-ink);
        background-color: var(--app-campo);
        border-color: var(--cc-border-strong);
    }
    body.pwa-mobile-nav .form-control-sm { min-height: 2.4rem; }
    body.pwa-mobile-nav textarea.form-control { min-height: 5.5rem; line-height: 1.45; }
    body.pwa-mobile-nav .form-control::placeholder { color: var(--cc-muted); opacity: .8; }
    body.pwa-mobile-nav .form-group > label,
    body.pwa-mobile-nav .control-label {
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--cc-muted);
        margin-bottom: .25rem;
    }

    /* =================================================================
       AVVISI E PASTIGLIE — fondo tenue, testo pieno.
       ================================================================= */
    body.pwa-mobile-nav .alert {
        border: 0;
        border-radius: var(--cc-radius-sm);
        box-shadow: var(--cc-shadow-sm);
    }
    body.pwa-mobile-nav .alert-success { background: var(--app-ok-tenue); color: var(--app-ok); }
    body.pwa-mobile-nav .alert-danger  { background: var(--app-errore-tenue); color: var(--app-errore); }
    body.pwa-mobile-nav .alert-warning { background: var(--app-avviso-tenue); color: var(--app-avviso); }
    body.pwa-mobile-nav .alert-info    { background: var(--app-info-tenue); color: var(--app-info); }
    body.pwa-mobile-nav .alert-secondary,
    body.pwa-mobile-nav .alert-light   { background: var(--app-neutro-tenue); color: var(--cc-ink); }
    body.pwa-mobile-nav .alert a:not(.btn) { color: inherit; text-decoration: underline; }
    body.pwa-mobile-nav .alert .close { color: inherit; text-shadow: none; }

    body.pwa-mobile-nav .badge {
        border-radius: 1rem;
        padding: .34em .7em;
        font-weight: 600;
    }
    body.pwa-mobile-nav .badge-primary   { background: var(--cc-brand-tint); color: var(--cc-brand); }
    body.pwa-mobile-nav .badge-success   { background: var(--app-ok-tenue); color: var(--app-ok); }
    body.pwa-mobile-nav .badge-danger    { background: var(--app-errore-tenue); color: var(--app-errore); }
    body.pwa-mobile-nav .badge-warning   { background: var(--app-avviso-tenue); color: var(--app-avviso); }
    body.pwa-mobile-nav .badge-info      { background: var(--app-info-tenue); color: var(--app-info); }
    body.pwa-mobile-nav .badge-secondary,
    body.pwa-mobile-nav .badge-light,
    body.pwa-mobile-nav .badge-dark      { background: var(--app-neutro-tenue); color: var(--app-neutro); }

    /* =================================================================
       NUMERI DI PAGINA — bottoni staccati, grandi un dito.
       ================================================================= */
    /* Stessi selettori della base (censea-clarity-base.css, 7b): valgono per il
       pager standard di Yii e per quello Bootstrap 4, e per ogni bottone allo stesso modo. */
    body.pwa-mobile-nav .pagination { flex-wrap: wrap; gap: .35rem; justify-content: center; }
    body.pwa-mobile-nav .pagination > li > a,
    body.pwa-mobile-nav .pagination > li > span,
    body.pwa-mobile-nav .pagination .page-item .page-link {
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0 .6rem;
        border: 1px solid var(--cc-border-strong);
        border-radius: var(--cc-radius-sm) !important;
        background: var(--app-campo);
        color: var(--cc-brand);
        font-size: .9rem;
    }
    body.pwa-mobile-nav .pagination > li.active > a,
    body.pwa-mobile-nav .pagination > li.active > span,
    body.pwa-mobile-nav .pagination .page-item.active .page-link {
        background: var(--app-azione);
        border-color: var(--app-azione);
        color: #fff;
    }
    body.pwa-mobile-nav .pagination > li.disabled > a,
    body.pwa-mobile-nav .pagination > li.disabled > span,
    body.pwa-mobile-nav .pagination .page-item.disabled .page-link {
        background: var(--cc-surface);
        border-color: var(--cc-border);
        color: var(--cc-muted);
    }

    /* =================================================================
       LETTURA DI UN'EMAIL — la freccia per tornare all'elenco era un'icona
       da 36px difficile da prendere col pollice: diventa un pulsante vero, e
       Rispondi / Tutti / Inoltra vanno a destra, lontani dalla freccia.
       Le misure di base della barra sono in censea-clarity.css.
       ================================================================= */
    body .page-header .cc-msg-actions .cc-msg-back {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        margin-right: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--cc-radius-sm);
        border: 1px solid var(--cc-border-strong);
        background: var(--app-campo);
        color: var(--cc-ink);
    }
    body .page-header .cc-msg-actions .cc-msg-back svg.i { width: 1.35rem; height: 1.35rem; stroke-width: 2.1; }
    body .page-header .cc-msg-actions .cc-msg-back:active { background: var(--cc-surface-2); }
    body .page-header .cc-msg-actions .btn:not(.cc-msg-back) { min-height: 40px; padding: 6px 12px; }

    /* =================================================================
       TABELLE A SCHEDE — sotto i 576px mobile-navigation.js e
       mobile-staff-minimal.js trasformano le tabelle in schede (classi
       table-card-view / table-mobile-cards; mobile-optimization.css ha
       altre due varianti). Le loro regole hanno il bianco scritto a mano:
       qui diventano schede della tavolozza.
       ================================================================= */
    body.pwa-mobile-nav .table-card-view tr,
    body.pwa-mobile-nav .table-mobile-cards tr,
    body.pwa-mobile-nav .mobile-card-view tr,
    body.pwa-mobile-nav .mobile-card-layout tr {
        background: var(--cc-surface) !important;
        border: 1px solid var(--cc-border);
        border-radius: var(--cc-radius-sm);
        box-shadow: var(--cc-shadow-sm);
        color: var(--cc-ink);
    }
    body.pwa-mobile-nav .table-card-view td { border-bottom-color: var(--cc-border); }
    /* Le colonne con text-center da computer, in scheda, vanno a sinistra con le altre. */
    body.pwa-mobile-nav .table-card-view td,
    body.pwa-mobile-nav .table-mobile-cards td { text-align: left !important; }
    /* mobile-staff-minimal.css incornicia ogni .table-responsive: dentro una card è
       una seconda cornice, fuori prende almeno il bordo della tavolozza. */
    body.pwa-mobile-nav .table-responsive { border-color: var(--cc-border) !important; }
    body.pwa-mobile-nav .card .table-responsive { border: 0 !important; }
    body.pwa-mobile-nav .table-card-view td::before,
    body.pwa-mobile-nav .table-mobile-cards td::before,
    body.pwa-mobile-nav .mobile-card-view td::before,
    body.pwa-mobile-nav .mobile-card-layout td::before {
        color: var(--cc-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    /* =================================================================
       RIQUADRI DELLA PWA — splash, installazione, aggiornamento,
       trascina-per-aggiornare, comando vocale: sulla tavolozza.
       ================================================================= */
    .pwa-splash { background: linear-gradient(135deg, var(--app-testata) 0%, var(--app-testata-2) 100%); }
    .pwa-install-banner { background: var(--cc-surface); box-shadow: var(--app-ombra-alta); border-top: 1px solid var(--cc-border); }
    .pwa-install-banner-title { color: var(--cc-ink); }
    .pwa-install-banner-desc { color: var(--cc-muted); }
    .pwa-install-btn { background: var(--app-azione); }
    .pwa-pull-indicator { background: var(--cc-surface); box-shadow: var(--app-ombra-alta); }
    .pwa-pull-indicator i { color: var(--cc-brand); }
    .pwa-update-toast { background: var(--cc-ink); color: var(--cc-bg); }
    .pwa-update-toast button { background: var(--app-azione); }

    .vq-overlay { background: rgba(5, 9, 18, .6); }
    .vq-sheet { background: var(--cc-surface); color: var(--cc-ink); }
    .vq-title, .vq-riga { color: var(--cc-ink); }
    .vq-sub, .vq-pref { color: var(--cc-muted); }
    .vq-pref { border-top-color: var(--cc-border); }
    .vq-mic { background: var(--app-neutro-tenue); }
    .vq-mic.is-rec { background: var(--app-errore-tenue); }
    .vq-mic.is-busy { background: var(--app-avviso-tenue); }
    .vq-text, .vq-pref select {
        background: var(--app-campo);
        color: var(--cc-ink);
        border-color: var(--cc-border-strong);
    }
    .vq-text.is-edit { background: var(--app-campo); }
    .vq-btn-primary { background: var(--app-azione); }
    .vq-btn-edit { background: var(--app-neutro-tenue); color: var(--cc-ink); }
    .vq-btn-no { background: var(--app-errore-tenue); color: var(--app-errore); }

}