/* theme.css — Design system additivo Monticello.
 * Si sovrappone a style.css (stesso linguaggio: dark, accento verde).
 * Aggiunge: responsive PWA (smartphone/tablet), badge stato/priorità,
 * tiles contabilità, segmented control, toast. Non riscrive lo stile base.
 */

/* ===== Responsive / PWA shell ===== */
.menu-toggle { display: none; }
.nav-overlay { display: none; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    z-index: 60;
    top: 0; left: 0; bottom: 0;
    width: 84vw; max-width: 320px;
    transform: translateX(-104%);
    transition: transform 0.24s ease;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open { transform: translateX(0); }
  .nav-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.24s ease;
  }
  .nav-overlay.show { opacity: 1; pointer-events: auto; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
  main { padding-bottom: env(safe-area-inset-bottom); }
  .grid.two { grid-template-columns: 1fr !important; }
  .topbar { gap: 10px; }
}

@media (max-width: 560px) {
  .panel-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .panel-head .inline { flex-wrap: wrap; }
  .kpi { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===== Badge stato / priorità ===== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.05); color: var(--text-soft);
  white-space: nowrap;
}
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.tag.prio-bassa     { color: #93c5a0; }
.tag.prio-media     { color: #c9d98a; }
.tag.prio-alta      { color: #ffc774; }
.tag.prio-urgente   { color: #ff9d6b; }
.tag.prio-critica   { color: var(--danger); border-color: rgba(var(--alert-admin-rgb), 0.4); }

.tag.st-aperta,
.tag.st-da.pagare,
.tag.st-da-pagare   { color: #7fd46b; }
.tag.st-in.lavorazione,
.tag.st-in-lavorazione { color: #74c0ff; }
.tag.st-sospesa     { color: #cdb4ff; }
.tag.st-risolta,
.tag.st-completata,
.tag.st-pagato      { color: #93c5a0; }
.tag.st-scaduta,
.tag.st-scaduto     { color: var(--danger); }
.tag.st-archiviata  { color: var(--muted); }

.tag.overdue { color: var(--danger); border-color: rgba(var(--alert-admin-rgb), 0.4); }

/* ===== KPI tile arricchite ===== */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.tile {
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.tile .tile-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0; }
.tile .tile-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 0; color: var(--text); }
.tile .tile-sub { font-size: 12px; color: var(--text-soft); margin: 4px 0 0; }
.tile.good .tile-value { color: var(--primary-strong); }
.tile.warn .tile-value { color: #ffc774; }
.tile.bad .tile-value { color: var(--danger); }

/* ===== Tabelle compatte dei moduli nuovi ===== */
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th, .mini-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.mini-table th { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; position: sticky; top: 0; background: var(--bg-elevated); }
.mini-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.mini-table td.num, .mini-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { max-height: 460px; overflow: auto; border-radius: 12px; border: 1px solid var(--border); }

.row-actions { display: inline-flex; gap: 6px; }
.icon-link { background: transparent; border: 1px solid var(--border); border-radius: 9px; padding: 3px 8px; color: var(--text-soft); cursor: pointer; font-size: 13px; }
.icon-link:hover { color: var(--text); border-color: var(--border-strong); }
.icon-link.danger:hover { color: var(--danger); border-color: rgba(var(--alert-admin-rgb), 0.4); }

/* ===== Segmented control / pill ===== */
.segmented { display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 12px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.segmented button { border: 0; background: transparent; color: var(--text-soft); padding: 6px 12px; border-radius: 9px; font-weight: 600; cursor: pointer; }
.segmented button.active { background: linear-gradient(90deg, rgba(var(--brand-rgb),0.28), rgba(var(--brand-rgb),0.12)); color: #f4fff0; }

.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-soft); }

/* ===== Toast ===== */
#toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 12px 16px; border-radius: 12px; background: var(--panel-strong); border: 1px solid var(--border-strong); box-shadow: var(--shadow); color: var(--text); max-width: 360px; animation: toast-in 0.2s ease; }
.toast.ok { border-left: 4px solid var(--primary); }
.toast.err { border-left: 4px solid var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Role badge in topbar ===== */
.role-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(var(--brand-rgb),0.16); color: var(--primary-strong); border: 1px solid rgba(var(--brand-rgb),0.25); margin-right: 8px; }

/* ===== Login multi-metodo ===== */
.login-brand { border: 0; padding: 0 0 8px; }
.login-methods { margin: 10px 0; width: 100%; }
.login-otp-request { margin-bottom: 8px; gap: 10px; align-items: center; }
.login-error { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 6px; }
.login-pane.hidden { display: none !important; }

/* ===== Helpers ===== */
.muted-sm { font-size: 12px; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hidden { display: none !important; }

/* utility per sostituire stili inline (accessibilità/webhint) */
.inline-wrap { flex-wrap: wrap; gap: 10px; align-items: center; }
.mt-12 { margin-top: 12px; }
.mt-18 { margin-top: 18px; }

/* ============================================================
   MODERN REFRESH — restyle elegante/responsive (overlay su style.css)
   Solo CSS: nessuna modifica a HTML/JS. Le regole qui vincono perché
   theme.css è caricato dopo style.css.
   ============================================================ */
:root {
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.22);
  --shadow-pop: 0 18px 50px rgba(0,0,0,0.40);
  --accent-grad: var(--brand-grad);
}

body {
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Sidebar elegante con barra-accento e micro-movimento ---- */
.sidebar { gap: 16px; padding: 22px 16px; }
.brand .title { font-size: 21px; }
.brand .dot { box-shadow: 0 0 0 6px rgba(var(--brand-rgb),0.10), 0 0 18px rgba(var(--brand-rgb),0.45); }
.sidebar nav { gap: 4px; }
.nav-btn {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px 11px 14px;
  border-radius: 12px;
  font-size: 13.5px; font-weight: 600;
}
.nav-btn::after {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 3px; background: var(--accent-grad);
  transition: height 0.2s ease;
}
.nav-btn.active::after { height: 60%; }
.nav-btn.active {
  background: linear-gradient(90deg, rgba(var(--brand-rgb),0.20), rgba(var(--brand-rgb),0.04));
  color: #f4fff0;
}
.nav-btn:hover { transform: none; }

/* Le icone di navigazione sono ora SVG moderne iniettate via icons.js (span.nav-ic). */

/* ---- Topbar sticky e ariosa ---- */
main { padding: 18px 26px 32px; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  margin: -18px -26px 18px; padding: 12px 26px;
  background: linear-gradient(180deg, rgba(14,20,24,0.92), rgba(14,20,24,0.66));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

/* ---- Card più morbide con sollevamento all'hover ---- */
.card, .kpi .item, .tile {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--border-strong); }
.panel-head h2 { font-size: 22px; letter-spacing: -0.03em; }
.panel-head h2 + .muted, .panel-head .muted { font-size: 12.5px; }

/* ---- KPI tiles: numeri grandi e accento ---- */
.tile .tile-value { font-size: 28px; }
.tile.good { border-color: rgba(var(--brand-rgb),0.28); }
.tile::after { content:""; position:absolute; }

/* ---- Bottoni moderni ---- */
button.primary, .primary {
  background: var(--accent-grad); color: #0c1410; border: 0;
  font-weight: 700; border-radius: 12px; padding: 11px 18px;
  box-shadow: 0 6px 18px rgba(var(--brand-rgb),0.22); cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
button.primary:hover, .primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 24px rgba(var(--brand-rgb),0.30); }
button.primary:active, .primary:active { transform: translateY(0); }
button.ghost, .ghost {
  border-radius: 12px; padding: 9px 14px; font-weight: 600;
  border: 1px solid var(--border-strong); background: rgba(255,255,255,0.04); color: var(--text-soft);
  cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
button.ghost:hover, .ghost:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: rgba(var(--brand-rgb),0.35); }
.icon-btn { border-radius: 10px; }
.icon-btn:hover { background: rgba(255,255,255,0.08); }

/* ---- Input rifiniti ---- */
select, input, textarea { border-radius: 12px !important; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---- Badge stato/priorità: gradiente sottile ---- */
.tag { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }

/* ---- Login elegante ---- */
.login-body {
  display: grid; place-items: center; min-height: 100vh; padding: 20px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(var(--brand-rgb),0.12), transparent 60%),
    linear-gradient(180deg, #151d22, #0e1418);
}
.login-card {
  width: 100%; max-width: 420px; padding: 28px 26px;
  border: 1px solid var(--border); border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)), var(--panel);
  box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.login-card .segmented { width: 100%; justify-content: space-between; }
.login-card .segmented button { flex: 1; }

/* ---- Scrollbar discreta ---- */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(var(--brand-rgb),0.18); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-rgb),0.3); }

/* ============================================================
   RESPONSIVE — smartphone & tablet, mobile-first, touch friendly
   ============================================================ */
@media (max-width: 900px) {
  main { padding: 14px 16px 90px; }
  .topbar { margin: -14px -16px 14px; padding: 10px 16px; }
  .menu-toggle { font-size: 22px; padding: 6px 12px; border-radius: 12px; }
  .nav-btn { padding: 14px 14px; font-size: 15px; }   /* target tattili più grandi */
  .panel-head h2 { font-size: 20px; }
  .card { padding: 14px; border-radius: 16px; }
  /* azioni dei form a tutta larghezza su mobile */
  .form .actions button { flex: 1 1 auto; min-height: 46px; }
  button.primary, button.ghost { min-height: 44px; }
  input[type="search"] { min-width: 0; width: 100%; }
  .panel-head .inline, .panel-head .selectors { width: 100%; }
  .panel-head .inline > *, .selectors > * { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .kpi { grid-template-columns: repeat(2, 1fr) !important; }
  .tile .tile-value { font-size: 22px; }
  .brand .title { font-size: 19px; }
  .modal-content { width: 94vw; max-height: 88vh; overflow:auto; border-radius: 18px; }
}
@media (max-width: 380px) {
  .kpi { grid-template-columns: 1fr !important; }
}

/* Riduce le animazioni se l'utente lo preferisce */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   ICONE A LINEA MONOCROMATICHE (override delle emoji precedenti)
   Tecnica: SVG come 'mask' + background-color: currentColor → l'icona
   eredita il colore del testo (tenue se inattiva, chiara se attiva).
   Stile line/stroke, nessun colore sgargiante.
   ============================================================ */
.nav-btn[data-target]::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; font-size: 0;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
  opacity: 0.78;
  transition: opacity 0.18s ease;
}
.nav-btn:hover::before, .nav-btn.active::before { opacity: 1; }

.nav-btn[data-target="ops-dashboard"], .nav-btn[data-target="user-dashboard"], .nav-btn[data-target="supplier-dashboard"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>"); }
.nav-btn[data-target="ops-segnalazioni"], .nav-btn[data-target="user-segnalazioni"], .nav-btn[data-target="supplier-issues"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>"); }
.nav-btn[data-target="ops-manutenzioni"], .nav-btn[data-target="user-manutenzioni"], .nav-btn[data-target="supplier-maintenances"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-2.4 2.4-2.6z'/></svg>"); }
.nav-btn[data-target="ops-scadenze"], .nav-btn[data-target="user-scadenze"], .nav-btn[data-target="supplier-deadlines"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='16' rx='2'/><path d='M16 2.5v4M8 2.5v4M3 9.5h18'/></svg>"); }
.nav-btn[data-target="ops-documenti"], .nav-btn[data-target="user-documenti"], .nav-btn[data-target="supplier-documents"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/></svg>"); }
.nav-btn[data-target="anagrafica-condomini"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><path d='M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1'/><path d='M16 4a3 3 0 0 1 0 6'/></svg>"); }
.nav-btn[data-target="anagrafica-fornitori"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='1'/><path d='M9 7h2M13 7h2M9 11h2M13 11h2M10 21v-3h4v3'/></svg>"); }
.nav-btn[data-target="anagrafica-immobili"], .nav-btn[data-target="user-immobili"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8'/><path d='M5 10v10h14V10'/></svg>"); }
.nav-btn[data-target="condomini-immobili"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9 5-9 5-9-5 9-5z'/><path d='M3 13l9 5 9-5'/></svg>"); }
.nav-btn[data-target="bollette"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/><path d='M9 8h6M9 12h6'/></svg>"); }
.nav-btn[data-target="consumi"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h4l3 8 4-16 3 8h4'/></svg>"); }
.nav-btn[data-target="calcoli"], .nav-btn[data-target="user-calcoli"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><path d='M8 7h8M8 11h2M11 11h2M14 11h2M8 15h2M11 15h2M14 15h2'/></svg>"); }
.nav-btn[data-target="contabilita"], .nav-btn[data-target="user-contabilita"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 10h18'/></svg>"); }
.nav-btn[data-target="log"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>"); }
.nav-btn[data-target="device-reset"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v8'/><path d='M6.5 6.5a8 8 0 1 0 11 0'/></svg>"); }
.nav-btn[data-target="audit-log"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/></svg>"); }
.nav-btn[data-target="impostazioni"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1.5 14h5M9.5 8h5M17.5 16h5'/></svg>"); }
.nav-btn[data-target="supplier-profile"] { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/></svg>"); }

/* Dimensione di default delle icone inline (window.icon → .ic-svg) nell'area admin:
   senza questa regola l'SVG (viewBox, no width/height) è privo di dimensione e appare
   come un'"ombra" (es. icona grafico nelle righe del calcolo consumi). */
.ic-svg { width: 18px; height: 18px; display: inline-block; vertical-align: middle; flex: none; }
.icon-btn .ic-svg { width: 18px; height: 18px; }

/* ===== Sidebar admin: logo brand + icone moderne nelle voci di menu ===== */
.sidebar .brand .side-logo { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex: none; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.nav-btn { display: flex; align-items: center; gap: 10px; }
.nav-btn .nav-ic { display: inline-flex; flex: none; color: currentColor; opacity: .85; }
.nav-btn .nav-ic .ic-svg { width: 18px; height: 18px; }
.nav-btn.active .nav-ic { opacity: 1; }

/* ============================= Modali: footer azioni SEMPRE visibile ============================= */
.modal-content { display: flex; flex-direction: column; max-height: 90vh; }
.modal-content > * { flex: 0 0 auto; }
.modal-content > .modal-body,
.modal-content > .file-list,
.modal-content > .trend-grid { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal-content > .actions,
.modal-content > .modal-actions { flex: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ============================= Chat (admin) ============================= */
.nav-chat-badge, .bell-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 800;
  display: inline-grid; place-items: center; margin-left: 8px;
}
.bell-btn { position: relative; }
.bell-badge { position: absolute; top: -2px; right: -2px; border: 2px solid var(--bg); margin: 0; }
.chat-list { display: flex; flex-direction: column; }
.chat-thread-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 10px; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text); cursor: pointer; border-radius: 10px;
}
.chat-thread-row:hover { background: rgba(255, 255, 255, 0.04); }
.chat-thread-row .cti { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-soft); color: var(--primary); flex: none; }
.chat-thread-row .cti svg { width: 18px; height: 18px; }
.chat-thread-row .ctx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-thread-row .ctt { font-weight: 700; }
.chat-thread-row .cts { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-row .ctm { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.chat-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.chat-conv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.admin-chat-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 6px 2px; }
.admin-chat-msgs .bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.admin-chat-msgs .bubble.them { align-self: flex-start; background: var(--bg-soft); border-bottom-left-radius: 5px; }
.admin-chat-msgs .bubble.me { align-self: flex-end; background: linear-gradient(135deg, var(--primary), var(--primary-strong)); color: #fff; border-bottom-right-radius: 5px; }
.admin-chat-msgs .bname { font-size: 11px; font-weight: 800; opacity: .8; margin-bottom: 2px; }
.admin-chat-msgs .btime { font-size: 10px; opacity: .7; text-align: right; margin-top: 3px; }
.admin-compose { display: flex; gap: 10px; margin-top: 12px; }
.admin-compose input { flex: 1; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); padding: 0 14px; }
.admin-compose input:focus { outline: none; border-color: var(--primary); }