/**
 * Il guscio della dashboard: barra in alto, menu laterale, menu del telefono.
 *
 * PERCHE' IL GUSCIO VIENE PRIMA DELLE SEZIONI
 * E' il contenitore di tutte. Farlo per ultimo vorrebbe dire riaprire e
 * ricontrollare ogni sezione gia' montata, e nel frattempo ogni sezione nuova
 * sarebbe un'isola bianca dentro una cornice viola. Il pedaggio si paga una
 * volta invece che sette.
 *
 * DA DOVE VENGONO I VALORI
 * Da docs/planning/nosumo-v5-app.html, blocchi `.top`, `.side`, `.nav`,
 * `.nav-s`, `.bn`, `.ic`. Larghezza del menu, spaziature, misure del testo e
 * colori sono quelli, non riscritti a occhio.
 *
 * PERCHE' I NOMI DELLE CLASSI RESTANO QUELLI VECCHI
 * `.nav-item`, `.nav-label`, `.topbar-title` e `#desktopSidebar` non sono solo
 * stile: ci si aggancia il JavaScript che cambia sezione (boot.js, app.js) e
 * quello che apre e chiude il menu. Qui cambia il vestito, non gli appigli:
 * cosi' il guscio si riveste senza toccare una riga di JavaScript.
 * Le variabili arrivano da nosumo-kit.css, montato con la classe `nk` sul menu
 * e sulla barra.
 *
 * COSA NON C'E', DI PROPOSITO
 * Nel disegno la barra in alto ha anche la ricerca globale e l'interruttore
 * Console/Focus. La ricerca non e' un vestito, e' una funzione da costruire, e
 * cercherebbe dentro sezioni non ancora rifatte. Console/Focus e' fase 6: e'
 * Nosu che decide cosa sta nel Focus. Metterli finti sarebbe peggio che non
 * averli.
 */

/* ── Barre di scorrimento ──────────────────────────────────────────── */

/**
 * La barra grossa che si vede e' quella dell'area dei contenuti, che scorre da
 * sola (`.main-area` ha `overflow-y: auto`, il documento no). Quell'area sta
 * FUORI da `.nk`, quindi la regola del kit non la prende: va scritta qui.
 *
 * I due colori sono `--nk-line-2` e `--nk-muted-2` del kit, riscritti come
 * variabili di questo guscio perche' le variabili del kit vivono dentro `.nk` e
 * qui non arrivano. Se un giorno cambiano nel kit, vanno cambiate anche qui: e'
 * l'unico posto, ed e' il motivo per cui sono due variabili e non due colori
 * sparsi nelle regole.
 */

.mt-dashboard {
  --nsm-barra: #D1D1D6;
  --nsm-barra-su: #8E8E93;
}

.mt-dashboard .main-area {
  scrollbar-width: thin;
  scrollbar-color: var(--nsm-barra) transparent;
}
.mt-dashboard .main-area::-webkit-scrollbar { width: 10px; height: 10px; }
.mt-dashboard .main-area::-webkit-scrollbar-track { background: transparent; }
.mt-dashboard .main-area::-webkit-scrollbar-thumb {
  background: var(--nsm-barra);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.mt-dashboard .main-area::-webkit-scrollbar-thumb:hover {
  background: var(--nsm-barra-su);
  background-clip: content-box;
}

/* ── Menu laterale ─────────────────────────────────────────────────── */

.mt-dashboard #desktopSidebar.sidebar {
  width: 206px !important;
  min-width: 206px !important;
  max-width: 206px !important;
  background: var(--nk-ink-2) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid var(--nk-line) !important;
  box-shadow: none !important;
  padding: 12px 9px !important;
}

.mt-dashboard #desktopSidebar .mt-nav-scroll {
  margin: 0;
  padding: 0;
}

/* L'etichetta di gruppo: nel disegno e' in carattere a larghezza fissa,
   piccolissima e distanziata. E' quello che separa i gruppi senza righe. */
.mt-dashboard #desktopSidebar .nav-label {
  font-family: var(--nk-mono) !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--nk-muted-2) !important;
  margin: 0 !important;
  padding: 11px 10px 5px !important;
}

.mt-dashboard #desktopSidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 9px !important;
  padding: 7px 10px !important;
  border-radius: var(--nk-r-sm) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--nk-muted) !important;
  margin-bottom: 1px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: background .18s, color .18s;
}

.mt-dashboard #desktopSidebar .nav-item:hover {
  background: var(--nk-ink-3) !important;
  color: var(--nk-paper) !important;
}

.mt-dashboard #desktopSidebar .nav-item.active {
  background: var(--nk-ink) !important;
  color: var(--nk-accent) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05) !important;
}

.mt-dashboard #desktopSidebar .nav-item.active::before { display: none !important; }

/* Le icone sono i segni del disegno, non SVG: stessa larghezza per tutte,
   cosi' le scritte restano incolonnate. */
.mt-dashboard #desktopSidebar .nav-item-icon {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1;
  opacity: .75;
}

/* Una mini-app non e' una sezione nostra: si distingue dal colore */
.mt-dashboard #desktopSidebar .nav-item--plug { color: var(--nk-accent-2) !important; }
.mt-dashboard #desktopSidebar .nav-item--plug:hover { color: var(--nk-accent-2) !important; }

/* Il contatore accanto a Nosu */
.mt-dashboard #desktopSidebar .nav-badge {
  margin-left: auto;
  background: var(--nk-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.5;
}


/* Il menu ristretto non esiste piu' (vedi dashboard.php). Se una sessione
   vecchia si porta dietro la classe, qui la si annulla: meglio un menu largo
   che uno stretto senza il modo di riaprirlo. */
body.mt-dashboard.sidebar-collapsed #desktopSidebar .mt-label-fade {
  opacity: 1 !important;
  width: auto !important;
}
body.mt-dashboard.sidebar-collapsed #desktopSidebar .nav-label { display: block !important; }

/* ── Barra in alto ─────────────────────────────────────────────────── */

/**
 * La barra attraversa tutto lo schermo, e sotto ci stanno menu e contenuti
 * affiancati: e' la struttura del disegno, dove `.top` sta sopra `.body`.
 *
 * Prima la barra viveva **dentro** l'area dei contenuti, quindi cominciava dopo
 * il menu e il menu risultava piu' alto di lei. Adesso `.app-guscio` e' una
 * colonna: barra sopra, `.app-shell` sotto, che resta la riga di sempre.
 */
/* ⛔ NIENTE `z-index`, dal 13/08/2026. C'era `z-index: 1`, e serviva a stare
   sopra gli aloni dello sfondo: adesso gli aloni stanno a -1 e fanno da soli
   (`mytap-atmosphere.css`, c'e' scritto li' il perche' per esteso). Rimetterlo
   qui vuol dire richiudere dentro un contesto di impilamento tutte le finestre
   dell'app, e riavere la barra in alto sopra il loro velo. */
.mt-dashboard .app-guscio {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media (min-width: 901px) {
  .mt-dashboard .app-guscio { height: 100vh; max-height: 100vh; overflow: hidden; }
  /* `.app-shell` non e' piu' alto quanto lo schermo: quello che avanza sotto
     la barra. Senza questo, il fondo della pagina finirebbe sotto il bordo. */
  .mt-dashboard .app-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1;
  }
  .mt-dashboard #desktopSidebar.sidebar {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

.mt-dashboard .topbar.nk {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--nk-line) !important;
  background: color-mix(in oklch, #FFF 74%, transparent) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  z-index: 200;
}

/* ⇒ IL LOGO MYTAP. [17/08/2026, chiesto dal titolare]
   Qui c'era il marchio scritto, in due colori. Adesso e' l'immagine, la stessa
   delle pagine di accesso.
   ⚠ `display: flex` sull'ancora: un `<img>` dentro un contenitore in linea si
   porta dietro lo spazio del rigo (il `descender`), e la barra risulterebbe
   qualche pixel piu' alta senza che si capisca perche'. */
.mt-dashboard .topbar .nk-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}
/* ⚠ L'altezza la decide questa riga, non gli attributi del tag: quelli servono
   solo a tenere il posto mentre l'immagine arriva. 26px e' quanto ci sta in una
   barra da 56 senza toccare i bordi. */
.mt-dashboard .topbar .nk-logo img {
  height: 26px;
  width: auto;
  display: block;
}

.mt-dashboard .topbar .nk-sp { flex: 1; }

/* Il pallino con la foto, o l'iniziale. Porta al profilo. */
.mt-dashboard .topbar .nk-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nk-accent), var(--nk-accent-2));
  flex-shrink: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--nk-font);
}
.mt-dashboard .topbar .nk-av img { width: 100%; height: 100%; object-fit: cover; }

/* Chi sei, in cima alla tendina della foto. Serve soprattutto agli utenti
   interni: col vestito nuovo il nome non sta piu' nel menu laterale, e uno che
   lavora sui dati di un altro deve poter controllare con chi e' entrato. */
.mt-dashboard .topbar .nk-menu-chi { padding: 6px 12px 2px; }
.mt-dashboard .topbar .nk-menu-chi-nome {
  font-size: 13px; font-weight: 600; letter-spacing: -.012em; color: var(--nk-paper);
}
.mt-dashboard .topbar .nk-menu-chi-mail {
  font-size: 11.5px; color: var(--nk-muted);
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sul computer il nome della sezione lo scrive la sezione stessa, col suo
   titolo grande. Sul telefono il menu laterale non c'e', quindi serve qui. */
@media (min-width: 901px) {
  .mt-dashboard .topbar .topbar-title { display: none !important; }
}

@media (max-width: 900px) {
  .mt-dashboard .topbar.nk {
    margin: 0 0 14px !important;
    position: sticky;
    top: 0;
  }
  /* Sul telefono il nome della sezione va riacceso a mano: app.css lo spegne
     sotto i 900px perche' al suo posto ci stava il marchio piccolo, che adesso
     non c'e' piu'. Senza questo, sul telefono non si legge piu' dove sei. */
  .mt-dashboard .topbar .topbar-title {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    color: var(--nk-paper) !important;
    /* ⚠ E SI ACCORCIA CON I PUNTINI, se no spinge.
       [12/08/2026, misurato in `dev/tests/prova_barra_alto.html`]
       Questo nome lo scrive `boot.js` a ogni cambio di sezione, e «Impostazioni
       account» e' tre volte «Oggi»: su 320px il testo sbordava dal suo riquadro
       e finiva **sotto l'interruttore Console/Focus**, che e' un comando. Senza
       `min-width: 0` non si stringe (dentro un contenitore flessibile la misura
       minima e' quella del contenuto), e senza `nowrap` andrebbe a capo
       allungando la barra. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mt-dashboard .topbar .nk-logo { display: none; }

  /* ⇒ IL RUOLO DELL'ACCOUNT NON SI VEDE SUL TELEFONO.
     [12/08/2026, il titolare: «il toggle si sovrappone al menù»]
     Nella barra stavano quattro cose in fila: il bottone del menu,
     l'interruttore Console/Focus, il ruolo e la foto. Su 360 pixel non ci
     stanno, e a non starci il riquadro di sinistra si schiacciava a zero: il
     bottone del menu sbordava dal suo posto e finiva sotto l'interruttore.

     ⛔ QUELLO CHE ESCE E' IL RUOLO, e non a caso: **e' l'unica delle quattro
     che non fa niente**. «Amministratore» e' un'etichetta che si legge una
     volta, e chi vuole ricontrollare con chi e' entrato ha due posti dove
     guardare: la tendina della foto (nome e indirizzo) e il cassetto del menu,
     che mostra la pastiglia «Piano ADMIN». Le altre tre sono comandi, e un
     comando che non si preme perche' e' sotto un altro e' peggio di
     un'etichetta che non si vede. */
  .mt-dashboard .topbar-actions > .nk-chip { display: none !important; }

  /* ⚠ E LO SPAZIATORE VUOTO SPARISCE, se no si mangia mezza barra.
     [12/08/2026, misurato in `dev/tests/prova_barra_alto.html`]
     `.nk-sp` ha `flex: 1` come `.topbar-left`, quindi **lo spazio avanzato lo
     dividevano a meta'**: su 320px al nome della sezione ne restavano 16 pixel,
     cioe' i soli puntini, e accanto c'era un buco vuoto della stessa misura.
     Sul telefono non serve: `mytap-mobile.css` tiene gia' la barra a
     `space-between`, che spinge la foto a destra da sola. */
  .mt-dashboard .topbar .nk-sp { display: none; }
}

/* ── Menu del telefono ─────────────────────────────────────────────── */

/* !important perche' mytap-mobile.css fissa gia' misura e colore di questa
   etichetta: senza, il cassetto e il menu del computer mostrerebbero la stessa
   scritta in due misure diverse. */
.mt-dashboard #mobileExtraDrawer.nk .mob-drawer-section-lbl {
  font-family: var(--nk-mono) !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--nk-muted-2) !important;
  padding: 11px 10px 5px !important;
  margin: 0 !important;
}

.mt-dashboard #mobileExtraDrawer.nk .mob-drawer-item {
  border-radius: var(--nk-r-sm);
  color: var(--nk-muted);
}
.mt-dashboard #mobileExtraDrawer.nk .mob-drawer-item-title {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--nk-paper);
}
.mt-dashboard #mobileExtraDrawer.nk .mob-drawer-item-sub {
  font-size: 11.5px;
  color: var(--nk-muted);
}
.mt-dashboard #mobileExtraDrawer.nk .mob-drawer-item.active {
  background: var(--nk-ink-3);
}
.mt-dashboard #mobileExtraDrawer.nk .mob-drawer-item.active .mob-drawer-item-title {
  color: var(--nk-accent);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   IL FONDO BIANCO  [ripasso finale del disegno, 04/08/2026]
   ══════════════════════════════════════════════════════════════════════ */

/**
 * ERA L'ULTIMO PEZZO DEL VESTITO, E ASPETTAVA CHE LE SEZIONI FOSSERO PRONTE.
 *
 * Nel disegno il fondo dei contenuti e' **bianco** (`--ink`) e le **schede sono
 * grigie** (`--ink-2`). E' il contrario di come si fa di solito, ed e' il motivo
 * per cui il kit ha `.nk-card { background: var(--nk-ink-2) }`.
 *
 * Fino a oggi il fondo era #F1F1F4 e le schede #F5F5F7: due grigi a tre punti di
 * distanza, cioe' schede che si distinguevano a fatica in tutte e sette le
 * sezioni rifatte. Non era un dettaglio estetico: era il disegno montato a
 * meta', e si vedeva solo mettendo le due schermate a fianco.
 *
 * SI RIDEFINISCE LA VARIABILE, NON SI RISCRIVONO LE REGOLE
 * `--mt-bg` e' usata in una ventina di punti fra fogli diversi (html, body,
 * barre del telefono, sfumature). Cambiarli uno per uno vuol dire dimenticarne
 * qualcuno e ritrovarsi una striscia grigia in fondo a una schermata. Qui si
 * cambia il valore in un posto solo e ci arrivano tutti.
 *
 * E si ridefinisce su `html:has(body.mt-dashboard)` e non su `:root` in
 * `mytap-tokens.css`, perche' quel foglio lo caricano anche `explore.php` e
 * `create-page-step1.php`, che il vestito nuovo non ce l'hanno: la' le schede
 * sono bianche, e su fondo bianco sparirebbero. Il giorno che verranno rifatte
 * anche loro, questa riga si sposta nei token e diventa il valore di tutti.
 * (`:has` e' gia' usato in `mytap-atmosphere.css` e `mytap-dashboard.css`: dove
 * non c'e', resta il grigio di prima, che e' esattamente come stavamo ieri.)
 */
html:has(body.mt-dashboard) { --mt-bg: #FFFFFF; }
body.mt-dashboard { --mt-bg: #FFFFFF; }

/**
 * GLI ALONI VIOLA NON CI SONO NEL DISEGNO.
 *
 * Erano due cerchi sfocati (`.mt-blob--1` e `--2`) in `rgba(124, 92, 246)`, cioe'
 * il viola della V4. Su un fondo grigio si notavano appena; su un fondo bianco
 * diventano due macchie. E nel disegno di riferimento **il fondo e' piatto**:
 * niente aloni, niente sfumature, il colore lo mettono le schede.
 *
 * Spenti qui e non cancellati dal markup perche' `mytap-atmosphere.css` li
 * riaccende con `display: block !important` sopra i 900px, e una regola che
 * toglie il markup lasciando quella accesa e' una trappola per il prossimo che
 * passa. Le due regole morte sono segnate in STATO.md fra le pulizie.
 */
.mt-dashboard .mt-bg-atmosphere { display: none !important; }

/**
 * LE SCHEDE DELLE TRE SEZIONI ANCORA VECCHIE.
 *
 * Oggi/Home, Nosu e Automazioni non sono state rifatte, e non per dimenticanza:
 * Home nasce vestita con la fase 6, l'editor delle automazioni si sistema alla
 * fine di tutte le fasi. Le loro schede sono `.mt-glass`, cioe' bianco al 58%
 * con bordo bianco: su fondo grigio si leggevano, **su fondo bianco sarebbero
 * bianche su bianco**, con la sola ombra a dire dove finisce una scheda.
 *
 * Qui non si rifanno: si danno loro il fondo e il bordo delle schede del kit, in
 * modo che restino leggibili e nel frattempo somiglino di piu' al disegno.
 * Sono tredici schede in tutto. Queste righe **si cancellano** quando quelle tre
 * sezioni verranno rifatte davvero.
 *
 * Il fondo e il bordo sono scritti col colore e non con `var(--nk-*)`: quelle
 * variabili vivono dentro `.nk`, e queste schede stanno fuori.
 */
.mt-dashboard .desk-home .mt-glass,
.mt-dashboard #view-nosu .mt-glass,
.mt-dashboard #auto-wrap .mt-glass,
.mt-dashboard #view-automations .mt-glass {
  background: #F5F5F7;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #E5E5EA;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 30px -8px rgb(0 0 0 / .08);
}

/* Il filo di luce in cima alla scheda era il vetro della V4: su una scheda
   opaca e' una riga bianca in mezzo al grigio, e si vede che e' un resto. */
.mt-dashboard .desk-home .mt-glass::after,
.mt-dashboard #view-nosu .mt-glass::after {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   LA BARRA IN BASSO DEL TELEFONO  [ripasso, 04/08/2026]
   ══════════════════════════════════════════════════════════════════════ */

/**
 * Dal disegno, blocco `.tabbar`: bianca traslucida con lo sfocato dietro, un
 * filo di linea sopra, etichette piccole e grigie, e **la voce accesa in blu**.
 *
 * Prima era il vestito della V4: fondo a vetro, voce accesa in viola
 * (`--mt-purple-deep`) dentro una pastiglia viola, e il bottone tondo centrale
 * con la sfumatura viola e un'ombra viola da venti pixel. Era l'ultima cosa
 * viola rimasta in vista, e si vedeva **solo dal telefono**: sul computer
 * questa barra non esiste, ed e' il motivo per cui e' sopravvissuta a tutto il
 * giro. Segnalata dal titolare il 04/08/2026, con la foto.
 *
 * Le regole vecchie stanno in `mytap-mobile.css` e hanno `!important` su ogni
 * riga: per vincerle serve `!important` anche qui. `guscio.css` si carica dopo,
 * quindi a parita' di forza decide l'ordine e vince questo.
 *
 * COSA NON HO CAMBIATO, DI PROPOSITO
 * **Quali voci** ci sono dentro. Nel disegno sono Oggi, Nosu, Clienti, Pagine,
 * Altro; qui sono Home, NFC e QR, Scansiona, Analytics, Fedelta'. Cambiarle non
 * e' vestire, e' decidere cosa sta a portata di pollice: Nosu e il Focus sono
 * la fase 6, e finche' non ci sono quelle voci porterebbero a niente. E' scritto
 * fra le cose da guardare in STATO.md.
 */

.mt-dashboard .mob-bottom-nav {
  background: color-mix(in oklch, #FFF 82%, transparent) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid var(--nk-line) !important;
  box-shadow: none !important;
}

.mt-dashboard .mob-bottom-nav .mob-nav-lbl,
.mt-dashboard .mob-bottom-nav .mob-fab-lbl {
  color: var(--nk-muted-2) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
}

.mt-dashboard .mob-bottom-nav .mob-nav-icon {
  color: var(--nk-muted-2) !important;
  background: none !important;
}

/* La voce accesa e il bottone tondo NON si vestono da qui.
   Erano viola in `mytap-mobile.css`, e la prima versione di questo blocco li
   ricopriva con una regola piu' forte. Due regole che si contendono lo stesso
   colore sono due posti da cambiare, e fra un mese quella che vince non e' piu'
   ovvia: il viola e' stato corretto **li'**, dove stava. Qui resta solo quello
   che quel foglio non diceva: la cornice della barra e le etichette. */

/* ── «CREA PAGINA» NELLA BARRA ───────────────────────────────────────
   [18/08/2026, chiesto dal titolare] Sta accanto alla pastiglia del piano, e
   in ogni sezione: da qui si crea una pagina anche stando in Clienti.
   ⚠ Sul telefono resta solo il «+». La barra in alto a 360px ha già il menu, il
   nome della sezione e la foto: due parole in più le fanno accavallare, ed è la
   trappola già presa il 12/08 con l'interruttore del Focus. */
.mt-dashboard .topbar .tb-crea {
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .mt-dashboard .topbar .tb-crea-t { display: none; }
    .mt-dashboard .topbar .tb-crea { padding-left: 11px; padding-right: 11px; }
}