/* ============================================================
   SENT-MASTER UI · Design System · v1.0
   Dark-first, responsive, consistent across all pages
   ============================================================ */

/* ── Font (Inter hosted locally on SD) ────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Surface */
  --bg:        #0f172a;
  --bg-2:      #0d1526;
  --surface:   #1e293b;
  --surface-2: #253347;
  --surface-3: #2c3d54;
  --border:    #334155;
  --border-2:  #3f5068;

  /* Text */
  --text:   #f1f5f9;
  --text-2: #cbd5e1;
  --muted:  #94a3b8;
  --muted-2:#64748b;

  /* Brand */
  --primary:     #6366f1;
  --primary-h:   #4f46e5;
  --primary-l:   #818cf8;
  --primary-bg:  rgba(99,102,241,.15);
  --primary-ring:rgba(99,102,241,.4);

  /* Semantic */
  --green:    #22c55e; --green-bg:  rgba(34,197,94,.12);
  --yellow:   #f59e0b; --yellow-bg: rgba(245,158,11,.12);
  --red:      #ef4444; --red-bg:    rgba(239,68,68,.12);
  --blue:     #38bdf8; --blue-bg:   rgba(56,189,248,.12);

  /* Layout */
  --sidebar-w: 240px;
  --header-h:  60px;
  --nav-h:     64px;

  /* Shape */
  --r:    12px;
  --r-sm: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Elevation */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.35);
  --shadow:    0 4px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.6);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t:      200ms;
  --t-slow: 350ms;
}

[data-theme="light"] {
  --bg:        #f1f5f9;
  --bg-2:      #f8fafc;
  --surface:   #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;
  --border:    #e2e8f0;
  --border-2:  #cbd5e1;
  --text:      #0f172a;
  --text-2:    #1e293b;
  --muted:     #64748b;
  --muted-2:   #94a3b8;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow:    0 4px 20px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.15);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--primary-l); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--primary-bg); color: var(--primary-l); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ── Typography ───────────────────────────────────────────── */
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1.125rem; font-weight: 600; }
h4 { font-size: .9375rem; font-weight: 600; }
p  { color: var(--text-2); }
small { font-size: .8125rem; color: var(--muted); }
.text-muted  { color: var(--muted); }
.text-danger { color: var(--red); }
.text-success{ color: var(--green); }
.text-sm     { font-size: .875rem; }
.text-xs     { font-size: .75rem; }
.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;   /* altezza fissa: il menu interno scorre (overflow-y) */
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  transition: transform var(--t-slow) var(--ease);
}
.sidebar__logo {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar__logo-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--primary-l));
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99,102,241,.4);
}
.sidebar__brand { font-weight: 700; font-size: .8125rem; color: var(--text); letter-spacing: -.01em; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sidebar__brand span { color: #A6C839; }
.sidebar__logo img { max-height: 24px; width: auto; max-width: 72px; display: block; flex-shrink: 0; }
.sidebar__nav { flex: 1; padding: .75rem; overflow-y: auto; }
.sidebar__section { margin-bottom: 1.5rem; }
.sidebar__section-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0 .5rem;
  margin-bottom: .375rem;
}
.sidebar__footer { padding: .75rem; border-top: 1px solid var(--border); }

/* Nav items */
.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t), color var(--t);
  text-decoration: none;
  position: relative;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nav-item:hover  { background: var(--surface-2); color: var(--text-2); text-decoration: none; }
.nav-item.active { background: var(--primary-bg); color: var(--primary-l); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--primary);
  border-radius: 0 var(--r-full) var(--r-full) 0;
}
.nav-item__icon { width: 18px; height: 18px; flex-shrink: 0; transition: opacity var(--t); opacity: .65; }
.nav-item.active .nav-item__icon,
.nav-item:hover  .nav-item__icon { opacity: 1; }
.nav-item__badge {
  margin-left: auto;
  font-size: .6875rem; font-weight: 700;
  background: var(--red); color: #fff;
  padding: .1em .45em;
  border-radius: var(--r-full);
  min-width: 18px; text-align: center;
}

/* ── Main area ────────────────────────────────────────────── */
.layout     { display: flex; min-height: 100vh; }
/* min-width:0 — da elemento flex, senza, si allargherebbe al contenuto:
 * una tabella larga (es. matrice gruppi DALI) sfonderebbe il viewport
 * invece di scorrere dentro il proprio contenitore. */
.main-area  { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }

/* ── Header ───────────────────────────────────────────────── */
.header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
.header__back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  cursor: pointer; color: var(--muted);
  border: none; background: transparent;
  transition: background var(--t), color var(--t);
  flex-shrink: 0;
}
.header__back:hover { background: var(--surface-2); color: var(--text); }
.header__menu-btn  { display: none; }
.header__title     { font-size: 1rem; font-weight: 600; flex: 1; min-width: 0; }
.header__actions   { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* ── Page content ─────────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: 1.5rem;
  width: 100%;
  max-width: 1440px;
  animation: fade-in .2s var(--ease);
}

/* ── Bottom nav (mobile) ──────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 200;
}
.bottom-nav__items { display: flex; height: 100%; padding: 0 .5rem; }
.bottom-nav__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem;
  border-radius: var(--r-sm);
  cursor: pointer; color: var(--muted);
  font-size: .6875rem; font-weight: 500;
  text-decoration: none;
  transition: color var(--t);
  padding: .25rem; margin: .375rem .125rem;
  border: none; background: transparent;
}
.bottom-nav__item:hover     { text-decoration: none; color: var(--text-2); }
.bottom-nav__item.active    { color: var(--primary-l); }
.bottom-nav__item svg       { width: 22px; height: 22px; transition: stroke var(--t); }
.bottom-nav__item.active svg{ stroke: var(--primary-l); }

/* Overlay (mobile sidebar backdrop) */
.overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 150;
  animation: fade-in var(--t) var(--ease);
}
.overlay.show { display: block; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), border-color var(--t);
}
.card:hover { box-shadow: var(--shadow); border-color: var(--border-2); }
.card--interactive { cursor: pointer; }
.card--interactive:hover { transform: translateY(-2px); }
.card--primary { background: var(--primary-bg); border-color: rgba(99,102,241,.3); }
.card--flat    { box-shadow: none; }
.card--flat:hover { box-shadow: var(--shadow-sm); }
.card__header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card__title   { font-size: .875rem; font-weight: 600; }
.card__body    { }

/* Stat cards */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem;
  display: flex; align-items: flex-start; gap: 1rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.stat-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.stat-card__icon {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-card__icon--primary { background: var(--primary-bg); color: var(--primary-l); }
.stat-card__icon--green   { background: var(--green-bg);   color: var(--green); }
.stat-card__icon--yellow  { background: var(--yellow-bg);  color: var(--yellow); }
.stat-card__icon--red     { background: var(--red-bg);     color: var(--red); }
.stat-card__icon--blue    { background: var(--blue-bg);    color: var(--blue); }
.stat-card__body   { flex: 1; min-width: 0; }
.stat-card__label  { font-size: .8125rem; color: var(--muted); margin-bottom: .25rem; }
.stat-card__value  { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.stat-card__sub    { font-size: .8125rem; color: var(--muted); margin-top: .375rem; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .5625rem 1.125rem;
  border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t);
  white-space: nowrap; text-decoration: none;
  line-height: 1.25;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.35); }
.btn--primary:hover:not(:disabled) { background: var(--primary-h); box-shadow: 0 4px 16px rgba(99,102,241,.5); color: #fff; text-decoration: none; }

.btn--secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-3); color: var(--text); text-decoration: none; }

.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); text-decoration: none; }

.btn--danger { background: var(--red-bg); color: var(--red); border-color: rgba(239,68,68,.3); }
.btn--danger:hover:not(:disabled) { background: var(--red); color: #fff; text-decoration: none; }

.btn--success { background: var(--green-bg); color: var(--green); border-color: rgba(34,197,94,.3); }
.btn--success:hover:not(:disabled) { background: var(--green); color: #fff; text-decoration: none; }

.btn--sm   { padding: .375rem .75rem; font-size: .8125rem; }
.btn--lg   { padding: .75rem 1.5rem;  font-size: 1rem; }
.btn--icon { padding: .5rem; }
.btn--icon.btn--sm { padding: .375rem; }
.btn--icon.btn--lg { padding: .75rem; }
.btn--full { width: 100%; }
.btn--round{ border-radius: var(--r-full); }

.btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.btn--loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ── Toggle switch ────────────────────────────────────────── */
.toggle {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 24px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  cursor: pointer;
  position: relative;
  transition: background var(--t), border-color var(--t);
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.toggle::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: var(--muted);
  border-radius: 50%;
  left: 2px; top: 50%; transform: translateY(-50%);
  transition: transform var(--t) var(--ease), background var(--t);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.toggle:checked { background: var(--primary); border-color: var(--primary); }
.toggle:checked::after { background: #fff; transform: translate(20px, -50%); }

/* Small toggle */
.toggle--sm { width: 34px; height: 18px; }
.toggle--sm::after { width: 12px; height: 12px; }
.toggle--sm:checked::after { transform: translate(16px, -50%); }

/* ── Inputs ───────────────────────────────────────────────── */
.input-group { display: flex; flex-direction: column; gap: .375rem; }
.label { font-size: .875rem; font-weight: 500; color: var(--text-2); }
.input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .5625rem .875rem;
  color: var(--text);
  font-size: .875rem;
  transition: border-color var(--t), box-shadow var(--t);
  width: 100%;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.input::placeholder { color: var(--muted-2); }
.input--error { border-color: var(--red); }
.input--error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
.input-hint { font-size: .8125rem; color: var(--muted); }
.input-hint--error { color: var(--red); }
select.input { cursor: pointer; }
textarea.input { resize: vertical; min-height: 80px; line-height: 1.6; }

/* Input with icon */
.input-wrap { position: relative; }
.input-wrap .input { padding-left: 2.5rem; }
.input-wrap__icon {
  position: absolute; left: .875rem; top: 50%; transform: translateY(-50%);
  color: var(--muted-2); pointer-events: none;
  width: 16px; height: 16px;
}

/* ── Range slider ─────────────────────────────────────────── */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  cursor: pointer; outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); cursor: pointer;
  box-shadow: 0 2px 6px rgba(99,102,241,.4);
  transition: box-shadow var(--t), transform var(--t);
}
.slider::-webkit-slider-thumb:hover { box-shadow: 0 4px 12px rgba(99,102,241,.6); transform: scale(1.15); }

/* ── Badge ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2em .65em;
  border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600;
}
.badge--primary { background: var(--primary-bg); color: var(--primary-l); }
.badge--green   { background: var(--green-bg);   color: var(--green); }
.badge--yellow  { background: var(--yellow-bg);  color: var(--yellow); }
.badge--red     { background: var(--red-bg);     color: var(--red); }
.badge--blue    { background: var(--blue-bg);    color: var(--blue); }
.badge--muted   { background: var(--surface-2);  color: var(--muted); }

/* Status dot */
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.dot--green  { background: var(--green);  box-shadow: 0 0 6px rgba(34,197,94,.6); }
.dot--yellow { background: var(--yellow); box-shadow: 0 0 6px rgba(245,158,11,.6); }
.dot--red    { background: var(--red);    box-shadow: 0 0 6px rgba(239,68,68,.6); }
.dot--muted  { background: var(--muted-2); }
.dot--pulse  { animation: pulse-dot 2s ease-in-out infinite; }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: .25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .25rem;
}
.tab {
  flex: 1; padding: .4375rem .75rem;
  border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500;
  cursor: pointer; border: none; background: transparent;
  color: var(--muted);
  transition: background var(--t), color var(--t);
  text-align: center;
}
.tab:hover  { background: var(--surface-3); color: var(--text-2); }
.tab.active { background: var(--primary-bg); color: var(--primary-l); }

/* ── Section header (reuse everywhere) ───────────────────── */
.section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.section-hd h2 { font-size: 1rem; font-weight: 600; }
.divider { height: 1px; background: var(--border); margin: 1.25rem 0; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  /* niente backdrop-filter: il blur costringe le GPU deboli (tablet
     Allwinner/Mali) a ridisegnare tutta la mappa a ogni frame del
     fade-in — le modali si aprivano a scatti */
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fade-in var(--t) var(--ease);
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px;
  animation: slide-up var(--t-slow) var(--ease);
  max-height: 90vh; overflow-y: auto;
}
.modal__header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
}
.modal__title { font-size: 1rem; font-weight: 600; flex: 1; }
.modal__close {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: none; background: transparent;
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal__body   { padding: 1.5rem; }
.modal__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
}

/* ── Toast notifications ──────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: calc(var(--nav-h) + .75rem);
  right: 1rem;
  z-index: 900;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font-size: .875rem;
  min-width: 260px; max-width: 380px;
  pointer-events: all;
  animation: slide-left .3s var(--ease);
}
.toast--success { border-left: 3px solid var(--green); }
.toast--error   { border-left: 3px solid var(--red); }
.toast--warning { border-left: 3px solid var(--yellow); }
.toast--info    { border-left: 3px solid var(--blue); }
.toast__msg { flex: 1; }

/* ── Device Tiles ─────────────────────────────────────────── */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: .875rem;
}
.device-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.1rem;
  cursor: pointer;
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
  user-select: none; position: relative; overflow: hidden;
}
.device-tile:hover  { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.device-tile:active { transform: scale(.97); }
.device-tile.on     { border-color: rgba(99,102,241,.45); background: var(--primary-bg); }

.device-tile__icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  transition: background var(--t), color var(--t);
  color: var(--muted);
}
.device-tile.on .device-tile__icon { background: var(--primary); color: #fff; }

.device-tile__info  { flex: 1; min-width: 0; }
.device-tile__name  { font-size: .8125rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; }
.device-tile__room  { font-size: .6875rem; color: var(--muted-2); }
.device-tile__state { font-size: .75rem; color: var(--muted); margin-top: .125rem; }
.device-tile__ctrl  { margin-top: .25rem; display: flex; align-items: center; gap: .5rem; }
/* Percentuale sempre leggibile accanto al cursore: larghezza fissa e cifre
   tabellari, cosi' il numero non fa ballare il cursore mentre cambia. */
.device-tile__ctrl .dim-pct {
  font-size: .6875rem; font-weight: 600; color: var(--muted);
  min-width: 2.6rem; text-align: right; flex: none;
  font-variant-numeric: tabular-nums;
}

/* Light tile: glow when on */
.device-tile--light.on {
  border-color: rgba(245,158,11,.4);
  background: rgba(245,158,11,.07);
  box-shadow: 0 0 0 1px rgba(245,158,11,.2), 0 4px 20px rgba(245,158,11,.1);
}
.device-tile--light.on .device-tile__icon { background: #f59e0b; color: #fff; }

/* Shutter tile */
.device-tile--shutter, .device-tile--access { cursor: default; }
.device-tile--shutter:hover, .device-tile--access:hover { transform: none; box-shadow: none; border-color: var(--border); }
.device-tile--shutter:active, .device-tile--access:active { transform: none; }
.room-sh-ctrl { display: flex; gap: .3rem; justify-content: center; }
.room-sh-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--surface-2);
  cursor: pointer; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease; flex-shrink: 0;
}
.room-sh-btn:hover  { background: var(--surface-3); color: var(--text); border-color: var(--border-2); }
.room-sh-btn:active { transform: scale(.92); }
.room-sh-stop { border-color: var(--border-2); color: var(--text); }

/* Access tile */
.device-tile--access.on { border-color: rgba(34,197,94,.4); background: var(--green-bg); }
.device-tile--access.on .device-tile__icon { background: var(--green); color: #fff; }
.room-apri-btn {
  width: 100%; padding: .4rem; border-radius: var(--r-sm);
  background: var(--primary); color: #fff; border: none;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: all .2s ease;
}
.room-apri-btn:hover { filter: brightness(1.1); }
.room-apri-btn:active { transform: scale(.97); }

/* Thermostat tile */
.device-tile--thermo { cursor: pointer; }
.device-tile--thermo .device-tile__icon { background: rgba(96,165,250,.12); color: #60a5fa; }

/* Dimmer slider inline */
.room-dim-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px; outline: none; cursor: pointer;
  background: linear-gradient(to right, #fbbf24 var(--pct,0%), var(--border) var(--pct,0%));
}
.room-dim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #fbbf24;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
.room-dim-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #fbbf24;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}

/* Keypad tile */
.device-tile--keypad .device-tile__icon { background: var(--surface-3); }

/* ── Scene cards ──────────────────────────────────────────── */
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .875rem; }
.scene-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem;
  cursor: pointer;
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  position: relative; overflow: hidden;
}
.scene-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-l));
  opacity: 0; transition: opacity var(--t);
}
.scene-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.scene-card:hover::before { opacity: 1; }
.scene-card:active { transform: scale(.98); }
.scene-card__icon {
  width: 44px; height: 44px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-bg); color: var(--primary-l);
  font-size: 1.25rem;
}
.scene-card__name { font-size: .9375rem; font-weight: 600; }
.scene-card__desc { font-size: .8125rem; color: var(--muted); line-height: 1.4; }
.scene-card__count{ font-size: .75rem; color: var(--muted-2); }

/* ── Room section ─────────────────────────────────────────── */
.room-section { margin-bottom: 2rem; }
.room-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 0; margin-bottom: .875rem;
  cursor: pointer;
}
.room-header__icon {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.room-header h3 { font-size: .9375rem; font-weight: 600; flex: 1; }
.room-header__meta { font-size: .8125rem; color: var(--muted); }
.room-header__chevron { color: var(--muted-2); transition: transform var(--t); }
.room-header.collapsed .room-header__chevron { transform: rotate(-90deg); }

/* ── Progress bar ─────────────────────────────────────────── */
.progress { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.progress__bar { height: 100%; border-radius: var(--r-full); background: var(--primary); transition: width .5s var(--ease); }
.progress__bar--green  { background: var(--green); }
.progress__bar--yellow { background: var(--yellow); }
.progress__bar--red    { background: var(--red); }

/* ── Spinner ──────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.spinner--sm { width: 16px; height: 16px; }
.spinner--lg { width: 36px; height: 36px; border-width: 3px; }
.spinner--white { border-color: rgba(255,255,255,.3); border-top-color: #fff; }

/* Full-page loading */
.page-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 300px; gap: 1rem; color: var(--muted);
}

/* ── Avatar & User menu ───────────────────────────────────── */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-bg); color: var(--primary-l);
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 700;
  cursor: pointer; border: 2px solid var(--border);
  transition: border-color var(--t); flex-shrink: 0;
}
.avatar:hover { border-color: var(--primary); }

/* ── Dropdown ─────────────────────────────────────────────── */
.dropdown { position: relative; }
.dropdown__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  z-index: 400; padding: .375rem;
  animation: fade-in .15s var(--ease);
}
.dropdown__item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border-radius: var(--r-sm);
  font-size: .875rem; cursor: pointer;
  color: var(--text-2);
  transition: background var(--t), color var(--t);
  border: none; background: transparent; width: 100%; text-align: left;
}
.dropdown__item:hover { background: var(--surface-2); color: var(--text); }
.dropdown__item--danger { color: var(--red); }
.dropdown__item--danger:hover { background: var(--red-bg); }
.dropdown__divider { height: 1px; background: var(--border); margin: .375rem 0; }

/* ── Theme toggle button ──────────────────────────────────── */
.theme-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.theme-btn:hover { background: var(--surface-3); color: var(--text); }

/* ── Table ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
th {
  padding: .75rem 1rem;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); text-align: left;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: .875rem 1rem; font-size: .875rem; border-bottom: 1px solid var(--border); color: var(--text-2); }
tr:last-child td { border-bottom: none; }
tr { transition: background var(--t); }
tbody tr:hover td { background: var(--surface-2); }

/* ── Empty state ──────────────────────────────────────────── */
.empty {
  text-align: center; padding: 3rem 1rem; color: var(--muted);
}
.empty__icon { width: 48px; height: 48px; margin: 0 auto 1rem; opacity: .35; }
.empty h3 { color: var(--text-2); margin-bottom: .5rem; font-size: 1rem; }
.empty p { font-size: .875rem; }

/* ── WS status indicator ──────────────────────────────────── */
.ws-status {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; color: var(--muted);
}

/* ── Layout utilities ─────────────────────────────────────── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.grid-auto-md { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.w-full { width: 100%; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rounded { border-radius: var(--r); }
.rounded-full { border-radius: var(--r-full); }

/* ── Login page ───────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(56,189,248,.07) 0%, transparent 40%);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 0 80px rgba(99,102,241,.07);
  width: 100%; max-width: 400px;
  overflow: hidden;
  animation: slide-up .4s var(--ease);
}
.login-card__head {
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.login-logo {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--primary), var(--primary-l));
  border-radius: var(--r-lg);
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(99,102,241,.4);
}
.login-card__body { padding: 1.5rem 2rem 2rem; }
.login-step { display: flex; flex-direction: column; gap: 1rem; }
.login-step[hidden] { display: none; }

/* ── Keypad widget ────────────────────────────────────────── */
.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  max-width: 200px; margin: 0 auto;
}
.keypad-key {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.125rem; font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.keypad-key:hover  { background: var(--primary-bg); border-color: var(--primary); color: var(--primary-l); }
.keypad-key:active { transform: scale(.92); }
.keypad-key--danger:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.keypad-display {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .75rem 1rem; text-align: center;
  font-size: 1.5rem; font-weight: 700; letter-spacing: .25em;
  color: var(--text); font-family: monospace;
  margin-bottom: .75rem;
  min-height: 52px;
}

/* ── Access card ──────────────────────────────────────────── */
.access-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  transition: border-color var(--t);
}
.access-card:hover { border-color: var(--border-2); }
.access-card__icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.access-card__body { flex: 1; min-width: 0; }
.access-card__name { font-weight: 600; font-size: .9375rem; }
.access-card__sub  { font-size: .8125rem; color: var(--muted); margin-top: .1rem; }
.access-card__action { flex-shrink: 0; }

/* ── Map area ─────────────────────────────────────────────── */
.map-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  min-height: 400px;
  display: flex; align-items: center; justify-content: center;
}
.map-container img { max-width: 100%; display: block; }
.map-device-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.map-device-pin__dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(99,102,241,.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform var(--t), box-shadow var(--t);
}
.map-device-pin:hover .map-device-pin__dot  { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(99,102,241,.3); }
.map-device-pin.on    .map-device-pin__dot  { background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.3); }
.map-device-pin__lbl {
  font-size: .6rem; text-align: center; margin-top: .2rem;
  color: var(--text); max-width: 96px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ── Widget modal controls (.wm-*) ────────────────────────── */

/* ─ Toggle ─ */
.wm-toggle-wrap { padding:.75rem .75rem 1.25rem; }
.wm-toggle-tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.875rem; padding:2.5rem 1rem; width:100%; border-radius:var(--r-lg,12px);
  border:2px solid transparent; cursor:pointer; background:var(--surface-2);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.wm-toggle-tile.on { background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.3); }
.wm-toggle-bulb {
  width:80px; height:80px; border-radius:50%;
  background:var(--surface); border:2.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:all .35s ease;
}
.wm-toggle-tile.on .wm-toggle-bulb {
  background:rgba(251,191,36,.15); border-color:#fbbf24;
  box-shadow:0 0 0 10px rgba(251,191,36,.07), 0 0 36px rgba(251,191,36,.22);
  color:#d97706;
}
.wm-toggle-label { font-size:.95rem; font-weight:600; color:var(--muted); letter-spacing:.04em; }
.wm-toggle-tile.on .wm-toggle-label { color:#d97706; }

/* ─ Dimmer ─ */
.wm-dimmer-wrap { display:flex; flex-direction:column; align-items:center; gap:1.375rem; padding:1.75rem 1.25rem; }
.wm-dimmer-header { display:flex; align-items:center; gap:.875rem; }
.wm-dimmer-icon { display:flex; align-items:center; color:var(--muted); transition:opacity .3s ease; }
.wm-dimmer-pct { font-size:2.75rem; font-weight:700; letter-spacing:-.02em; }
.wm-dimmer-track-wrap { width:100%; max-width:300px; }
.wm-dimmer-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:10px; border-radius:5px; outline:none; cursor:pointer;
  background:linear-gradient(to right,#fbbf24 var(--pct,0%),var(--border) var(--pct,0%));
}
.wm-dimmer-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:#fff; border:2.5px solid #fbbf24;
  box-shadow:0 2px 10px rgba(0,0,0,.3); cursor:pointer;
}
.wm-dimmer-slider::-moz-range-thumb {
  width:26px; height:26px; border-radius:50%; border:2.5px solid #fbbf24;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.3); cursor:pointer;
}
.wm-dimmer-presets { display:flex; gap:.5rem; }
.wm-dim-preset {
  padding:.35rem .8rem; border-radius:999px; border:1.5px solid var(--border);
  background:transparent; font-size:.75rem; font-weight:500; cursor:pointer; color:var(--muted);
  transition:all .2s ease;
}
.wm-dim-preset:hover { background:var(--surface-2); color:var(--text); }

/* ─ Thermostat ─ */
.wm-thermo-wrap { display:flex; flex-direction:column; margin:-1.5rem -1.5rem 0; overflow:hidden; }
.wm-thermo-hero {
  display:flex; flex-direction:column; align-items:center; padding:2rem 1.5rem 1.75rem;
  background:var(--surface-2); border-bottom:1px solid var(--border);
  transition:background .5s ease;
}
.wm-thermo-hero.heating { background:linear-gradient(155deg, rgba(249,115,22,.15) 0%, var(--surface-2) 60%); }
.wm-thermo-hero.cooling { background:linear-gradient(155deg, rgba(96,165,250,.15) 0%, var(--surface-2) 60%); }
.wm-thermo-hero.offline { filter:grayscale(1); opacity:.55; }
.wm-thermo-status.offline { color:#f87171; background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.35); }
.wm-thermo-status.offline::before { background:#f87171; }
.wm-thermo-curtemp {
  font-size:5rem; font-weight:800; letter-spacing:-.05em; line-height:1;
  color:var(--text); display:flex; align-items:flex-start; gap:.2rem;
}
.wm-thermo-curtemp small { font-size:1.5rem; font-weight:400; color:var(--muted); margin-top:.65rem; letter-spacing:0; }
.wm-thermo-status {
  display:flex; align-items:center; gap:.375rem; margin-top:.75rem;
  font-size:.78rem; font-weight:600; color:var(--muted);
  padding:.25rem .75rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--border);
  transition:all .3s ease;
}
.wm-thermo-status::before {
  content:''; width:7px; height:7px; border-radius:50%; background:var(--muted);
  flex-shrink:0; transition:all .3s ease;
}
.wm-thermo-status.heating { color:#ea580c; background:rgba(249,115,22,.1); border-color:rgba(249,115,22,.3); }
.wm-thermo-status.heating::before { background:#f97316; box-shadow:0 0 6px rgba(249,115,22,.6); }
.wm-thermo-status.cooling { color:#2563eb; background:rgba(96,165,250,.1); border-color:rgba(96,165,250,.3); }
.wm-thermo-status.cooling::before { background:#60a5fa; box-shadow:0 0 6px rgba(96,165,250,.6); }
.wm-thermo-hum {
  display:flex; align-items:center; gap:.25rem; margin-top:.35rem;
  font-size:.7rem; font-weight:600; color:var(--muted); padding:.2rem .6rem;
  border-radius:999px; background:var(--surface); border:1px solid var(--border);
}
.wm-thermo-hum.alarm { color:#f97316; background:rgba(249,115,22,.1); border-color:rgba(249,115,22,.3); }
.wm-thermo-body { display:flex; flex-direction:column; gap:.875rem; padding:1.25rem 1.25rem 1.5rem; }
.wm-sp-card {
  display:flex; align-items:center; gap:.75rem;
  background:var(--surface-2); border:1.5px solid var(--border);
  border-radius:var(--r-md); padding:.875rem 1rem;
}
.wm-sp-card-info { flex:1; display:flex; flex-direction:column; align-items:center; gap:.1rem; }
.wm-sp-card-lbl { font-size:.625rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.wm-sp-card-val { font-size:2.25rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.wm-sp-btn {
  width:52px; height:52px; flex-shrink:0; border-radius:50%;
  border:2px solid var(--border); background:var(--surface);
  font-size:1.75rem; font-weight:300; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease; color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.wm-sp-btn:hover { border-color:var(--primary); color:var(--primary); }
.wm-sp-btn:active { transform:scale(.9); box-shadow:none; }
.wm-season-row { display:grid; grid-template-columns:1fr 1fr; gap:.625rem; }
.wm-season-card {
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:.875rem .5rem; border-radius:var(--r-md);
  border:2px solid var(--border); background:var(--surface-2);
  cursor:pointer; transition:all .2s ease;
  font-size:.78rem; font-weight:500; color:var(--muted); user-select:none;
}
.wm-season-card svg { transition:opacity .2s; opacity:.4; }
.wm-season-card:hover { border-color:var(--muted); }
.wm-season-card.winter.active { background:rgba(96,165,250,.1); border-color:#60a5fa; color:#2563eb; font-weight:600; }
.wm-season-card.winter.active svg { opacity:1; stroke:#60a5fa; }
.wm-season-card.summer.active { background:rgba(249,115,22,.1); border-color:#f97316; color:#ea580c; font-weight:600; }
.wm-season-card.summer.active svg { opacity:1; stroke:#f97316; }
.wm-seg { display:flex; border-radius:var(--r-sm); border:1.5px solid var(--border); overflow:hidden; background:var(--surface-2); }
.wm-seg-btn {
  flex:1; padding:.5rem .5rem; border:none; background:transparent; cursor:pointer;
  font-size:.8rem; font-weight:500; color:var(--muted); transition:all .2s ease;
}
.wm-seg-btn.active { background:var(--primary); color:#fff; font-weight:600; }
.wm-seg--sm .wm-seg-btn { padding:.4rem .25rem; font-size:.72rem; }
.wm-override-wrap { display:flex; flex-direction:column; gap:.3rem; }
.wm-override-lbl { font-size:.625rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
/* banner "zona forzata" */
.wm-ov-banner {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.55rem .75rem; border-radius:var(--r-md); font-size:.75rem; font-weight:600;
  border:1.5px solid var(--border);
}
.wm-ov-banner.on  { background:rgba(249,115,22,.1);  border-color:rgba(249,115,22,.35);  color:#ea580c; }
.wm-ov-banner.off { background:rgba(96,165,250,.1);  border-color:rgba(96,165,250,.35);  color:#2563eb; }
.wm-ov-reset {
  padding:.3rem .6rem; border-radius:var(--r-sm); border:1.5px solid currentColor;
  background:transparent; font-size:.68rem; font-weight:700; cursor:pointer; color:inherit;
  transition:all .15s; white-space:nowrap;
}
.wm-ov-reset:hover { background:var(--surface); }
.wm-mode-hint { font-size:.68rem; color:var(--muted); text-align:center; margin-top:-.5rem; }
.wm-act-row { display:flex; gap:.5rem; }
.wm-act-btn {
  flex:1; padding:.75rem .25rem; border-radius:var(--r-md);
  border:2px solid var(--border); background:var(--surface-2);
  font-size:.75rem; font-weight:600; cursor:pointer; color:var(--text);
  transition:all .2s ease; display:flex; flex-direction:column;
  align-items:center; gap:.3rem; user-select:none;
}
.wm-act-btn svg { opacity:.55; transition:opacity .2s; }
.wm-act-btn:hover svg { opacity:1; }
.wm-act-btn:active { transform:scale(.96); }
.wm-act-btn--on:hover  { border-color:#f97316; color:#ea580c; background:rgba(249,115,22,.08); }
.wm-act-btn--off:hover { border-color:#60a5fa; color:#2563eb; background:rgba(96,165,250,.08); }
.wm-act-btn--auto:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-bg); }
/* room thermostat tile */
.thermo-tile__temps { display:flex; align-items:center; gap:.3rem; }
.thermo-tile__cur { font-size:.85rem; font-weight:700; color:var(--text); }
.thermo-tile__sep { font-size:.7rem; color:var(--muted); }
.thermo-tile__sp  { font-size:.78rem; color:var(--muted); }
.thermo-tile__dot {
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  margin-top:.2rem; transition:all .3s;
}
.thermo-tile__dot.heating { background:#f97316; box-shadow:0 0 4px rgba(249,115,22,.55); }
.thermo-tile__dot.cooling { background:#60a5fa; box-shadow:0 0 4px rgba(96,165,250,.55); }
/* nodo non raggiungibile: tile spenta */
.device-tile.offline { filter:grayscale(1); opacity:.5; }
.device-tile.offline .device-tile__name::after { content:' · offline'; color:#f87171; font-size:.7em; }
/* legacy pills */
.wm-pills { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.wm-pill {
  padding:.45rem 1rem; border-radius:999px; border:1.5px solid var(--border);
  background:transparent; font-size:.8rem; cursor:pointer; color:var(--text);
  transition:all .2s ease;
}
.wm-pill:hover { background:var(--surface-2); }
.wm-pill.active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ─ Schedule ─ */
.sm-wrap { display:flex; flex-direction:column; gap:.875rem; padding:1rem 1rem 1.5rem; }
.sm-season-seg { display:flex; border-radius:var(--r-sm); border:1.5px solid var(--border); overflow:hidden; background:var(--surface-2); }
.sm-season-btn { flex:1; padding:.5rem; border:none; background:transparent; cursor:pointer; font-size:.82rem; font-weight:500; color:var(--muted); transition:all .2s ease; }
.sm-season-btn.active.winter { background:rgba(96,165,250,.15); color:#2563eb; font-weight:700; }
.sm-season-btn.active.summer { background:rgba(249,115,22,.15); color:#ea580c; font-weight:700; }
.sm-day-row { display:flex; align-items:center; gap:.4rem; }
.sm-day-pills { display:flex; gap:.2rem; flex:1; }
.sm-day-pill { flex:1; min-width:0; padding:.3rem .1rem; border-radius:var(--r-sm); border:1.5px solid var(--border); background:var(--surface-2); font-size:.68rem; font-weight:600; cursor:pointer; color:var(--muted); text-align:center; transition:all .15s; position:relative; }
.sm-day-pill.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.sm-day-pill.today::after {
  content:''; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#f97316;
}
.sm-day-pill.today.active::after { background:#fff; }
.sm-cp-btns { display:flex; gap:.3rem; flex-shrink:0; }
.sm-cp-btn { padding:.3rem .55rem; border-radius:var(--r-sm); border:1.5px solid var(--border); background:var(--surface-2); font-size:.68rem; font-weight:600; cursor:pointer; color:var(--muted); transition:all .15s; white-space:nowrap; }
.sm-cp-btn:hover:not(:disabled) { background:var(--surface); color:var(--text); }
.sm-cp-btn:disabled { opacity:.4; cursor:default; }
.sm-timeline-wrap { display:flex; flex-direction:column; gap:.2rem; user-select:none; }
.sm-hour-row { display:flex; justify-content:space-between; }
.sm-hour-lbl { font-size:.6rem; color:var(--muted); }
.sm-slots-wrap { position:relative; }
.sm-slots { display:flex; gap:1px; border-radius:6px; overflow:hidden; cursor:crosshair; touch-action:none; }
.sm-slot { flex:1; height:44px; background:var(--border); }
.sm-slot.lv-1 { background:#93c5fd; }
.sm-slot.lv-2 { background:var(--primary); }
.sm-slot.lv-3 { background:#f97316; }
.sm-slot:hover { filter:brightness(1.15); }
.sm-slot.now { box-shadow:inset 0 0 0 2px rgba(255,255,255,.85); }
/* linea verticale "adesso" sul giorno corrente */
.sm-now {
  position:absolute; top:-3px; bottom:-3px; width:2px; pointer-events:none;
  background:#ef4444; border-radius:1px; box-shadow:0 0 4px rgba(239,68,68,.7);
}
.sm-now::before {
  content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:#ef4444;
}
.sm-t-card { position:relative; }
.sm-t-now {
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  font-size:.55rem; font-weight:800; letter-spacing:.08em; padding:.08rem .4rem;
  border-radius:999px; background:#ef4444; color:#fff; line-height:1.3;
}
.sm-cur-time { font-size:.68rem; color:var(--muted); text-align:center; min-height:1.1em; letter-spacing:.02em; }
.sm-palette { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; }
.sm-t-card { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.75rem .4rem .6rem; border-radius:var(--r-md); border:2px solid var(--border); background:var(--surface-2); cursor:pointer; transition:all .18s ease; }
.sm-t-card.selected { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }
.sm-t-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.sm-t-dot.lv-1 { background:#60a5fa; }
.sm-t-dot.lv-2 { background:var(--primary); }
.sm-t-dot.lv-3 { background:#f97316; }
.sm-t-lbl { font-size:.65rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.sm-t-val { font-size:1.2rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.sm-t-ctrl { display:flex; align-items:center; gap:.25rem; }
.sm-t-pm { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface); font-size:1.1rem; font-weight:300; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text); line-height:1; padding:0; transition:all .15s; }
.sm-t-pm:hover { border-color:var(--primary); color:var(--primary); }
.sm-t-pm:active { transform:scale(.9); }
.sm-save-btn { width:100%; padding:.85rem; border-radius:var(--r-md); background:var(--primary); color:#fff; border:none; font-size:.9rem; font-weight:700; cursor:pointer; transition:all .2s; }
.sm-save-btn:hover { filter:brightness(1.1); }
.sm-save-btn:active { transform:scale(.98); }
.wm-act-btn--sched:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-bg); }

/* ─ Shutter ─ */
.wm-shutter-wrap { display:flex; flex-direction:column; align-items:center; gap:1.25rem; padding:1.5rem 1.25rem; }
.wm-shutter-preview {
  width:72px; display:flex; flex-direction:column; gap:3px; padding:.25rem;
  border:1.5px solid var(--border); border-radius:4px; background:var(--surface-2);
}
.wm-shutter-slat { height:6px; border-radius:2px; background:var(--border); transition:opacity .25s ease; }
.wm-sh-pos-wrap { width:100%; max-width:280px; display:flex; flex-direction:column; gap:.375rem; }
.wm-sh-pos-labels { display:flex; justify-content:space-between; font-size:.65rem; color:var(--muted); }
.wm-sh-pos-val { text-align:center; font-size:1.4rem; font-weight:700; }
.wm-sh-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:10px; border-radius:5px; outline:none; cursor:pointer;
  background:linear-gradient(to right,var(--primary) var(--pct,0%),var(--border) var(--pct,0%));
}
.wm-sh-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:#fff; border:2.5px solid var(--primary);
  box-shadow:0 2px 10px rgba(0,0,0,.3); cursor:pointer;
}
.wm-sh-slider::-moz-range-thumb {
  width:26px; height:26px; border-radius:50%; border:2.5px solid var(--primary);
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.3); cursor:pointer;
}
.wm-sh-pos-val { text-align:center; font-size:1.4rem; font-weight:700; }
.wm-sh-actions { display:flex; gap:.625rem; }
.wm-sh-btn {
  padding:.5rem 1.25rem; border-radius:999px; border:1.5px solid var(--border);
  background:transparent; font-size:.85rem; font-weight:500; cursor:pointer; color:var(--text);
  transition:all .2s ease;
}
.wm-sh-btn:hover { background:var(--surface-2); }
.wm-sh-stop { font-weight:700; border-color:var(--text); border-width:2px; }

/* ─ Access ─ */
.wm-access-wrap {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.5rem; padding:2rem 1rem; min-height:200px;
}
.wm-access-icon { display:flex; color:var(--muted); }
.wm-access-btn {
  width:100%; max-width:280px; padding:1.1rem; border-radius:var(--r-lg,12px);
  background:var(--primary); color:#fff; border:none;
  font-size:1.2rem; font-weight:700; cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 4px 16px rgba(99,102,241,.35);
}
.wm-access-btn:hover  { filter:brightness(1.1); }
.wm-access-btn:active { transform:scale(.97); }
.wm-access-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; padding-bottom: var(--nav-h); }
  .bottom-nav { display: flex; }
  .header__menu-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); cursor: pointer; color: var(--muted); border: none; background: transparent; transition: background var(--t); flex-shrink: 0; }
  .header__menu-btn:hover { background: var(--surface-2); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .page-content { padding: 1rem; }
  .modal { border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-width: 100%; min-width: 0; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  #toast-container { left: 1rem; right: 1rem; }
  .toast { min-width: 0; width: 100%; }
  .hide-mobile { display: none !important; }
  .stat-card__value { font-size: 1.25rem; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  #toast-container { bottom: 1rem; }
}
@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
  .device-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .scene-grid  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  h1 { font-size: 1.375rem; }
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-left {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: inherit; }
  50%       { opacity: .5; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.shake { animation: shake .4s var(--ease); }
.fade-in { animation: fade-in .2s var(--ease); }

/* ════ Uso da dispositivo touch (tablet/telefono) ════════════════════
   La supervisione avviene principalmente da device: niente zoom
   accidentale, niente selezione testo, feedback tattile sui controlli. */
html, body {
  touch-action: pan-x pan-y;              /* blocca pinch e doppio-tap zoom */
  -webkit-tap-highlight-color: transparent;
}
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;            /* niente menu long-press iOS */
}
/* i campi di testo restano selezionabili/editabili normalmente */
input, textarea, select, [contenteditable], .selectable,
.selectable * {
  -webkit-user-select: text;
  user-select: text;
}
/* feedback tattile: i controlli "rispondono" al tocco */
.btn, .device-tile, .nav-item, .bottom-nav__item, .scene-card,
.wm-act-btn, .wm-season-card, .sm-day-pill, .sm-cp-btn, .room-sh-btn,
.room-apri-btn, .access-card__action .btn {
  transition: transform .08s ease;
}
.btn:active, .device-tile:active, .bottom-nav__item:active,
.wm-season-card:active, .sm-day-pill:active, .sm-cp-btn:active,
.room-sh-btn:active, .room-apri-btn:active {
  transform: scale(.97);
}

/* ── Stepper fasce orarie (precisione col dito) ── */
.sm-step-row { display:flex; align-items:center; gap:.5rem; }
.sm-step-btn {
  width:46px; height:46px; flex-shrink:0; border-radius:50%;
  border:2px solid var(--border); background:var(--surface);
  font-size:1.5rem; font-weight:300; cursor:pointer; color:var(--text);
  display:flex; align-items:center; justify-content:center; line-height:1;
  transition:transform .08s ease; padding:0;
  touch-action: none; /* hold-to-repeat senza gesti del browser */
}
.sm-step-btn:active { transform:scale(.9); border-color:var(--primary); color:var(--primary); }
.sm-step-info {
  flex:1; text-align:center; font-size:.82rem; font-weight:700;
  color:var(--text); min-width:0; white-space:nowrap;
}
.sm-step-info small { display:block; font-weight:500; font-size:.68rem; color:var(--muted); }
.sm-step-apply {
  flex-shrink:0; padding:.7rem .9rem; border-radius:var(--r-md);
  border:none; color:#fff; font-size:.8rem; font-weight:700; cursor:pointer;
  transition:transform .08s ease;
}
.sm-step-apply:active { transform:scale(.94); }
.sm-step-apply.lv-1 { background:#60a5fa; }
.sm-step-apply.lv-2 { background:var(--primary); }
.sm-step-apply.lv-3 { background:#f97316; }
/* cursore sulla timeline: doppio anello, visibile su ogni colore */
.sm-slot.cur {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(0,0,0,.55);
}
/* slot più alti sui touch screen = bersaglio più facile */
@media (max-width: 768px) {
  .sm-slot { height: 56px; }
}

/* ── Widget in modalità allarme: rosso lampeggiante quando attivo ── */
.map-device-pin.pin-alarm.on .map-device-pin__dot {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
  animation: sm-alarm-pulse 1.2s ease-in-out infinite;
}
.device-tile.tile-alarm.on {
  border-color: #ef4444;
  background: rgba(239, 68, 68, .12);
}
.device-tile.tile-alarm.on .device-tile__state {
  color: #ef4444;
  font-weight: 700;
}
.wm-toggle-tile.wm-alarm.on {
  border-color: #ef4444;
  background: rgba(239, 68, 68, .15);
  color: #ef4444;
}
@keyframes sm-alarm-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ════ Safe area iOS (notch e indicatore home, PWA standalone) ═══════
   Con viewport-fit=cover la pagina si estende sotto status bar e barra
   home: header e bottom-nav devono consumare gli inset, altrimenti i
   contenuti finiscono coperti. Su desktop e Android senza notch gli
   env() valgono 0: nessun effetto. */
@supports (padding: env(safe-area-inset-top)) {
  .header {
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav {
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  @media (max-width: 768px) {
    .main-area { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
    .modal { padding-bottom: env(safe-area-inset-bottom); }
    #toast-container { bottom: calc(var(--nav-h) + .75rem + env(safe-area-inset-bottom)); }
  }
}
/* In Safari da browser (non installata) 100vh finisce sotto la barra
   degli strumenti: il fondo della sidebar restava coperto. */
@supports (height: 100dvh) {
  .sidebar { height: 100dvh; }
}

/* ── Skeleton mappa: shimmer mentre planimetria e widget caricano ── */
.map-skeleton {
  position: absolute; inset: 0; z-index: 50;
  background: var(--surface-2);
  overflow: hidden;
}
.map-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
              rgba(148, 163, 184, .15), transparent);
  /* solo transform: composited, leggero anche sui pannelli deboli */
  animation: map-shimmer 1.4s ease infinite;
}
@keyframes map-shimmer { to { transform: translateX(100%); } }

/* ── Skeleton generico: blocchi fantasma con lo stesso shimmer ────── */
.sk-box {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.sk-box::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
              rgba(148, 163, 184, .15), transparent);
  animation: map-shimmer 1.4s ease infinite;
}