/* Portale Solar Monitor - area riservata (redesign 2026-11, artefatto
   "Solar Monitor Portal"). Tre temi scelti dal Profilo utente e salvati
   per account: chiaro (default), scuro, colorato; "sistema" segue il
   sistema operativo (chiaro/scuro). Il tema e' sull'elemento <html> come
   data-theme. Il sito pubblico (marketing.css) non usa questo file.

   I grafici (dashboard.js) leggono i token --surface, --text-*, --grid,
   --axis e --series-1..4 con getComputedStyle: restano definiti per ogni
   tema. Serie: 1 produzione, 2 batteria, 3 rete / batteria motore,
   4 consumi / extra. */

@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------------- temi ---------------- */
:root, [data-theme="chiaro"] {
  color-scheme: light;
  --bg: #F3F5F7; --surface: #FFFFFF; --surface-2: #EEF1F4; --border: #DCE1E7;
  --text: #15202B; --muted: #56636F;
  --accent: #F29A2E; --on-accent: #2B1600; --accent-text: #9A4D00;
  --btn: #B35600; --btn-text: #FFFFFF;
  --side: #FFFFFF; --side-text: #15202B; --side-muted: #56636F; --side-active: #FFF0DC; --side-active-text: #8A4500; --side-border: #DCE1E7;
  --prod: #E8850F; --cons: #2F6FDB; --batt: #12806F; --grid-c: #5B6670; --motor: #B0417A;
  --ok-text: #146C43; --ok-bg: #E2F3E9; --off-text: #4A5560; --off-bg: #E9ECEF; --off-dot: #7A8590;
  --warn-text: #835000; --warn-bg: #FFF0D2; --err-text: #B3261E; --err-bg: #FCE6E4; --err-btn: #B3261E;
  --info-text: #1F4FA8; --info-bg: #E4EDFC;
  --k1: #FFFFFF; --k2: #FFFFFF; --k3: #FFFFFF; --k4: #FFFFFF; --k-border: #DCE1E7; --k-text: #15202B; --k-muted: #56636F;
  --track: #EEF1F4; --input: #FFFFFF; --sel-row: #FFF5E8; --sel-tab: #FFF5E8;
  --seg-on: #FFFFFF; --seg-on-text: #15202B; --seg-off-text: #56636F;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
[data-theme="scuro"] {
  color-scheme: dark;
  --bg: #0D1318; --surface: #151D24; --surface-2: #1C2630; --border: #2A3540;
  --text: #E7EDF2; --muted: #9EABB7;
  --accent: #F5A524; --on-accent: #1A1200; --accent-text: #F7B955;
  --btn: #F5A524; --btn-text: #1A1200;
  --side: #10171D; --side-text: #E7EDF2; --side-muted: #9EABB7; --side-active: #2B2412; --side-active-text: #F7B955; --side-border: #222C36;
  --prod: #F5A524; --cons: #5B9BFF; --batt: #3CC7A8; --grid-c: #B5C0CA; --motor: #E07AB0;
  --ok-text: #63D69E; --ok-bg: #13332A; --off-text: #B5C0CA; --off-bg: #26313B; --off-dot: #8C99A6;
  --warn-text: #F7C566; --warn-bg: #3A2C0E; --err-text: #FF8F86; --err-bg: #3D1916; --err-btn: #E5484D;
  --info-text: #9CC1FF; --info-bg: #1B2B47;
  --k1: #151D24; --k2: #151D24; --k3: #151D24; --k4: #151D24; --k-border: #2A3540; --k-text: #E7EDF2; --k-muted: #9EABB7;
  --track: #1C2630; --input: #0F161C; --sel-row: #1F2A22; --sel-tab: #2B2412;
  --seg-on: #2A3540; --seg-on-text: #FFFFFF; --seg-off-text: #9EABB7;
  --shadow: none;
}
[data-theme="colorato"] {
  color-scheme: light;
  --bg: #FFF6E8; --surface: #FFFFFF; --surface-2: #FFEFD6; --border: #EED9B8;
  --text: #132F3C; --muted: #4A6270;
  --accent: #FFB547; --on-accent: #2B1600; --accent-text: #A14C00;
  --btn: #0B4F63; --btn-text: #FFFFFF;
  --side: #0B4F63; --side-text: #FFFFFF; --side-muted: #B9DCE4; --side-active: #FFB547; --side-active-text: #2B1600; --side-border: #0B4F63;
  --prod: #F07C00; --cons: #1F64D6; --batt: #0E8C78; --grid-c: #4A6270; --motor: #A8327A;
  --ok-text: #0F6A3F; --ok-bg: #D3F2DF; --off-text: #3D4C55; --off-bg: #E3E7EA; --off-dot: #6B7A84;
  --warn-text: #7E4A00; --warn-bg: #FFE3B0; --err-text: #A8211A; --err-bg: #FFD9D5; --err-btn: #A8211A;
  --info-text: #3A2A9E; --info-bg: #E4DEFF;
  --k1: #FFD58A; --k2: #BFE6EA; --k3: #DAD3FF; --k4: #C8EFCB; --k-border: transparent; --k-text: #132F3C; --k-muted: #3A5361;
  --track: rgba(19, 47, 60, 0.12); --input: #FFFFFF; --sel-row: #FFF1DA; --sel-tab: #FFF1DA;
  --seg-on: #0B4F63; --seg-on-text: #FFFFFF; --seg-off-text: #4A6270;
  --shadow: 0 2px 0 rgba(19, 47, 60, 0.06);
}
/* "sistema": chiaro di base, scuro se il sistema operativo lo chiede */
@media (prefers-color-scheme: dark) {
  [data-theme="sistema"] {
    color-scheme: dark;
    --bg: #0D1318; --surface: #151D24; --surface-2: #1C2630; --border: #2A3540;
    --text: #E7EDF2; --muted: #9EABB7;
    --accent: #F5A524; --on-accent: #1A1200; --accent-text: #F7B955;
    --btn: #F5A524; --btn-text: #1A1200;
    --side: #10171D; --side-text: #E7EDF2; --side-muted: #9EABB7; --side-active: #2B2412; --side-active-text: #F7B955; --side-border: #222C36;
    --prod: #F5A524; --cons: #5B9BFF; --batt: #3CC7A8; --grid-c: #B5C0CA; --motor: #E07AB0;
    --ok-text: #63D69E; --ok-bg: #13332A; --off-text: #B5C0CA; --off-bg: #26313B; --off-dot: #8C99A6;
    --warn-text: #F7C566; --warn-bg: #3A2C0E; --err-text: #FF8F86; --err-bg: #3D1916; --err-btn: #E5484D;
    --info-text: #9CC1FF; --info-bg: #1B2B47;
    --k1: #151D24; --k2: #151D24; --k3: #151D24; --k4: #151D24; --k-border: #2A3540; --k-text: #E7EDF2; --k-muted: #9EABB7;
    --track: #1C2630; --input: #0F161C; --sel-row: #1F2A22; --sel-tab: #2B2412;
    --seg-on: #2A3540; --seg-on-text: #FFFFFF; --seg-off-text: #9EABB7;
    --shadow: none;
  }
}
/* token letti dai grafici (dashboard.js) */
:root, [data-theme] {
  --text-primary: var(--text); --text-secondary: var(--muted); --text-muted: var(--muted);
  --grid: var(--surface-2); --axis: var(--border);
  --series-1: var(--prod); --series-2: var(--batt); --series-3: var(--motor); --series-4: var(--cons);
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

/* ---------------- base ---------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a.link { color: var(--accent-text); font-weight: 600; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty { color: var(--muted); padding: 24px 16px; text-align: center; margin: 0; }

/* ---------------- struttura ---------------- */
.app { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }
.side {
  flex: 1 1 240px; max-width: 280px; background: var(--side); color: var(--side-text);
  border-right: 1px solid var(--side-border); padding: 24px 16px;
  display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.side-logo { width: 40px; height: 40px; display: flex; flex: 0 0 auto; }
.side-logo img { width: 100%; height: 100%; display: block; }
.side-title { display: flex; flex-direction: column; }
.side-title b { font-size: 16px; }
.side-title span { font-size: 12px; color: var(--side-muted); }
.side-toggle { display: none; }
.side-burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--side-muted); color: var(--side-text); align-items: center; justify-content: center; cursor: pointer; }
.side-links { display: flex; flex-direction: column; gap: 28px; flex: 1 1 auto; }
.side-group { display: flex; flex-direction: column; gap: 4px; }
.side-group-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--side-muted); padding: 0 12px 6px; }
.side-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--side-text); }
.side-link:hover { text-decoration: none; background: color-mix(in srgb, var(--side-active) 55%, transparent); }
.side-link.active { background: var(--side-active); color: var(--side-active-text); font-weight: 600; }
.side-link svg { flex: 0 0 auto; }
.side-user { margin-top: auto; }
.side-user .side-link { min-height: 56px; border-radius: 12px; }
.avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.avatar.lg { width: 72px; height: 72px; font-size: 26px; }
.avatar.md { width: 52px; height: 52px; font-size: 18px; }
.avatar.sm { width: 34px; height: 34px; font-size: 12px; background: var(--surface-2); color: var(--text); }
.side-user-text { display: flex; flex-direction: column; min-width: 0; }
.side-user-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-text span { font-size: 12px; color: var(--side-muted); }
.side-link.active .side-user-text span { color: inherit; }

.main { flex: 999 1 560px; min-width: 0; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 760px) {
  .side { flex-basis: 100%; max-width: none; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--side-border); padding: 12px 16px; gap: 12px; }
  .side-burger { display: flex; }
  .side-links { display: none; }
  .side-toggle:checked ~ .side-links { display: flex; padding-bottom: 8px; }
  .main { padding: 20px 16px 40px; }
}

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head-text { display: flex; flex-direction: column; gap: 4px; }
.eyebrow { font-size: 14px; color: var(--muted); margin: 0; }
.page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.breadcrumb { display: flex; gap: 8px; font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--accent-text); font-weight: 600; }

/* ---------------- componenti ---------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.card-head h2 { font-size: 17px; font-weight: 600; }
.card-head .sub, .card-sub { font-size: 13px; color: var(--muted); }
.card-unit { font-size: 13px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.row > .grow-3 { flex: 3 1 560px; min-width: 0; }
.row > .grow-2 { flex: 2 1 520px; min-width: 0; }
.row > .grow-1 { flex: 1 1 320px; min-width: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: 600 14px var(--font); cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(0.97); }
.btn-primary { background: var(--btn); color: var(--btn-text); border-color: transparent; }
.btn-danger { background: var(--surface); color: var(--err-text); border-color: var(--err-text); }
.btn-danger-solid { background: var(--err-btn); color: #FFFFFF; border-color: transparent; }
.btn-dashed { border-style: dashed; color: var(--accent-text); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row > .btn { flex: 1 1 auto; }

.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); flex-wrap: wrap; }
.seg > button, .seg > a { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; font: 600 13px var(--font); cursor: pointer; background: transparent; color: var(--seg-off-text); display: inline-flex; align-items: center; }
.seg > a:hover { text-decoration: none; }
.seg > [aria-pressed="true"], .seg > [aria-current="true"], .seg > .on { background: var(--seg-on); color: var(--seg-on-text); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--text); }
.badge.bdot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.badge.ok, .badge.online { background: var(--ok-bg); color: var(--ok-text); }
.badge.off, .badge.offline { background: var(--off-bg); color: var(--off-text); }
.badge.warn { background: var(--warn-bg); color: var(--warn-text); }
.badge.err { background: var(--err-bg); color: var(--err-text); }
.badge.info { background: var(--info-bg); color: var(--info-text); }
.level { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.level.INFO, .level.DEBUG { background: var(--info-bg); color: var(--info-text); }
.level.WARN { background: var(--warn-bg); color: var(--warn-text); }
.level.ERROR { background: var(--err-bg); color: var(--err-text); }
.tag-sys { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; background: var(--off-dot); display: inline-block; }
.dot.ok { background: var(--ok-text); }

.notice { padding: 12px 16px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.notice.err { background: var(--err-bg); color: var(--err-text); }
.notice.warn { background: var(--warn-bg); color: var(--warn-text); }
.notice p { margin: 4px 0 0; }
.toast { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--info-bg); color: var(--info-text); font-size: 14px; font-weight: 600; }
.toast.ok { background: var(--ok-bg); color: var(--ok-text); }
.toast.err { background: var(--err-bg); color: var(--err-text); }
.toast-close { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 18px; cursor: pointer; flex: 0 0 auto; }

/* campi */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.input, .select, .field input, .field select {
  min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--input); color: var(--text); font: 400 14px var(--font);
}
.input[readonly] { background: var(--surface-2); color: var(--muted); }
.search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--input); color: var(--muted); }
.search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: 400 14px var(--font); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); align-items: center; }
.toolbar .select { flex: 0 1 auto; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--btn); }
.input.pin-input { font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.4em; max-width: 160px; }
.input.code-input { min-height: 64px; font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: 0.16em; border: 2px solid var(--btn); border-radius: 12px; max-width: 360px; }

/* tabelle */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr.selected td { background: var(--sel-row); }
.data-table tr:last-child td { border-bottom: 0; }
.cell-main { display: block; font-weight: 600; white-space: nowrap; }
.cell-sub { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cell-sub.mono { font-size: 12px; }
.cell-trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cell-msg { white-space: normal; min-width: 320px; overflow-wrap: anywhere; }
.col-actions { width: 1%; text-align: right; }
.table-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-indicator { font-size: 13px; color: var(--muted); }

/* riepilogo numerico */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.stat-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.stat-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Riepilogo a grafici ad anello (pagina Dispositivi, _Donut.cshtml) */
.donut-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.donut-body { display: flex; align-items: center; gap: 16px; }
.donut { width: 104px; height: 104px; flex: 0 0 auto; transform: rotate(0deg); }
.donut-slice { transition: stroke-width .15s; }
.donut-slice:hover { stroke-width: 7.5; }
.donut-value { font-size: 9px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.donut-caption { font-size: 3.1px; fill: var(--muted); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.donut-legend li { display: flex; align-items: center; gap: 8px; line-height: 1.25; }
.donut-legend .dot { flex: 0 0 auto; }
.donut-legend li span:nth-child(2) { flex: 1 1 auto; color: var(--muted); }
.donut-legend b { font-variant-numeric: tabular-nums; }

/* menu di riga (popover) */
.row-menu-trigger { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.row-menu-trigger[aria-expanded="true"] { background: var(--surface-2); border-color: var(--text); }
.row-menu {
  margin: 0; inset: auto; width: 300px; padding: 8px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  position-area: block-end span-inline-start; position-try-fallbacks: flip-block; position: fixed;
}
.row-menu:popover-open { display: flex; flex-direction: column; }
.row-menu-head { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--border); }
.row-menu-head b { font-size: 14px; }
.row-menu-section { padding: 10px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.row-menu-section.sep { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.row-menu-note { padding: 0 10px 6px; font-size: 12px; color: var(--muted); }
.row-menu-item { min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 500 14px var(--font); text-align: left; cursor: pointer; display: flex; align-items: center; width: 100%; }
.row-menu-item:hover { background: var(--surface-2); text-decoration: none; }
.row-menu-item.danger { color: var(--err-text); }

/* finestre di conferma (<dialog>) */
dialog.confirm { width: min(460px, calc(100% - 32px)); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
dialog.confirm::backdrop { background: rgba(8, 14, 20, 0.55); }
dialog.confirm form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.confirm-step { font-size: 12px; font-weight: 700; color: var(--muted); }
dialog.confirm h2 { font-size: 19px; font-weight: 700; }
dialog.confirm p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* liste */
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.list-row:first-of-type { border-top: 0; }
.list-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.list-main b { font-size: 14px; }
.list-main span { font-size: 12px; color: var(--muted); }
.icon-box { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); flex: 0 0 auto; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; font-size: 14px; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.facts .span2 { grid-column: span 2; }

/* ---------------- dashboard ---------------- */
.board-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.board-tab { min-height: 56px; padding: 8px 16px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.board-tab[aria-selected="true"] { border-color: var(--btn); background: var(--sel-tab); }
.board-tab-text { display: flex; flex-direction: column; }
.board-tab-text b { font-size: 15px; }
.board-tab-text span { font-size: 12px; color: var(--muted); }
.board-tab-add { min-height: 56px; padding: 0 16px; border-radius: 12px; border: 2px dashed var(--border); color: var(--accent-text); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; }
.status-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.status-strip-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok-text); display: inline-block; }
.stale .live-dot { background: var(--err-text); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tile { background: var(--k1); border: 1px solid var(--k-border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); color: var(--k-text); position: relative; min-width: 0; }
.tile:nth-child(4n+2) { background: var(--k2); }
.tile:nth-child(4n+3) { background: var(--k3); }
.tile:nth-child(4n+4) { background: var(--k4); }
.tile .label { font-size: 13px; font-weight: 600; color: var(--k-muted); display: flex; justify-content: space-between; align-items: center; }
.tile .label::after { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tile-color, var(--prod)); }
.tile .value { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile .unit { font-size: 15px; font-weight: 600; color: var(--k-muted); margin-left: 6px; }
.tile .hint { margin: 0; font-size: 13px; color: var(--k-muted); }
.tile svg.spark { width: 100%; height: 32px; }
.meter { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--batt); border-radius: 999px; }

.flows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24px, 0.6fr) minmax(0, 1fr) minmax(24px, 0.6fr) minmax(0, 1fr); grid-template-rows: auto 44px auto; align-items: center; justify-items: center; }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.flow-node .circle { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.flow-node .circle.big { width: 64px; height: 64px; }
.flow-node .circle.outline { background: transparent !important; border: 2px solid var(--grid-c); color: var(--grid-c); }
.flow-node .lbl { font-size: 13px; color: var(--muted); }
.flow-node .val { font-size: 15px; font-weight: 700; }
.flow-line { border-radius: 2px; }
.flow-line.v { width: 4px; height: 100%; }
.flow-line.h { width: 100%; height: 4px; align-self: start; margin-top: 26px; }
.flow-line.idle { background: var(--border) !important; animation: none !important; }
@keyframes smFlowR { to { background-position: 24px 0; } }
@keyframes smFlowL { to { background-position: -24px 0; } }
@keyframes smFlowD { to { background-position: 0 24px; } }
@media (prefers-reduced-motion: reduce) { .flow-line { animation: none !important; } }

.chart-wrap { position: relative; height: 240px; }
.chart-wrap.tall { height: 280px; }
.dash-loading { opacity: 0.55; transition: opacity 0.2s; }
details.more { border-top: 1px solid var(--border); padding-top: 12px; }
details.more > summary { cursor: pointer; font-weight: 600; color: var(--accent-text); min-height: 32px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------------- abbinamento ---------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); }
.steps li[aria-current="step"] { background: var(--surface); border-color: var(--btn); }
.step-dot { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--muted); flex: 0 0 auto; }
.steps li[aria-current="step"] .step-dot { background: var(--btn); color: var(--btn-text); }
.steps li.done .step-dot { background: var(--ok-bg); color: var(--ok-text); }
.step-text { display: flex; flex-direction: column; }
.step-text span { font-size: 12px; color: var(--muted); }
.step-text b { font-size: 14px; }
.device-mock { align-self: center; width: 260px; padding: 12px; border-radius: 14px; background: #1A2026; }
.device-mock-screen { height: 150px; border-radius: 6px; background: #0E1419; color: #E7EDF2; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.device-mock-screen small { font-size: 10px; color: #9EABB7; }
.device-mock-screen b { font-size: 26px; letter-spacing: 0.12em; font-family: var(--font-mono); color: #F5A524; }

/* ---------------- profilo: anteprime tema ---------------- */
.theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.theme-card { text-align: left; padding: 12px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 12px; font-family: inherit; }
.theme-card:has(input:checked) { border-color: var(--btn); }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:has(input:focus-visible) { outline: 2px solid var(--btn); outline-offset: 2px; }
.theme-preview { display: flex; height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.theme-preview .pv-side { width: 28%; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; }
.theme-preview .pv-side i { height: 6px; border-radius: 3px; opacity: 0.6; }
.theme-preview .pv-logo { width: 18px; height: 18px; border-radius: 5px; }
.theme-preview .pv-main { flex: 1 1 auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.theme-preview .pv-kpis { display: flex; gap: 6px; }
.theme-preview .pv-kpis i { flex: 1 1 0; height: 28px; border-radius: 6px; }
.theme-preview .pv-chart { flex: 1 1 auto; border-radius: 6px; display: flex; align-items: flex-end; gap: 4px; padding: 6px; }
.theme-preview .pv-chart i { flex: 1 1 0; border-radius: 2px; }
.theme-card-label { display: flex; flex-direction: column; padding: 0 4px; }
.theme-card-label b { font-size: 15px; }
.theme-card-label span { font-size: 12px; color: var(--muted); }

/* ---------------- accesso ---------------- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
[data-theme="colorato"] .login-page { background: #0B4F63; }
.login-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 40px 36px; display: flex; flex-direction: column; gap: 28px; box-shadow: 0 8px 30px rgba(16, 24, 40, 0.08); }
.login-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.login-head .side-logo { width: 64px; height: 64px; border-radius: 18px; }
.login-head h1 { font-size: 28px; font-weight: 700; }
.login-head p { margin: 0; font-size: 15px; color: var(--muted); }
.login-btn { min-height: 52px; width: 100%; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 15px var(--font); display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; }
.login-btn + .login-btn { margin-top: 12px; }
.login-mark { width: 26px; height: 26px; border: 2px solid var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.login-foot { font-size: 12px; color: var(--muted); text-align: center; }
.login-foot a { text-decoration: underline; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .input.code-input { max-width: none; text-align: center; }
.login-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.totp-qr { align-self: center; width: 220px; max-width: 100%; padding: 8px; background: #FFFFFF; border-radius: 12px; border: 1px solid var(--border); }
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-key { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; text-align: center; overflow-wrap: anywhere; user-select: all; }
.recovery-codes { margin: 0; padding: 14px; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; background: var(--surface-2); border-radius: 12px; font-family: var(--font-mono); font-size: 15px; text-align: center; }
.login-link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; align-self: center; }

/* aggiunte dashboard */
.grid-2 > .span-2 { grid-column: 1 / -1; }
.live { display: inline-flex; align-items: center; gap: 6px; }
.status-strip-info code, .notice code { font-family: var(--font-mono); font-size: 12px; }
.list-main span.mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- impianti e mappa ---------------- */
.map-box { position: relative; height: 640px; min-height: 360px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); z-index: 0; }
.plant-item { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit; cursor: pointer; }
.plant-item:hover { background: var(--surface-2); }
.plant-item.selected { background: var(--sel-row); }
.plant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mini-map { position: relative; height: 130px; background: var(--surface-2); z-index: 0; }
.mini-map-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
[data-theme="scuro"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9); }
@media (prefers-color-scheme: dark) { [data-theme="sistema"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9); } }
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content-wrapper { background: var(--surface); color: var(--text); border-radius: 14px; }
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: 14px; }
.plant-pop { display: flex; flex-direction: column; gap: 10px; }
.plant-pop-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.plant-pop-head > span:first-child { display: flex; flex-direction: column; }
.plant-pop-head b { font-size: 15px; }
.plant-pop-head small, .plant-pop small { color: var(--muted); font-size: 12px; }
.plant-pop-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plant-pop-stats > span { display: flex; flex-direction: column; }
.plant-pop-stats b { font-size: 14px; }
.plant-pop-actions { display: flex; gap: 8px; }
.plant-pop-actions .btn { flex: 1 1 0; color: inherit; }
.plant-pop-actions .btn-primary { color: var(--btn-text); }
.device-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; }
.device-pick:has(input:checked) { border-color: var(--btn); background: var(--sel-tab); }
.device-pick input { width: 18px; height: 18px; accent-color: var(--btn); }
.device-pick.is-busy { cursor: default; background: var(--bg); color: var(--muted); }
.device-pick.is-busy b { color: var(--muted); }