/* ============================================================
   SIEE-ENAS — Design tokens
   ============================================================ */
:root {
  /* Brand */
  --color-primary: #1e3a8a;
  /* Ciano del logo ENAS (#00adef) portato a un tono leggibile su bianco:
     4,9:1, sopra il minimo AA di 4,5:1. Usato per la parte "ENAS" del testo. */
  --color-brand-enas: #0079a8;
  --color-primary-lift: #2945a3;
  --color-primary-hover-dark: #152a63;
  --color-primary-hover-light: #243d94;
  --color-primary-tint: rgba(30, 58, 138, 0.10);

  /* Text */
  --color-text: #1d1d1f;
  --color-text-2: #6e6e73;
  --color-text-3: #86868b;

  /* Surfaces */
  --color-surface: #ffffff;
  --color-surface-2: #f5f5f7;
  --color-border: #e5e5ea;
  --color-border-soft: rgba(0, 0, 0, 0.10);

  /* Semantic */
  --color-success: #34c759;
  --color-warning: #ff9f0a;
  --color-danger:  #ff3b30;
  --color-success-tint: rgba(52, 199, 89, 0.12);
  --color-warning-tint: rgba(255, 159, 10, 0.12);
  --color-danger-tint:  rgba(255, 59, 48, 0.12);

  /* Radii */
  --radius-card:  18px;
  --radius-modal: 12px;
  --radius-input: 8px;
  --radius-pill:  980px;

  /* Shadows */
  --shadow-card:     0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-header:   0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-dropdown: 0 8px 25px rgba(0, 0, 0, 0.10);
  --shadow-modal:    0 20px 40px rgba(0, 0, 0, 0.20);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition: all 0.2s ease;

  /* Legacy aliases (referenced by older inline styles) */
  --bg: var(--color-surface-2);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --border: var(--color-border);
  --text: var(--color-text);
  --text-2: var(--color-text-2);
  --text-3: var(--color-text-3);
  --primary: var(--color-primary);
  --accent: var(--color-primary);
}

/* ============================================================
   Reset / base
   ============================================================ */
* { box-sizing: border-box; }

body.siee-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface-2);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.siee-body { display: flex; flex-direction: column; min-height: 100vh; }

a { color: var(--color-primary-lift); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); margin: 0; }

.siee-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.siee-num  { font-variant-numeric: tabular-nums; }

/* ============================================================
   Layout
   ============================================================ */
.siee-shell { flex: 1; display: flex; flex-direction: column; }
.siee-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.siee-content { padding: 32px 20px 48px; }

/* ============================================================
   Header
   ============================================================ */
.siee-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-header);
}
.siee-header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.siee-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); text-decoration: none; }
.siee-logo:hover { color: var(--color-text); text-decoration: none; }
/* Logo ENAS: l'immagine ha già il proprio sfondo, quindi niente riquadro
   colorato. Altezza fissa e larghezza proporzionale (il logo è verticale). */
/* Stesso raggio del marchio storico (8px) così i due riquadri sono gemelli.
   Il raggio è anche sull'img: alcuni browser non clippano in modo affidabile
   col solo overflow:hidden sul contenitore. */
/* Arrotondamento UNA SOLA VOLTA (sul contenitore): metterlo anche sull'<img>
   sovrappone due bordi antialiasati sulla stessa curva e genera un anello piu'
   chiaro. Lo sfondo ciano del logo evita fessure sub-pixel ai bordi. */
.siee-logo-mark { height: 28px; border-radius: 8px; overflow: hidden; background: #04a7e8; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.siee-logo-mark img { height: 100%; width: auto; display: block; }
/* Marchio storico (icona) affiancato al logo ENAS: mantiene il riquadro blu. */
.siee-logo-zap { width: 28px; height: 28px; border-radius: 8px; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.siee-logo-zap svg { width: 16px; height: 16px; }
/* "ENAS" del wordmark nel ciano del logo (tono leggibile). */
.siee-brand-enas { color: var(--color-brand-enas); }

.siee-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
.siee-nav a, .siee-nav .siee-nav-button {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 14px; font-weight: 500; color: var(--color-text-2);
  background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
  transition: var(--transition);
}
.siee-nav a:hover, .siee-nav .siee-nav-button:hover { color: var(--color-text); background: rgba(0, 0, 0, 0.04); text-decoration: none; }
.siee-nav a.is-active, .siee-nav .siee-nav-button.is-active { color: var(--color-primary); }
.siee-nav a.is-active::after, .siee-nav .siee-nav-button.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -2px; height: 2px;
  background: var(--color-primary); border-radius: 2px;
}
.siee-nav .chev { width: 12px; height: 12px; opacity: .6; }

/* Dropdown */
.siee-dropdown { position: relative; }
.siee-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-dropdown);
  padding: 6px;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
/* Apertura solo via classe .is-open settata da JS al click (toggle).
   Tolti :hover e :focus-within: l'apertura su hover era inconsistente
   col comportamento dei mega-menu di nav (click-toggle puro) e creava
   l'effetto "il menu si chiude se sposto il mouse" segnalato in UX. */
.siee-dropdown.is-open > .siee-dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.siee-dropdown-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--color-text);
  border-radius: 6px;
}
.siee-dropdown-menu a:hover { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.siee-dropdown-menu a svg { width: 16px; height: 16px; color: var(--color-text-2); }
.siee-dropdown-menu hr { margin: 6px 0; border: 0; height: 1px; background: var(--color-border); }
.siee-dropdown-menu.is-right { left: auto; right: 0; }

.siee-logout-form { margin: 0; padding: 0; }
.siee-logout-form button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--color-text); background: transparent;
  border: 0; border-radius: 6px;
  cursor: pointer; text-align: left;
  transition: var(--transition);
}
.siee-logout-form button:hover { background: var(--color-surface-2); }
.siee-logout-form button svg { width: 16px; height: 16px; color: var(--color-text-2); }

/* ============================================================
   Mega-dropdown (apple-style header navigation)
   ============================================================ */

/* Panel — last child of header, position absolute, full-width */
.siee-mega-panel {
  position: absolute;
  top: 60px; left: 0; right: 0;
  z-index: 95;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-modal) var(--radius-modal);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.siee-mega-panel[hidden] { display: none; }
.siee-mega-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Grid layout — desktop default 3 columns */
.siee-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 28px 0;
}

/* Section block (with title + 1+ links) */
.siee-mega-section { display: flex; flex-direction: column; gap: 4px; }
.siee-mega-section-title {
  margin: 0 0 10px 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-3);
}

/* Link inside mega panel: icon + name + descrizione */
.siee-mega-link {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-input);
  text-decoration: none; color: var(--color-text);
  transition: var(--transition);
  min-height: 48px;
}
.siee-mega-link:hover {
  background: var(--color-primary-tint);
  text-decoration: none;
  color: var(--color-text);
}
.siee-mega-link .icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--color-primary-tint); color: var(--color-primary);
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.siee-mega-link .icon svg { width: 18px; height: 18px; }
.siee-mega-link .label { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.siee-mega-link .name { font-size: 14px; font-weight: 600; color: var(--color-text); }
.siee-mega-link .desc { font-size: 12px; color: var(--color-text-2); }
/* Disabled link (placeholder "in arrivo"): span al posto di a, no hover, dimming */
.siee-mega-link.is-disabled { cursor: not-allowed; opacity: 0.65; }
.siee-mega-link.is-disabled:hover { background: transparent; }
.siee-mega-link.is-disabled .icon { background: var(--color-surface-2); color: var(--color-text-3); }
/* Mini pill inline nel name (es. "in arrivo") */
.siee-mega-link .name .siee-pill {
  margin-left: 8px;
  vertical-align: middle;
  font-size: 10px;
  padding: 2px 8px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Active nav button (panel currently open) — chevron rotation.
   Stessa regola applicata al trigger del dropdown utente (.siee-profile-trigger)
   per allineare il comportamento: la chev ruota di 180° quando aria-expanded
   passa a "true" sul click. */
.siee-nav-button[aria-expanded="true"] { color: var(--color-primary); }
.siee-nav-button .chev,
.siee-profile-trigger .chev { transition: transform 0.18s var(--ease-out); }
.siee-nav-button[aria-expanded="true"] .chev,
.siee-profile-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Backdrop — sibling of header */
.siee-mega-backdrop {
  position: fixed;
  top: 60px; left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.siee-mega-backdrop[hidden] { display: none; }
.siee-mega-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Hamburger toggle — mostrato solo su mobile (<768px) */
.siee-nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent; border: 0; border-radius: var(--radius-input);
  color: var(--color-text);
  cursor: pointer;
  align-items: center; justify-content: center;
  margin-left: auto; /* spinge verso destra del header-inner */
}
.siee-nav-toggle:hover { background: rgba(0, 0, 0, 0.04); }
.siee-nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.siee-nav-toggle svg { width: 22px; height: 22px; }

/* Mobile drawer — popolato via JS clonando il contenuto dei mega panel */
.siee-mobile-drawer {
  position: fixed;
  top: 60px; left: 0; right: 0;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 95;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  padding-bottom: 24px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.siee-mobile-drawer[hidden] { display: none; }
.siee-mobile-drawer.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.siee-mobile-drawer .siee-mega-section { margin-bottom: 24px; padding: 0 16px; }
.siee-mobile-drawer .siee-mega-section-title { margin-left: 12px; }

/* Tablet 768-1023px: 2 colonne */
@media (max-width: 1023px) {
  .siee-mega-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Profile area */
.siee-profile { display: flex; align-items: center; gap: 12px; }
.siee-profile-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  cursor: pointer; transition: var(--transition);
  font: inherit; color: var(--color-text);
}
.siee-profile-trigger:hover { background: rgba(0, 0, 0, 0.04); }
.siee-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}

/* ============================================================
   Page head
   ============================================================ */
.siee-pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0;
  margin-bottom: 16px;
}
.siee-pagehead h1 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0; line-height: 1.2;
}
.siee-pagehead .sub { font-size: 13px; color: var(--color-text-2); margin-top: 2px; }
.siee-pagehead-actions { display: flex; gap: 8px; }

/* ============================================================
   KPI grid
   ============================================================ */
.siee-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.siee-kpi {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  transition: var(--transition);
}
.siee-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(30, 58, 138, 0.15);
}
.siee-kpi .label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-3);
  margin-bottom: 14px;
}
.siee-kpi .value {
  font-size: 36px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--color-text); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.siee-kpi .sub { margin-top: 8px; font-size: 12px; color: var(--color-text-3); }

/* ============================================================
   Card
   ============================================================ */
.siee-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
  overflow: hidden;
  /* Page-load fade-in stagger: --card-stagger settato da PageStagger JS */
  opacity: 0;
  transition: opacity 400ms var(--ease-out) calc(var(--card-stagger, 0) * 60ms),
              transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.siee-card.is-revealed { opacity: 1; }
.siee-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}
.siee-card-head {
  padding: 24px 28px;
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--color-border);
}
.siee-card-head .siee-card-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.siee-card-head .siee-card-sub { font-size: 13px; color: var(--color-text-2); margin-top: 2px; }
.siee-card-head .spacer { flex: 1; }
.siee-card-head .head-actions { display: flex; gap: 8px; align-items: center; }
.siee-card-body { padding: 24px 28px; }

/* ============================================================
   Buttons
   ============================================================ */
.siee-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  cursor: pointer; user-select: none;
  transition: var(--transition);
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1.4;
}
.siee-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.siee-btn:disabled { opacity: .5; cursor: not-allowed; }

.siee-btn-primary { background: var(--color-primary-lift); color: #fff; }
.siee-btn-primary:hover { background: var(--color-primary-hover-light); color: #fff; text-decoration: none; box-shadow: 0 3px 10px rgba(30, 58, 138, 0.20); }
.siee-btn-primary:active { background: var(--color-primary-hover-dark); box-shadow: 0 1px 3px rgba(30, 58, 138, 0.18); }

.siee-btn-secondary { background: rgba(0, 0, 0, 0.04); color: var(--color-text); border-color: rgba(0, 0, 0, 0.10); }
.siee-btn-secondary:hover { background: rgba(0, 0, 0, 0.07); color: var(--color-text); text-decoration: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); }
.siee-btn-secondary:active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

.siee-btn-ghost { background: transparent; color: var(--color-text-2); }
.siee-btn-ghost:hover { background: rgba(0, 0, 0, 0.04); color: var(--color-text); text-decoration: none; }
.siee-btn-ghost:active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }

.siee-btn-danger { background: var(--color-danger); color: #fff; }
.siee-btn-danger:hover { background: #e6342a; color: #fff; text-decoration: none; box-shadow: 0 3px 10px rgba(255, 59, 48, 0.25); }
.siee-btn-danger:active { background: #d12e23; box-shadow: 0 1px 3px rgba(255, 59, 48, 0.20); }

.siee-btn-sm { padding: 5px 10px; font-size: 12px; gap: 5px; }
.siee-btn-lg { padding: 10px 18px; font-size: 14px; gap: 8px; }

.siee-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.siee-btn-sm svg { width: 13px; height: 13px; }
.siee-btn-lg svg { width: 16px; height: 16px; }

/* Icon-only circular button */
.siee-icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--color-text-2);
  cursor: pointer; padding: 0;
  transition: var(--transition);
  position: relative;
}
.siee-icon-btn svg { width: 14px; height: 14px; }
/* Icone azione nella tabella impianti (Fatture, Tabelle, Grafico, ecc.):
   leggermente piu' grandi per migliore leggibilita' rispetto a quelle
   usate nelle bar (scope-bar, header). */
.siee-datatable td.actions .siee-icon-btn { width: 34px; height: 34px; }
.siee-datatable td.actions .siee-icon-btn svg { width: 17px; height: 17px; }
.siee-icon-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--color-text); transform: scale(1.05); }
.siee-icon-btn:active { transform: scale(0.95); }
.siee-icon-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.siee-icon-btn-primary { color: var(--color-primary); }
.siee-icon-btn-primary:hover { background: var(--color-primary-tint); }
.siee-icon-btn-danger { color: var(--color-danger); }
.siee-icon-btn-danger:hover { background: var(--color-danger-tint); }
.siee-icon-btn.is-disabled,
.siee-icon-btn[aria-disabled="true"] {
  color: var(--color-text-3); opacity: .45; cursor: not-allowed;
  pointer-events: auto; /* lascia attivo il tooltip */
}
.siee-icon-btn.is-disabled:hover,
.siee-icon-btn[aria-disabled="true"]:hover { background: transparent; transform: none; color: var(--color-text-3); }

/* Tooltip on icon-button */
.siee-icon-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 11px; font-weight: 500;
  padding: 5px 8px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}
.siee-icon-btn[data-tooltip]::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: rgba(0, 0, 0, 0.85);
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.siee-icon-btn:hover[data-tooltip]::after,
.siee-icon-btn:hover[data-tooltip]::before { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Ultima icona della colonna .actions (es. "Modifica impianto"): ancora
   il tooltip al bordo destro dell'icona invece che al suo centro, cosi'
   il testo si estende verso sinistra anziche' sbordare fuori dalla card.
   La card ha overflow:hidden e taglierebbe il tooltip altrimenti. La
   freccetta resta centrata sull'icona. */
.actions .siee-icon-btn:last-child[data-tooltip]::after,
.siee-icon-btn.tooltip-end[data-tooltip]::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}
.actions .siee-icon-btn:last-child:hover[data-tooltip]::after,
.siee-icon-btn.tooltip-end:hover[data-tooltip]::after {
  transform: translateX(0) translateY(0);
}

/* Tooltip su pulsanti testuali (.siee-btn): stesso look di quello delle
   icone ma con testo a capo, per spiegazioni piu' lunghe di una riga. */
.siee-btn[data-tooltip] { position: relative; }
.siee-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 11px; font-weight: 500;
  text-transform: none; letter-spacing: normal; line-height: 1.35;
  padding: 6px 9px; border-radius: 6px;
  width: max-content; max-width: 240px; white-space: normal; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}
.siee-btn[data-tooltip]::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: rgba(0, 0, 0, 0.85);
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.siee-btn:hover[data-tooltip]::after,
.siee-btn:hover[data-tooltip]::before { opacity: 1; transform: translateX(-50%) translateY(0); }

.siee-kpi-link { text-decoration: none; color: inherit; display: block; }
.siee-kpi-link:hover { color: inherit; text-decoration: none; }

.siee-impianto-kpis { margin-bottom: 24px; }
.siee-impianto-kpis .siee-kpi .value { font-size: 28px; }
.siee-impianto-kpis .siee-kpi .sub {
  font-size: 12px;
  color: var(--color-text-2);
  margin-top: 6px;
  line-height: 1.4;
}

.siee-delta-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: baseline;
  white-space: nowrap;
}
.siee-delta-pill.up   { background: var(--color-danger-tint); color: var(--color-danger); }
.siee-delta-pill.down { background: var(--color-success-tint); color: var(--color-success); }

/* Report tabs: switcher Consumi ↔ Costi in cima alle pagine /report/.
   Posizionato sopra la pagehead per essere il primo punto d'aggancio
   visivo. L'anno e i filtri si conservano nel link tra le due viste. */
.siee-report-tabs {
  display: inline-flex;
  gap: 0;
  background: var(--color-surface-2);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
}
.siee-report-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-2);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  white-space: nowrap;
}
.siee-report-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.siee-report-tab:hover {
  color: var(--color-text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.5);
}
.siee-report-tab.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
}
.siee-report-tab.is-active:hover { background: var(--color-surface); }
.siee-report-tab-unit {
  font-size: 11px;
  color: var(--color-text-3);
  font-weight: 400;
  padding: 2px 6px;
  background: var(--color-surface-2);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.siee-report-tab.is-active .siee-report-tab-unit {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

/* Report table: 14 colonne (Impianto + 12 mesi + Totale) eccedono la
   larghezza del card. Scroll orizzontale + sticky della prima colonna
   (denominazione) e dell'ultima (totale) per orientarsi durante lo scroll. */
.siee-report-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Gradiente di "edge shadow" per affordance di scroll: applicato SOLO
   quando c'e' davvero overflow orizzontale (classe aggiunta dal JS in
   coda al partial), altrimenti sembrerebbe una colonna fantasma sui
   bordi della tabella anche quando non c'e' nulla da scrollare. */
.siee-report-scroll.is-scrollable {
  background:
    linear-gradient(to right, var(--color-surface) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(0,0,0,.04), var(--color-surface) 70%) right,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.08), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), rgba(0,0,0,0)) right;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.siee-report-table { min-width: 1100px; }
.siee-report-table th, .siee-report-table td { padding: 10px 12px; }
.siee-report-table .col-mese {
  padding-left: 6px;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
  /* whitespace:nowrap mantiene i numeri su un'unica riga; nessun
     overflow:hidden (clippava troppo aggressivamente nelle colonne
     auto-sizzate del DIC). Eventuale sbordo a destra viene comunque
     coperto dal background opaco di col-totale (z-index:2). */
  white-space: nowrap;
}
.siee-report-table .col-impianto {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 2;
  min-width: 180px;
  max-width: 260px;
  box-shadow: 2px 0 4px rgba(0,0,0,.04);
}
.siee-report-table .col-totale {
  /* Niente sticky positioning: in passato il sticky right:36px combinato
     con z-index:2 creava problemi visivi (col-totale che copriva DIC
     overflow, percezione di colonna fantasma) che si sono accumulati
     iterazione dopo iterazione. Lasciando col-totale in flow naturale,
     la separazione fra ultimo mese (DIC) e TOTALE e' data dal
     border-left netto + padding-left maggiorato. Niente background
     esplicito → eredita correttamente il tint delle righe Altri/TOTALE. */
  border-left: 2px solid var(--color-text-3);
  padding-left: 16px;
}
.siee-report-table .col-grafico {
  /* Niente sticky: stessa logica di col-totale. La colonna icona finisce
     all'estremita' destra della tabella per il suo naturale ordine di
     <td>, senza overlap o positioning trick. */
  width: 36px;
  min-width: 36px;
  padding: 4px 0;
  text-align: center;
  border-left: 1px solid var(--color-border);
}
.siee-report-table .col-grafico a,
.siee-report-table .col-grafico span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
.siee-report-table .col-grafico a {
  color: var(--color-text-2);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.siee-report-table .col-grafico a:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}
.siee-report-table thead .col-impianto {
  /* col-impianto e' sticky-left e quindi ha background esplicito (vedi
     la sua regola) — qui la metto a tono col tema del thead. */
  background: var(--color-surface-2);
}
.siee-report-table .row-altri { background: var(--color-surface-2); font-style: italic; }
.siee-report-table .row-altri .col-impianto { background: var(--color-surface-2); }
.siee-report-table .row-totale { background: var(--color-primary-tint); }
.siee-report-table .row-totale .col-impianto { background: var(--color-primary-tint); }

.siee-quickstart { margin-bottom: 28px; }
.siee-quickstart .siee-card-body { padding-top: 12px; }
.siee-quickstart-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.siee-quickstart-actions .siee-btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
.siee-quickstart-actions .siee-btn.is-disabled,
.siee-quickstart-actions .siee-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
@media (max-width: 768px) {
  .siee-quickstart-actions { flex-direction: column; }
}

/* Tooltip sotto: per icone vicine al bordo top di una card (es. head-actions
   del Generatore grafici). Sopra venivano clippate dal card sovrastante. */
.head-actions .siee-icon-btn[data-tooltip]::after,
.siee-icon-btn.tooltip-bottom[data-tooltip]::after {
  bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px);
}
.head-actions .siee-icon-btn[data-tooltip]::before,
.siee-icon-btn.tooltip-bottom[data-tooltip]::before {
  bottom: auto; top: calc(100% + 4px);
  border: 4px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.85); border-top-color: transparent;
}
.head-actions .siee-icon-btn:hover[data-tooltip]::after,
.siee-icon-btn.tooltip-bottom:hover[data-tooltip]::after { transform: translateX(-50%) translateY(0); }

/* ============================================================
   Inputs
   ============================================================ */
.siee-input,
.siee-search-input {
  width: 100%;
  padding: 9px 14px;
  font: inherit; font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.siee-input::placeholder,
.siee-search-input::placeholder { color: var(--color-text-3); }
.siee-input:focus,
.siee-search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint); }

.siee-search {
  position: relative;
  display: flex; align-items: center;
}
.siee-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-text-3); pointer-events: none; }
.siee-search input { padding-left: 38px; }

label.siee-label,
.siee-form-group > label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--color-text-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.siee-form-group { margin-bottom: 16px; }

/* Override Bootstrap inputs to match (form-control, form-select) */
.form-control, .form-select {
  font-size: 14px; padding: 9px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  color: var(--color-text);
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint); }
.form-label { font-size: 10px; font-weight: 600; color: var(--color-text-2); text-transform: uppercase; letter-spacing: 0.04em; }

/* Global <select>: anche quelli renderizzati raw da Django senza classe
   ricevono lo stesso stile arrotondato degli input + chevron custom + altezza
   identica a .form-control via line-height:1.5. I select scoped
   (.dt-container .dt-length select) hanno le loro regole più specifiche. */
select,
.form-select {
  display: block;
  width: 100%;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 9px 32px 9px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  cursor: pointer;
}
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}

/* ============================================================
   Pills / badges
   ============================================================ */
.siee-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 600;
  border-radius: var(--radius-pill);
  letter-spacing: -0.005em;
  transition: transform 200ms var(--ease-out);
}
.siee-pill:hover { transform: scale(1.05); }
.siee-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.siee-pill-ok       { background: var(--color-success-tint); color: #1f7a3a; }
.siee-pill-warn     { background: var(--color-warning-tint); color: #b46300; }
.siee-pill-danger   { background: var(--color-danger-tint);  color: #c4271f; }
.siee-pill-neutral  { background: var(--color-surface-2);    color: var(--color-text-2); }
.siee-pill-info     { background: var(--color-primary-tint); color: var(--color-primary); }

.siee-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--color-surface-2);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--color-text);
}

/* ============================================================
   Tables
   ============================================================ */
table.siee-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
table.siee-table th {
  text-align: left;
  padding: 12px 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-3);
  background: transparent;
  border-bottom: 1px solid var(--color-border);
}
table.siee-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
table.siee-table tbody tr:last-child td { border-bottom: 0; }
table.siee-table tbody tr { transition: background-color 0.15s ease; }
table.siee-table tbody tr:hover td { background: #f8f9fa; }
table.siee-table .actions { text-align: right; white-space: nowrap; }
table.siee-table .actions .siee-icon-btn { vertical-align: middle; }

.siee-table-empty { text-align: center; padding: 40px 20px; color: var(--color-text-3); }

/* ============================================================
   Empty state
   ============================================================ */
.siee-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 48px 20px; color: var(--color-text-3);
}
.siee-empty svg { width: 36px; height: 36px; opacity: .6; }
.siee-empty p { margin: 0; font-size: 14px; }

/* ============================================================
   Alerts (Bootstrap fallback)
   ============================================================ */
.alert {
  border-radius: var(--radius-input);
  border: 0;
  padding: 12px 16px;
  font-size: 14px;
}
.alert-success { background: var(--color-success-tint); color: #1f7a3a; }
.alert-warning { background: var(--color-warning-tint); color: #b46300; }
.alert-danger  { background: var(--color-danger-tint);  color: #c4271f; }
.alert-info    { background: var(--color-primary-tint); color: var(--color-primary); }

/* ============================================================
   Login
   ============================================================ */
.siee-login {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: var(--color-surface-2);
}
.siee-login-card {
  width: 100%; max-width: 420px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.siee-login-header {
  padding: 36px 32px 24px;
  text-align: center;
}
/* Logo ENAS (login/lockout/conflitto): immagine col proprio sfondo, altezza
   fissa e larghezza proporzionale. I due marchi stanno affiancati e centrati. */
.siee-login-marks {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 16px;
}
.siee-login-header .mark {
  height: 56px; border-radius: 14px; overflow: hidden;
  /* Login usa la versione SCURA del logo, il cui fondo coincide col primario
     dell'interfaccia: lo sfondo del riquadro lo segue (niente fessure chiare). */
  background: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
/* Niente border-radius qui: lo fa gia' il contenitore (evita il doppio
   antialiasing che creava l'anello chiaro attorno al logo). */
.siee-login-header .mark img { height: 100%; width: auto; display: block; }
.siee-login-header h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.siee-login-header p { margin: 6px 0 0; font-size: 13px; color: var(--color-text-2); }
.siee-login-body { padding: 8px 32px 32px; }
.siee-login-link {
  font-size: 12px; font-weight: 600; color: var(--color-primary);
  text-decoration: none; letter-spacing: 0;
  transition: var(--transition);
}
.siee-login-link:hover { color: var(--color-primary-hover-dark); text-decoration: underline; }

/* Form label row: label a sinistra + link/azione a destra */
.siee-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; gap: 12px;
}
.siee-label-row > label.siee-label,
.siee-label-row > .siee-label { margin-bottom: 0; }

/* Input con affisso interno (es. occhiello toggle password) */
.siee-input-affix { position: relative; display: block; }
.siee-input-affix > .siee-input,
.siee-input-affix > .form-control { padding-right: 44px; }
.siee-input-affix-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px;
  color: var(--color-text-3); cursor: pointer;
  transition: var(--transition);
}
.siee-input-affix-btn:hover { color: var(--color-text); background: var(--color-surface-2); }
.siee-input-affix-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-tint); color: var(--color-primary); }
.siee-input-affix-btn svg { width: 18px; height: 18px; }
.siee-input-affix-btn[hidden] { display: none; }

/* ============================================================
   Footer
   ============================================================ */
.siee-footer {
  padding: 24px 0;
  font-size: 12px;
  color: var(--color-text-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.siee-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.siee-footer-copy { color: var(--color-text-3); }
.siee-footer-links {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
}
.siee-footer-links a {
  color: var(--color-text-2);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}
.siee-footer-links a:hover { color: var(--color-primary); text-decoration: none; }
.siee-footer-sep { color: var(--color-text-3); opacity: 0.5; }
.siee-footer-version {
  font-size: 11px;
  padding: 1px 6px;
  background: var(--color-surface-2);
  color: var(--color-text-2);
  border-radius: 4px;
}
@media (max-width: 767px) {
  .siee-footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
}

/* ============================================================
   Mobile "sola visualizzazione" (richiesta cliente 2026-07-22)
   Le azioni di scrittura (crea/modifica) sono nascoste sotto 768px.
   Il divieto VERO resta lato server (admin_required per ruolo): questa
   e' solo UX. Il desktop non e' toccato: la regola vive nel @media.
   ============================================================ */
@media (max-width: 767px) {
  .siee-desktop-only { display: none !important; }
  /* Gate mobile delle liste Impianti/Fatture: senza impianto selezionato ne'
     ricerca attiva i risultati restano nascosti (si vede il solo hint). La
     classe e' calcolata dal server a ogni render del partial HTMX. */
  .siee-mobile-gate { display: none !important; }
}
/* Hint installazione iOS (Safari non ha prompt automatico): barra in basso,
   mostrata da siee.js solo su iPhone/iPad fuori standalone e non dismissata. */
.siee-ios-hint {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1040;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; font-size: 13px; line-height: 1.45;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.siee-ios-hint[hidden] { display: none; }
.siee-ios-hint-close {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: var(--color-surface-2); color: var(--color-text-2); cursor: pointer;
}

/* Scorciatoie mobile in home: percorso ridotto Impianti/Fatture/Consumi. */
.siee-mobile-shortcuts { display: grid; gap: 10px; }
.siee-mobile-shortcuts .siee-btn {
  justify-content: flex-start; padding: 14px 16px; font-size: 15px;
}
.siee-mobile-shortcuts .siee-btn svg { width: 18px; height: 18px; }
.siee-mobile-home { margin-bottom: 20px; }
/* Ricerca rapida della home mobile: riga impianto + 3 azioni affiancate. */
.siee-home-sugg { padding: 10px 14px; border-top: 1px solid var(--color-border); }
.siee-home-sugg:first-of-type { border-top: 0; }
.siee-home-sugg-nm { font-size: 14px; font-weight: 600; color: var(--color-text); }
.siee-home-sugg-nm .muted { color: var(--color-text-3); font-weight: 400; font-size: 12px; }
.siee-home-sugg-actions { display: flex; gap: 8px; margin-top: 8px; }
.siee-home-sugg-actions a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; font-size: 13px; border: 1px solid var(--color-border);
  border-radius: 8px; color: var(--color-text); text-decoration: none;
  background: var(--color-surface);
}
.siee-home-sugg-actions a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.siee-home-sugg-actions svg { width: 14px; height: 14px; flex: none; }

/* ============================================================
   DataTables 2.x coherence (.dt-container / .dt-length / .dt-search / .dt-info / .dt-paging)
   ============================================================ */
.dt-container .dt-search input,
.dt-container .dt-length select,
.dt-container .dt-input {
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  padding: 6px 10px; font-size: 13px;
  background: var(--color-surface);
  color: var(--color-text);
}
/* Select page length: override del select globale (width:100% block).
   Qui deve essere inline tra '50' e 'voci per pagina', non full-width. */
.dt-container .dt-length select {
  display: inline-block;
  width: auto;
  min-width: 64px;
  padding-right: 28px;
}
/* Pagination: DataTables 2.x BS5 renderizza con struttura Bootstrap
   .pagination > .page-item > .page-link (più .dt-paging-button su .page-link).
   Override aggressivo per rimuovere lo styling Bootstrap pesante e applicare
   un look morbido coerente col design system. */
.dt-container .dt-paging .pagination {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.dt-container .dt-paging .page-item { margin: 0; }
.dt-container .dt-paging .page-link,
.dt-container .dt-paging .dt-paging-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px !important;
  margin: 0 !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-2);
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-input) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.dt-container .dt-paging .page-link:hover,
.dt-container .dt-paging .dt-paging-button:hover {
  background: var(--color-surface-2) !important;
  color: var(--color-text);
  text-decoration: none;
}
.dt-container .dt-paging .page-item.active .page-link,
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--color-primary-tint) !important;
  color: var(--color-primary) !important;
  border-color: transparent !important;
  font-weight: 600;
}
.dt-container .dt-paging .page-item.disabled .page-link,
.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled:hover {
  background: transparent !important;
  color: var(--color-text-3) !important;
  opacity: 0.4;
  cursor: not-allowed;
}

/* Inset top/bottom controls so non aderiscano ai bordi della card.
   20px orizzontale = stesso rientro delle celle .siee-table; 12px verticale per respirare. */
.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-info,
.dt-container .dt-paging { padding: 12px 20px; }

/* ============================================================
   Animations · Tables (row entrance, empty state, row-hover icons)
   ============================================================ */

/* Row entrance: righe invisibili di default; JS aggiunge .is-revealed
   alla tabella quando entra in viewport (TableReveal in siee.js). */
.siee-table tbody tr {
  opacity: 0;
  transform: translateY(8px);
}
.siee-table.is-revealed tbody tr {
  animation: siee-row-in 350ms var(--ease-out) forwards;
  animation-delay: calc(var(--row-index, 0) * 35ms);
}
@keyframes siee-row-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Empty state: appare con scale + fade ogni volta che viene renderizzato. */
.siee-empty {
  animation: siee-empty-in 280ms var(--ease-out);
}
@keyframes siee-empty-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Row-hover icon lift: scoped a .siee-table così icon-btn fuori tabelle
   non vengono toccati. Default opacity 0.65 (icone "spente"); hover sulla
   riga le ravviva e le alza. Hover sull'icona stessa aggiunge scale 1.05. */
.siee-table .siee-icon-btn { opacity: 0.65; }
.siee-table tbody tr:hover .siee-icon-btn {
  opacity: 1;
  transform: translateY(-1px);
}
.siee-table tbody tr:hover .siee-icon-btn:hover {
  transform: translateY(-1px) scale(1.05);
}

/* Reduced motion: tutto istantaneo, niente stagger né scale-in */
@media (prefers-reduced-motion: reduce) {
  .siee-table tbody tr { opacity: 1; transform: none; }
  .siee-table.is-revealed tbody tr { animation: none; }
  .siee-empty { animation: none; }
}

/* ============================================================
   Animations · HTMX feedback
   ============================================================ */
.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .is-loading { transition: none; }
}

/* ============================================================
   Animations · Link grow (marker class .siee-link)
   ============================================================ */
.siee-link {
  position: relative;
  text-decoration: none;
  color: var(--color-primary-lift);
  display: inline-block;
}
.siee-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: currentColor;
  transition: width 300ms var(--ease-out);
}
.siee-link:hover {
  text-decoration: none;
  color: var(--color-primary);
}
.siee-link:hover::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .siee-link::after { transition: none; }
}

/* ============================================================
   Animations · Reduced motion override per Step 3 (hover/stagger)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .siee-card { opacity: 1; transition: none; }
  .siee-card:hover { transform: none; box-shadow: var(--shadow-card); }
  .siee-kpi:hover { transform: none; box-shadow: var(--shadow-card); }
  .siee-pill:hover { transform: none; }
  .siee-btn-primary:hover { transform: none; box-shadow: none; }
  .siee-btn-primary:active { transform: none; box-shadow: none; }
  .siee-btn-secondary:hover, .siee-btn-secondary:active,
  .siee-btn-ghost:hover, .siee-btn-ghost:active,
  .siee-btn-danger:hover, .siee-btn-danger:active { transform: none; box-shadow: none; }
}

/* ============================================================
   Strumenti · Generatore grafici (layout sidebar + main + SQL details)
   ============================================================ */
.siee-grafico-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.siee-grafico-main {
  min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
}
.siee-grafico-main .siee-card { margin-bottom: 0; }
.siee-grafico-sidebar {
  display: flex; flex-direction: column; gap: 16px;
}
.siee-grafico-sidebar .siee-card { margin-bottom: 0; }
/* Card che contiene un combobox: niente overflow:hidden, sennò la dropdown
   viene tagliata dal bordo della card. In più position:relative + z-index alza
   il suo stacking context sopra le card sorelle successive (es. Report
   Consumi/Costi, dove la tabella è in una card separata sotto): senza,
   l'opacity di .siee-card creerebbe uno stacking context per ogni card e la
   tendina — pur con z-index alto — resterebbe intrappolata sotto la tabella. */
.siee-card.has-combobox { overflow: visible; position: relative; z-index: 20; }

/* Overlay rettangolo di selezione durante il drag-to-zoom sul grafico */
.siee-chart-zoom-box {
  position: absolute;
  background: rgba(30, 58, 138, 0.12);
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
}
#chart-target canvas { cursor: crosshair; }

/* Card del grafico a tutto schermo: occupa l'intero viewport, mantiene
   lo stile del design system ma toglie padding esterno. */
.siee-card:fullscreen {
  background: var(--color-surface);
  padding: 24px;
  display: flex; flex-direction: column;
  overflow: auto;
}
.siee-card:fullscreen .siee-card-body {
  flex: 1;
  min-height: 0;
}
.siee-card:fullscreen #chart-target {
  height: 100%;
}
.siee-card:fullscreen canvas {
  max-height: none !important;
  height: 100% !important;
}

@media (min-width: 1024px) {
  .siee-grafico-sidebar { position: sticky; top: 84px; }
}
@media (max-width: 1023px) {
  .siee-grafico-layout { grid-template-columns: 1fr; }
}

/* SQL collapsible details: nasconde il marker default e ruota il chevron */
.siee-sql-details > summary {
  list-style: none;
  cursor: pointer;
}
.siee-sql-details > summary::-webkit-details-marker,
.siee-sql-details > summary::marker { display: none; content: ""; }
.siee-sql-details > summary .chev {
  width: 14px; height: 14px;
  color: var(--color-text-3);
  transition: transform 200ms var(--ease-out);
}
.siee-sql-details[open] > summary .chev { transform: rotate(180deg); }
.siee-sql-pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1.5;
  color: var(--color-text-2);
  background: var(--color-surface-2);
  padding: 12px;
  border-radius: var(--radius-input);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (prefers-reduced-motion: reduce) {
  .siee-sql-details > summary .chev { transition: none; }
}

/* ============================================================
   Responsive (mobile <= 768px)
   ============================================================ */
/* Pulsante Indietro dell'header: esiste solo su mobile (vedi @media sotto).
   [hidden] resta prioritario: siee.js lo nasconde sulla home. */
.siee-back-btn {
  display: none;
  width: 38px; height: 38px; flex: none;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--color-border); border-radius: 10px;
  color: var(--color-text); cursor: pointer;
}
.siee-back-btn svg { width: 20px; height: 20px; }
.siee-back-btn:hover { background: rgba(0, 0, 0, 0.04); }
.siee-back-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Mobile <768px: hamburger + drawer al posto della nav orizzontale */
@media (max-width: 767px) {
  /* Guardia anti-scrollbar orizzontale: se un elemento sborda di qualche px
     (somma dell'header sugli schermi stretti, ombre, arrotondamenti) la
     pagina non deve scorrere lateralmente. I dropdown non vengono clippati:
     restano dentro la viewport. */
  html, body { overflow-x: hidden; }
  .siee-header-inner { gap: 10px; }
  .siee-nav { display: none; }
  .siee-nav-toggle { display: inline-flex; }
  .siee-back-btn:not([hidden]) { display: inline-flex; }
  /* Header affollato (freccia + loghi + hamburger + profilo): wordmark piu'
     piccolo e su una riga sola, marchi ridotti. */
  .siee-logo { font-size: 15px; gap: 6px; white-space: nowrap; }
  .siee-logo-mark { height: 24px; }
  .siee-logo-zap { width: 24px; height: 24px; }
  .siee-logo-zap svg { width: 14px; height: 14px; }
  /* Barra scope: la scritta "Stai lavorando su:" e' ridondante sul telefono
     (i chip parlano da soli) — nascosta, cosi' chip e Reset stanno su UNA
     riga. Resta l'icona. */
  .siee-scope-label { display: none; }
  /* Reset dello scope: da quadratino blu orfano a bottone TONDO 38px,
     leggero (ghost), allineato coi chip sulla stessa riga. */
  .siee-scope-reset .siee-btn span { display: none; }
  .siee-scope-reset .siee-btn {
    width: 38px; height: 38px; padding: 0;
    border-radius: 50%; justify-content: center;
    background: var(--color-surface); color: var(--color-primary);
    border: 1px solid var(--color-border); box-shadow: none;
  }
  .siee-scope-reset .siee-btn:hover,
  .siee-scope-reset .siee-btn:active { background: var(--color-surface-2); color: var(--color-primary); }
  .siee-scope-reset .siee-btn svg { width: 15px; height: 15px; }
  /* × dei chip (rimuovi impianto/anno): bottoni di default minuscoli →
     area tattile ~28px. */
  .siee-scope-chip-x {
    min-width: 28px; min-height: 28px; padding: 0;
    border: 0; background: none; font-size: 17px; line-height: 1;
    color: var(--color-text-2);
  }
  .siee-scope-chip { padding: 6px 12px; }
}

/* Schermi MOLTO stretti (<390px): la somma dell'header (freccia + 2 marchi +
   wordmark nowrap + hamburger + profilo) supera la viewport ed era la causa
   del leggero scroll orizzontale. Qui cede il marchio storico: resta il solo
   logo ENAS. */
@media (max-width: 389px) {
  .siee-logo-zap { display: none; }
}

@media (max-width: 767px) {
  /* Profilo: solo l'avatar con le iniziali (il nome esteso si restringeva
     male sui telefoni stretti). Font ridotto per far stare 2 lettere. */
  .siee-profile-name { display: none; }
  .siee-avatar { font-size: 11px; letter-spacing: 0.3px; }
  /* Tabelle chiave-valore a DOPPIA coppia (4 colonne: etichetta·valore ×2,
     es. "Riferimenti" del dettaglio periodo): su schermo stretto ogni colonna
     aveva ~90px e i valori andavano a capo in verticale. Qui si linearizza:
     etichetta sopra (piccola, grigia), valore sotto a tutta larghezza. */
  .siee-kv-2col, .siee-kv-2col tbody, .siee-kv-2col tr,
  .siee-kv-2col th, .siee-kv-2col td { display: block; width: auto !important; }
  .siee-kv-2col th {
    border: 0; padding: 10px 0 1px;
    font-size: 11px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--color-text-3);
  }
  .siee-kv-2col td { border: 0; border-bottom: 1px solid var(--color-border); padding: 0 0 8px; }
  .siee-kv-2col tr:last-child td:last-child { border-bottom: 0; }
  /* Tendina Ricerca Rapida: voci e intestazioni-gruppo con area tattile
     piena (~44px): a 13px/7px erano difficili da centrare col pollice. */
  .siee-suggest-item { padding: 13px 16px; font-size: 15px; }
  .siee-suggest-group { padding: 10px 16px 6px; font-size: 12px; }
  a.siee-suggest-grouphead { padding: 12px 16px; }
  .siee-suggest-panel { max-height: 60vh; }
  /* Back-link dei dettagli ("← Periodi", "← Fatture"...): da testo 13px a
     PULSANTE tattile (~42px di area): il link piccolo era quasi incliccabile
     col pollice. Su desktop resta il link testuale di sempre. */
  .siee-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; margin: 2px 0 8px;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-surface);
    font-size: 14px; font-weight: 600;
    color: var(--color-primary); text-decoration: none;
  }
  .siee-back-link:active { background: var(--color-surface-2); }
  .siee-mega-panel { display: none !important; }     /* su mobile usiamo il drawer, non i panel */
  .siee-pagehead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .siee-pagehead h1 { font-size: 18px; }
  .siee-card-head { flex-wrap: wrap; }
  table.siee-table th, table.siee-table td { padding: 12px 14px; }
}

/* ============================================================
   HTMX indicator spinner (es. live search Impianti)
   ============================================================ */
.htmx-indicator { opacity: 0; transition: opacity 150ms var(--ease-out); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

.siee-input-spinner {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-3);
  pointer-events: none;
}
.siee-input-spinner svg {
  width: 100%;
  height: 100%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Heatmap — profilo carico quarto-d'ora × giorno (SVG)
   ============================================================ */
.siee-heatmap-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
}
.siee-heatmap-svg {
  display: block;
  font-family: inherit;
}
.siee-heatmap-axis {
  font-size: 10px;
  fill: var(--color-text-3);
  font-weight: 500;
}
.siee-heatmap-axis-y {
  text-anchor: end;
}
.siee-heatmap-svg rect {
  transition: stroke 80ms var(--ease-out);
  cursor: pointer;
}
.siee-heatmap-svg rect:hover {
  stroke: var(--color-primary);
  stroke-width: 1.5;
}
.siee-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--color-text-3);
  margin-top: 12px;
  justify-content: center;
}
.siee-heatmap-legend-gradient {
  display: inline-block;
  width: 200px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(to right, hsl(220, 60%, 96%), hsl(220, 60%, 30%));
}

/* ============================================================
   Viste salvate — preset utente in sidebar
   ============================================================ */
.siee-vista-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.siee-vista-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 120ms var(--ease-out);
}
.siee-vista-item:hover { background: var(--color-surface-2); }
.siee-vista-link {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.siee-vista-link:hover { color: var(--color-primary); }
.siee-icon-btn-tiny {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-3);
  cursor: pointer;
  border-radius: 4px;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.siee-icon-btn-tiny svg { width: 12px; height: 12px; }
.siee-icon-btn-tiny:hover {
  background: var(--color-danger-tint, rgba(220, 38, 38, 0.1));
  color: #dc2626;
}

/* ============================================================
   Breadcrumb — navigazione drill-down nei grafici
   Vive dentro #chart-card-meta nel card-head del grafico, sopra al
   titolo dell'impianto, così resta visibile anche in fullscreen.
   ============================================================ */
.siee-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--color-text-2);
}
.siee-breadcrumb[hidden] { display: none; }
.siee-breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms var(--ease-out);
}
.siee-breadcrumb a:hover { background: var(--color-primary-tint); }
.siee-breadcrumb .current {
  font-weight: 600;
  color: var(--color-text);
  padding: 4px 8px;
}
.siee-breadcrumb .sep {
  width: 12px;
  height: 12px;
  color: var(--color-text-3);
}

/* ============================================================
   Toast — feedback auto-dismiss in basso a destra
   ============================================================ */
.siee-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--color-text);
  color: white;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  max-width: 360px;
}
.siee-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.siee-toast-warn { background: #d97706; }

/* ============================================================
   KPI inline — pill orizzontali compatte (variante compatta di pagina)
   Usata nel Generatore grafici per ridurre lo spazio verticale.
   ============================================================ */
.siee-kpi-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.siee-kpi-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
}
.siee-kpi-pill .siee-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-2);
}
.siee-kpi-pill .siee-kpi-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.siee-kpi-pill .siee-kpi-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-3);
}

/* Variante legacy: KPI come card grandi (4 colonne). Restano disponibili
   per altre pagine; sul Generatore grafici usiamo .siee-kpi-inline. */
.siee-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.siee-kpi-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.siee-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}
@media (max-width: 768px) {
  .siee-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Compaction varianti — usate sul Generatore grafici per ridurre
   gli spazi e dare priorità visiva al grafico.
   ============================================================ */
.siee-card-compact .siee-card-body {
  padding: 14px 18px;
}
.siee-grafico-main {
  gap: 12px !important;  /* prima 24px */
}
.siee-grafico-main #chart-card .siee-card-head {
  padding: 14px 20px;
}
.siee-grafico-main #chart-card .siee-card-head .siee-card-title {
  font-size: 16px;
}
.siee-grafico-main #chart-card .siee-card-head .siee-card-sub {
  font-size: 12px;
}
.siee-grafico-main #chart-card .siee-card-body {
  padding: 16px 20px;
}

/* Disabilita il transform:translateY(-2px) di hover sulle card della
   pagina Grafici e sulla sidebar. Il transform crea uno stacking context
   che intrappolava la dropdown combobox dentro la card di origine →
   la chart card sibling, in :hover, finiva sopra la dropdown
   facendo arrivare gli eventi al canvas (cursor crosshair, jitter). */
.siee-grafico-main .siee-card:hover,
.siee-grafico-sidebar .siee-card:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}

/* Sidebar compatta: una sola card con sezioni separate da border-top */
.siee-sidebar-card {
  padding: 0;
}
.siee-sidebar-section {
  padding: 14px 18px;
}
.siee-sidebar-section + .siee-sidebar-section,
.siee-sidebar-section-collapsible {
  border-top: 1px solid var(--color-border);
}
.siee-sidebar-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-2);
  margin: 0 0 10px;
}
.siee-sidebar-section .siee-form-group {
  margin-bottom: 10px;
}
.siee-sidebar-section .siee-form-group:last-child {
  margin-bottom: 0;
}
.siee-sidebar-section .siee-label {
  margin-bottom: 4px;
  font-size: 11px;
}
.siee-sidebar-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.siee-sidebar-row .siee-form-group { margin-bottom: 0; }
.siee-sidebar-section .siee-vista-save {
  margin-bottom: 0;
}
.siee-sidebar-section .siee-vista-list {
  margin-top: 8px;
}
/* Sezione collapsible (SQL): summary cliccabile con chevron */
.siee-sidebar-section-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -14px -18px;
  padding: 14px 18px;
}
.siee-sidebar-section-collapsible > summary::-webkit-details-marker { display: none; }
.siee-sidebar-section-collapsible > summary h3 {
  flex: 1;
  margin: 0;
}
.siee-sidebar-section-collapsible > summary .chev {
  width: 14px;
  height: 14px;
  color: var(--color-text-3);
  transition: transform 180ms var(--ease-out);
}
.siee-sidebar-section-collapsible[open] > summary .chev {
  transform: rotate(180deg);
}
.siee-sidebar-section-collapsible > .siee-sql-pre {
  margin: 12px 0 0;
}

/* Badge "ultimo aggiornamento dati" — sotto al grafico */
.siee-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-3);
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--color-surface-2);
}
.siee-update-badge svg {
  width: 12px;
  height: 12px;
}

/* ============================================================
   Combobox — searchable dropdown (Alpine component)
   ============================================================ */
.siee-combobox {
  position: relative;
  /* Alza il combobox sopra le card sibling: senza questo, la dropdown
     (z-index 100 nel sotto-contesto) veniva sopravanzata dalla chart
     card che, in :hover transform, creava il proprio stacking context. */
  z-index: 50;
}
.siee-combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  list-style: none;
  padding: 4px;
  margin: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.siee-combobox-list li {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-text);
  /* Niente transition sul bg: spostandosi tra item adiacenti il fade-in
     creava percezione di jitter. L'hover resta immediato. */
}
.siee-combobox-list li.highlight,
.siee-combobox-list li:hover {
  background: var(--color-surface-2);
}
.siee-combobox-list li.selected {
  color: var(--color-primary);
  font-weight: 600;
}
.siee-combobox-list li.empty {
  color: var(--color-text-3);
  font-style: italic;
  cursor: default;
  background: transparent;
}
.siee-combobox input.form-control,
.siee-combobox input.siee-input {
  /* Lascia spazio alla chevron via background-image, come i select. */
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

.siee-scope-bar {
  position: sticky;
  top: 60px;
  z-index: 90;
  /* Fondo opaco: la tinta primaria semitrasparente va stesa su una base
     bianca, altrimenti — essendo la barra sticky — il contenuto che le
     scorre sotto traspare e le scritte si sovrappongono. */
  background:
    linear-gradient(var(--color-primary-tint), var(--color-primary-tint)),
    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 0;
  font-size: 13px;
}
.siee-scope-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.siee-scope-icon { display: inline-flex; align-items: center; color: var(--color-primary); }
.siee-scope-icon svg { width: 16px; height: 16px; }
.siee-scope-label { color: var(--color-text-2); font-weight: 500; }
.siee-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  padding: 4px 12px;
  border-radius: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: background 120ms ease, border-color 120ms ease;
}
.siee-scope-chip:hover { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; border-color: var(--color-primary); }
.siee-scope-chip-pod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.siee-scope-chip-pod svg { width: 12px; height: 12px; color: var(--color-text-2); }
.siee-scope-sep { color: var(--color-text-3); }
.siee-scope-reset { margin: 0 0 0 auto; }
@media print { .siee-scope-bar { display: none; } }

/* ============================================================
   Print — output cartaceo / "Salva come PDF" dal dialog di stampa
   ============================================================ */
@media print {
  /* Nascondi chrome del sito (e le card mobile: in stampa resta la tabella) */
  .siee-header,
  .siee-footer,
  .alert,
  .siee-cards,
  .htmx-indicator { display: none !important; }

  /* Pulsanti azione in pagehead: nascondi (ma tieni pill informative) */
  .siee-pagehead-actions .siee-btn,
  .siee-pagehead-actions button { display: none !important; }

  /* Body/shell flat, niente sfondo */
  body, .siee-body { background: #fff !important; }
  .siee-shell, .siee-content { padding: 0 !important; }

  /* Card pulite, niente ombre, evita split a metà pagina */
  .siee-card {
    box-shadow: none !important;
    border: 1px solid #d0d0d0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Generatore grafici: layout single-column, niente sidebar/SQL */
  .siee-grafico-layout { display: block !important; }
  .siee-grafico-sidebar,
  .siee-sql-details { display: none !important; }

  /* Forza la stampa dei colori di sfondo (header tabelle, pill, etc.) */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Link blu inutili in stampa */
  a { color: inherit !important; text-decoration: none !important; }

  @page {
    size: A4;
    margin: 1.2cm 1.5cm;
  }
}

/* ============================================================
   Mobile (≤767px): liste a schede + KPI 2/riga + rifiniture
   ============================================================ */
.siee-cards { display: flex; flex-direction: column; gap: 10px; }
.siee-card-item {
  display: block; text-decoration: none; color: inherit;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 12px 14px;
}
.siee-card-item:hover { text-decoration: none; color: inherit; border-color: var(--color-primary); }
.siee-card-item .nm { display: block; font-weight: 600; color: var(--color-text); }
.siee-card-item .nm .chev { float: right; color: var(--color-text-3); font-size: 18px; line-height: 1; }
.siee-card-item .addr { display: block; margin: 4px 0; font-size: 13px; color: var(--color-text-2); }
.siee-card-item .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--color-text-3); margin-top: 4px; }

@media (max-width: 767px) {
  .siee-kpis { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
  .siee-kpi { padding: 14px 16px; }
  .siee-kpi .value { font-size: 24px; }
  .siee-impianto-kpis .siee-kpi .value { font-size: 22px; }
  .siee-scope-bar-inner { flex-wrap: wrap; }
  .siee-pagehead-actions { flex-wrap: wrap; }
}

@media (max-width: 767px) {
  .siee-kv tr { display: block; border-bottom: 1px solid var(--color-border-soft); padding: 6px 0; }
  .siee-kv tr:last-child { border-bottom: 0; }
  .siee-kv th { display: block; width: auto !important; border: 0; padding: 0;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-3); }
  .siee-kv td { display: block; border: 0; padding: 2px 0 0; }
}

@media (max-width: 767px) {
  .siee-table-stack thead { display: none; }
  .siee-table-stack tr { display: block; border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
  .siee-table-stack td { display: block; border: 0 !important; padding: 2px 0; text-align: left !important; }
  .siee-table-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--color-text-3); font-size: 11px; font-weight: 600; }
  /* Prima cella senza label = titolo della card (mese/giorno): evidenziata. */
  .siee-table-stack td.siee-stack-title { font-weight: 600; font-size: 15px; padding-bottom: 4px; }
  /* Celle con mini-barra (consumi): su mobile mostro solo il numero inline;
     la barra di sfondo aggiungerebbe solo larghezza inutile. */
  .siee-table-stack .siee-cellbar { display: inline !important; }
  .siee-table-stack .siee-cellbar-track { display: none; }
  /* Pulsante azione (Dettaglio) tap-friendly, staccato dal numero. */
  .siee-table-stack td .siee-btn-sm { display: inline-flex; margin-top: 4px; }
}

/* Alpine: nascondi gli elementi con x-cloak finché Alpine non è inizializzato
   (regola globale; evita il flash di contenuto non ancora processato). */
[x-cloak] { display: none !important; }

/* Dropdown suggerimenti ricerca Impianti */
.siee-suggest { position: relative; }
.siee-suggest-wrap:empty { display: none; }
/* La card della ricerca porta la classe .has-combobox (overflow:visible), così
   il dropdown assoluto non viene ritagliato dal bordo della card. */
.siee-suggest-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.16);
  max-height: 340px; overflow-y: auto; padding: 6px 0;
}
.siee-suggest-title {
  padding: 10px 14px 6px; font-size: 14px; font-weight: 700; color: var(--color-text);
}
.siee-suggest-group {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-3); padding: 8px 14px 4px;
}
/* Intestazione cliccabile: clic = filtra la lista su TUTTI gli N del campo.
   Il conteggio va a destra così la riga si legge come un'azione. */
a.siee-suggest-grouphead {
  display: flex; justify-content: space-between; align-items: baseline;
  text-decoration: none; cursor: pointer;
}
a.siee-suggest-grouphead:hover { background: var(--color-surface-2); }
a.siee-suggest-grouphead:hover .siee-suggest-count { text-decoration: underline; }
/* Conteggio totale (può superare le voci mostrate, cap a 8) accanto al gruppo. */
.siee-suggest-count { font-weight: 600; color: var(--color-text-2); }
.siee-suggest-item {
  display: block; padding: 7px 14px; font-size: 13px; color: var(--color-text);
  text-decoration: none;
}
.siee-suggest-item:hover { background: var(--color-surface-2); text-decoration: none; }
.siee-suggest-item .muted { color: var(--color-text-3); font-size: 12px; margin-left: 6px; }