/* ============================================================
   DisplayMan — Design System (dm.css)
   Token a 3 livelli: primitive → semantic → component
   Allineato a theme.css (#b12d00). Caricare DOPO theme.css.
   ============================================================ */

/* Primitive */
:root {
  --dm-brand-50:  #fdf3f0;
  --dm-brand-100: #fbe0d7;
  --dm-brand-200: #f6bda9;
  --dm-brand-300: #ef9272;
  --dm-brand-400: #e66b44;
  --dm-brand-500: #d24a1d;
  --dm-brand-600: #b12d00;
  --dm-brand-700: #922300;
  --dm-brand-800: #751d02;
  --dm-brand-900: #5f1a05;

  --dm-slate-50:  #f8fafc;
  --dm-slate-100: #efe8d9; /* neutro caldo — badge/chip/avatar muted, coerente con la carta */
  --dm-slate-200: #e2e8f0;
  --dm-slate-300: #cbd5e1;
  --dm-slate-400: #94a3b8;
  --dm-slate-500: #64748b;
  --dm-slate-600: #475569;
  --dm-slate-700: #334155;
  --dm-slate-800: #1e293b;
  --dm-slate-900: #0f172a;
  --dm-slate-950: #020617;

  --dm-red-50:  #fef2f2;
  --dm-red-500: #ef4444;
  --dm-red-600: #dc2626;
  --dm-red-700: #b91c1c;
  --dm-green-50:  #f0fdf4;
  --dm-green-500: #22c55e;
  --dm-green-600: #16a34a;
  --dm-green-700: #15803d;
  --dm-amber-50:  #fffbeb;
  --dm-amber-300: #fcd34d;
  --dm-amber-500: #f59e0b;
  --dm-amber-600: #d97706;
  --dm-amber-700: #b45309;

  --dm-brand-rgb: 177,45,0;

  /* Semantic — Albo Digitale: palette "carta e inchiostro", non SaaS-cloud.
     #b12d00 e' anche il rosso dei timbri municipali: non e' un caso che
     resti l'accento anche in questa terza direzione. */
  --dm-primary:        var(--dm-brand-600);
  --dm-primary-hover:  var(--dm-brand-700);
  --dm-primary-active: var(--dm-brand-800);
  --dm-primary-rgb:    var(--dm-brand-rgb);
  --dm-on-primary:     #ffffff;
  --dm-bg:             #f7f4ee;   /* carta calda, non slate freddo */
  --dm-surface:        #fffdf9;   /* card = foglio, leggermente piu' chiaro della carta sotto */
  --dm-surface-2:      #f2ede1;   /* superficie infossata (input, hover) */
  --dm-text:           #2b2620;   /* inchiostro, non slate-800 */
  --dm-text-muted:     #6b6255;
  --dm-border:         #e3dccc;
  --dm-danger:         var(--dm-red-600);
  --dm-success:        var(--dm-green-600);
  --dm-warning:        var(--dm-amber-600);

  --dm-radius-sm: 4px;
  --dm-radius-md: 6px;
  --dm-radius-lg: 10px;
  --dm-radius-xl: 14px;
  /* Ombre corte e nette — un foglio appoggiato sul tavolo, non una nuvola
     softbox da dashboard SaaS: offset piccolo, blur minimo. */
  --dm-shadow-soft: 1px 1px 0 rgba(43,38,32,.05), 0 1px 2px rgba(43,38,32,.06);
  --dm-shadow-card:  2px 2px 0 rgba(43,38,32,.05), 0 1px 3px rgba(43,38,32,.09);
  --dm-shadow-2xl:   3px 3px 0 rgba(43,38,32,.07), 0 3px 8px rgba(43,38,32,.12);
  --dm-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --dm-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --dm-focus-ring:            var(--dm-primary);
  --dm-danger-border:         #f0c4bb;
  --dm-switch-thumb:          #ffffff;
  /* Binario neutro condiviso (switch off, barre metriche): prima era
     --dm-slate-300/--dm-slate-200, grigio FREDDO su carta calda e - piu'
     grave - mai ridefinito in dark, dove restava chiarissimo sul fondo
     scuro. Qui e' un neutro caldo, con la propria variante dark. */
  --dm-track:                 #ddd4c2;
  /* Ambra leggibile come TESTO: --dm-warning (#d97706) su superficie chiara
     sta a 3.1:1, sotto il minimo 4.5:1 del design system. Per i fondi/le
     barre resta --dm-warning (grafica, soglia 3:1). */
  --dm-warning-text:          var(--dm-amber-700);
}

/* ============================================================
   Dark mode — token override, stessa logica di Bootstrap:
   [data-bs-theme="dark"] sull'<html>, impostato dal toggle in
   header.php + persistito in localStorage (vedi scripts.php).
   L'accento si schiarisce (brand-600 su sfondo scuro leggerebbe
   solo 2.8:1) e il testo dei bottoni pieni passa a inchiostro
   scuro per restare sopra 4.5:1 — stesso principio già presente
   in theme.css per --bs-primary/--bs-text-on-primary.
   ============================================================ */
[data-bs-theme="dark"] {
  --dm-primary:        #e08a5a;
  --dm-primary-hover:  #eaa274;
  --dm-primary-active: #f2b88f;
  --dm-primary-rgb:    224,138,90;
  --dm-on-primary:     #2a0f00;

  --dm-bg:      #1c1712;   /* stessa carta, ma di notte — non slate-navy da SaaS */
  --dm-surface: #262019;
  --dm-surface-2: #201b16;
  --dm-text:    #f0ece3;
  --dm-text-muted: #a89e8c;
  --dm-border:  #3a3226;

  --dm-danger:  #f87171;
  --dm-success: #4ade80;
  --dm-warning: #fbbf24;

  /* Primitivi "tinta chiara" (badge/chip/icone) rimappati sul buio */
  --dm-slate-100: #201b16;
  --dm-brand-50:  rgba(224,138,90,.16);
  --dm-green-50:  rgba(34,197,94,.16);
  --dm-red-50:    rgba(239,68,68,.18);
  --dm-amber-50:  rgba(245,158,11,.18);

  --dm-shadow-soft: 1px 1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
  --dm-shadow-card:  2px 2px 0 rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
  --dm-shadow-2xl:   3px 3px 0 rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.5);
  --dm-danger-border:  #7f1d1d;
  --dm-switch-thumb:   #e9eef5;
  --dm-track:          #3f362a;
  --dm-warning-text:   var(--dm-warning);
}
/* Le badge usano colori chiari in dark mode (i colori della scala chiara
   sono troppo scuri sul buio). Il resto e' gestito dai token. */
[data-bs-theme="dark"] .dm-badge-success{ background: var(--dm-green-50); color: var(--dm-success); }
[data-bs-theme="dark"] .dm-badge-danger{  background: var(--dm-red-50); color: var(--dm-danger); }
[data-bs-theme="dark"] .dm-badge-amber{   background: var(--dm-amber-50); color: var(--dm-warning); }
[data-bs-theme="dark"] .dm-badge-brand{  background: var(--dm-brand-50); color: #f0b49a; }
[data-bs-theme="dark"] .dm-badge-muted{  background: rgba(168,158,140,.16); color: var(--dm-text-muted); }

/* Azioni/icone in dark: i colori "scuri" della scala chiara erano illeggibili
   sul buio; qui si usano le varianti chiare e una superficie infossata. */
[data-bs-theme="dark"] .dm-stat-icon--brand{ color: #f0b49a; }
[data-bs-theme="dark"] .dm-stat-icon--success{ color: var(--dm-success); }
[data-bs-theme="dark"] .dm-stat-icon--danger{ color: var(--dm-danger); }
[data-bs-theme="dark"] .dm-stat-icon--warning{ color: var(--dm-warning); }
/* background-COLOR e non la shorthand `background`: quest'ultima azzera
   anche background-image/repeat/position/size, e su select.dm-input (che
   disegna la freccia come SVG di sfondo) la chevron veniva ripetuta a
   tappeto su tutto il campo, sopra al testo. */
[data-bs-theme="dark"] .dm-input{ background-color: var(--dm-surface-2); }
[data-bs-theme="dark"] .dm-btn-ghost:hover{ background: var(--dm-surface-2); }
/* Avatar (header + footer sidebar): il testo era fisso a --dm-slate-700
   (#334155) su --dm-slate-100, che in dark e' rimappato a #201b16 — le
   iniziali risultavano illeggibili (~1.4:1). */
[data-bs-theme="dark"] .dm-avatar-sm,
[data-bs-theme="dark"] .sb-sidenav-avatar{ color: var(--dm-text); }
/* La freccia della select e' un'immagine SVG con il colore incorporato:
   non segue i token, va ridichiarata per il tema scuro. */
[data-bs-theme="dark"] select.dm-input{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a89e8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
}

/* Base — Albo Digitale: carta calda, inchiostro, titoli in serif */
*{ scrollbar-width: thin; }
body{ font-family: var(--dm-font-sans); color: var(--dm-text); background: var(--dm-bg); letter-spacing: -0.01em; }
h1{ font-family: var(--dm-font-serif); letter-spacing: -0.01em; line-height: 1.2; font-weight: 600; }
h2,h3{ letter-spacing: -0.02em; line-height: 1.2; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="switch"]:focus-visible{
  outline: 3px solid var(--dm-focus-ring); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Skip link */
.dm-skip{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.dm-skip:focus{
  left: 12px; top: 12px; width: auto; height: auto; padding: 8px 16px;
  background: var(--dm-primary); color: var(--dm-on-primary); border-radius: var(--dm-radius-md); z-index: 9999;
}

/* Toggle tema chiaro/scuro — ghost tonda con accento di marca all'hover */
.dm-theme-toggle{
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; border: 1px solid var(--dm-border);
  background: var(--dm-surface); color: var(--dm-text); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dm-theme-toggle:hover{
  background: rgba(var(--dm-primary-rgb), .12); color: var(--dm-primary);
  border-color: rgba(var(--dm-primary-rgb), .4);
}
.dm-theme-toggle:focus-visible{ outline: 3px solid var(--dm-focus-ring); outline-offset: 2px; }
.dm-theme-toggle i{ font-size: 1.1rem; line-height: 1; }

/* Logo — fix: evita stretch/clipping */
.dm-logo{ width:40px; height:40px; display:block; flex:none; object-fit:contain; }
.dm-logo--sm{ width:28px; height:28px; }
.dm-logo--lg{ width:56px; height:56px; }

/* Card — Albo Digitale: bordo caldo 1px, ombra corta e netta (foglio sul tavolo, non nuvola) */
.dm-card{
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-lg);
  box-shadow: var(--dm-shadow-card);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* Sollevamento leggero al passaggio — solo su puntatori reali (evita lo
   stato "incollato" su touch) e rispetta prefers-reduced-motion tramite
   la regola globale che azzera le transizioni. */
@media (hover: hover) and (pointer: fine){
  .dm-card.dm-card-hoverable:hover{
    box-shadow: var(--dm-shadow-2xl);
    border-color: rgba(var(--dm-primary-rgb), .25);
    transform: translateY(-2px);
  }
}
.dm-card-header{
  padding: 14px 20px;
  border-bottom: 1px solid var(--dm-border);
  min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  font-size: .95rem; font-weight: 600; color: var(--dm-text);
}
.dm-card-header .bi{ font-size: 1.05rem; line-height: 1; }

/* Buttons — Minimal sharp, functional, no scale */
.dm-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--dm-radius-md);
  font-weight: 500; font-size: .9rem; border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.dm-btn:active{ transform: none; opacity: .92; }
.dm-btn:disabled{ opacity:.5; pointer-events:none; }
.dm-btn-primary{
  background: var(--dm-primary); color: var(--dm-on-primary); border-color: var(--dm-primary);
  box-shadow: 2px 2px 0 rgba(var(--dm-primary-rgb),.18);
}
.dm-btn-primary:hover{
  background: var(--dm-primary-hover); border-color: var(--dm-primary-hover); color: var(--dm-on-primary);
  box-shadow: 3px 3px 0 rgba(var(--dm-primary-rgb),.22);
}
.dm-btn-ghost{ background: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); }
.dm-btn-ghost:hover{ background: var(--dm-slate-100); }
.dm-btn-danger{ background: var(--dm-surface); color: var(--dm-danger); border-color: var(--dm-danger-border); }
.dm-btn-danger:hover{ background: var(--dm-red-50); }
.dm-btn-icon{ width:44px; padding:0; flex: none; }
.dm-btn-sm{ min-height:36px; padding: 0 14px; font-size:.85rem; }
.dm-btn-lg{ min-height:48px; padding: 0 24px; font-size:1rem; }
/* .dm-btn-icon fissa solo la larghezza (44px): combinato con .dm-btn-sm/-lg,
   che cambiano solo min-height, dava bottoni rettangolari (44x36, 44x48)
   invece che quadrati — e sotto la soglia 44x44 del tap target alla
   dimensione small. Qui si allinea la larghezza all'altezza per ogni size,
   cosi' l'icon button resta un quadrato pulito a ogni dimensione. */
.dm-btn-sm.dm-btn-icon{ width:36px; }
.dm-btn-lg.dm-btn-icon{ width:48px; }

/* Inputs */
.dm-input{
  display:block; width:100%; background: var(--dm-surface); color: var(--dm-text);
  border:1px solid var(--dm-border); border-radius: var(--dm-radius-md);
  min-height:44px; padding:10px 14px; font-size:.95rem; line-height:1.4;
  transition: border-color .15s, box-shadow .15s;
}
.dm-input::placeholder{ color: var(--dm-text-muted); }
.dm-input:focus{ outline:none; border-color: var(--dm-primary); box-shadow: 0 0 0 3px rgba(var(--dm-primary-rgb),.15); }
.dm-input:disabled{ background-color: var(--dm-slate-100); } /* vedi nota sulla shorthand nel blocco dark */
textarea.dm-input{ min-height:80px; resize: vertical; }
select.dm-input{
  appearance: none; -webkit-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b6255' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px;
}
.dm-input-group{ position: relative; display:flex; align-items:center; }
.dm-input-group .dm-input{ padding-left: 40px; }
.dm-input-group .dm-input-icon{
  position:absolute; left:12px; color: var(--dm-text-muted); pointer-events:none; display:grid; place-items:center;
}

/* Badge */
.dm-badge{
  display:inline-flex; align-items:center; gap:6px; padding:2px 10px;
  border-radius:999px; font-size:.75rem; font-weight:600; line-height:1.6;
}
.dm-badge-success{ background: var(--dm-green-50); color: var(--dm-green-700); }
.dm-badge-muted{ background: var(--dm-slate-100); color: var(--dm-slate-700); }
.dm-badge-danger{ background: var(--dm-red-50); color: var(--dm-red-700); }
.dm-badge-brand{ background: var(--dm-brand-50); color: var(--dm-brand-700); }
.dm-badge-amber{ background: var(--dm-amber-50); color: var(--dm-amber-700); }

/* Switch — button role=switch */
.dm-switch{
  position:relative; width:48px; height:28px; border-radius:999px;
  background: var(--dm-track); border:none; cursor:pointer;
  transition: background .15s; flex:none; padding:0;
}
.dm-switch::after{
  content:""; position:absolute; top:4px; left:4px; width:20px; height:20px;
  background:var(--dm-switch-thumb); border-radius:999px; box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .15s;
}
.dm-switch[aria-checked="true"]{ background: var(--dm-primary); }
.dm-switch[aria-checked="true"]::after{ transform: translateX(20px); }
.dm-switch-danger[aria-checked="true"]{ background: var(--dm-danger); }

/* Bootstrap overrides — brand coherence */
a{ color: var(--dm-primary); text-decoration-color: rgba(var(--dm-brand-rgb), .4); }
a:hover{ color: var(--dm-primary-hover); }
a.nav-link, a.navbar-brand, a.dropdown-item{ color: inherit; }
/* I link-bottone tengono il colore della propria variante, non quello dei link */
a.dm-btn-primary, a.dm-btn-primary:hover{ color: var(--dm-on-primary); }
a.dm-btn-ghost, a.dm-btn-ghost:hover{ color: var(--dm-text); }
a.dm-btn-ghost.dm-text-danger, a.dm-btn-danger, a.dm-btn-danger:hover{ color: var(--dm-danger); }
.breadcrumb-item + .breadcrumb-item::before{ color: var(--dm-text-muted); }
/* Anche i link del breadcrumb devono restare toccabili */
.breadcrumb-item a{ display: inline-flex; align-items: center; min-height: 24px; }

.btn-primary{
  --bs-btn-bg: var(--dm-primary);
  --bs-btn-border-color: var(--dm-primary);
  --bs-btn-hover-bg: var(--dm-primary-hover);
  --bs-btn-hover-border-color: var(--dm-primary-hover);
  --bs-btn-active-bg: var(--dm-primary-active);
  --bs-btn-active-border-color: var(--dm-primary-active);
  --bs-btn-disabled-bg: var(--dm-primary);
  --bs-btn-disabled-border-color: var(--dm-primary);
}
.bg-primary{ background-color: var(--dm-primary) !important; }
.text-primary{ color: var(--dm-primary) !important; }
.border-primary{ border-color: var(--dm-primary) !important; }
.form-control:focus, .form-select:focus{
  border-color: var(--dm-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--dm-primary-rgb),.15);
}

/* .text-muted / .form-text — usati 30+ volte nelle view, ma Bootstrap li
   colora con --bs-secondary-color (calcolato in SASS da --bs-body-color,
   mai ricollegato al nostro token): restavano grigio freddo di stock invece
   dell'inchiostro caldo --dm-text-muted usato da ogni componente custom
   (badge, card, tabelle, form). E' l'incoerenza piu' diffusa in termini di
   superficie visiva: testo secondario su quasi ogni pagina. */
.text-muted, .form-text{ color: var(--dm-text-muted) !important; }

/* Alert (messaggi flash errore/successo, validazione form) — Bootstrap li
   colora con le sue tinte "-subtle"/"-text-emphasis" di stock, mai
   ricollegate ai token dm (l'override di --bs-danger/--bs-success in
   theme.css non le ricalcola: sono valori fissi compilati in SASS). Il
   risultato erano rossi/verdi diversi da quelli usati ovunque altrove per
   lo stesso significato (badge, stat-icon, riga "emergenza" in tabella).
   Qui si riusa la stessa coppia bg-50/testo-700 dei badge, gia' dark-aware
   perche' i token *-50 sono ridefiniti sotto [data-bs-theme="dark"]. */
.alert-danger{
  background: var(--dm-red-50); color: var(--dm-red-700);
  border-color: var(--dm-danger-border);
}
.alert-success{
  background: var(--dm-green-50); color: var(--dm-green-700);
  border-color: rgba(34,197,94,.35);
}
.alert-warning{
  background: var(--dm-amber-50); color: var(--dm-amber-700);
  border-color: var(--dm-amber-300);
}
[data-bs-theme="dark"] .alert-danger{  color: var(--dm-danger); }
[data-bs-theme="dark"] .alert-success{ color: var(--dm-success); }
[data-bs-theme="dark"] .alert-warning{ color: var(--dm-warning); }

/* Modali — Bootstrap li rendeva con chrome di default: radius 8px (contro i
   10px di .dm-card), ombra soffusa/sfumata (l'anti-pattern "cloud shadow"
   che qui evitiamo ovunque) e bordo grigio freddo invece del bordo caldo
   dei token. Li si riporta al linguaggio "foglio sul tavolo" del resto
   del sistema. */
.modal-content{
  background: var(--dm-surface); color: var(--dm-text);
  border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg);
  box-shadow: var(--dm-shadow-2xl);
}
.modal-header, .modal-footer{ border-color: var(--dm-border) !important; }
.modal-title{ color: var(--dm-text); }
.modal-backdrop{ --bs-backdrop-bg: #000; --bs-backdrop-opacity: .5; }

/* Dropdown azioni (menu a tendina nelle tabelle) — coerenza palette */
.dropdown-menu{ padding: 6px; border-color: var(--dm-border); box-shadow: var(--dm-shadow-2xl); }
.dropdown-item{ border-radius: var(--dm-radius-sm); }
.dropdown-item:hover, .dropdown-item:focus-visible{
  background: rgba(var(--dm-primary-rgb), .12); color: var(--dm-primary);
}
.dropdown-item.dm-dropdown-item-danger:hover,
.dropdown-item.dm-dropdown-item-danger:focus-visible{
  background: rgba(239,68,68,.12); color: var(--dm-danger);
}
.dropdown-divider{ border-color: var(--dm-border); }

/* SB Admin overrides — Albo Digitale: sidebar/header = superficie "foglio", attivo in inchiostro rosso pieno */
.sb-sidenav{ background-color: var(--dm-surface) !important; border-right: 1px solid var(--dm-border); }
.sb-sidenav .sb-sidenav-menu-heading{ color: var(--dm-text-muted) !important; font-size:.65rem; letter-spacing:.08em; text-transform: uppercase; opacity:.9; }
.sb-sidenav .nav-link{ color: var(--dm-text-muted); border-radius: var(--dm-radius-md); margin: 2px 8px; font-size:.875rem; font-weight:500; min-height:38px; }
.sb-sidenav .nav-link i{ color: var(--dm-slate-400); transition: color .15s; }
.sb-sidenav .nav-link.active{ color: var(--dm-on-primary); background: var(--dm-primary); font-weight: 600; box-shadow: 2px 2px 0 rgba(var(--dm-primary-rgb),.2); }
.sb-sidenav .nav-link.active i{ color: var(--dm-on-primary); }
/* Hover scoped to real pointers only — avoids the "stuck highlight" bug on
   touch devices, where :hover keeps applying to the last tapped link. */
@media (hover: hover) and (pointer: fine){
  .sb-sidenav .nav-link:hover{ color: var(--dm-text); background: rgba(var(--dm-primary-rgb),.1); }
  .sb-sidenav .nav-link:hover i{ color: var(--dm-primary); }
}

/* Sidebar footer — compact account chip */
.sb-sidenav-avatar{
  display:grid; place-items:center; flex:none; width:36px; height:36px;
  border-radius:999px; background: var(--dm-slate-100); border:1px solid var(--dm-border);
  color: var(--dm-slate-700); font-weight:700; font-size:.7rem; letter-spacing:.02em;
}
.sb-topnav{ background-color: var(--dm-surface) !important; border-bottom: 1px solid var(--dm-border); box-shadow: none !important; }
.sb-topnav .navbar-brand{ font-weight:600; letter-spacing:-.01em; color: var(--dm-text) !important; }
.sb-topnav .navbar-brand .dm-tight{ font-family: var(--dm-font-serif); }
.sb-topnav .navbar-brand img{ filter: none; }
/* Il toggle della sidebar e' un `.btn-link`, che in Bootstrap nasce
   sottolineato: sotto un bottone di sola icona restava una lineetta
   spuria. Colore di marca all'hover, come gli altri comandi dell'header. */
.sb-topnav .btn-link{ color: var(--dm-text-muted) !important; text-decoration: none; }
.sb-topnav .btn-link:hover{ color: var(--dm-primary) !important; }
#layoutSidenav_content{ background: var(--dm-bg); }

/* Riga "emergenza" nella tabella notizie.
   Il marcatore sta dentro una cella e la riga viene colorata con :has().
   Dove :has() non e' supportato resta comunque visibile il badge "Emergenza". */
.dm-table-notizie tbody tr:has(.dm-row-emergency){ background-color: var(--dm-red-50); }
.dm-table-notizie tbody tr:has(.dm-row-emergency) td{ border-color: var(--dm-danger-border); }

/* ============================================================
   Tabelle — colori coerenti col design system in ogni tema.
   Bootstrap definisce --bs-border-color e --bs-table-hover-bg solo
   per il chiaro (mai ridefiniti sotto [data-bs-theme="dark"]), quindi
   bordi/hover restavano grigio-chiaro fisso anche in dark; .table-light
   idem, sempre bianco. Qui si passa ai token dm (già dark-aware).
   ============================================================ */
.table{
  --bs-table-color: var(--dm-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--dm-border);
  --bs-table-hover-bg: rgba(var(--dm-primary-rgb), .06);
  --bs-table-hover-color: var(--dm-text);
  --bs-table-striped-bg: var(--dm-surface-2);
  --bs-table-striped-color: var(--dm-text);
  color: var(--dm-text);
}
.table-light{
  --bs-table-color: var(--dm-text);
  --bs-table-bg: var(--dm-slate-100);
  --bs-table-border-color: var(--dm-border);
  color: var(--dm-text);
  background-color: var(--dm-slate-100);
}
.table thead th{ font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--dm-text-muted); }
.table-light th{ color: var(--dm-text-muted); }

/* Table polish */
.dm-table-notizie{ border-radius: 0; }
.dm-table-notizie tbody tr{ transition: background-color .15s ease; }
.dm-table-notizie .dm-thumb-sm{ transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine){
  .dm-table-notizie tbody tr:hover .dm-thumb-sm{ transform: scale(1.08); }
}
.dm-table-notizie thead th{ font-size:.8rem; text-transform: uppercase; letter-spacing:.04em; font-weight:700; }
/* Header tabella — sostituisce .table-light di Bootstrap (fisso chiaro in
   ogni tema, per questo in dark restava bianco). Segue i token dm: stessa
   superficie "muted" usata per badge/thumb placeholder, testo coerente. */
.dm-table-notizie-head{ background: var(--dm-slate-100); color: var(--dm-text); }
.dm-table-notizie-head th{ background: transparent; border-color: var(--dm-border); color: inherit; }

/* Intestazioni ordinabili (custom, sostituiscono simple-datatables) */
.dm-table-notizie th.dm-sort{ cursor: pointer; user-select: none; white-space: nowrap; }
.dm-table-notizie th.dm-sort:hover{ color: var(--dm-primary); }
.dm-table-notizie th.dm-sort:focus-visible{ outline: 3px solid var(--dm-focus-ring); outline-offset: 2px; }
.dm-table-notizie th.dm-sort::after{ content: "\21C5"; margin-left: 6px; opacity: .45; font-size: .8em; }
.dm-table-notizie th.dm-sort-asc::after{ content: "\2191"; opacity: 1; }
.dm-table-notizie th.dm-sort-desc::after{ content: "\2193"; opacity: 1; }

/* Toolbar ricerca (custom) */
.dm-table-toolbar{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--dm-border);
}
.dm-table-toolbar .dm-input-group{ max-width: 320px; }

/* Stat icon — quadrato 44px, radius 6px, bg soft colorato */
.dm-stat-icon{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius: var(--dm-radius-md);
  font-size:1.2rem;
}
/* Varianti native dm (sostituiscono i bg-*-subtle di Bootstrap: stesso
   significato semantico ma tinte derivate dai token del design system) */
.dm-stat-icon--brand{   background: var(--dm-brand-50);  color: var(--dm-primary); }
.dm-stat-icon--success{ background: var(--dm-green-50);  color: var(--dm-green-700); }
.dm-stat-icon--danger{  background: var(--dm-red-50);    color: var(--dm-red-700); }
.dm-stat-icon--warning{ background: var(--dm-amber-50);  color: var(--dm-amber-600); }
.dm-stat-icon--muted{   background: var(--dm-slate-100); color: var(--dm-text-muted); }

/* "Il Timbro" — firma del sistema. Un vero timbro comunale e' rosso,
   tondo, leggermente storto perche' battuto a mano: qui e' il badge che
   certifica un dato come "live" invece che demo/provvisorio. Da fermo
   (demo) e' un contorno tratteggiato dritto, quasi un timbro "in bozza";
   una volta live diventa inchiostro pieno, ruotato, come appena battuto.
   Riusato in Dashboard e Notizie. */
.dm-live{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px 0 9px;
  border: 1.5px dashed var(--dm-text-muted);
  border-radius: 999px;
  font-family: var(--dm-font-serif); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--dm-text-muted);
  transition: color .2s, border-color .2s, transform .2s;
}
.dm-live.is-live{
  border-style: solid; border-color: var(--dm-primary); color: var(--dm-primary);
  transform: rotate(-2deg);
}
.dm-live-dot{
  width: 6px; height: 6px; border-radius: 999px; flex: none;
  /* Inchiostro muted come il bordo tratteggiato e il testo dello stato
     "idle": --dm-slate-300 era quasi invisibile sulla superficie chiara. */
  background: var(--dm-text-muted);
}
.dm-live.is-live .dm-live-dot{
  background: var(--dm-green-500);
  animation: dm-live-pulse 2s ease-in-out infinite;
}
@keyframes dm-live-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
  50%{ box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce){
  .dm-live.is-live .dm-live-dot{ animation: none; }
  .dm-live.is-live{ transform: none; }
}

/* Filtri rapidi (chip) — elenco notizie */
.dm-filter-chip{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--dm-border); background: var(--dm-surface);
  color: var(--dm-text-muted); font-size: .8rem; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.dm-filter-chip:hover{ background: var(--dm-slate-100); color: var(--dm-text); }
.dm-filter-chip.is-active{
  background: var(--dm-primary); border-color: var(--dm-primary); color: var(--dm-on-primary);
}
.dm-filter-chip .dm-filter-count{ font-variant-numeric: tabular-nums; opacity: .8; }

/* Riepilogo ciclo di rotazione — badge informativo nella toolbar Notizie */
.dm-cycle-info{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--dm-text-muted);
  padding: 4px 10px; border-radius: 999px; background: var(--dm-slate-100);
}
.dm-cycle-info strong{ color: var(--dm-text); font-weight: 600; }

/* Cifre tabulari — evita lo shift orizzontale dei numeri (es. contatori) */
.dm-tnum{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Numeri allineati in tutte le tabelle dati e sui badge (coerenza cross-page) */
table td, table th{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.dm-badge{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
[class*="h1"],[class*="h2"],[class*="h3"],[class*="h4"],[class*="h5"],[class*="h6"]{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Footer */
.dm-footer{
  padding: 16px 0;
  border-top: 1px solid var(--dm-border);
  background: var(--dm-surface);
  flex: none;
  margin-top: auto;
}
.dm-footer__inner{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 36px; /* = altezza avatar in .sb-sidenav-footer, stesso padding 16px: footer allineati */
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ============================================================
   Card sub-parts — sostituiscono .card-body/.card-footer di Bootstrap
   dentro .dm-card (evita di mescolare due sistemi di componenti).
   ============================================================ */
.dm-card-body{ padding: 20px; }
.dm-card-footer{
  padding: 16px 20px;
  border-top: 1px solid var(--dm-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  flex-wrap: wrap;
}

/* Tabella a tutta larghezza della card (full-card): il .table-responsive
   perde il padding così la tabella arriva a filo bordo della card, mentre
   il padding orizzontale (20px) viene spostato sulle celle per allineare
   il contenuto con l'header/toolbar della card. */
.dm-card > .table-responsive{
  padding: 0;
}
.dm-card > .table-responsive > .table,
.dm-card > .table-responsive .datatable-wrapper > .table{
  margin-bottom: 0;
}
.dm-card > .table-responsive > .table > :not(caption) > * > *,
.dm-card > .table-responsive .datatable-wrapper > .table > :not(caption) > * > *{
  padding: 12px 20px;
}

/* Switch su checkbox nativo — stesso look di .dm-switch ma invia il valore
   con il form (il .dm-switch a button non e' un campo). */
.dm-switch-check{
  appearance: none; -webkit-appearance: none; margin: 0;
  position: relative; width: 48px; height: 28px; flex: none;
  border-radius: 999px; background: var(--dm-track);
  border: none; cursor: pointer; transition: background .15s;
}
.dm-switch-check::after{
  content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px;
  background: var(--dm-switch-thumb); border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .15s;
}
.dm-switch-check:checked{ background: var(--dm-primary); }
.dm-switch-check:checked::after{ transform: translateX(20px); }
.dm-switch-check.dm-switch-danger:checked{ background: var(--dm-danger); }

/* Riga "toggle" incorniciata usata nei form notizia */
.dm-toggle-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 8px 14px; min-height: 44px;
  border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md);
  background: var(--dm-surface); cursor: pointer;
}
.dm-toggle-row--danger{ border-color: var(--dm-danger-border); background: var(--dm-red-50); }
.dm-toggle-row--danger .dm-toggle-label{ color: var(--dm-red-700); }
.dm-toggle-label{ font-size: .875rem; font-weight: 500; }

/* ============================================================
   Form a sezioni — raggruppa i campi in blocchi leggibili
   ============================================================ */
.dm-form-section{ margin-bottom: 1.5rem; }
.dm-form-section:last-child{ margin-bottom: 0; }
.dm-form-section__title{
  display: flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--dm-text-muted); margin-bottom: .75rem;
}
.dm-form-section__title::after{
  content: ""; flex: 1; height: 1px; background: var(--dm-border);
}

/* Contatore caratteri per i campi con maxlength */
.dm-field-counter{
  margin-top: .25rem; display: flex; justify-content: flex-end;
  font-size: .72rem; color: var(--dm-text-muted);
  font-variant-numeric: tabular-nums;
}
.dm-field-counter.is-max{ color: var(--dm-danger); font-weight: 600; }

/* Area upload immagine — dropzone leggera e accessibile */
.dm-file-drop{
  position: relative; display: block; overflow: hidden;
  border: 1.5px dashed var(--dm-border); border-radius: var(--dm-radius-lg);
  background: var(--dm-bg); padding: 1.5rem 1.25rem; text-align: center;
  transition: border-color .15s, background .15s;
}
.dm-file-drop:hover{ border-color: var(--dm-primary); }
.dm-file-drop__input{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dm-file-drop__icon{ font-size: 1.5rem; color: var(--dm-text-muted); margin-bottom: .25rem; }
.dm-file-drop__browse{ color: var(--dm-primary); font-weight: 600; }

/* Barra azioni della card (Monitoraggio): superficie infossata sotto
   l'header. Prima era uno style="background:var(--dm-surface-2)" inline. */
.dm-card-actions{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  /* 20px orizzontali = stesso incolonnamento di .dm-card-header e
     .dm-card-body: i bottoni si allineano al titolo della card. */
  padding: 10px 20px;
  background: var(--dm-surface-2);
  border-bottom: 1px solid var(--dm-border);
}

/* Card con bordo di allerta (es. KPI "Emergenza" con conteggio > 0).
   Come classe e non inline: cosi' l'hover di .dm-card-hoverable puo'
   ancora tingere il bordo, che uno style="" inline bloccherebbe. */
.dm-card--alert{ border-color: var(--dm-danger-border); }

/* Contenitore a altezza fissa per i canvas Chart.js (responsive:true +
   maintainAspectRatio:false richiedono un box con altezza esplicita). */
.dm-chart-box{ height: 280px; }

/* Riquadro a scorrimento verticale (liste lunghe dentro una card) */
.dm-scroll-y{ max-height: 320px; overflow-y: auto; }

/* Riga di elenco compatta dentro una card (es. stato display in Dashboard).
   Sostituisce `p-2 rounded border` di Bootstrap, che usava il radius 8px del
   framework invece dei 6px del token. */
.dm-list-row{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; min-height: 44px;
  border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md);
  background: var(--dm-surface);
}

/* Textarea "comando": monospace, corpo ridotto, non ridimensionabile —
   il contenuto e' generato, non digitato dall'utente. */
textarea.dm-input-code{
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .82rem; resize: none;
}

/* Utility — evitano gli style="" inline nelle view */
.dm-eyebrow{
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--dm-text-muted);
}
.dm-tap-target{ min-width: 44px; min-height: 44px; }
.dm-tight{ letter-spacing: -.02em; }
.dm-dot{ font-size: .5rem; }
.dm-text-danger{ color: var(--dm-danger); }
/* La topnav e' `position: fixed` alta 60px (admin-layout.css): con top:1rem
   l'anteprima sticky finiva sotto la barra durante lo scroll. */
.dm-sticky-aside{ position: sticky; top: calc(60px + 1rem); }
.dm-avatar-sm{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--dm-slate-100); border: 1px solid var(--dm-border);
  /* slate-700 e non text-muted: su slate-100 il muted resta a 4.34:1 */
  color: var(--dm-slate-700);
}
.dm-min-w-0{ min-width: 0; }
.dm-col-id{ width: 48px; }
.dm-col-actions{ width: 48px; }
.dm-thumb{
  max-height: 180px; border-radius: var(--dm-radius-lg); border: 1px solid var(--dm-border);
}

/* Lista notizie — anteprima e celle ottimizzate */
.dm-col-thumb{ width: 64px; }
.dm-thumb-sm{
  width: 48px; height: 48px; object-fit: cover; flex: none;
  border-radius: var(--dm-radius-md); border: 1px solid var(--dm-border);
  background: var(--dm-slate-100);
}
.dm-thumb-ph{
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: var(--dm-radius-md); border: 1px solid var(--dm-border);
  background: var(--dm-slate-100); color: var(--dm-text-muted); font-size: 1.1rem;
}
.dm-title-cell{ max-width: 340px; }

/* Anteprima live del totem (form notizia) */
.dm-preview{
  background: var(--dm-surface); border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-lg); padding: 1.25rem; text-align: center;
}
.dm-preview-img{ max-width: 100%; max-height: 140px; border-radius: var(--dm-radius-md); margin-bottom: .75rem; }

/* Login — bg-slate-50, card border, accento superiore a sfumatura di marca */
.dm-login-bg{ background: var(--dm-bg); min-height: 100vh; }
.dm-login-card{
  position: relative;
  background: var(--dm-surface); border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-lg); box-shadow: var(--dm-shadow-2xl); overflow: hidden;
}
.dm-login-card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--dm-primary);
}
.dm-pw-toggle{
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: none; color: var(--dm-text-muted); cursor: pointer;
}
.dm-pw-toggle:hover{ color: var(--dm-text); }

/* ============================================================
   Display pubblico (totem) — Minimal Swiss, bianco flat.
   Sostituisce Display_style.css + gli <style> inline della view.
   ============================================================ */
.dm-display{
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--dm-bg); color: var(--dm-text);
  overflow: hidden;   /* nessuno scrollbar sul totem */
}
.dm-display-header{
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 0 24px;
  background: var(--dm-surface); border-bottom: 1px solid var(--dm-border);
}
.dm-display-title{
  margin: 0; font-size: 1rem; font-weight: 600;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--dm-text);
}
.dm-display-main{ flex: 1 0 auto; padding: 48px 32px; }
.dm-display-clock{ text-align: center; margin-bottom: 48px; }
.dm-display-date{ margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--dm-text-muted); }
.dm-display-time{
  margin: .5rem 0 0; font-size: clamp(3rem, 12vw, 6rem); font-weight: 700;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}

/* Rotazione notizie — solo una visibile per volta */
.dm-news{ text-align: center; }
/* Due classi: .is-shown mette l'elemento in flusso, .is-active fa il fade.
   Servono separate perche' una transizione non parte nello stesso frame in
   cui l'elemento passa da display:none a display:block. */
.dm-news-item{ display: none; opacity: 0; transition: opacity .4s ease; }
.dm-news-item.is-shown{ display: block; }
.dm-news-item.is-active{ opacity: 1; }
.dm-news-item h2{
  font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 700;
  letter-spacing: -.02em; margin: 0 auto .5rem; max-width: 70ch;
}
.dm-news-item p{
  font-size: clamp(1.1rem, 2.5vw, 1.75rem); color: var(--dm-text-muted);
  margin: 0 auto 1.5rem; max-width: 60ch;
}
.dm-news-media{
  display: block; margin: 0 auto;
  max-width: calc(100% - 48px); max-height: 60vh; height: auto;
  border-radius: var(--dm-radius-lg); border: 1px solid var(--dm-border);
}
.dm-news-empty{ text-align: center; color: var(--dm-text-muted); font-size: 1.25rem; }

/* Widget meteo — flat, bordo 1px, niente blur */
.dm-meteo{
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000;
  background: var(--dm-surface); border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-lg); padding: 1rem;
  color: var(--dm-text); min-width: 180px; max-width: 220px; box-shadow: none;
}
.dm-meteo-city{
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dm-text-muted); margin-bottom: .25rem;
}
.dm-meteo-main{ display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.dm-meteo-icon{ display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; color: var(--dm-primary); }
.dm-meteo-icon svg{ width: 100%; height: 100%; }
.dm-meteo-temp{ font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dm-meteo-desc{ font-size: .8rem; color: var(--dm-text-muted); margin-bottom: .5rem; }
.dm-meteo-details{
  display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .5rem;
  font-size: .75rem; color: var(--dm-text-muted);
  border-top: 1px solid var(--dm-border); padding-top: .5rem; margin-top: .25rem;
}
.dm-meteo-details span{ display: flex; align-items: center; gap: .25rem; }
.dm-meteo-details i{ font-size: .85rem; color: var(--dm-text-muted); }

/* Banner emergenza — override a schermo intero */
.dm-emergency{
  position: fixed; inset: 0; z-index: 9999; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px; background: var(--dm-red-700); color: #fff;
}
.dm-emergency.is-visible{ display: flex; }
.dm-emergency h2{
  margin: 1rem 0 0; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.75rem, 5vw, 3rem); letter-spacing: -.02em;
}
.dm-emergency p{ margin: .75rem 0 0; font-size: clamp(1rem, 2.5vw, 1.5rem); max-width: 60ch; }
.dm-emergency-icon{ font-size: 3.5rem; line-height: 1; }
@keyframes dm-pulse{ 0%,100%{ opacity: 1 } 50%{ opacity: .55 } }
.dm-alarm{ animation: dm-pulse 1.4s ease-in-out infinite; }

/* ============================================================================
   Totem Full HD (1920x1080) e superiori — riempimento ottimale dello schermo.
   Le dimensioni sono tarate per stare in 1080px di altezza (header + clock +
   notizia) senza scrollbar; l'immagine mantiene le proporzioni (contain).
   ============================================================================ */
@media (min-width: 1600px) and (min-height: 900px){
  .dm-display-header{ min-height: 88px; padding: 0 48px; }
  .dm-display-title{ font-size: 1.5rem; }

  .dm-display-main{ padding: 56px 64px; }
  .dm-display-clock{ margin-bottom: 48px; }
  .dm-display-date{ font-size: 2rem; }
  .dm-display-time{ font-size: clamp(4.5rem, 8vw, 7rem); }

  .dm-news-item h2{ font-size: clamp(2.5rem, 4.5vw, 4rem); max-width: 70ch; margin: 0 auto 1rem; }
  .dm-news-item p{ font-size: clamp(1.3rem, 2.2vw, 2rem); max-width: 70ch; margin: 0 auto 1.75rem; }
  .dm-news-media{
    display: block; max-height: 50vh; max-width: 1200px; width: auto;
    margin: 0 auto; object-fit: contain;
  }

  .dm-meteo{ bottom: 2rem; right: 2rem; padding: 1.25rem; min-width: 220px; max-width: 260px; }
  .dm-meteo-temp{ font-size: 2.5rem; }
}

@media (max-width: 767.98px){
  .dm-meteo{ bottom: 1rem; right: 1rem; padding: .75rem; min-width: 150px; }
  .dm-display-main{ padding: 32px 20px; }
}

/* ============================================================
   Monitoraggio — stili specifici della pagina display status
   ============================================================ */

/* Accent bar colorata in cima alla card (indica stato a colpo d'occhio) */
.dm-card--online,
.dm-card--offline {
  position: relative;
  overflow: hidden; /* già su .dm-card, per sicurezza */
}
.dm-card--online::before,
.dm-card--offline::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--dm-radius-lg) var(--dm-radius-lg) 0 0;
}
.dm-card--online::before  { background: var(--dm-success); }
.dm-card--offline::before { background: var(--dm-border); }

/* Bordo sinistro colorato per la card (complementare all'accent bar) */
.dm-card--online  { border-left: 3px solid var(--dm-success) !important; }
.dm-card--offline { border-left: 3px solid var(--dm-border) !important; }

/* Progress bar semantica — sovrascrive le classi di Bootstrap .progress-bar */
.dm-bar-wrap {
  height: 5px;
  border-radius: 999px;
  background: var(--dm-track);
  overflow: hidden;
}
.dm-bar {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
  background: var(--dm-success);
}
.dm-bar--warn  { background: var(--dm-warning); }
.dm-bar--crit  { background: var(--dm-danger); }

/* Riga metrica compatta (label + valore + barra) */
.dm-metric-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: .6rem;
}
.dm-metric-row:last-child { margin-bottom: 0; }
.dm-metric-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
}
.dm-metric-label-name { color: var(--dm-text-muted); }
.dm-metric-label-val  { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Valore critico evidenziato */
.dm-metric-label-val--warn { color: var(--dm-warning-text); }
.dm-metric-label-val--crit { color: var(--dm-danger); }

/* Stat pill nell'header monitoraggio (online / offline count) — stessa
   altezza di .dm-btn-sm (36px): nella toolbar stanno sulla stessa riga
   di bottoni e Timbro, devono avere lo stesso ingombro verticale. */
.dm-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--dm-border);
  background: var(--dm-surface);
  color: var(--dm-text-muted);
}
/* green-600 su green-50 leggeva 3.2:1: sotto il minimo per testo piccolo
   in grassetto. Stessa coppia -50/-700 gia' usata dai badge. */
.dm-stat-pill--online  { border-color: var(--dm-green-500); color: var(--dm-green-700); background: var(--dm-green-50); }
.dm-stat-pill--offline { border-color: var(--dm-border); color: var(--dm-text-muted); background: var(--dm-surface); }

/* Mini progress bar inline nella vista lista */
.dm-bar-inline-wrap {
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--dm-track);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}
.dm-bar-inline {
  height: 100%;
  border-radius: 999px;
  background: var(--dm-success);
  transition: width .4s ease;
}
.dm-bar-inline--warn { background: var(--dm-warning); }
.dm-bar-inline--crit { background: var(--dm-danger); }

/* Countdown eliminazione — pill amber compatta */
.dm-countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--dm-amber-50);
  color: var(--dm-amber-700);
  border: 1px solid var(--dm-amber-300);
}

/* Animazione entrata card al caricamento */
@keyframes dm-fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dm-card-anim {
  animation: dm-fadeInUp .3s ease both;
}
/* Delay a cascata sulle prime card (max 6) */
.dm-card-anim:nth-child(1) { animation-delay: .04s; }
.dm-card-anim:nth-child(2) { animation-delay: .08s; }
.dm-card-anim:nth-child(3) { animation-delay: .12s; }
.dm-card-anim:nth-child(4) { animation-delay: .16s; }
.dm-card-anim:nth-child(5) { animation-delay: .20s; }
.dm-card-anim:nth-child(6) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .dm-card-anim { animation: none !important; }
}

/* Empty state monitoraggio */
.dm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--dm-text-muted);
}
.dm-empty-state__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: .45;
}
.dm-empty-state__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dm-text);
  margin-bottom: .5rem;
}
.dm-empty-state__steps {
  list-style: none;
  padding: 0; margin: .75rem 0 0;
  display: flex; flex-direction: column; gap: .5rem;
  text-align: left; max-width: 340px;
}
.dm-empty-state__steps li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .875rem;
}
.dm-empty-state__step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  border-radius: 999px; background: var(--dm-brand-50);
  color: var(--dm-primary); font-size: .7rem; font-weight: 700;
  margin-top: 1px;
}

/* Dark mode overrides — monitoraggio */
[data-bs-theme="dark"] .dm-stat-pill--online  { background: rgba(34,197,94,.16); border-color: var(--dm-success); color: var(--dm-success); }
[data-bs-theme="dark"] .dm-stat-pill--offline { background: rgba(168,158,140,.08); border-color: var(--dm-border); }
[data-bs-theme="dark"] .dm-countdown-pill     { background: var(--dm-amber-50); border-color: rgba(245,158,11,.4); color: var(--dm-warning); }
[data-bs-theme="dark"] .dm-empty-state__step-num { background: var(--dm-brand-50); }
[data-bs-theme="dark"] .dm-card--online  { border-left-color: var(--dm-success) !important; }
[data-bs-theme="dark"] .dm-card--offline { border-left-color: var(--dm-border) !important; }