/* ═══════════════════════════════════════════════════════════════════════════
   Commessa.ai — Tema 2026-10 (disegno «Capocommessa – desktop/mobile», 2026-10-15)
   https://claude.ai/artifact/X572ML1CqzEKUkPgFLwLjW

   Caricato PER ULTIMO (App.razor): ridefinisce i token già usati da app.css,
   operator.css ed economia.css e ritocca i gusci comuni (menu laterale, barra
   in alto, card, tabelle, stati). SOLO aspetto: nessuna regola cambia cosa si
   vede o chi lo vede. Per tornare al tema precedente basta togliere il <link>.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Tavolozza del disegno ─────────────────────────────────────────────── */
    --tm-navy:        #0b1f4b;   /* primario: pulsanti, voce attiva, testi forti */
    --tm-navy-hover:  #1a3166;
    --tm-ink:         #13203b;   /* testo principale */
    --tm-ink-2:       #34445e;   /* voci di menu, testo secondario forte */
    --tm-muted:       #4a5a72;   /* etichette, sottotitoli (contrasto ≥ 4.5:1) */
    --tm-muted-2:     #5b6b82;   /* icone a riposo */
    --tm-bg:          #f4f6fa;   /* sfondo pagina */
    --tm-surface:     #ffffff;
    --tm-surface-2:   #f8fafd;   /* testate di tabella, campi di ricerca */
    --tm-border:      #e3e8f0;   /* bordi di card, barre, separatori */
    --tm-border-2:    #d5ddea;   /* bordi dei controlli */
    --tm-row:         #edf1f6;   /* separatore fra righe */
    --tm-accent:      #1f6fd1;   /* «.ai» del marchio */
    --tm-active-bg:   #e8eefb;   /* voce attiva, chip informativi */
    --tm-focus:       #1d4ed8;

    /* Stati (pillole): sfondo / testo */
    --tm-ok-bg:    #e8f4e2;  --tm-ok:    #2c6420;
    --tm-warn-bg:  #fff3dc;  --tm-warn:  #6b4100;
    --tm-err-bg:   #fdecec;  --tm-err:   #a8231a;
    --tm-info-bg:  #e8eefb;  --tm-info:  #0b1f4b;
    --tm-neutral-bg: #eef2f8; --tm-neutral: #34445e;
    --tm-badge:    #b42318;  /* contatore rosso del menu */

    --tm-radius-card: 16px;
    --tm-radius-ctl:  10px;

    /* ── Token esistenti riportati alla tavolozza ─────────────────────────── */
    --btn-primary-bg:       var(--tm-navy);
    --btn-primary-bg-hover: var(--tm-navy-hover);
    --btn-border:           var(--tm-border-2);
    --btn-ink:              var(--tm-navy);
    --btn-ghost-hover:      var(--tm-active-bg);
    --btn-radius:           var(--tm-radius-ctl);
    --icobtn-ink:           var(--tm-muted-2);
    --icobtn-hover-bg:      var(--tm-active-bg);
    --icobtn-hover-ink:     var(--tm-navy);

    --sidebar-bg:         var(--tm-surface);
    --sidebar-text:       var(--tm-ink-2);
    --sidebar-text-muted: var(--tm-muted);
    --sidebar-hover:      var(--tm-surface-2);
    --sidebar-active-bg:  var(--tm-active-bg);
    --sidebar-active:     var(--tm-navy);
    --sidebar-border:     var(--tm-border);
    --sidebar-line:       var(--tm-border);

    --op-primary-soft:   var(--tm-active-bg);
    --op-primary-subtle: var(--tm-surface-2);
    --op-text:           var(--tm-ink);
    --op-text-secondary: var(--tm-muted);
    --op-text-muted:     var(--tm-muted-2);
    --op-background:     var(--tm-bg);
    --op-border:         var(--tm-border);
    --op-success-bg:     var(--tm-ok-bg);   --op-success-text: var(--tm-ok);
    --op-warning-bg:     var(--tm-warn-bg); --op-warning-text: var(--tm-warn);
    --op-danger-bg:      var(--tm-err-bg);  --op-danger-text:  var(--tm-err);
}

/* ── Pagina ──────────────────────────────────────────────────────────────── */
html, body {
    background-color: var(--tm-bg);
    color: var(--tm-ink);
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--tm-focus);
    outline-offset: 2px;
}

/* ── Menu laterale ───────────────────────────────────────────────────────── */
.sidebar { border-right: 1px solid var(--tm-border); }

.sidebar-top {
    background: var(--tm-surface);
    height: 68px;
    padding: 0 12px 0 20px;
}

.nav-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tm-muted);
    padding: 8px 20px 4px;
}

.nav-item, .nav-group-wrap { padding: 2px 12px; }

.nav-item .nav-link,
.nav-group-toggle {
    min-height: 44px;
    border-radius: var(--tm-radius-ctl);
    padding: 0 12px;
    font-size: 15px;
    color: var(--tm-ink-2);
}

.nav-label { font-size: 15px; font-weight: 500; }
.nav-link-content { gap: 12px; }
.nav-icon { width: 20px; height: 20px; color: var(--tm-muted); }

.nav-item a.active,
.nav-submenu-link.active,
.nav-sub-submenu-link.active {
    background: var(--tm-active-bg);
    color: var(--tm-navy);
    font-weight: 600;
}
.nav-item a.active .nav-icon { color: var(--tm-navy); }

.nav-group-toggle[aria-expanded="true"],
.nav-group-wrap:has(.nav-submenu-link.active) > .nav-group-toggle { color: var(--tm-ink); }

/* Sottomenu: linea a sinistra di 2px, voci da 40px */
.nav-submenu { margin-left: 34px; padding: 2px 0 6px 12px; }
.nav-submenu::before { width: 2px; background: var(--tm-border); }
.nav-submenu-link {
    min-height: 40px;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tm-ink-2);
}

/* Contatore rosso a pillola */
.nav-badge {
    min-width: 28px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--tm-badge);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Barra in alto (computer) ────────────────────────────────────────────── */
@media (min-width: 720px) {
    .top-row {
        height: 68px;
        background: var(--tm-surface);
        border-bottom: 1px solid var(--tm-border);
        gap: 12px;
    }
    .top-row, article {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .content { padding-top: 32px; }
}

/* Pulsanti della barra: quadrati da 44 con bordo, come nel disegno */
.hdr-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--tm-radius-ctl);
    border: 1px solid var(--tm-border);
    background: var(--tm-surface);
    color: var(--tm-ink);
}
.hdr-btn:hover, .hdr-btn.active { background: var(--tm-surface-2); color: var(--tm-navy); }
.hdr-badge { background: var(--tm-badge); }
.hdr-workspace-btn {
    height: 44px;
    border: 1px solid var(--tm-border-2);
    border-radius: var(--tm-radius-ctl);
    color: var(--tm-ink);
    padding: 0 14px;
}
.hdr-workspace-btn:hover, .hdr-workspace-btn.active { background: var(--tm-surface-2); border-color: var(--tm-border-2); }

/* ── Card, KPI e tabelle ─────────────────────────────────────────────────── */
.eco-card, .eco-kpi, .eco-table-wrap, .card {
    border-color: var(--tm-border);
    border-radius: var(--tm-radius-card);
    box-shadow: none;
}
.card > .card-header:first-child { border-radius: var(--tm-radius-card) var(--tm-radius-card) 0 0; }

.eco-table thead th {
    background: var(--tm-surface-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--tm-muted);
    border-bottom-color: var(--tm-border);
}
.eco-table tbody td { color: var(--tm-ink); border-bottom-color: var(--tm-row); }
.eco-table tbody tr:hover td { background: var(--tm-surface-2); }

/* ── Stati a pillola ─────────────────────────────────────────────────────── */
.eco-badge {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}
.eco-badge--ok    { background: var(--tm-ok-bg);      color: var(--tm-ok); }
.eco-badge--warn  { background: var(--tm-warn-bg);    color: var(--tm-warn); }
.eco-badge--err   { background: var(--tm-err-bg);     color: var(--tm-err); }
.eco-badge--info  { background: var(--tm-info-bg);    color: var(--tm-info); }
.eco-badge--muted { background: var(--tm-neutral-bg); color: var(--tm-neutral); }

/* ── Controlli ───────────────────────────────────────────────────────────── */
.form-control, .form-select {
    border-color: var(--tm-border-2);
    border-radius: var(--tm-radius-ctl);
    color: var(--tm-ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--tm-focus);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .15);
}

/* ═══ Blocco 2 — barre da telefono (disegno 2026-10-15) ═══════════════════ */

/* ── Barra in alto ───────────────────────────────────────────────────────── */
.op-topbar {
    height: 60px;
    padding: 0 8px 0 4px;
    gap: 2px;
    background: var(--tm-surface);
    border-bottom: 1px solid var(--tm-border);
}
/* Sulle pagine radice il marchio sta a 16px dal bordo, come nel disegno */
.op-topbar > .op-topbar__title:first-child { padding-left: 12px; }

.op-topbar__back,
.op-topbar__action {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--tm-ink);
}
.op-topbar__back:hover, .op-topbar__action:hover { background: var(--tm-surface-2); }

.op-topbar__title { font-size: 17px; font-weight: 700; color: var(--tm-ink); }
.op-topbar__sotto { font-size: 12px; line-height: 16px; color: var(--tm-muted); }
.op-topbar__logo { height: 22px; }

/* Cerchio con le iniziali: profilo, corsi e documenti */
.op-topbar__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--tm-navy);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}
.op-topbar__avatar:hover { background: var(--tm-navy-hover); color: #ffffff; }

/* ── Barra in basso: voci a colonne uguali, + quadrato al centro ─────────── */
.op-bottom-nav {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 68px;
    background: var(--tm-surface);
    border-top: 1px solid var(--tm-border);
    box-shadow: none;
}
.op-bottom-nav__item {
    height: 56px;
    gap: 3px;
    color: var(--tm-muted-2);
    font-size: 11px;
    font-weight: 500;
}
.op-bottom-nav__item:hover,
.op-bottom-nav__item:focus { color: var(--tm-navy); }
.op-bottom-nav__item--active { color: var(--tm-navy); font-weight: 700; }
.op-bottom-nav__item--active svg { stroke-width: 2.1; }

.op-bottom-nav__nuovo {
    justify-self: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--tm-navy);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.op-bottom-nav__nuovo:hover,
.op-bottom-nav__nuovo--active { background: var(--tm-navy-hover); color: #ffffff; }

/* ── Barra da telefono dell'amministrazione (MainLayout, menu ☰): stessi colori ── */
.mob-top-bar { border-bottom-color: var(--tm-border); }
.mob-top-bar-logo, .mob-top-bar-logo:hover,
.mob-top-bar-back, .mob-top-bar-hamburger { color: var(--tm-ink); }
.mob-top-bar-logo-accent { color: var(--tm-accent); }
.mob-top-bar-titolo { color: var(--tm-ink); font-weight: 700; }
.mob-top-bar-sotto { color: var(--tm-muted); }

/* ── «Torna indietro» in testa al contenuto, da telefono (2026-10-15) ──────
   Sostituisce la freccia della barra in alto. Visibile nel guscio da telefono
   (OperatorShell, ruoli di campo riconosciuti dal dispositivo) e, nel layout
   da computer, sotto i 720 px. Dove compare, le pagine con un loro pulsante
   (.tb-indietro-pagina) lo nascondono: un solo «Torna indietro». */
.tb-indietro { display: none; margin: 0 0 12px; }
.operator-shell .tb-indietro,
.page--telefono .tb-indietro { display: block; }
.operator-shell .tb-indietro { padding: 16px 16px 0; margin: 0; }
.operator-shell .tb-indietro-pagina,
.page--telefono .tb-indietro-pagina { display: none !important; }
@media (max-width: 719.98px) {
    .tb-indietro { display: block; }
    .tb-indietro-pagina { display: none !important; }
}

/* ── Barra in basso dell'amministrazione: solo su schermo stretto ────────── */
.op-bottom-nav--ufficio { display: none; }
@media (max-width: 719.98px) {
    .op-bottom-nav--ufficio { display: grid; }
}

/* ── Barra in alto dell'amministrazione da telefono: come quella di campo ── */
.mob-top-bar-logo-img { height: 22px; width: auto; display: block; }
.mob-top-bar-pagina { margin-left: 0; }   /* prima -10px per far posto alla freccia */
.mob-top-bar-titolo { font-size: 17px; }
.mob-top-bar-hamburger { width: 48px; height: 48px; border-radius: 12px; }

/* ═══ Blocco 3 — pagine da telefono: componenti comuni op-* (disegno 2026-10-15) ═══ */
.op-page { background: var(--tm-bg); }
.op-card, .op-report-card, .op-kpi-card, .op-action-card {
    border-color: var(--tm-border);
    border-radius: 16px;
}
.op-card__title, .op-report-card__site { color: var(--tm-ink); }
.op-card__sub, .op-report-card__meta { color: var(--tm-muted); }

/* Titoli di sezione: maiuscolo piccolo grigio, come «DA SISTEMARE» / «ULTIMO RAPPORTINO» */
.op-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tm-muted);
}
.op-section-action { color: var(--tm-navy); }

/* Pillole di stato */
.op-badge { border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; }
.op-badge--success { background: var(--tm-ok-bg);      color: var(--tm-ok); }
.op-badge--warning { background: var(--tm-warn-bg);    color: var(--tm-warn); }
.op-badge--danger  { background: var(--tm-err-bg);     color: var(--tm-err); }
.op-badge--neutral { background: var(--tm-neutral-bg); color: var(--tm-neutral); }

/* Numeri */
.op-kpi-card--primary { background: var(--tm-navy); border-color: var(--tm-navy); }
.op-kpi-val { color: var(--tm-ink); font-size: 22px; }
.op-kpi-card--primary .op-kpi-val { color: #ffffff; }
.op-kpi-lbl { color: var(--tm-muted); }

/* Pulsanti */
.op-btn--primary { background: var(--tm-navy); border-color: var(--tm-navy); }
.op-btn--primary:hover { background: var(--tm-navy-hover); }
.op-input, .op-textarea { border-color: var(--tm-border-2); border-radius: 12px; color: var(--tm-ink); }