/* =============================================================================
   VANUTECH SUPPORT PLATFORM — card "Monitoraggio" (installer) — STYLE asse F3
   C2-H.2 / F3 micro-ciclo #2 (shared-component monitoring.js).
   -----------------------------------------------------------------------------
   Estrae i 73 inline style= di public/js/monitoring.js in classi namespace
   .mon-* (esterne → F4-safe: nessun inline, nessun <style>). Riusa le classi
   condivise di style.css dove identiche (.card/.card-header/.card-body/.btn/
   .badge/.detail-grid/.table-wrapper/.mon-grid/.mon-card/.mon-sev-*); qui
   stanno SOLO i delta. Parità by-construction: 1 classe = 1 decl-set identico
   all'inline che sostituisce. Valori dinamici (stato barra/dot) → modifier-class
   enum; larghezza barra → dot-property post-inject (non in questo file).
   Blast-radius: solo installer (unica pagina che linka questo file).
   Caricato DOPO style.css → eredita le CSS custom properties (--text, --bg, …).
   — Ettore
   ============================================================================= */

/* ----- stati vuoti / degrado (su .card) ----- */
.mon-state        { text-align:center; padding:48px 24px; }
.mon-state-emoji  { font-size:48px; margin-bottom:12px; }
.mon-state-h      { font-size:18px; font-weight:700; margin-bottom:8px; }
.mon-state-p      { color:var(--text-light); max-width:520px; margin:0 auto; }
.mon-state-p2     { color:var(--text-light); margin-bottom:18px; }

/* ----- banner degradato / inline temp / spinner (su .card dove indicato) ----- */
.mon-banner       { border-left:4px solid var(--warning); background:var(--warning-bg); padding:12px 16px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.mon-banner-emoji { font-size:18px; }
.mon-banner-txt   { font-size:13px; color:var(--text); }
.mon-inline-temp  { padding:16px; text-align:center; color:var(--text-secondary); }
.mon-spinner-box  { text-align:center; padding:48px; color:var(--text-light); }
.mon-mt-12        { margin-top:12px; }

/* ----- spaziatura sezioni dashboard ----- */
.mon-section      { margin-top:20px; }

/* ----- card-header: delta sopra la base .card-header (display:flex già nella base) ----- */
.mon-hd-wrap      { flex-wrap:wrap; gap:10px; }
.mon-hd-wrap-8    { flex-wrap:wrap; gap:8px; }
.mon-accordion-hd { cursor:pointer; }

/* ----- titoli ----- */
.mon-h2           { font-size:18px; font-weight:700; margin:0; }
.mon-h3           { font-size:16px; font-weight:700; margin:0; }

/* ----- HERO / quota ----- */
.mon-badge-tier   { background:var(--primary-bg); color:var(--primary); font-weight:700; }
.mon-quota-txt    { font-size:14px; color:var(--text-secondary); }
.mon-bar          { height:8px; background:var(--bg); border-radius:6px; overflow:hidden; margin-top:8px; max-width:360px; }
.mon-bar-fill     { height:100%; width:0; }                 /* width reale via dot-property post-inject (F4-safe) */
.mon-bar--ok      { background:var(--primary); }
.mon-bar--near    { background:var(--warning); }
.mon-bar--over    { background:var(--danger); }
.mon-upsell       { margin-top:12px; padding:10px 14px; border-radius:8px; background:var(--warning-bg); border:1px solid var(--warning); color:var(--text); font-size:13px; }
.mon-floor        { margin-top:12px; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--success); font-weight:600; }

/* ----- AVVISI ----- */
.mon-badge-row    { display:flex; gap:6px; flex-wrap:wrap; }
.mon-empty        { text-align:center; padding:28px; color:var(--text-light); }
.mon-empty-emoji  { font-size:32px; margin-bottom:8px; }
.mon-badge-danger { background:var(--danger-bg); color:var(--danger); }
.mon-cell-time    { white-space:nowrap; font-size:12px; color:var(--text-light); }

/* ----- GRIGLIA IMPIANTI (card interna .mon-card) ----- */
.mon-card-top     { display:flex; justify-content:space-between; align-items:start; gap:8px; }
.mon-min0         { min-width:0; }
.mon-card-title   { font-size:15px; font-weight:700; margin:0 0 4px; }
.mon-card-sub     { font-size:12px; color:var(--text-light); }
.mon-conn-row     { margin-top:10px; display:flex; align-items:center; gap:6px; font-size:13px; }
.mon-dot          { width:9px; height:9px; border-radius:50%; display:inline-block; }
.mon-dot--online  { background:var(--success); }
.mon-dot--offline { background:var(--danger); }
.mon-dot--never   { background:var(--text-light); }
.mon-btn-full     { margin-top:12px; width:100%; }

/* ----- ACCORDION (caret; il body usa dot-property display, no classe) ----- */
.mon-caret        { color:var(--text-light); }

/* ----- STORICO / REGOLE ----- */
.mon-note         { font-size:12px; color:var(--text-light); padding:0 16px 10px; }
.mon-empty-sm     { text-align:center; padding:24px; color:var(--text-light); }
.mon-row-resolved { opacity:.6; }
.mon-cell-sm      { font-size:12px; }
.mon-cell-13      { font-size:13px; }
.mon-badge-off    { background:var(--bg); color:var(--text-light); }

/* ----- DESTINATARI ----- */
.mon-text-light   { color:var(--text-light); }
.mon-hint         { font-size:12px; color:var(--text-light); margin-bottom:10px; }
/* nota: .detail-grid + .detail-grid .label/.value sono CONDIVISI (style.css),
   identici agli inline rimossi + collasso mobile @media(max-width:768px) già
   presente → nessuna .mon-detail-grid, nessun breakpoint divergente. */

/* ----- DRILL-DOWN ----- */
.mon-ml-8         { margin-left:8px; }
.mon-drill-card   { margin-top:20px; border:1px solid var(--primary); }