/* ═══════════════════════════════════════════════════════════════
   Hubuno v0.7 — Combined Style Sheet
   Hubuno Dashboard Layout + Existing Component Styles
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   DESIGN TOKENS — Figma dev esatti + WCAG
   Orange #c78d35 → #d09640 (4.52:1 su #242731 ✓)
   Red #fa4547 (Figma) → #f06060: 4.64:1 su #242731 PASS AA ✓
   Blue #379bff → 4.6:1 ✓ tenuto
   Green #67cf73 → 4.5:1 ✓ tenuto
   ════════════════════════════════════════════ */
:root {
  --bg-base:       #0f1012;
  --bg-surface:    #1a1b1f;
  --bg-main:       #1a1b1f;
  --bg-card:       #242731;
  --bg-dev-icon:   #1c1d23;
  --bg-cta:        #31354b;
  --bg-hover:      #2a2d3a;
  --bg-ip:         #1a1b1f;
  --bg-type:       #1a1b1f;
  --bg-filter-off: #1a1c21;
  --bg-progress:   #191d28;
  --bg-icon:       #36394a;

  --border-strong: #454a60;
  --border-mid:    #3a3d4d;
  --border-subtle: #1c2029;
  --border-faint:  #191d28;
  --border-sidebar:#292c36;

  --text-primary:  #ffffff;
  --text-secondary:#a8acc3;
  --text-nav:      #6a6e81;
  --text-vendor:   #838e9d;
  --text-label:    #7f85a5;
  --text-timestamp:#7f84a3;
  --text-th:       #898989;

  --green:   #67cf73;
  --green-bg:rgba(103,207,115,0.10);
  --orange:  #d09640;
  --orange-bg:rgba(208,150,64,0.10);
  --red:     #f06060;   /* WCAG AA: 4.64:1 su #242731, 5.36:1 su #1a1b1f */
  --red-bg:  #2c2121;
  --blue:    #379bff;
  --blue-bg: rgba(55,155,255,0.08);
  --blue-act:#1777d7;
  --yellow:  #d4a04a;
  --yellow-bg: rgba(212,160,74,0.10);
  --sky:     #7ab8e0;
  --sky-bg:  rgba(122,184,224,0.10);

  --sidebar-w: 197px;
  --topbar-h:  78px;

  /* ── Semantic aliases (for JS compatibility) ── */
  --success: var(--green);
  --success-bg: var(--green-bg);
  --warning: var(--orange);
  --warning-bg: rgba(208,150,64,0.10);
  --danger: var(--red);
  --danger-bg: var(--red-bg);
  --border-color: var(--border-mid);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100vh; background: var(--bg-base); font-family: 'Inter', sans-serif; color: var(--text-primary); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
button { font-family: 'Inter', sans-serif; cursor: pointer; }
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; display: block; }

/* ─── LAYOUT ─── */
.layout { display: flex; min-height: 100vh; }

/* ══════════════════════════════════════════
   SIDEBAR — 197px esatto Figma
   ══════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w); height: 100vh;
  background: var(--bg-surface);
  box-shadow: 4px 4px 2px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  padding: 12px 0 24px; flex-shrink: 0; z-index: 100; position: sticky; top: 0;
}
.sidebar__brand {
  display: flex; flex-direction: column; align-items: center;
  padding: 1px 16px 15px;
  border-bottom: 1px solid var(--border-sidebar); margin-bottom: 0;
}
.sidebar__brand-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--blue-act); flex-shrink: 0; }
.sidebar__brand-icon .icon { width: 40px; height: 40px; }
.sidebar__brand-logo { width: 100%; display: flex; align-items: center; justify-content: center; }
.sidebar__brand-logo-img { height: 36px; width: auto; max-width: 160px; }
.sidebar__brand-text { display: flex; flex-direction: column; line-height: 1; }
/* Montserrat SOLO per il logo */
.sidebar__brand-name { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.sidebar__brand-version { font-size: 11px; line-height: 11px; color: var(--text-label); margin-top: 2px; text-align: right; width: 100%; padding-right: 2px; }

.sidebar__nav { display: flex; flex-direction: column; padding-top: 14px; }
.sidebar__section { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 16px; }
.sidebar__section--last { border-bottom: none; margin-bottom: 0; }
.sidebar__section-label { font-size: 10px; font-weight: 500; color: var(--text-label); letter-spacing: .05em; text-transform: uppercase; }
.sidebar__section-items { display: flex; flex-direction: column; gap: 2px; }

.nav-item { display: flex; align-items: center; padding: 0 12px; height: 37px; border-radius: 5px; gap: 9px; transition: background .13s; cursor: pointer; }
.nav-item--active { background: var(--bg-card); }
.nav-item--active .nav-item__label { color: var(--text-primary); }
.nav-item--active .nav-item__icon  { color: var(--text-primary); }
.nav-item--inactive:hover { background: rgba(255,255,255,.04); }
.nav-item--inactive:focus-visible { outline: 2px solid var(--blue-act); outline-offset: -2px; border-radius: 5px; }
.nav-item__icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-nav); }
.nav-item__label { font-size: 14px; font-weight: 500; color: var(--text-nav); white-space: nowrap; flex: 1; }
.nav-item__row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-item__left { display: flex; align-items: center; gap: 8px; }

.nav-badge { height: 17px; min-width: 26px; padding: 0 5px; border-radius: 100px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; }
.nav-badge--default { background: var(--bg-card); color: var(--text-secondary); }
.nav-badge--red     { background: var(--red-bg); color: var(--red); }
.nav-badge--orange  { background: var(--orange-bg); color: var(--orange); }

.sidebar__footer { margin-top: auto; padding: 0 14px; }
.sidebar__copyright { font-size: 10px; font-weight: 300; color: var(--text-secondary); line-height: 1.5; }

/* ══════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════ */
.main-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h); background: var(--bg-surface);
  border-bottom: 1px solid var(--border-faint);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; flex-shrink: 0; position: sticky; top: 0; z-index: 50;
}
.topbar__left { display: flex; flex-direction: column; gap: 5px; }
.topbar__title { font-size: 22px; font-weight: 500; display: inline-flex; align-items: center; }
.topbar__sub { display: flex; align-items: center; gap: 24px; }
.topbar__network { font-size: 12px; font-weight: 300; color: var(--text-secondary); }
.topbar__status { display: flex; align-items: center; gap: 5px; }
.topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; aspect-ratio: 1; animation: blink 2.5s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.topbar__status-text { font-size: 12px; font-weight: 300; color: var(--text-secondary); }

.topbar__right { display: flex; align-items: center; gap: 13px; }
.topbar__search {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border-radius: 8px;
  width: 302px; height: 44px; padding: 0 14px;
  border: 1px solid transparent; transition: border-color .15s; cursor: text;
}
.topbar__search:focus-within { border-color: var(--border-mid); }
.topbar__search .icon { width: 16px; height: 16px; color: var(--text-secondary); flex-shrink: 0; }
.topbar__search input { flex: 1; background: none; border: none; outline: none; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.topbar__search input::placeholder { color: var(--text-secondary); }

/* Search suggestions dropdown (Zalando-style) */
.search-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 0 0 8px 8px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 2000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.search-suggestions.open { display: block; }
.search-suggestions .sug-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background .1s;
}
.search-suggestions .sug-item:hover,
.search-suggestions .sug-item.highlighted {
  background: var(--bg-cta);
  color: var(--text-primary);
}
.search-suggestions .sug-item .sug-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--text-nav);
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-suggestions .sug-item .sug-label { flex: 1; }
.search-suggestions .sug-item .sug-type {
  font-size: 11px;
  color: var(--text-label);
  margin-left: auto;
  flex-shrink: 0;
}

/* Search clear button (X) */
.search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  aspect-ratio: 1;
  cursor: pointer;
  color: var(--text-nav);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.search-clear:hover {
  background: var(--bg-cta);
  color: var(--text-primary);
}

.topbar__search { position: relative; }

.topbar__scan {
  background: var(--blue-act); border-radius: 8px;
  height: 44px; width: 165px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: none; transition: background .15s, transform .1s;
}
.topbar__scan:hover { background: #1360b5; }
.topbar__scan:active { transform: scale(.98); }
.topbar__scan:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.topbar__scan .icon { width: 15px; height: 15px; color: #fff; }
.topbar__scan span { font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scan progress modal ── */
.progress-bar-container { width: 100%; height: 6px; background: var(--bg-progress); border-radius: 100px; overflow: hidden; margin-bottom: 10px; }
.progress-bar { height: 100%; background: var(--blue); border-radius: 100px; transition: width 0.3s ease; width: 0%; }
.scan-console { background: #0d0e10; border-radius: 8px; padding: 12px; max-height: 200px; overflow-y: auto; font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; line-height: 1.6; margin-top: 10px; }
.console-line { padding: 2px 0; color: var(--text-secondary); }
.console-line .line-ts { color: var(--text-nav); margin-right: 8px; user-select: none; }
.console-line.line-info { color: var(--text-secondary); }
.console-line.line-success { color: var(--green); }
.console-line.line-warning { color: var(--orange); }
.console-line.line-error { color: var(--red); }
.scanning-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 6px; }

/* ── Scan summary modal (uses .iot-detail-section from above) ── */

.topbar__alert {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bg-card);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-secondary);
  transition: all .14s;
  flex-shrink: 0;
}
.topbar__alert:hover {
  background: #2d3142;
  border-color: var(--border-mid);
  color: var(--text-primary);
}
.topbar__alert .icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.topbar__alert-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--orange);
  color: #1a1b1f;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; width: 38px; height: 38px; gap: 5px; padding: 0; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 6px; position: relative; z-index: 201; }
.hamburger__line { display: block; width: 18px; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: transform .28s ease, opacity .28s ease; }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════
   PAGE CONTENT
   ══════════════════════════════════════════ */
.page-content { flex: 1; padding: 40px 36px; display: flex; flex-direction: column; gap: 24px; }

/* ══════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════ */
.stats-row { display: flex; gap: 12px; align-items: stretch; width: 100%; }
.stats-divider { width: 1px; min-width: 1px; background: var(--border-subtle); align-self: stretch; flex-shrink: 0; margin: 0 2px; }

.stat-card {
  background: var(--bg-card); border-top: none;
  border-radius: 12px; flex: 1; min-width: 0; height: 110px; padding: 16px 16px 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  position: relative; overflow: hidden;
}
/* Linea top che non tocca gli angoli arrotondati */
.stat-card::before {
  content: ''; position: absolute;
  top: 0; left: 8px; right: 8px; height: 1px;
  background: var(--border-strong);
}
.stat-card--green::before  { background: var(--green); }
.stat-card--red::before    { background: var(--red); }
.stat-card--orange::before { background: var(--orange); }
.stat-card--yellow::before { background: var(--yellow); }
.stat-card--sky::before    { background: var(--sky); }
.stat-card--featured::before { background: var(--orange); }
.stat-card--featured { background: var(--bg-card); }
.sc-hdr { display: flex; align-items: center; justify-content: space-between; }
.sc-hdr-left { display: flex; align-items: center; gap: 6px; }
.sc-icon { width: 24px; height: 24px; background: var(--bg-icon); border-radius: 100px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-icon .icon { width: 14px; height: 14px; }
.sc-label { font-size: 12px; font-weight: 500; color: var(--text-primary); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.sc-badge { height: 17px; min-width: 26px; padding: 0 5px; background: var(--bg-icon); border-radius: 100px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; }
.sc-badge--green  { color: var(--green); }
.sc-badge--gdim   { color: #7efd8d; }
.sc-badge--orange { color: var(--orange); }
.sc-val { font-size: 44px; font-weight: 700; line-height: 1; margin-top: 4px; }
.sc-val--muted  { color: var(--text-secondary); }
.sc-val--red    { color: var(--red); }
.sc-val--green  { color: var(--green); }
.sc-val--orange { color: var(--orange); }
.sc-val--yellow { color: var(--yellow); }
.sc-val--sky    { color: var(--sky); }
.sc-title-group { display: flex; flex-direction: column; gap: 3px; }
.sc-title { font-size: 12px; font-weight: 500; color: var(--text-primary); letter-spacing: .05em; text-transform: uppercase; }

/* ── Stat card small variant ── */
.stat-card--sm { min-height: 90px; padding: 10px 12px; }
.stat-card--sm .sc-val { font-size: 32px; }
.stat-card--sm .sc-hdr { gap: 4px; }
.stat-card--sm .sc-label { font-size: 11px; }

/* ══════════════════════════════════════════
   PANELS ROW
   ══════════════════════════════════════════ */
.panels-row { display: flex; gap: 12px; align-items: flex-start; }

/* ══════════════════════════════════════════
   DEVICES PANEL
   ══════════════════════════════════════════ */
.dp { flex: 1; min-width: 0; background: var(--bg-surface); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }

.dp-hdr {
  display: flex; align-items: center; gap: 20px;
  height: 47px; padding: 0 30px;
  border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.dp-title { font-size: 18px; font-weight: 500; white-space: nowrap; }
.dp-count { background: var(--bg-card); border-radius: 100px; height: 22px; padding: 0 8px; min-width: 40px; display: flex; align-items: center; justify-content: center; }
.dp-count span { font-size: 12px; font-weight: 500; color: var(--text-secondary); }

.dp-filters {
  display: flex; align-items: center; gap: 12px;
  height: 55px; padding: 0 30px;
  border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
  overflow-x: auto;
}
.dp-filters::-webkit-scrollbar { display: none; }

/* ── FILTER TABS (mapped from Figma ftab for current HTML) ── */
.filter-tab {
  display: flex; align-items: center; gap: 3px;
  padding: 8px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 500; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; border: 1px solid transparent; background: none;
  transition: all .14s; flex-shrink: 0;
}
.filter-tab:hover { background-color: var(--bg-card); }
.filter-tab--active { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); }
.filter-tab__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); display: inline-block; flex-shrink: 0; aspect-ratio: 1; }
.filter-tab--inactive .filter-tab__dot { display: none; }
.filter-tab--inactive { background: var(--bg-filter-off); border-color: var(--border-mid); color: var(--text-secondary); }
.filter-tab--inactive:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* ══════════════════════════════════════════
   TABELLA — LAYOUT COLONNE
   Colonna DISPOSITIVO: 290px fissa
   ══════════════════════════════════════════ */
.dp-table { flex: 1; padding: 0 30px 16px; overflow-x: auto; }
.dp-table::-webkit-scrollbar { height: 4px; }
.dp-table::-webkit-scrollbar-track { background: transparent; }
.dp-table::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }

/* Grid: Dispositivo largo, Alert stretto fisso a destra */
.tg {
  display: grid;
  grid-template-columns:
    minmax(220px, 5fr)
    minmax(70px, 1.5fr)
    minmax(60px, 1.2fr)
    minmax(55px, 1.1fr)
    minmax(50px, 1fr)
    minmax(65px, 1.3fr)
    minmax(45px, 0.9fr)
    44px
    36px;
  align-items: center;
}

/* Header */
.th-row { padding: 24px 0 12px; }
.th-cell {
  font-size: 12px; font-weight: 500;
  color: var(--text-th);
  letter-spacing: .05em; text-transform: uppercase;
  padding-right: 8px;
}
.th-cell--sortable { cursor: pointer; user-select: none; transition: color .12s; }
.th-cell--sortable:hover { color: var(--text-primary); }
.sort-arrow { font-size: 11px; color: var(--text-secondary); margin-left: 2px; }
.sort-arrow--asc { color: var(--blue); }
.sort-arrow--desc { color: var(--blue); }
.th-row .th-cell:first-child { padding-left: 16px; }

/* Righe */
.t-rows { display: flex; flex-direction: column; gap: 2px; }

.t-row {
  background: var(--bg-card);
  min-height: 52px;
  border-left: 1px solid transparent;
  cursor: pointer;
  transition: background .13s;
  padding: 12px 0;
}
.t-row:hover { background: #2a2d3a; }
.t-row:focus-visible { outline: 2px solid var(--blue-act); outline-offset: -2px; }

.t-row--vuln { border-left-color: var(--orange); }
.t-row--vuln:hover { background: rgba(208,150,64,.05); }

/* Cella dispositivo */
.dev-cell {
  display: flex; align-items: center; gap: 22px;
  padding: 0 16px;
}
.dev-icon {
  width: 32px; height: 32px; background: var(--bg-dev-icon);
  border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dev-icon .icon { width: 20px; height: 20px; color: var(--text-secondary); }
.dev-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dev-name   { font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-vendor { font-size: 12px; font-weight: 500; color: var(--text-vendor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.t-row.tg > *:not(.dev-cell) { padding-right: 8px; }

/* IP badge */
.ip-badge { background: var(--bg-ip); border-radius: 20px; padding: 8px 12px; display: inline-flex; align-items: center; opacity: .8; }
.ip-badge span { font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 1.2px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Status */
.status-badge { display: inline-flex; align-items: center; gap: 3px; padding: 8px 12px; border-radius: 999px; }
.status-badge--on  { background: var(--green-bg); border: 1px solid var(--green); }
.status-badge--off { background: rgba(83,88,114,.10); border: 1px solid var(--border-mid); }
.status-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; aspect-ratio: 1; }
.status-dot--green { background: var(--green); }
.status-dot--gray  { background: var(--text-nav); }
.status-badge span { font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-badge--on span  { color: var(--green); }
.status-badge--off span { color: var(--text-secondary); }

/* Type badge */
.type-badge { background: var(--bg-type); border-radius: 5px; height: 32px; width: 76px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.type-badge span { font-size: 11px; font-weight: 500; color: var(--text-secondary); }

/* Testo generico cella */
.cell-txt         { font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.cell-txt--orange { color: var(--orange); }

/* Colonna ALERT */
.alert-cell { display: flex; align-items: center; }
.alert-frame-warn {
  width: 47px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.alert-frame-warn .icon { width: 18px; height: 18px; color: var(--orange); }
.alert-frame-ok { width: 47px; height: 20px; display: flex; align-items: center; padding: 6px 8px; }
.alert-frame-ok .icon { width: 18px; height: 18px; color: var(--green); }

/* CTA — FRECCIA INLINE */
.row-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: none; padding: 0;
  color: var(--border-mid);
  opacity: 1;
  transition: color .15s, background .15s, transform .15s;
  flex-shrink: 0;
}
.row-arrow .icon { width: 18px; height: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.row-arrow .icon svg { width: 18px; height: 18px; max-width: 18px; max-height: 18px; }
.t-row.tg > .row-arrow { padding-right: 0; }
.row-arrow:focus-visible {
  outline: 2px solid var(--blue-act); outline-offset: 2px;
  color: var(--blue); background: var(--blue-bg);
}
.t-row:hover .row-arrow {
  color: var(--text-secondary);
  background: rgba(255,255,255,.05);
  transform: translateX(2px);
}
.t-row:hover .row-arrow:hover {
  color: var(--blue);
  background: var(--blue-bg);
  transform: translateX(3px);
}

/* ══════════════════════════════════════════
   RIGHT COLUMN — 294px esatto Figma
   ══════════════════════════════════════════ */
.right-col { display: flex; flex-direction: column; gap: 12px; width: 294px; flex-shrink: 0; }

/* ══════════════════════════════════════════
   VULNERABILITY PANEL
   ══════════════════════════════════════════ */
.vuln-panel { background: var(--bg-card); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; overflow: hidden; }

.panel-hdr { display: flex; align-items: center; gap: 6px; padding: 16px 16px 0; }
.panel-hdr-icon { width: 26px; height: 26px; background: var(--bg-icon); border-radius: 100px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel-hdr-icon .icon { width: 15px; height: 15px; color: var(--text-secondary); }
.panel-hdr-label { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: .04em; text-transform: uppercase; }

.gauge-wrap { border-bottom: 1px solid var(--border-faint); display: flex; flex-direction: column; align-items: center; height: 132px; overflow: hidden; padding-top: 10px; }

.gauge-zones { display: flex; justify-content: space-between; width: 186px; padding: 4px 0 10px; }
.gauge-zones span { font-size: 11px; font-weight: 500; }
.gz-low  { color: var(--green); }
.gz-mid  { color: var(--orange); }
.gz-high { color: var(--red); }

.gauge-val-row { border-bottom: 1px solid var(--border-faint); display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 16px; }
.gauge-num { font-size: 44px; font-weight: 700; color: var(--orange); line-height: 1; }
.gauge-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.gauge-meta-count { font-size: 13px; font-weight: 500; color: var(--orange); }
.gauge-meta-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }

.prog-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.prog-item { display: flex; align-items: center; }
.prog-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.prog-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; width: 104px; }
.prog-track { width: 64px; height: 2px; background: var(--bg-progress); border-radius: 100px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 100px; }
.prog-fill--green  { background: var(--green); }
.prog-fill--orange { background: var(--orange); }
.prog-fill--gray   { background: var(--text-secondary); }
.prog-pct { font-size: 13px; font-weight: 500; color: var(--text-secondary); width: 32px; text-align: right; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════
   ACTIVITY PANEL
   ══════════════════════════════════════════ */
.activity-panel { background: var(--bg-card); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; flex: 1; min-height: 0; }
.act-list { display: flex; flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; }
.act-item {
  border-bottom: 1px solid var(--border-faint);
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
}
.act-item:last-child { border-bottom: none; }
.act-row { display: flex; align-items: flex-start; gap: 10px; }
.act-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; aspect-ratio: 1; margin-top: 4px; }
.act-dot--red   { background: var(--red); }
.act-dot--green { background: var(--green); }
.act-dot--orange { background: var(--orange); }
.act-text { font-size: 13px; font-weight: 500; color: var(--text-secondary); line-height: 1.5; }
.act-time { font-size: 11px; font-weight: 400; color: var(--text-timestamp); padding-left: 16px; display: block; }
.act-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.act-sub { font-size: 12px; font-weight: 400; color: var(--text-secondary); line-height: 1.4; }

/* ─── OVERLAY ─── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 150; }
.sidebar-overlay--visible { display: block; }

/* ══════════════════════════════════════════
   VISTA CARD STACKED — tabella mobile
   ══════════════════════════════════════════ */
.card-view { display: none; }
.card-view-item {
  background: var(--bg-card); border-radius: 10px;
  border-left: 3px solid transparent;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.card-view-item--vuln { border-left-color: var(--orange); }
.card-view-item__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-view-item__dev { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.card-view-item__actions { display: flex; flex-shrink: 0; }
.card-view-item__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.card-meta-field { display: flex; flex-direction: column; gap: 2px; }
.card-meta-label {
  font-size: 12px; font-weight: 500; color: var(--text-label);
  letter-spacing: .04em; text-transform: uppercase;
}
.card-meta-value { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.card-meta-value--orange { color: var(--orange); }

/* ══════════════════════════════════════════
   VIEWS
   ══════════════════════════════════════════ */
.view { display: none; }
.view.active { display: block; }
#view-dashboard.active { display: flex; flex-direction: column; gap: 28px; }

.page-header { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; margin-bottom: 12px; gap: 8px; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-primary); }
.page-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.header-actions { display: flex; align-items: center; gap: 10px; }

/* ── SEARCH BAR ── */
.search-input { background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 8px; padding: 8px 14px; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif; width: 220px; outline: none; transition: border .15s; }
.search-input:focus { border-color: var(--blue); }
.search-input::placeholder { color: var(--text-secondary); }

.filter-group { display: flex; gap: 8px; }
.filter-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 8px; padding: 9px 36px 9px 12px; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif; outline: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23379bff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }

/* ── BUTTONS ── */
.btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-act); color: #fff; border: none; padding: 9px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; font-family: 'Inter', sans-serif; text-decoration: none; }
.btn-primary:hover { background: #1360b5; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-filter-off); color: var(--text-secondary); border: 1px solid var(--border-mid); padding: 9px 18px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: 'Inter', sans-serif; text-decoration: none; }
.btn-secondary:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-card); }
.btn--icon-only { background: transparent; border: none; padding: 4px; height: 44px; width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn--icon-only:hover { background: transparent; border: none; color: var(--text-primary); }
.btn--icon-only:focus-visible { outline: 2px solid var(--blue-act); outline-offset: -2px; }

/* Edit device button in modal: icon-only in view mode, primary style in edit mode */
#btnEditDevice { background: transparent; border: 1px solid var(--border-mid); padding: 0; width: 44px; height: 44px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
#btnEditDevice:hover { background: transparent; border-color: var(--border-strong); }
#btnEditDevice:focus-visible { outline: 2px solid var(--blue-act); outline-offset: -2px; }
#btnEditDevice.edit-active { background: var(--blue-act); border: none; color: #fff; padding: 9px 18px; width: auto; }
#btnEditDevice.edit-active:hover { background: #1360b5; }
.btn-danger { display: inline-flex; align-items: center; gap: 6px; background: #DF0F01; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; font-family: 'Inter', sans-serif; }
.btn-danger:hover { background: #b80c01; }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── DEVICE TABLE (full list view) ── */
.device-table-container { overflow-x: auto; background: var(--bg-card); border-radius: 12px; }
.device-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.device-table thead { position: sticky; top: 0; z-index: 10; }
.device-table thead th,
.device-table thead th.sortable,
.device-table thead th.col-actions,
.device-table thead th.col-check {
  background: var(--bg-surface);
  color: var(--text-th) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-faint);
  white-space: nowrap;
  user-select: none;
  font-family: inherit;
  line-height: 1.2;
}
.sortable-table th.sortable { cursor: pointer; transition: color .15s; }
.sortable-table th.sortable:hover { color: var(--blue); }
.device-table thead th.col-check { padding: 12px 10px; text-align: center; }
.device-table thead th.col-check input { margin: 0; vertical-align: middle; }
.device-table tbody tr { cursor: pointer; transition: background .13s; }
.device-table tbody tr:hover { background: #2a2d3a; }
.device-table tbody tr.row-offline { opacity: 0.55; }
.device-table tbody td { padding: 8px 14px; vertical-align: middle; }
.col-icon { width: 44px; text-align: center; }
.col-actions { width: 80px; text-align: right; white-space: nowrap; }
.device-name-text { font-weight: 600; color: var(--text-primary); font-size: 14px; }
.name-source { font-size: 11px; margin-left: 4px; opacity: 0.5; cursor: help; }
.device-table .col-ip code { font-size: 13px; color: var(--blue); font-weight: 500; }
.device-table .col-vendor { font-size: 13px; color: var(--text-vendor); }
.device-table .col-room { font-size: 13px; color: var(--text-secondary); }
.device-table .col-type .type-badge span { font-size: 12px; }
.mac-text { font-size: 11px !important; color: var(--text-th) !important; }
.btn-table-action { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-mid); border-radius: 6px; color: var(--text-secondary); cursor: pointer; transition: all .12s; }
.btn-table-action:hover { background: var(--bg-card); color: var(--text-primary); }

/* ── ALERTS ── */
.alert-item {
  background: var(--bg-card);
  border-left: 3px solid transparent;
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  transition: opacity .2s;
}
.alert-item + .alert-item { margin-top: 6px; }
.alert-item.unread { border-left-color: var(--red); }
.alert-item.read { opacity: .7; }
.alert-item.read:hover { opacity: 1; }
.alert-item.highlight-flash,
.scan-item.highlight-flash,
.t-row.highlight-flash,
.vuln-device-card.highlight-flash .vuln-device-header { background: var(--bg-cta) !important; box-shadow: inset 0 0 0 1px var(--blue); transition: background .3s; border-radius: 10px; }
.alert-icon-wrap {
  width: 36px; height: 36px;
  background: var(--bg-base);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alert-icon-wrap .icon { width: 16px; height: 16px; }
.alert-body { flex: 1; min-width: 0; }
.alert-body-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.alert-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-base);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.alert-badge--new_device { color: var(--blue); background: var(--blue-bg); }
.alert-badge--device_online { color: var(--green); background: var(--green-bg); }
.alert-badge--device_offline { color: var(--red); background: var(--red-bg); }
.alert-time {
  font-size: 12px;
  color: var(--text-timestamp);
  flex-shrink: 0;
}
.alert-message {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 4px;
}
.alert-device {
  font-size: 12px;
  color: var(--text-nav);
}
.alert-device .alert-ip {
  color: var(--blue);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.alert-sep { color: var(--border-mid); margin: 0 6px; }
.alert-vendor { color: var(--text-vendor); font-size: 12px; }
.alert-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.alert-actions button {
  background: none;
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .12s;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.alert-actions button .icon { width: 12px; height: 12px; }
.alert-actions button:hover { border-color: var(--blue); color: var(--blue); }
.alert-actions .btn-ack {
  background: var(--blue-bg);
  border-color: transparent;
  color: var(--blue);
}
.alert-actions .btn-ack:hover { background: var(--blue); color: #fff; }

/* ── CHECKBOX IN FILTER BAR ── */
.filter-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.filter-check-wrap input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* ── ALERT CHECKBOX ── */
.alert-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px;
}
.alert-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* ── ALERT POPUP (topbar dropdown) ── */
.alert-popup {
  position: absolute;
  top: 100%;
  right: 0;
  width: 380px;
  max-height: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 2000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.alert-popup.open { display: flex; }
.alert-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-faint);
  flex-shrink: 0;
}
.alert-popup-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.alert-popup-header .alert-popup-count {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-base);
  padding: 2px 8px;
  border-radius: 100px;
}
.alert-popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alert-popup-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.alert-popup-item:hover { background: var(--bg-cta); }
.alert-popup-item .alert-popup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  aspect-ratio: 1;
  flex-shrink: 0;
  margin-top: 4px;
  background: var(--red);
}
.alert-popup-item .alert-popup-dot--read { background: var(--text-nav); }
.alert-popup-item .alert-popup-msg {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.alert-popup-item .alert-popup-time {
  font-size: 11px;
  color: var(--text-timestamp);
  flex-shrink: 0;
  white-space: nowrap;
}
.alert-popup-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.alert-popup-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-faint);
  text-align: center;
  flex-shrink: 0;
}
.alert-popup-footer button {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  transition: background .12s;
}
.alert-popup-footer button:hover { background: var(--blue-bg); }

.topbar__alert-wrap { position: relative; }

/* ── SCANS ── */
.scan-item {
  background: var(--bg-card);
  border-left: 3px solid transparent;
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  transition: opacity .2s;
}
.scan-item + .scan-item { margin-top: 6px; }
.scan-icon-wrap {
  width: 36px; height: 36px;
  background: var(--bg-base);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.scan-icon-wrap .icon { width: 16px; height: 16px; }
.scan-body { flex: 1; min-width: 0; }
.scan-body-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.scan-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-base);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.scan-badge--periodic { color: var(--green); background: var(--green-bg); }
.scan-badge--deep { color: var(--orange); background: var(--orange-bg); }
.scan-badge--registered { color: var(--blue); background: var(--blue-bg); }
.scan-badge--edited { color: var(--text-secondary); background: var(--bg-base); }
.scan-badge--online { color: var(--green); background: var(--green-bg); }
.scan-badge--offline { color: var(--red); background: var(--red-bg); }
.scan-badge--cancelled { color: var(--orange); background: var(--orange-bg); }
.scan-badge--warning { color: var(--orange); background: var(--orange-bg); }
.scan-time {
  font-size: 12px;
  color: var(--text-timestamp);
  flex-shrink: 0;
}
.scan-stats {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 2px;
}
.scan-detail {
  font-size: 12px;
  color: var(--text-nav);
  line-height: 1.4;
}

/* ── MODAL ── */
.modal-overlay { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal { background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 10px; width: 90%; max-width: 560px; max-height: 80vh; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.modal-sm { max-width: 420px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-mid); }
.modal-header h3 { font-size: 20px; font-weight: 600; }
.modal-close { background: none; border: none; color: var(--text-secondary); font-size: 18px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.modal-close:hover { background: var(--bg-card); color: var(--text-primary); }
.modal-body { padding: 24px; overflow-y: auto; max-height: calc(80vh - 140px); }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 24px; border-top: 1px solid var(--border-mid); }

/* ── Select with icon ── */
.select-with-icon { display: flex; align-items: center; gap: 8px; }
.select-with-icon .select-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; background: var(--bg-icon); border-radius: 6px; }
.select-with-icon select { flex: 1; }
.modal-footer .btn-primary,
.modal-footer .btn-secondary { height: 44px; }

/* ── MODAL DETAILS ── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 0; }
.detail-item { background: var(--bg-card); padding: 10px 12px; border-radius: 6px; }
.detail-item.full { grid-column: 1 / -1; }
.detail-label { font-size: 12px; color: var(--text-th); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value { font-size: 14px; font-weight: 500; margin-top: 3px; word-break: break-all; }
.detail-value.mac { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; }
.modal-section { margin-bottom: 24px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-section__header { display: flex; align-items: center; gap: 8px; padding: 10px 0 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border-mid); font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── FORM ── */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }
.form-input { width: 100%; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 8px; padding: 9px 12px; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif; outline: none; }
.form-input:focus { border-color: var(--blue); }
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: var(--text-primary);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
}
.form-textarea { width: 100%; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 8px; padding: 9px 12px; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif; outline: none; resize: vertical; min-height: 60px; }
.form-textarea:focus { border-color: var(--blue); }
.form-hint { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 8px; padding: 9px 36px 9px 12px; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif; outline: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23379bff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }

/* ── Custom dropdown (Lucide icons) ── */
.custom-select { position: relative; width: 100%; }
.custom-select-trigger { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 8px; padding: 9px 36px 9px 12px; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif; cursor: pointer; outline: none; transition: border-color .15s; }
.custom-select-trigger:hover, .custom-select.open .custom-select-trigger { border-color: var(--blue); }
.custom-select-trigger .cs-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-secondary); }
.custom-select-trigger .cs-label { flex: 1; text-align: left; }
.custom-select-trigger .cs-arrow { width: 12px; height: 12px; color: var(--blue); flex-shrink: 0; transition: transform .2s; }
.custom-select.open .custom-select-trigger .cs-arrow { transform: rotate(180deg); }
.custom-select-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 8px; max-height: 220px; overflow-y: auto; display: none; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.custom-select.open .custom-select-menu { display: block; position: fixed; z-index: 1050; }
.custom-select-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text-secondary); transition: background .1s; }
.custom-select-option:hover { background: var(--bg-surface); color: var(--text-primary); }
.custom-select-option.selected { background: var(--blue-bg); color: var(--blue); }
.custom-select-option .cs-opt-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── TOGGLE ── */
.toggle-label { display: flex !important; align-items: center; justify-content: space-between; cursor: pointer; }
.toggle-label span { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; margin: 0 !important; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 22px; transition: 0.3s; }
.toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 2px; bottom: 2px; background: var(--text-secondary); border-radius: 50%; transition: 0.3s; }
.toggle-switch input:checked + .toggle-slider { background: var(--blue); border-color: var(--blue); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: #fff; }

/* ── SETTINGS ── */
.settings-sections { display: flex; flex-direction: column; gap: 18px; max-width: 800px; }
.settings-card { background: var(--bg-card); border: none; border-radius: 12px; padding: 22px; }
.settings-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--text-primary); }
.settings-card code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; color: var(--blue); background: var(--blue-bg); padding: 2px 6px; border-radius: 3px; }
.help-text { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px; }
.help-text:last-child { margin-bottom: 0; }
.help-code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; color: var(--blue); background: var(--blue-bg); padding: 2px 6px; border-radius: 3px; }

/* ── ROOMS ── */
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.room-card { background: var(--bg-card); border: none; border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.room-card-header { display: flex; align-items: center; gap: 10px; }
.room-card-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--bg-dev-icon); border-radius: 6px; flex-shrink: 0; color: var(--text-secondary); }
.room-card-name { font-size: 16px; font-weight: 600; flex: 1; }
.room-card-count { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.room-card-devices { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.room-device-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 4px 10px; background: var(--bg-surface); border: none; border-radius: 6px; cursor: pointer; transition: background .15s; color: var(--text-secondary); }
.room-device-tag:hover { background: var(--bg-card); color: var(--text-primary); }
.room-device-more { font-size: 11px; color: var(--text-secondary); padding: 3px 6px; }
.room-card-actions { display: flex; gap: 6px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border-mid); }
.color-picker { display: flex; flex-direction: column; gap: 8px; }
.color-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.color-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }
.color-swatch:hover { border-color: var(--text-primary); }

/* ── LOADING ── */
.loading { color: var(--text-secondary); font-size: 14px; padding: 20px; text-align: center; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-secondary); }

/* ── SECTION BADGE ── */
.section-badge { font-size: 13px; padding: 3px 12px; border-radius: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.section-badge.safe { background: var(--green-bg); color: var(--green); }
.section-badge.warning { background: var(--bg-surface); color: var(--text-secondary); }
.section-badge.danger { background: var(--bg-surface); color: var(--text-secondary); }

/* ── TOAST ── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 6px; padding: 12px 18px; font-size: 13px; color: var(--text-primary); box-shadow: 0 4px 16px rgba(0,0,0,0.4); animation: slideIn 0.2s ease; display: flex; align-items: center; gap: 10px; min-width: 280px; }
.toast.warning { border-left: 3px solid var(--orange); }
.toast.success { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── SECURITY VIEW ── */
#view-security.active { display: flex; flex-direction: column; gap: 44px; }
.vulnerable-devices { display: flex; flex-direction: column; gap: 0; }

/* ── Security group cards (vulnerabilità raggruppate) ── */
.vuln-group-card { background: var(--bg-card); border-radius: 10px; margin-bottom: 8px; }
.vuln-group-card:last-child { margin-bottom: 0; }
.vuln-group-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px; background: var(--bg-card); border-radius: 10px; cursor: pointer; transition: background .15s; }
.vuln-group-header:hover { background: #2a2d3a; }
.vuln-group-title { font-size: 14px; font-weight: 600; flex: 1; color: var(--text-primary); }
.vuln-group-count { font-size: 13px; padding: 2px 10px; border-radius: 10px; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); min-width: 120px; text-align: center; }
.vuln-group-body { max-height: 0; overflow: hidden; transition: max-height 300ms ease; }
.vuln-group-card.open .vuln-group-body { max-height: 2000px; }
.vuln-group-arrow { margin-left: auto; font-size: 14px; transition: transform 200ms ease; color: var(--text-nav); }
.vuln-group-card.open .vuln-group-arrow { transform: rotate(180deg); }
.vuln-group-devices { display: flex; flex-direction: column; padding: 6px 16px 14px; gap: 4px; }
.vuln-group-device { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background .15s; }
.vuln-group-device:hover { background: var(--bg-surface); }
.vuln-group-device-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.vuln-group-device-name { font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; }
.vuln-group-device-ip { font-family: 'SF Mono', monospace; font-size: 13px; color: var(--blue); }

/* ── Risk badge ── */
.vuln-risk-badge { font-size: 13px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.3px; min-width: 80px; text-align: center; }
.vuln-risk-badge.critica { background: var(--red-bg); color: var(--red); }
.vuln-risk-badge.alta { background: var(--orange-bg); color: var(--orange); }
.vuln-risk-badge.media { background: var(--green-bg); color: var(--green); }
.vuln-risk-badge.bassa { background: var(--sky-bg); color: var(--sky); }

/* ── Web link ── */
.vuln-web-link { color: var(--blue); display: inline-flex; align-items: center; flex-shrink: 0; padding: 4px; border-radius: 4px; transition: background .15s; }
.vuln-web-link:hover { background: var(--blue-bg); }
.port-web-link { color: var(--blue); margin-left: 2px; }

/* ── Remediation ── */
.vuln-remediation { background: var(--green-bg); border-radius: 6px; padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.vuln-remediation-icon { flex-shrink: 0; color: var(--green); display: flex; align-items: center; }
.vuln-remediation-text { font-size: 13px; line-height: 1.5; color: var(--green); }

/* ── Vulnerability description ── */
.vuln-item-desc { font-size: 13px; color: var(--text-muted, var(--text-secondary)); line-height: 1.5; margin-top: 8px; }

/* ── Open port device cards ── */
.vuln-device-card { background: var(--bg-card); border: none; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.vuln-device-card:last-child { margin-bottom: 0; }
.vuln-device-card .vuln-device-body { max-height: 0; overflow: hidden; transition: max-height 250ms ease; padding: 0; }
.vuln-device-card.open .vuln-device-body { max-height: 2000px; background: var(--bg-surface); }
.vuln-device-card .vuln-device-body > div { padding: 14px 16px; }
.vuln-device-card.open .vuln-group-arrow { transform: rotate(180deg); }
.vuln-device-card.open .vuln-device-header { background: var(--bg-card); border-bottom: none; }
.vuln-device-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 52px; background: var(--bg-surface); border-bottom: 1px solid var(--border-mid); cursor: pointer; transition: background .15s; }
.vuln-device-header:hover { background: #2a2d3a; }
.vuln-device-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.vuln-device-name { font-size: 14px; font-weight: 600; flex: 1; color: var(--text-primary); }
.vuln-device-ip { font-family: 'SF Mono', monospace; font-size: 13px; color: var(--text-secondary); min-width: 115px; }
.vuln-device-count { font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; background: var(--warning-bg); color: var(--warning); white-space: nowrap; min-width: 70px; text-align: center; }
.vuln-device-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }

/* ── Port tags ── */
.port-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border-mid); padding: 5px 11px; border-radius: 6px; font-size: 13px; margin: 0 4px 4px 0; position: relative; cursor: default; }
.port-tag .tooltip-text { visibility: hidden; opacity: 0; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-mid); padding: 5px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; z-index: 100; pointer-events: none; transition: opacity 0.15s; }
.port-tag:hover .tooltip-text { visibility: visible; opacity: 1; }
.port-number { font-weight: 600; color: var(--text-primary); line-height: 1; display: inline-flex; align-items: center; }
.port-service { color: var(--text-secondary); line-height: 1; display: inline-flex; align-items: center; }
.port-protocol { font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; line-height: 1; display: inline-flex; align-items: center; }
.port-protocol.tcp { color: var(--green); background: var(--green-bg); }
.port-protocol.udp { color: var(--blue); background: var(--blue-bg); }
.port-web-link { color: var(--blue); margin-left: 2px; display: inline-flex; align-items: center; }
/* ── Security section spacing ── */
.security-port-section { display: flex; flex-direction: column; gap: 0; margin-top: 16px; }
.security-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.security-section-header h2 { font-size: 18px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.security-section-header .section-badge { font-size: 11px; line-height: 1; padding: 3px 10px; display: inline-flex; align-items: center; }

/* ── Security: filtri più piccoli ── */
.vulnerable-devices .filter-tab { padding: 4px 10px; font-size: 11px; }
.vulnerable-devices .filter-tab__dot { width: 3px; height: 3px; }
.vulnerable-devices .dp-filters { padding: 0 0 0 4px; height: auto; min-height: 28px; border-bottom: none; gap: 8px; }

/* ── Security: pannelli affiancati ── */
.security-panels-row { display: flex; gap: 20px; align-items: flex-start; }
.security-panel-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.security-panel-col .security-port-section { margin-top: 0; }
.security-panel-col .vuln-group-card { margin-bottom: 8px; }
.security-panel-col .vuln-group-header { padding: 10px 12px; gap: 8px; min-height: 44px; }
.security-panel-col .vuln-group-title { font-size: 13px; line-height: 1; }
.security-panel-col .vuln-group-arrow { font-size: 13px; }
.security-panel-col .vuln-group-devices { padding: 4px 12px 10px; gap: 2px; }
.security-panel-col .vuln-group-device { padding: 6px 8px; gap: 6px; }
.security-panel-col .vuln-group-device-name { font-size: 13px; }
.security-panel-col .vuln-group-device-ip { font-size: 13px; }
.security-panel-col .vuln-group-device-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.security-panel-col .vuln-risk-badge { font-size: 12px; padding: 1px 6px; min-width: 68px; text-align: center; }
.security-panel-col .vuln-remediation { padding: 6px 10px; }
.security-panel-col .vuln-remediation-text { font-size: 13px; }
.security-panel-col .vuln-item-desc { font-size: 13px; }
.security-panel-col .security-section-header h2 { font-size: 18px; }
.security-panel-col .vuln-device-header { padding: 10px 12px; gap: 8px; min-height: 44px; border-bottom: none; background: var(--bg-card); }
.security-panel-col .vuln-device-name { font-size: 14px; line-height: 1; }
.security-panel-col .vuln-device-ip { font-size: 12px; line-height: 1; min-width: 100px; }
.security-panel-col .vuln-device-count { font-size: 12px; padding: 2px 8px; min-width: 65px; text-align: center; }
.security-panel-col .vuln-device-icon { width: 20px; height: 20px; background: var(--bg-dev-icon); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.security-panel-col .vuln-device-icon .icon { width: 14px; height: 14px; color: var(--text-secondary); }
.security-panel-col .vuln-device-body { }
.security-panel-col .port-tag { font-size: 13px; padding: 3px 9px; gap: 5px; }
.security-panel-col .port-number { font-size: 13px; }
.security-panel-col .security-section-header .section-badge { font-size: 12px; padding: 2px 8px; }
.security-panel-col .dp-filters { min-height: 32px; gap: 6px; }
.security-panel-col .filter-tab { font-size: 12px; padding: 5px 10px; }
.security-panel-col .filter-tab__dot { width: 4px; height: 4px; }
.security-panel-col .filter-tab--critical .filter-tab__dot { background: var(--red); }
.security-panel-col .filter-tab--high .filter-tab__dot { background: var(--orange); }
.security-panel-col .filter-tab--medium .filter-tab__dot { background: var(--green); }
.security-panel-col .filter-tab--low .filter-tab__dot { background: var(--sky); }
.security-panel-col .port-sort-bar { margin-bottom: 8px; min-height: 32px; display: flex; align-items: center; }
.security-panel-col .port-sort-label { font-size: 12px; }
.security-panel-col .port-sort-btn { font-size: 12px; padding: 5px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 500; }
.security-panel-col .vuln-group-device { background: var(--bg-surface); border-radius: 6px; margin-bottom: 2px; }
.security-panel-col .vuln-group-device:last-child { margin-bottom: 0; }
.security-panel-col .vuln-group-device:hover { background: #2a2d3a; }
.security-panel-col .vuln-group-devices { gap: 4px; }
.security-panel-col .vuln-group-count { font-size: 12px; padding: 2px 8px; }
.toggle-all-group { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.security-panel-col .toggle-all-group { margin-left: auto; }
.toggle-all-btn { background: none; border: 1px solid var(--border-mid); color: var(--text-secondary); border-radius: 6px; padding: 4px 6px; cursor: pointer; display: flex; align-items: center; transition: all .15s; line-height: 1; }
.toggle-all-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }

/* ── Port sort bar ── */
.port-sort-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 0; }
.port-sort-label { font-size: 11px; color: var(--text-secondary); margin-right: 4px; white-space: nowrap; }
.port-sort-btn { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-mid); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-family: 'Inter', sans-serif; transition: all .15s; }
.port-sort-btn:hover { border-color: var(--blue); color: var(--text-primary); }
.port-sort-btn.active { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); font-weight: 600; }

/* ── EXPORT ── */
.export-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ── TIMELINE ── */
.timeline { display: flex; flex-direction: column; gap: 0; margin: 12px 0; padding: 0; }
.timeline-item { display: flex; gap: 12px; position: relative; padding: 0 0 16px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; aspect-ratio: 1; margin-top: 4px; position: relative; z-index: 1; }
.timeline-content { flex: 1; display: flex; flex-direction: column; }
.timeline-label { font-size: 13px; font-weight: 500; color: #d8dae5; }
.timeline-time { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.timeline-detail { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }

/* ── CONFIRM MODAL ── */
.confirm-dialog { text-align: center; padding: 12px 0; }
.confirm-dialog p { font-size: 14px; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.5; }
.confirm-dialog .confirm-warning { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.confirm-dialog .confirm-actions { display: flex; gap: 8px; justify-content: center; }

/* ── COPY BUTTON ── */
.copy-btn { background: var(--bg-card); border: 1px solid var(--border-mid); color: var(--text-secondary); font-size: 12px; padding: 2px 8px; border-radius: 4px; cursor: pointer; margin-left: 6px; font-family: 'Inter', sans-serif; transition: all .15s; vertical-align: middle; }
.copy-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ── LOADING OVERLAY ── */
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-base); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.4s ease; }
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loading-overlay-content { text-align: center; max-width: 400px; }
.loading-logo { margin-bottom: 24px; }
.loading-logo img { animation: loading-logo-pulse 2s ease-in-out infinite; }
@keyframes loading-logo-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.loading-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.loading-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 28px; min-height: 20px; }
.loading-bar-container { width: 280px; height: 4px; background: var(--bg-card); border-radius: 4px; overflow: hidden; margin: 0 auto 20px; }
.loading-bar-indeterminate { height: 100%; width: 40%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 4px; animation: loading-indeterminate 1.4s ease-in-out infinite; }
@keyframes loading-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ══════════════════════════════════════════
   RESPONSIVE — BREAKPOINT
   ══════════════════════════════════════════ */
@media (max-width: 1280px) {
  .right-col { width: 260px; }
  .page-content { padding: 24px 20px; }
}
@media (max-width: 1100px) {
  .panels-row { flex-direction: column; }
  .right-col { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .vuln-panel, .activity-panel { flex: 1; min-width: 280px; }
}
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh;
    transform: translateX(-100%); transition: transform .28s ease; z-index: 200;
    overflow-y: hidden; box-sizing: border-box;
  }
  .sidebar--open { transform: translateX(0); }
  .hamburger { display: flex; }
  .topbar { padding: 0 20px; z-index: 201; }
  .page-content { padding: 20px 16px; gap: 16px; }
  .stats-row { flex-wrap: wrap; gap: 10px; }
  .stats-divider { display: none; }
  .stat-card { flex: 1 1 calc(33% - 8px); min-width: 120px; height: auto; min-height: 110px; }
  .dp-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dp-table::-webkit-scrollbar { height: 3px; }
  .dp-table::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }

  /* ≤900px: griglia dispositivi 3 colonne (sidebar nascosta => mobile/tablet) */
  .tg { grid-template-columns: minmax(160px, 1fr) 55px 40px; min-width: 0; }
  .dp-table { padding: 0 10px 12px; }
  .th-row .th-cell:nth-child(2),
  .th-row .th-cell:nth-child(4),
  .th-row .th-cell:nth-child(-n+7):nth-child(n+5),
  .th-row .th-cell:nth-child(9),
  .t-row.tg > *:nth-child(2),
  .t-row.tg > *:nth-child(4),
  .t-row.tg > *:nth-child(-n+7):nth-child(n+5),
  .t-row.tg > *:nth-child(9) { display: none; }
  .t-row.tg > *:nth-child(3) { display: flex; justify-content: center; align-items: center; }
  .th-row .th-cell:nth-child(3) { text-align: center; }
  .th-row .th-cell:nth-child(8) { text-align: right; padding-right: 4px; }
}
@media (max-width: 640px) {
  :root { --topbar-h: 60px; }
  .topbar { padding: 0 14px; }
  .topbar__title { font-size: 18px; }
  .topbar__sub { display: none; }
  .topbar__search { display: none; }
  /* Scan button rettangolare con testo (non più circolare) */
  .topbar__scan { width: auto; height: 40px; min-height: 40px; padding: 0 14px; border-radius: 8px; gap: 7px; min-width: unset; }
  .topbar__scan .icon { width: 16px; height: 16px; }
  .topbar__scan .icon i, .topbar__scan .icon svg { width: 16px !important; height: 16px !important; }
  .topbar__scan span:not(.icon) { display: inline; font-size: 12px; }
  .page-content { padding: 12px 10px; gap: 12px; }
  .stats-row { gap: 8px; }
  .stat-card { flex: 0 1 calc(33% - 6px); min-width: 80px; min-height: 60px; }
  .sc-val { font-size: 22px; }
  .dp-hdr, .dp-filters { padding: 0 14px; }
  .right-col { flex-direction: column; gap: 10px; }
  .vuln-panel, .activity-panel { width: 100%; min-width: unset; }
  .gauge-num { font-size: 36px; }
}

/* ── ALERT COLUMN alignment fix ── */
.alert-cell { display: flex; align-items: center; justify-content: flex-start; min-height: 20px; }
.alert-frame-warn { width: 47px; height: 20px; display: flex; align-items: center; justify-content: center; }
.alert-frame-warn .icon { width: 18px; height: 18px; color: var(--orange); display: flex; align-items: center; justify-content: center; }
.alert-frame-ok { width: 47px; height: 20px; display: flex; align-items: center; justify-content: center; }
.alert-frame-ok .icon { width: 18px; height: 18px; color: var(--green); display: flex; align-items: center; justify-content: center; }

/* ── PORT TAGS (device modal) — risk variants ── */
.port-tag-risk-low { border-color: var(--green); background: var(--green-bg); }
.port-tag-risk-medium { border-color: var(--orange); background: rgba(208,150,64,0.08); }
.port-tag-risk-high { border-color: var(--red); background: var(--red-bg); }

/* ── VULN ITEM (device modal) ── */
.vuln-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 13px; }
.vuln-risk { font-weight: 600; text-transform: uppercase; color: var(--red); font-size: 12px; }

/* ── DEVICE LIST (full list view) ── */
.device-list { display: flex; flex-direction: column; gap: 8px; }
.device-list-item { background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 6px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: all .15s; }
.device-list-item:hover { border-color: var(--blue); background: #2a2d3a; }
.device-list-item.offline { opacity: 0.6; }
.device-list-item.unknown { border-left: 3px solid var(--orange); }
.device-list-item.registered { border-left: 3px solid var(--green); }
.device-list-icon { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-dev-icon); color: var(--text-secondary); }
.device-list-icon i, .device-list-icon svg { width: 14px; height: 14px; }
.device-list-info { flex: 1; min-width: 0; }
.device-list-name { font-size: 14px; font-weight: 600; }
.device-list-detail { font-size: 13px; color: var(--text-secondary); margin-top: 2px; display: flex; gap: 14px; flex-wrap: wrap; }
.device-list-actions { display: flex; gap: 6px; flex-shrink: 0; }
.device-list-status { font-size: 11px; padding: 3px 10px; border-radius: 8px; font-weight: 600; }
.status-online { background: var(--green-bg); color: var(--green); }
.status-offline { background: var(--red-bg); color: var(--red); }
.status-new { background: rgba(208,150,64,0.08); color: var(--orange); }

/* ── DEVICE CARDS (dashboard grid) ── */
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.device-card { background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all .15s; display: flex; flex-direction: column; gap: 6px; }
.device-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.device-card.offline { opacity: 0.65; }
.device-card.unknown { border-left: 3px solid var(--orange); }
.device-card.registered { border-left: 3px solid var(--green); }
.device-card-top { display: flex; align-items: center; justify-content: space-between; }
.device-card-icon { font-size: 24px; line-height: 1; display: flex; align-items: center; }
.device-card-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.device-card-status { font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 600; flex-shrink: 0; }
.device-card-body { font-size: 13px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 1px; }
.device-card-ip { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; color: var(--text-secondary); }
.device-card-vendor { font-size: 11px; color: var(--text-secondary); }
.device-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; }

/* ── BADGE SECURITY ── */
.badge-security { background: var(--red-bg); color: var(--red); }

/* ── SCAN CONSOLE ── */
.scan-console { background: #0a0c12; border: 1px solid var(--border-mid); border-radius: 6px; font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; font-size: 11.5px; line-height: 1.6; margin: 10px 0 0; max-height: 260px; overflow-y: auto; padding: 10px 12px; text-align: left; scroll-behavior: smooth; }
.scan-console .console-line { white-space: pre-wrap; word-break: break-all; padding: 1px 0; min-height: 17px; }
.scan-console .console-line .icon { display: inline-flex; vertical-align: middle; margin-right: 4px; }

/* ── SCAN SUMMARY ── */
.scan-summary { background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: 6px; margin: 0; padding: 14px 16px; text-align: left; }
.scan-summary-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }

/* ── BATCH SCAN MODAL ── */
.batch-scan-warning { display: flex; align-items: flex-start; gap: 8px; background: var(--bg-card); border: 1px solid var(--orange); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.batch-scan-warning .icon { margin-top: 1px; color: var(--orange); }
.batch-progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.batch-progress-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.batch-progress-pct { font-size: 12px; color: var(--text-secondary); }
.batch-device-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border-mid); border-radius: 6px; margin-bottom: 12px; background: var(--bg-card); }
.batch-device-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border-faint); transition: background 0.2s; }
.batch-device-item:last-child { border-bottom: none; }
.batch-device-item[data-status="scanning"] { background: rgba(96,165,250,0.06); }
.batch-device-item[data-status="done"] { background: rgba(103,207,115,0.04); }
.batch-device-item[data-status="error"] { background: rgba(240,96,96,0.04); }
.batch-device-item[data-status="cancelled"] { background: rgba(208,150,64,0.04); }
.batch-device-icon { width: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.batch-device-name { flex: 1; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-device-status { font-size: 11px; font-weight: 500; flex-shrink: 0; }
.batch-per-device { border: 1px solid var(--border-mid); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg-card); }
.batch-summary-bar { font-size: 13px; }

/* ── TIMELINE DOT VARIANTS (colored events) ── */
.timeline-dot.first { background: var(--blue); }
.timeline-dot.online { background: var(--green); }
.timeline-dot.offline { background: var(--red); }
.timeline-dot.scan { background: var(--blue); }
.timeline-dot.hostname_changed { background: var(--blue); }
.timeline-dot.os_detected { background: var(--green); }
.timeline-dot.model_identified { background: var(--blue); }
.timeline-dot.ports_found { background: var(--orange); }
.timeline-dot.udp_ports_found { background: #a78bfa; }
.timeline-dot.vulnerability_found { background: var(--red); }
.timeline-dot.deep_scan { background: var(--blue); }

/* Connector line between timeline dots */
.timeline-item:not(:last-child) .timeline-dot::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 4px;
  width: 2px;
  height: calc(100% + 4px);
  background: var(--border-mid);
}

/* ── ALERT COLUMN — icon under "A" of ALERT ── */
.alert-cell { display: flex; align-items: center; }
.alert-frame-warn { display: flex; align-items: center; justify-content: flex-start; padding: 0; }
.alert-frame-warn .icon { width: 18px; height: 18px; color: var(--orange); display: flex; align-items: center; justify-content: center; }
.alert-frame-ok { display: flex; align-items: center; justify-content: flex-start; padding: 0; }
.alert-frame-ok .icon { width: 18px; height: 18px; color: var(--green); display: flex; align-items: center; justify-content: center; }

/* ── Porte/Vuln section headers (device modal) ── */
.ports-section h4, .vulns-section h4 {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ═══════════════════════════════════════════
   IoT HUB STYLES
   ═══════════════════════════════════════════ */

/* IoT Grid Layout */
.iot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

/* IoT Card */
.iot-card {
  background: var(--bg-card);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.iot-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}
.iot-card__icon {
  width: 32px;
  height: 32px;
  background: var(--bg-dev-icon);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iot-card__icon .icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}
.iot-card__info {
  flex: 1;
  min-width: 0;
}
.iot-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iot-card__type {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.iot-card__status {
  flex-shrink: 0;
}
.iot-card__body {
  padding: 4px 16px 10px;
}
.iot-card__detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 13px;
}
.iot-card__detail-label {
  color: var(--text-secondary);
  font-size: 11px;
}
.iot-card__detail-value {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}
.iot-card__ports {
  color: var(--orange);
  font-size: 11px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iot-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px 14px;
}
.iot-card__vuln-badge {
  font-size: 11px;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* IoT Badges */
.iot-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.iot-badge--online {
  background: rgba(103, 207, 115, 0.15);
  color: var(--green);
}
.iot-badge--offline {
  background: rgba(240, 96, 96, 0.15);
  color: var(--red);
}
.iot-badge--warning {
  background: rgba(208, 150, 64, 0.15);
  color: var(--orange);
}

/* IoT Detail Modal Sections */
.iot-detail-section {
  padding: 16px;
  margin-bottom: 12px;
  background: var(--bg-surface);
  border-radius: 10px;
}
.iot-detail-section--controls {
  border: 1px solid var(--border-mid);
}
.iot-detail-section__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* IoT Detail Table */
.iot-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.iot-detail-table tr {
  border-bottom: 1px solid var(--border-faint, #2d3040);
}
.iot-detail-table tr:last-child {
  border-bottom: none;
}
.iot-detail-table td {
  padding: 6px 8px;
  vertical-align: middle;
}
.iot-detail-table td:first-child {
  color: var(--text-secondary);
  font-size: 13px;
  width: 120px;
  white-space: nowrap;
}
.iot-detail-table td:last-child {
  color: var(--text-primary);
}

/* Port tags in detail */
.port-tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Toggle Switch (reuse for IoT) */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-strong);
  border-radius: 22px;
  transition: 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--green);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* Responsive IoT Grid */
@media (max-width: 1100px) {
  .iot-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (max-width: 640px) {
  .iot-grid {
    grid-template-columns: 1fr;
  }
}


/* ─── ROOM ICON GRID ─── */
.room-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.room-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.12s;
}
.room-icon-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-card);
}
.room-icon-btn--active {
  border-color: var(--blue);
  background: rgba(96, 165, 250, 0.1);
  color: var(--blue);
}
.room-icon-label {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 640px) {
  .room-icon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Color swatch selection */
.color-swatch {
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.15s;
  display: inline-block;
  flex-shrink: 0;
}
.color-swatch:hover {
  transform: scale(1.15);
}
.color-swatch--active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px currentColor;
}


/* ── BUTTON SIZES ── */
.btn-xs { padding: 4px 10px; font-size: 11px; border-radius: 6px; height: 28px; display: inline-flex; align-items: center; gap: 4px; }
.btn-xs .icon { display: inline-flex; }
.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 6px; }

/* ── DEVICE TOOLBAR ── */
.device-toolbar .btn-primary:disabled,
.device-toolbar .btn-danger:disabled { opacity: 0.35; cursor: not-allowed; }


/* ── BULK TOOLBAR ── */
.device-bulk-bar { display: flex; align-items: center; gap: 6px; justify-content: flex-end; padding: 0 0 4px 0; min-height: 24px; width: 100%; }
.header-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.header-left-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }


/* ═══════════════════════════════════════════
   CLIMATIZZATORI (Daikin Onecta)
   ═══════════════════════════════════════════ */


/* ─── IoT Settings ─── */

.iot-settings {
    background: var(--bg-card);
    border: 1px solid var(--border-faint);
    border-radius: 8px;
    overflow: hidden;
}

.iot-settings__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: background 0.15s;
}

.iot-settings__header:hover {
    background: var(--bg-hover);
}

.iot-settings__arrow {
    margin-left: auto;
    transition: transform 0.2s;
    font-size: 12px;
    color: var(--text-secondary);
}

.iot-settings__body {
    padding: 0 14px 14px;
}

.iot-provider-row:last-child {
    border-bottom: none !important;
}


/* ─────────────────────────────────────────────
   NUOVA SEZIONE IoT v2 — Overview, Card, Slide Panel
   ───────────────────────────────────────────── */

/* GridStack item — rimosso, usiamo CSS Grid + SortableJS */

/* Dashboard card grid — le card usano le classi esistenti (clima-card, camera-card, iot-card) */
#iotDashboardGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.grid-stack-item {
    min-width: 0;
}
.iot-tab-content {
    animation: fadeIn 0.15s ease;
}
.iot-tab-content.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* IoT Nav tabs */
#iotNavTabs {
    margin-bottom: 20px;
}
#iotNavTabs .filter-tab--unconfig {
    position: relative;
}
#iotNavTabs .filter-tab--unconfig::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--orange);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

/* IoT Provider Row */
.iot-provider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 16px;
  border-bottom: 1px solid var(--border-faint);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .iot-provider-row { padding: 10px 0 10px 12px; gap: 6px; }
  .iot-provider-row > span:nth-child(2) { width: 100%; order: -1; }
  .iot-provider-row .btn-xs { font-size: 11px; padding: 5px 10px; }
}

/* IoT Category Header */
.iot-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.iot-category-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Card Consumi */
.iot-card--consumi {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(59, 130, 246, 0.06) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    cursor: default;
}
.iot-card--consumi .iot-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.iot-card--consumi .iot-card__info {
    flex: 1;
    min-width: 0;
}
.iot-card--consumi .iot-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.iot-card--consumi .iot-card__type {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
}
.iot-badge--consumi {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue-act);
    background: rgba(59, 130, 246, 0.12);
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

/* Dashboard Card (GridStack) */
.iot-dash-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.iot-dash-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px;
    flex-shrink: 0;
}
.iot-dash-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}
.iot-dash-card__name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.iot-dash-card__minimize {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.iot-dash-card__minimize:hover {
    opacity: 1;
    background: rgba(255,255,255,0.06);
}
.iot-dash-card__body {
    flex: 1;
    padding: 4px 12px 10px;
    overflow-y: auto;
    min-height: 0;
}
.iot-dash-card__body--min {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 10px;
    flex: 0 0 auto;
}
.iot-dash-card__body--min .iot-dash-card__min-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.iot-dash-card__body--min .iot-dash-card__min-label {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Controls inside dash card */
.iot-dash-card .dash-control-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.iot-dash-card .dash-control-row:last-child {
    margin-bottom: 0;
}
.iot-dash-card .dash-control-label {
    font-size: 11px;
    color: var(--text-secondary);
    min-width: 50px;
    flex-shrink: 0;
}
.iot-dash-card .dash-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(103,207,115,0.12);
    color: var(--green);
}
.iot-dash-card .dash-badge--off {
    background: rgba(239,68,68,0.12);
    color: var(--red);
}
.iot-dash-card .dash-temp {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}
.iot-dash-card .dash-temp-unit {
    font-size: 13px;
    color: var(--text-secondary);
    margin-left: 1px;
}
.iot-dash-card .dash-mode {
    font-size: 10px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Dash compact buttons */
.dash-btn {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid var(--border-faint);
    background: var(--bg-surface);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.dash-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--border-mid);
    color: var(--text-primary);
}
.dash-btn--primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.dash-btn--primary:hover {
    background: var(--blue-act);
    border-color: var(--blue-act);
}
.dash-btn--sm {
    width: 22px;
    height: 22px;
}
.dash-btn--sm i {
    width: 12px;
    height: 12px;
}

/* FAB (Add Card + Reset) */
.iot-fab-group {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    z-index: 100;
}
.iot-fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}
.iot-fab:hover {
    transform: scale(1.08);
}
.iot-fab:active {
    transform: scale(0.96);
}
.iot-fab--add {
    background: var(--blue);
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
}
.iot-fab--reset {
    background: rgba(239,68,68,0.85);
    box-shadow: 0 4px 12px rgba(239,68,68,0.25);
    width: 40px;
    height: 40px;
}

/* Add Card Modal */
.add-card-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.add-card-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-faint);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.add-card-item:hover {
    border-color: var(--blue);
    background: rgba(59,130,246,0.05);
}
.add-card-item__icon {
    flex-shrink: 0;
    color: var(--text-secondary);
}
.add-card-item__info {
    flex: 1;
    min-width: 0;
}
.add-card-item__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.add-card-item__type {
    font-size: 11px;
    color: var(--text-secondary);
}
.add-card-search {
    width: 100%;
    margin-bottom: 12px;
}

/* Slide Panel */
.slide-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.slide-panel-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.slide-panel {
    position: fixed;
    top: 0;
    right: -520px;
    width: 520px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-main);
    border-left: 1px solid var(--border-mid);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -4px 0 24px rgba(0,0,0,0.4);
}
.slide-panel.active {
    right: 0;
}

.slide-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-faint);
    flex-shrink: 0;
    background: var(--bg-surface);
}
.slide-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.slide-panel__close {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.slide-panel__close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

.slide-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-main);
}

/* Slide panel sections */
.sp-section {
    margin-bottom: 20px;
}
.sp-section:last-child {
    margin-bottom: 0;
}
.sp-section__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-faint);
}
.sp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.sp-info-item {
    font-size: 12px;
}
.sp-info-label {
    color: var(--text-tertiary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sp-info-value {
    color: var(--text-primary);
    font-weight: 500;
    margin-top: 1px;
}
.sp-info-value.full {
    grid-column: 1 / -1;
}

/* Slide panel guide */
.sp-guide {
    padding: 0;
    margin: 0;
    list-style: none;
}
.sp-guide li {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-faint);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.sp-guide li:last-child {
    border-bottom: none;
}
.sp-guide__num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    aspect-ratio: 1;
    background: var(--blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.sp-guide__text {
    flex: 1;
    min-width: 0;
}
.sp-guide__text strong {
    color: var(--text-primary);
}

/* Slide panel controls */
.sp-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.sp-control-row:last-child {
    margin-bottom: 0;
}

/* Da Configurare */
.iot-unconfig-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.iot-unconfig-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-faint);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.iot-unconfig-item:hover {
    border-color: var(--orange);
    background: rgba(208,150,64,0.04);
}
.iot-unconfig-item__icon {
    flex-shrink: 0;
    color: var(--orange);
}
.iot-unconfig-item__info {
    flex: 1;
    min-width: 0;
}
.iot-unconfig-item__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.iot-unconfig-item__ip {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
}
.iot-unconfig-item__tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.iot-missing-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(208,150,64,0.12);
    color: var(--orange);
    white-space: nowrap;
}
.iot-missing-tag--critical {
    background: rgba(239,68,68,0.12);
    color: var(--red);
}

/* Empty unconfigured */
.iot-unconfig-empty {
    padding: 48px 24px;
    text-align: center;
}
.iot-unconfig-empty .icon {
    margin-bottom: 12px;
    color: var(--green);
}
.iot-unconfig-empty__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.iot-unconfig-empty__desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Dash card delete overlay button */
.dash-card-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    aspect-ratio: 1;
    border: none;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
    flex-shrink: 0;
}
.grid-stack-item:hover .dash-card-remove {
    opacity: 1;
}
.dash-card-remove:hover {
    background: rgba(239,68,68,0.7);
    color: #fff;
}

/* GridStack resize handles — rimossi (usiamo CSS Grid) */

/* Body lock on slide panel open */
body.slide-panel-open {
    overflow: hidden;
}

/* IoT refresh indicator */
.iot-refresh-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.iot-refresh-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    aspect-ratio: 1;
    display: inline-block;
}
.iot-refresh-indicator--fresh::before {
    background: var(--green, #22c55e);
}
.iot-refresh-indicator--stale::before {
    background: var(--orange, #f97316);
}
.iot-refresh-indicator--loading::before {
    background: var(--blue, #3b82f6);
    animation: iot-pulse 1s infinite;
}
@keyframes iot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ─── Shared IoT card grids ─── */
/* Provider-specific grid CSS ora iniettato dai rispettivi provider JS */


/* ══════════════════════════════════════════
   MOBILE — Override per viewport ≤ 900px
   Tutte le modifiche qui NON impattano il desktop.
   ══════════════════════════════════════════ */

/* ── ≤900px — Sidebar full-width, hamburger a sinistra ── */
@media (max-width: 900px) {
  .sidebar {
    width: 100vw; max-width: 100vw;
    padding-top: calc(var(--topbar-h, 78px) + 8px);
  }
  .sidebar__nav { padding-top: 6px; }

  /* Hamburger: micro-spaziatura per tablet (768-900px) */
  .hamburger { margin: 8px 0; }

  /* Stat card condensate */
  .stat-card { min-height: 80px; padding: 12px 12px 14px; flex: 0 1 calc(33% - 8px); }
  .sc-val { font-size: 30px; }
  .sc-label { font-size: 10px; }
  .sc-icon { width: 20px; height: 20px; }
  .sc-icon .icon { width: 12px; height: 12px; }
}

/* ── ≤640px — Topbar compatto, stat card 2x, filtri scroll ── */
@media (max-width: 640px) {
  /* Topbar: allinea hamburger + titolo in RIGA */
  .topbar__left { display: flex; flex-direction: row; align-items: center; gap: 8px; height: 100%; }
  .topbar__title { order: 0; }
  .hamburger { order: -1; flex-shrink: 0; }

  /* Overscroll behavior per iOS — NO overflow-x: hidden che blocca scroll verticale */
  html, body { overscroll-behavior: none; }

  /* Hamburger: micro-spaziatura verticale per non sembrare attaccato in alto */
  .hamburger { margin: 8px 0; }

  /* Touch target minimo 44px per tutti i bottoni */
  button, .btn, .btn-primary, .btn-secondary, .btn-danger,
  .filter-tab, .nav-item, .topbar__scan, .modal-close,
  .hamburger, .row-arrow, .iot-fab, .room-icon-btn,
  .device-list-item, .slide-panel__close { min-height: 44px; }

  /* Fix: bottoni tondi che diventano ovali per via del min-height: 44px */
  .modal-close { min-height: unset; height: 28px; width: 28px; aspect-ratio: 1; }
  .dash-card-remove { min-height: unset; height: 22px; width: 22px; aspect-ratio: 1; }
  .slide-panel__close { min-height: unset; height: 32px; width: 32px; }
  .ikea-slider-row button[style*="border-radius:50%"] { min-height: unset !important; height: 20px !important; width: 20px !important; }
  .color-swatch { min-height: unset; height: 24px; width: 24px; aspect-ratio: 1; }
  /* Fix: bottoni climatizzatori (Daikin) stretchati */
  .clima-btn-sm { min-height: unset !important; height: 24px !important; width: 24px !important; }
  .clima-btn-icon { min-height: unset !important; height: 28px !important; width: 28px !important; }
  /* Fix: bottoni termostato Netatmo stretchati */
  .netatmo-btn-sm { min-height: unset !important; height: 24px !important; width: 24px !important; }
  /* Fix: bottoni PTZ telecamere stretchati */
  .ptz-body button { min-height: unset !important; }
  .cam-joystick-overlay button { min-height: unset !important; }
  .btn-xs { min-height: unset; }
  .btn-table-action { min-height: unset; height: 30px; width: 30px; }
  .cam-download-overlay { min-height: unset !important; height: 32px !important; width: 32px !important; }

  /* Filtri: scroll tabs orizzontale */
  .dp-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 6px;
    padding-bottom: 6px;
  }
  .dp-filters::-webkit-scrollbar { height: 2px; }
  .dp-filters::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }
  /* Scroll hint gradient — fade a destra */
  .dp-filters {
    position: relative;
    mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
  }
  .filter-tab { flex-shrink: 0; padding: 9px 14px; font-size: 12px; }

  /* Device table rows piu compatte */
  .t-row { padding: 6px 8px; font-size: 12px; }
  .dev-icon { width: 24px; height: 24px; }
  .dev-icon i, .dev-icon svg { width: 12px !important; height: 12px !important; }
  .ip-badge { padding: 1px 6px; font-size: 11px; }
  .status-badge--on, .status-badge--off { padding: 1px 8px; font-size: 11px; }
  .type-badge { font-size: 10px; height: 26px; }

  /* IoT nav tabs scroll */
  #iotNavTabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 6px; }
  /* IoT nav tabs scroll hint */
  #iotNavTabs {
    mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
  }

  /* Gauge scala */
  .gauge-wrap { overflow: hidden; }
  .gauge-wrap svg { max-width: 100%; height: auto; }

  /* IoT card min-width fix */
  .iot-grid { grid-template-columns: 1fr; }
  #iotDashboardGrid { grid-template-columns: 1fr; }

  /* FAB mobile-safe */
  .iot-fab-group { bottom: 16px; right: 16px; }
  .iot-fab { width: 44px; height: 44px; }

  /* Stat card: testi più compatti */
  .stat-card { min-height: 60px; padding: 10px 12px 12px; }
  .sc-label { font-size: 9px; letter-spacing: 0.03em; }
  .sc-val { font-size: 22px; }
  .sc-icon { display: none; }
  .sc-badge { font-size: 10px; height: 15px; min-width: 22px; }

  /* Modal mobile */
  .modal { max-width: 96vw; margin: 0 8px; }
  .modal-body { padding: 16px; }
  .modal-header { padding: 14px 16px; }
  .modal-header h3 { font-size: 17px; }
  .modal-footer { padding: 12px 16px 16px; flex-wrap: wrap; }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary { height: 40px; font-size: 12px; padding: 8px 14px; flex: 1; justify-content: center; }

  /* Slide panel mobile */
  .slide-panel { width: 100vw; max-width: 100vw; right: -100vw; }
  .slide-panel__header { padding: 14px 16px; }
  .slide-panel__title { font-size: 14px; }
  .slide-panel__body { padding: 14px; }

  /* Security stat card label compatte */
  .stat-card--featured .sc-label,
  .stat-card--sky .sc-label { font-size: 9px; }

  /* Settings card */
  .settings-card { padding: 16px; }

  /* Page content */
  .page-header .header-actions { flex-wrap: wrap; gap: 6px; }
  .filter-group { flex-wrap: wrap; gap: 6px; }
  .search-input { width: 100%; }

  /* Card generiche: bordi piu morbidi su mobile */
  .stat-card, .settings-card, .iot-card,
  .clima-card, .netatmo-card, .ikea-card { border-radius: 10px; }

  /* Device list touch target */
  .device-list-item { min-height: 48px; padding: 10px 12px; }

  /* Slider IKEA full width */
  .ikea-slider { width: 100%; }

  /* Scan button: rettangolare con testo */
  .topbar__scan { height: 40px; min-height: 40px; }

  /* Alert items: wrap su mobile per evitare overlap testo-pulsanti */
  .alert-item { flex-wrap: wrap; gap: 8px; }
  .alert-body { min-width: calc(100% - 80px); }
  .alert-actions { margin-left: auto; }
  .alert-message { word-break: break-word; }
}

/* ── ≤480px — NUOVO: tutto monocolonna, font ridotti ── */
@media (max-width: 480px) {
  /* Hamburger: adatta alla topbar 52px — senza margin esce dalla topbar */
  .hamburger { height: 36px; width: 36px; margin: 6px 0; min-height: unset; }
  .hamburger__line { width: 16px; }

  /* Stat card singole */
  .stat-card { flex: 0 1 calc(50% - 4px); min-height: 42px; padding: 6px 10px 8px; }
  .sc-val { font-size: 18px; }
  .sc-label { font-size: 8px; }
  .sc-hdr { gap: 3px; }

  /* Dashboard view gap */
  #view-dashboard.active { gap: 16px; }

  /* Table header font */
  .th-cell { font-size: 10px; padding: 8px 4px; }

  /* Topbar ultra-compact */
  :root { --topbar-h: 52px; }
  .topbar { padding: 0 10px; }
  .topbar__title { font-size: 15px; }
  .topbar__left { gap: 6px; }

  /* Filter tabs */
  .dp-filters { padding: 0 6px 6px; gap: 4px; }
  .filter-tab { padding: 5px 8px; font-size: 10px; min-height: unset; }
  /* Titolo sezione dispositivo piu piccolo (come Dashboard) */
  .dp-title { font-size: 15px; }
  .dp-hdr { height: 36px; padding: 0 12px; }

  /* Page content */
  .page-content { padding: 8px 6px; gap: 8px; }

  /* Modal ultra-compact */
  .modal-body { padding: 12px; }
  .modal-header { padding: 10px 12px; }
  .modal-header h3 { font-size: 15px; }
  .modal-footer { padding: 10px 12px 12px; gap: 6px; }

  /* Slide panel ultra-compact */
  .slide-panel__header { padding: 10px 12px; }
  .slide-panel__body { padding: 10px; }
  .slide-panel__title { font-size: 13px; }

  /* Device table: font piccoli per far stare le colonne */
  .t-row { font-size: 11px; padding: 6px 4px; }
  .dev-icon { width: 22px; height: 22px; }
  .dev-icon i, .dev-icon svg { width: 12px !important; height: 12px !important; }
  .ip-badge { font-size: 10px; padding: 1px 5px; }
  .status-badge--on, .status-badge--off { font-size: 9px; padding: 1px 6px; border-radius: 999px; }
  .type-badge { font-size: 9px; height: 24px; }
  /* Device table: blocca larghezza contenitore per evitare overflow pagina */
  .dp { max-width: 100%; width: 100%; }
  .dp-table { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; width: 100%; padding: 0 6px 12px; }
  .dp-table::-webkit-scrollbar { height: 3px; }
  .dp-table::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }
  /* Device table: solo Nome, Stato, Alert — 3 colonne. Arrow nascosto su mobile */
  .tg { grid-template-columns: minmax(160px, 1fr) 55px 40px; min-width: 0; }
  /* Nome dispositivo: icona + testo piu compatti */
  .dev-cell { gap: 8px; padding: 0 6px; }
  /* Nome dispositivo: tronca con ellipsis se troppo lungo */
  .t-row.tg > *:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Altre celle: impedisci wrap */
  .t-row.tg > * { overflow: hidden; white-space: nowrap; }
  /* Rimuovi padding destro che sposta il contenuto a sinistra su mobile */
  .t-row.tg > *:not(.dev-cell) { padding-right: 0; }
  /* Alert centrato nella colonna */
  .alert-cell { justify-content: center; }
  .alert-frame-ok, .alert-frame-warn { justify-content: center; }
  /* Centra testo colonna Stato e header corrispondente */
  .t-row.tg > *:nth-child(3) { display: flex; justify-content: center; align-items: center; }
  .th-row .th-cell:nth-child(3) { text-align: center; }
  .th-row .th-cell:nth-child(8) { text-align: right; padding-right: 4px; }
  /* Nascondi colonne 2(IP), 4(Tipo), 5-7(Sicurezza,Stanza,Porte), 9(Arrow) del grid HTML a 9 colonne */
  .th-row .th-cell:nth-child(2),
  .th-row .th-cell:nth-child(4),
  .th-row .th-cell:nth-child(-n+7):nth-child(n+5),
  .th-row .th-cell:nth-child(9),
  .t-row.tg > *:nth-child(2),
  .t-row.tg > *:nth-child(4),
  .t-row.tg > *:nth-child(-n+7):nth-child(n+5),
  .t-row.tg > *:nth-child(9) { display: none; }
  /* Alert colonna e arrow compatti */
  .alert-frame-warn, .alert-frame-ok { width: 24px; height: 16px; }
  .alert-frame-warn .icon, .alert-frame-ok .icon { width: 14px; height: 14px; }
  .alert-frame-warn .icon svg, .alert-frame-ok .icon svg { width: 14px !important; height: 14px !important; }
  .row-arrow { width: 24px; height: 24px; border-radius: 6px; }
  .row-arrow .icon { width: 14px; height: 14px; }
  .row-arrow .icon svg { width: 14px !important; height: 14px !important; max-width: 14px; max-height: 14px; }

  /* Label abbreviate su stat card a 480px */
  .stat-card--featured .sc-label { font-size: 0; line-height: 0; }
  .stat-card--featured .sc-label::after { content: 'Vuln.'; font-size: 9px; line-height: normal; }
  /* Porte Aperte → Porte */
  .stat-card:last-child .sc-label,
  #securityStatsRow .stat-card:last-child .sc-label { font-size: 0; line-height: 0; }
  .stat-card:last-child .sc-label::after,
  #securityStatsRow .stat-card:last-child .sc-label::after { content: 'Porte'; font-size: 9px; line-height: normal; letter-spacing: 0.03em; text-transform: uppercase; }

  /* Security view stat cards */
  #securityStatsRow .stat-card { min-height: 50px; }
  #securityStatsRow .sc-val { font-size: 18px; }

  /* Security vuln groups: singola colonna */
  .security-panels-row { flex-direction: column; }
  .security-panels-row > * { width: 100%; }

  /* Camera cards compatte */
  .camera-feed { max-height: 160px; }
  .camera-feed video, .camera-feed canvas { max-height: 160px; object-fit: cover; }
  .camera-card-preview { height: 120px; }
  .camera-controls { flex-wrap: wrap; gap: 4px; }
  .camera-controls button { min-height: 36px; padding: 4px 10px; font-size: 11px; }

  /* IoT section */
  .iot-category-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .iot-category-title { font-size: 15px; }

  /* Activity panel */
  .act-item { font-size: 12px; padding: 6px 12px; }

  /* Gauge panel compatto — solo spazio verticale, proporzioni interne intatte */
  .vuln-panel { gap: 4px; padding-bottom: 8px; flex: none; }
  .panel-hdr { padding: 6px 12px 0; }
  .gauge-wrap { height: 120px; padding-top: 4px; }
  .gauge-val-row { height: 44px; }
  .prog-list { gap: 4px; padding: 0 12px; }
  .prog-item { gap: 4px; }
  .gauge-zones { font-size: 10px; padding: 2px 0 6px; }
  /* Gauge scala piu aggressiva */
  .gauge-wrap svg { width: 100%; max-width: 180px; height: auto; display: block; margin: 0 auto; }

  /* Button compact */
  .btn-primary, .btn-secondary { padding: 7px 12px; font-size: 12px; }
  .btn--icon-only { width: 36px; height: 36px; }

  /* Alert popup mobile */
  .alert-popup { right: 10px; width: calc(100vw - 20px); max-width: 320px; }

  /* Settings */
  .settings-card { padding: 12px; }

  /* Device list items */
  .device-list-item { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .device-list-name { font-size: 13px; }
  .device-list-detail { font-size: 12px; gap: 8px; }

  /* Checkbox label wrap */
  .filter-check-wrap { white-space: normal; }

  /* Scan button rettangolare con testo */
  .topbar__scan { width: auto; height: 36px; min-height: 36px; padding: 0 12px; border-radius: 8px; gap: 6px; }
  .topbar__scan .icon { width: 14px; height: 14px; }
  .topbar__scan .icon i, .topbar__scan .icon svg { width: 14px !important; height: 14px !important; }
  .topbar__scan span:not(.icon) { display: inline; font-size: 11px; }

  /* FAB */
  .iot-fab-group { bottom: 12px; right: 12px; gap: 8px; }
  .iot-fab { width: 40px; height: 40px; }

  /* Room icon grid */
  .room-icon-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  /* Prog list */
  .prog-item { gap: 8px; }
  .prog-label { font-size: 11px; }
  .prog-pct { font-size: 11px; }

  /* Slide panel: margine inferiore per safe-area */
  .slide-panel { padding-bottom: env(safe-area-inset-bottom, 16px); }
  .slide-panel__body { padding-bottom: calc(10px + env(safe-area-inset-bottom, 16px)); }
}

/* ── ≤360px — Schermi molto piccoli ── */
@media (max-width: 360px) {
  .topbar__title { font-size: 13px; }
  .hamburger { width: 32px; height: 32px; gap: 4px; }
  .hamburger__line { width: 14px; }
  .filter-tab { padding: 4px 6px; font-size: 10px; }
  .sc-val { font-size: 18px; }
  .sc-label { font-size: 8px; }
  .stat-card { padding: 8px 10px; min-height: 50px; }
  .modal-body { padding: 8px; }
  .slide-panel__body { padding: 8px; }
  .clima-temp-big { font-size: 24px; }
  .clima-card__footer { gap: 3px; }
  .camera-feed { max-height: 120px; }
  .camera-card-preview { height: 90px; }
  .t-row { font-size: 10px; padding: 4px 3px; }
  .dev-icon { width: 18px; height: 18px; }
  .dev-icon i, .dev-icon svg { width: 9px !important; height: 9px !important; }
  .ip-badge { font-size: 9px; padding: 1px 4px; }
  .status-badge--on, .status-badge--off { font-size: 8px; padding: 1px 5px; }
  .type-badge { font-size: 8px; height: 20px; }
  .row-arrow { width: 20px; height: 20px; }
  .tg { grid-template-columns: 1fr minmax(60px, auto) minmax(45px, auto) minmax(40px, auto) 22px 22px; }
}
/* Motion toggle switch */
.cam-switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.cam-switch input { opacity:0; width:0; height:0; }
.cam-switch .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#4a4a4a; border-radius:20px; transition:.3s; }
.cam-switch .slider:before { content:""; position:absolute; height:14px; width:14px; left:3px; bottom:3px; background-color:#fff; border-radius:50%; transition:.3s; }
.cam-switch input:checked + .slider { background-color:#22c55e; }
.cam-switch input:checked + .slider:before { transform:translateX(16px); }