/* ==========================================================================
   NOWY UI 2.1 — navigazione istantanea + identita' NOWY. Si carica per ULTIMO (dopo nowy-ui-20.css).
   1. Fluidita': solo il pannello #nw-main cambia e si dissolve (<=140ms); menu fermo, niente strati
      di composizione inutili, niente filtri/sfocature su aree grandi.
   2. Identita': marchio "N a tracciato", segno d'accento a tracciato (voce attiva, barra di caricamento,
      fuoco), stati vuoti illustrati, numeri tabellari ovunque.
   Solo token --nw-* / --st-*.
   ========================================================================== */
:root {
  --nw-brand: #5e6ad2;            /* indaco NOWY */
  --nw-brand-2: #8b7cf6;          /* viola del tracciato (solo nei segni d'identita') */
  --nw-on-brand: #ffffff;
  --nw-route: linear-gradient(90deg, var(--nw-brand), var(--nw-brand-2));
  --nw-focus-ring: 0 0 0 2px var(--nw-panel-bg), 0 0 0 3.5px var(--nw-accent);
  --nw-hint-bg: rgba(94, 106, 210, .06);
  --nw-dur-fast: 90ms; --nw-dur: 140ms;
  --nw-ease-out: cubic-bezier(.2, .8, .2, 1);
}
html[data-theme="dark"] {
  --nw-brand: #7079e0; --nw-brand-2: #a193ff; --nw-on-brand: #ffffff;
  --nw-hint-bg: rgba(112, 121, 224, .09);
}

/* --- 1. fluidita' ------------------------------------------------------------------------------------- */
/* niente livelli di composizione forzati su centinaia di elementi (memoria GPU e scatti durante lo scroll) */
.card, .kpi, .dcard, .btn, .nav-item { backface-visibility: visible; }
.sidebar, .sidebar * { will-change: auto; }
.sidebar { backdrop-filter: none; -webkit-backdrop-filter: none; overscroll-behavior: contain; }

/* transizione di pagina SOLO sul pannello del contenuto: la radice non viene catturata, menu e barra restano vivi */
:root { view-transition-name: none; }
.sidebar, .topbar { view-transition-name: none; }
.content { view-transition-name: nw-main; }
::view-transition-group(nw-main) { animation: none; }
::view-transition-old(nw-main) { animation: nw-vt-fade-out var(--nw-dur-fast) ease-out both; }
::view-transition-new(nw-main) { animation: nw-vt-fade-in var(--nw-dur) var(--nw-ease-out) both; }
@keyframes nw-vt-fade-out { to { opacity: 0; } }
@keyframes nw-vt-fade-in { from { opacity: 0; } }

/* richiesta lenta (>300 ms): il pannello si attenua, senza spostare nulla */
#nw-main.nw-stale { opacity: .6; transition: opacity .2s ease .05s; }
#nw-main { transition: opacity var(--nw-dur-fast) ease; }

/* barra di caricamento: segno a tracciato, 2px, parte subito */
.nw-progress { height: 2px; background: var(--nw-route); box-shadow: none; }
.nw-progress.run { transition: width 6s cubic-bezier(.08, .8, .2, 1), opacity 60ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(nw-main), ::view-transition-new(nw-main) { animation: none !important; }
  #nw-main.nw-stale { transition: none; }
}

/* --- 2. menu laterale ------------------------------------------------------------------------------- */
.sidebar { display: flex; flex-direction: column; }
.nw-nav { flex: 1 1 auto; }
.nav-item { position: relative; transition: background-color var(--nw-dur-fast) ease, color var(--nw-dur-fast) ease; }
.sidebar .nav-item .ico i { transition: none; }
.nav-item:active { background: var(--nw-fill); }
/* voce attiva: fondo leggero + segno a tracciato a sinistra (firma NOWY) */
.nav-item.active::before, .nav-item.is-pending::before { content: ""; position: absolute; left: -6px; top: 7px; bottom: 7px; width: 2.5px;
  border-radius: 2px; background: linear-gradient(180deg, var(--nw-brand), var(--nw-brand-2)); }
.nav-item.is-pending { background: var(--nw-fill); font-weight: 500; }
.sidebar .nav-item.active .ico i, .sidebar .nav-item.is-pending .ico i { color: var(--nw-accent); }
.nw-count[hidden] { display: none !important; }
.nav-item .nw-count { font-variant-numeric: tabular-nums; }
.nav-item[data-nav="/anomalies"] .nw-count:not([hidden]) { color: var(--st-error); background: color-mix(in srgb, var(--st-error) 12%, transparent); }
.nav-item[data-nav="/bordereaux"] .nw-count:not([hidden]) { color: var(--st-partial); background: color-mix(in srgb, var(--st-partial) 13%, transparent); }

/* marchio */
.nw-logo { width: 22px; height: 22px; background: none !important; box-shadow: none !important; border-radius: 6px; }
/* marchio: loghi NOWY ufficiali (static/brand/*.svg, gli stessi di nowy-ui) come maschera -> prendono il colore del tema */
.nw-mark, .nw-wordmark { display: inline-block; flex: none; background-color: currentColor;
  -webkit-mask: var(--nw-mask) center / contain no-repeat; mask: var(--nw-mask) center / contain no-repeat; }
.nw-mark { --nw-mask: url("brand/nowy-mark.svg"); width: 22px; height: 22px; }
.nw-wordmark { --nw-mask: url("brand/nowy-wordmark.svg"); height: 11px; aspect-ratio: 235.25 / 61.5; }
.nw-logo { color: var(--nw-label); }
.nw-logo .nw-mark { width: 100%; height: 100%; display: block; }
.nw-ws-name { display: inline-flex; align-items: center; color: var(--nw-label); }
.auth-brand .nw-mark { vertical-align: -5px; margin-right: 6px; }
.auth-brand .nw-wordmark { height: 14px; vertical-align: -1px; }
.brand-mark.auth-brand::before { display: none; }
.nw-ws-name { font-weight: 650; letter-spacing: .02em; }
.nw-ws-sub { font-size: 12px; color: var(--nw-label-3); font-weight: 500; margin-left: -3px; }
.nw-side-new .new i { color: var(--nw-accent); }

/* piede del menu: utente, tema, esci */
.nw-side-foot { display: flex; align-items: center; gap: 2px; margin: 10px 2px 0; padding-top: 8px; border-top: 1px solid var(--nw-sep); }
.nw-side-user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 4px 6px; font-size: 12.5px; color: var(--nw-label-2); }
.nw-side-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px;
  background: transparent; color: var(--nw-label-2); font-size: 14px; }
.nw-side-btn:hover { background: var(--nw-fill-2); color: var(--nw-label); }
.sidebar { padding-bottom: 12px; }

/* barra in alto: piu' pulita (utente ed esci vanno nel menu) */
.nw-demo-tag { font-size: 11px; color: var(--nw-label-3); padding: 1px 7px; }

/* --- 3. identita' ----------------------------------------------------------------------------------- */
/* fuoco: doppio anello (stacco + indaco), uguale su pulsanti, campi, righe e voci di menu */
:focus:not(:focus-visible) { outline: none; }
button:focus-visible, .btn:focus-visible, .nav-item:focus-visible, .nw-row:focus-visible, .nw-chip:focus-visible,
.nw-seg > :focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--nw-focus-ring) !important; }
a:focus-visible { outline: 2px solid var(--nw-accent); outline-offset: 2px; border-radius: 4px; }
.nav-item:focus-visible, .nw-row:focus-visible, .nw-chip:focus-visible { outline: none; }
.form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: var(--nw-focus-ring) !important; border-color: var(--nw-accent); }

/* numeri tabellari: colonne allineate come in un foglio */
table.table td, table.table th, .nw-row .date, .nw-row .meta, .kpi .value, .nw-metric .value, .nw-statbox .v, .nw-count,
.badge, .nw-code, .lv-num { font-variant-numeric: tabular-nums; }
body { font-feature-settings: "cv11", "ss01", "ss03", "tnum" 0; }

/* stato vuoto illustrato NOWY: la tessera dell'icona sta su un tracciato tratteggiato
   (partenza = punto indaco, arrivo = anello). Vale per OGNI .nw-empty, senza cambiare il markup. */
.nw-empty { background: none; }
.nw-empty > i.bi:first-child { position: relative; overflow: visible; width: 44px; height: 44px; border-radius: 11px;
  font-size: 19px; margin-bottom: 10px; color: var(--nw-accent); background: var(--nw-surface);
  box-shadow: 0 0 0 1px var(--nw-border), 0 2px 6px -2px rgba(16, 18, 27, .10); }
.nw-empty > i.bi:first-child::after { content: ""; position: absolute; left: 50%; top: 50%; width: 176px; height: 10px;
  transform: translate(-50%, -50%); pointer-events: none;
  background:
    radial-gradient(circle at 5px 5px, var(--nw-brand) 3.2px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 5px) 5px, transparent 2.6px, var(--nw-label-3) 3px, transparent 4.2px),
    repeating-linear-gradient(90deg, var(--nw-sep-strong) 0 4px, transparent 4px 8px) center / calc(100% - 20px) 1.5px no-repeat;
  -webkit-mask: linear-gradient(90deg, #000 calc(50% - 30px), transparent calc(50% - 30px) calc(50% + 30px), #000 calc(50% + 30px));
          mask: linear-gradient(90deg, #000 calc(50% - 30px), transparent calc(50% - 30px) calc(50% + 30px), #000 calc(50% + 30px)); }
.nw-empty .title { font-size: 13.5px; font-weight: 600; color: var(--nw-label); }
.nw-empty .hint { font-size: 12.5px; color: var(--nw-label-2); margin-top: 2px; }
.nw-empty-actions { margin-top: 12px; display: inline-flex; gap: 6px; }
@media (forced-colors: active) { .nw-empty > i.bi:first-child::after { display: none; } }

/* riga di aiuto: una frase che dice cosa fare */
.nw-hint { display: flex; align-items: flex-start; gap: 8px; padding: 7px 12px; margin: 0 0 14px; border-radius: 7px;
  background: var(--nw-hint-bg); color: var(--nw-label-2); font-size: 12.5px; line-height: 1.45; }
.nw-hint i { color: var(--nw-accent); font-size: 13px; margin-top: 1px; }
.nw-hint b, .nw-hint strong { color: var(--nw-label); font-weight: 600; }

/* menu "…" per le azioni secondarie (una sola azione primaria a vista) */
.dropdown-menu { font-size: 13px; padding: 4px; border: 0; border-radius: 8px; background: var(--nw-surface);
  box-shadow: var(--nw-elev-2); min-width: 210px; }
.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; color: var(--nw-label);
  font-size: 13px; width: 100%; border: 0; background: none; text-align: left; }
.dropdown-item i { color: var(--nw-label-3); font-size: 14px; width: 16px; text-align: center; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--nw-fill-2); color: var(--nw-label); }
.dropdown-item.text-danger i, .dropdown-item.danger, .dropdown-item.danger i { color: var(--st-error) !important; }
.dropdown-divider { margin: 4px 0; border-color: var(--nw-sep); }
.dropdown-header { font-size: 11.5px; color: var(--nw-label-3); padding: 6px 8px 4px; }
.nw-more-btn { width: 28px; padding: 0; justify-content: center; }
.nw-more-btn::after { display: none; }

/* --- campanella (era uno stile in base.html) --------------------------------------------------------- */
.nw-bell-btn { position: relative; }
.nw-bell-count { position: absolute; top: -6px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--nw-on-brand); background: var(--nw-accent); box-shadow: 0 0 0 2px var(--nw-panel-bg); }
.nw-bell-count.urgent { background: var(--st-error); }
.nw-bell-panel { width: min(380px, calc(100vw - 32px)); padding: 0; overflow: hidden; border: 0; border-radius: var(--nw-r);
  background: var(--nw-surface); box-shadow: var(--nw-elev-2); }
.nw-bell-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px; font-size: 13px; font-weight: 600;
  color: var(--nw-label); border-bottom: 1px solid var(--nw-sep); }
.nw-bell-panel .nw-rem-list { max-height: 60vh; overflow-y: auto; }
.nw-bell-empty { padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--nw-label-2); }
.nw-bell-empty i { font-size: 22px; color: var(--st-ready); }
.nw-bell-empty .title { font-weight: 600; color: var(--nw-label); margin-top: 4px; }
.nw-rem { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--nw-label);
  border-bottom: 1px solid var(--nw-sep); transition: background-color var(--nw-dur-fast) ease; }
.nw-rem:last-child { border-bottom: 0; }
.nw-rem:hover { background: var(--nw-fill-2); color: var(--nw-label); }
.nw-rem-ico { flex: none; width: 26px; height: 26px; border-radius: var(--nw-r-sm); display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; color: var(--nw-accent); background: var(--nw-accent-tint); }
.nw-rem-warning .nw-rem-ico { color: var(--st-partial); background: color-mix(in srgb, var(--st-partial) 13%, transparent); }
.nw-rem-danger .nw-rem-ico { color: var(--st-error); background: color-mix(in srgb, var(--st-error) 12%, transparent); }
.nw-rem-body { display: flex; flex-direction: column; min-width: 0; }
.nw-rem-title { font-size: 13px; font-weight: 500; }
.nw-rem-detail { font-size: 12px; color: var(--nw-label-2); }
.nw-rem-go { margin-left: auto; align-self: center; font-size: 12px; color: var(--nw-label-3); }

/* --- piccoli aggiustamenti di gerarchia --------------------------------------------------------------- */
.card-header .hint { font-weight: 400; font-size: 12px; color: var(--nw-label-3); margin-left: 6px; }
.topbar-right .btn-primary { font-weight: 550; }
.nw-step { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 600; color: var(--nw-accent); background: var(--nw-accent-tint); margin-right: 6px; flex: none; }
.card-header .nw-step { margin-right: 8px; }

@media (max-width: 640px) {
  /* telefono: la barra in alto va a capo invece di uscire dallo schermo */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar-right { flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
  .nw-crumb-section { display: none; }
}
@media (max-width: 992px) {
  .nav-item.active::before, .nav-item.is-pending::before { left: -4px; }
}

/* 2.4 — toast sotto la barra in alto (prima coprivano le azioni in alto a destra di giro e consegna): il JS li
   allinea al bordo reale della barra (anche se va a capo); qui il valore di partenza. Sempre richiudibili (×). */
.nw-toasts { top: 64px; right: 22px; max-width: calc(100vw - 44px); }