/* ------------------------------------------------------------------
   Il Mio Smart Home — grafica provvisoria
   Sostituibile integralmente quando arrivano i design definitivi:
   tutti i colori sono espressi come variabili CSS, raggruppate qui
   in cima al file.
------------------------------------------------------------------- */

:root {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page-plane:     #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);

  --series-1: #2a78d6; /* blu — colore primario app */
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;

  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --page-plane:     #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --gridline:       #2c2c2a;
  --baseline:       #383835;
  --border:         rgba(255,255,255,0.10);

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  background: var(--page-plane);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 560px;
  margin: 0 auto;
  background: var(--page-plane);
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px;
  gap: 12px;
}
.topbar h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.home-select {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 6px 10px;
}
.icon-btn {
  border: none;
  background: var(--surface-1);
  border: 1px solid var(--border);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 16px;
}

/* ---------- Views ---------- */
.view {
  flex: 1;
  padding: 4px 16px 96px;
  overflow-y: auto;
}
.view[hidden] { display: none; }

.section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 20px 4px 10px;
}

/* ---------- Tab stanze ---------- */
.room-tabs {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--gridline);
}
.room-tabs[hidden] { display: none; }
.room-tabs::-webkit-scrollbar { display: none; }
.room-tab {
  flex-shrink: 0;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 0 10px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.room-tab.active {
  color: var(--text-primary);
  font-weight: 700;
}
.room-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--series-1);
  border-radius: 2px;
}

/* ---------- Widget meteo ---------- */
.weather-widget {
  background: linear-gradient(135deg, color-mix(in srgb, var(--series-1) 14%, var(--surface-1)), var(--surface-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.weather-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.weather-place {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.weather-icon { font-size: 22px; line-height: 1; }
.weather-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.weather-temp {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}
.weather-unit { font-size: 18px; font-weight: 600; color: var(--text-secondary); }
.weather-label { font-size: 13px; color: var(--text-muted); }
.weather-details {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.weather-detail { flex: 1; }
.weather-detail-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.weather-detail-value { font-size: 15px; font-weight: 700; }
.weather-detail-unit { font-size: 12px; font-weight: 500; color: var(--text-secondary); }

/* ---------- Pannello energia ---------- */
.energy-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 14px 18px 18px;
  margin-bottom: 14px;
}
.energy-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.energy-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 4px 0 2px;
}
.energy-balance-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.energy-balance-label {
  font-size: 13px;
  font-weight: 600;
}
.energy-balance.importing .energy-balance-value,
.energy-balance.importing .energy-balance-label { color: var(--status-critical); }
.energy-balance.exporting .energy-balance-value,
.energy-balance.exporting .energy-balance-label { color: var(--status-good); }
.energy-balance.balanced .energy-balance-value,
.energy-balance.balanced .energy-balance-label { color: var(--text-muted); }

/* ---------- Storico Bilancio Rete (grafico a barre divergente) ---------- */
.energy-history {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gridline);
}
.energy-history-title {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.energy-history-chart {
  display: block;
  width: 100%;
  height: 60px;
}
.energy-history-baseline { stroke: var(--gridline); stroke-width: 1; }
.energy-history-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
}

/* ---------- Device grid ---------- */
.device-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.device-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .15s ease;
}
.device-card:active { transform: scale(0.97); }
.device-card.is-on { border-color: color-mix(in srgb, var(--series-1) 55%, var(--border)); }

.device-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Iconcina del dispositivo (in alto a sinistra): l'immagine personalizzata
   se caricata dal pannello Admin, altrimenti un'emoji scelta in base al
   nome — un piccolo riquadro, in stile Smart Life, non più un riquadro
   grande a piena card. */
.device-icon-box {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background: var(--page-plane);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.device-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.device-icon-emoji {
  font-size: 20px;
  line-height: 1;
}

/* Stellina Preferiti: badge in alto a sinistra, sopra l'angolo dell'icona
   (solo per il titolare, vedi deviceCardHtml in js/app.js). */
.device-fav-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--surface-1);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: var(--baseline);
  padding: 0;
  z-index: 1;
}
.device-fav-btn.is-fav { color: #f5a623; }
.device-fav-btn:disabled { opacity: .6; cursor: default; }

/* Pulsante rotondo di accensione (in alto a destra): verde pieno quando
   acceso, grigio chiaro quando spento, come nel riferimento inviato. */
.device-power-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-plane);
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.device-power-btn.on {
  background: var(--status-good);
  color: #fff;
}
.device-power-btn:disabled { opacity: .5; cursor: default; }

/* Badge di anteprima (temperatura, livello, ecc.) per sensori senza
   interruttore: sostituisce il pallino online nello stesso angolo, così il
   valore si vede subito senza aprire la card (vedi deviceCardHtml in
   js/app.js). */
.device-preview-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--page-plane);
  border-radius: var(--radius-m);
  padding: 4px 9px;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: -2px;
}

.device-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  margin-top: 4px;
}
.device-status-dot.online { background: var(--status-good); }
.device-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.device-room {
  font-size: 12px;
  color: var(--text-muted);
}

/* Riga metriche (temperatura, consumo, livello...) sotto il nome: per i
   dispositivi CON interruttore (dove il badge in alto non c'è spazio, vedi
   .device-preview-value sopra) e per la seconda metrica di un dispositivo
   che ne espone più di una. */
.device-metrics {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Toggle switch */
.switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--baseline);
  border: none;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface-1);
  transition: left .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.switch.on { background: var(--series-1); }
.switch.on::after { left: 20px; }
.switch:disabled { opacity: .5; cursor: default; }

/* ---------- Avviso dispositivi offline ---------- */
.offline-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: color-mix(in srgb, var(--status-critical) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--status-critical) 35%, var(--border));
  border-radius: var(--radius-m);
  padding: 10px 12px;
  margin: 4px 0 12px;
  font-size: 13px;
  color: var(--text-primary);
}
.offline-banner[hidden] { display: none; }
.offline-banner-text { flex: 1; line-height: 1.35; }
.offline-banner-close {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

/* ---------- Ricerca dispositivi ---------- */
/* Bordo sfumato colorato (come nel riferimento inviato): due sfondi
   sovrapposti, uno pieno "dentro" al bordo (padding-box) e uno sfumato
   "sotto" fino al bordo esterno (border-box) — nessuna immagine o
   libreria esterna richiesta. */
.device-search-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(120deg, #f97a7a, #a78bfa, #34d399) border-box;
  color: var(--text-primary);
  margin: 4px 0 12px;
  -webkit-appearance: none;
  appearance: none;
}
.device-search-input::placeholder { color: var(--text-muted); }

/* ---------- Apertura rapida portone (Ring) ---------- */
.ring-quick-action { margin: 4px 0 16px; }

/* Card "Portone" dentro la stanza Ingresso (alternativa al banner in cima, usata quando esiste una stanza con quel nome) */
.ring-device-tile { cursor: pointer; }
.ring-tile-btn {
  border: none;
  background: var(--series-2);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  padding: 10px;
  border-radius: var(--radius-s);
  cursor: pointer;
  width: 100%;
}
.ring-tile-btn:disabled { opacity: .6; cursor: default; }
.ring-unlock-btn {
  width: 100%;
  border: none;
  background: var(--series-2);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--radius-l);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ring-unlock-btn:active { opacity: .85; }
.ring-unlock-btn:disabled { opacity: .6; cursor: default; }

/* ---------- Rooms accordion ---------- */
.room-block { margin-bottom: 6px; }
.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.room-header .chev { color: var(--text-muted); font-size: 12px; transition: transform .15s ease; }
.room-header.collapsed .chev { transform: rotate(-90deg); }
.room-body[hidden] { display: none; }

/* ---------- Scenes ---------- */
.scene-list { display: flex; flex-direction: column; gap: 10px; }
.scene-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 14px 16px;
}
.scene-name { font-size: 14px; font-weight: 600; }
.scene-run {
  border: none;
  background: var(--series-1);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.scene-run:active { opacity: .85; }

.device-select {
  width: 100%;
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  margin-bottom: 4px;
}

/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 560px;
  display: flex;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
}
.nav-btn {
  flex: 1;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
}
.nav-btn.active { color: var(--series-1); font-weight: 600; }
.nav-btn[hidden] { display: none; }
.nav-btn .nav-icon { font-size: 18px; line-height: 1; }

/* ---------- Login ---------- */
.main-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.main-shell[hidden] { display: none; }

.login-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  gap: 16px;
}
.login-screen[hidden] { display: none; }
.login-screen img { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 8px; }
.login-screen h2 { margin: 0; font-size: 20px; }
.login-screen p { margin: 0; color: var(--text-secondary); font-size: 14px; max-width: 320px; }
.login-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; margin-top: 8px; }
.login-form input {
  font-family: var(--font);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
}
.login-form button {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: var(--radius-m);
  border: none;
  background: var(--series-1);
  color: #fff;
  cursor: pointer;
}
.login-error { color: var(--status-critical); font-size: 13px; min-height: 18px; }
.login-link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 50;
}
.modal-backdrop[hidden] { display: none; }
.modal-sheet {
  background: var(--surface-1);
  width: 100%;
  max-width: 560px;
  border-radius: 20px 20px 0 0;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 80vh;
  overflow-y: auto;
}
.modal-sheet h3 { margin: 0 0 4px; font-size: 17px; }
.modal-sheet .modal-sub { color: var(--text-muted); font-size: 12px; margin-bottom: 14px; }
.modal-device-image {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-m);
  margin-bottom: 12px;
}
.modal-device-image[hidden] { display: none; }
.dp-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--gridline);
  gap: 12px;
}
.dp-row:last-child { border-bottom: none; }
.dp-code { font-size: 12px; color: var(--text-muted); }
.dp-label { font-size: 14px; font-weight: 500; }
.dp-control-num { display: flex; gap: 6px; align-items: center; }
.dp-control-num input { width: 70px; font-family: var(--font); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--page-plane); color: var(--text-primary); }
.dp-send {
  border: none; background: var(--series-1); color: #fff; border-radius: 6px;
  padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.dp-row select.device-select {
  width: auto;
  margin: 0;
  max-width: 160px;
}
.modal-close {
  display: block; margin: 16px auto 0; border: none; background: none;
  color: var(--text-secondary); font-size: 14px; padding: 8px; cursor: pointer;
}

/* ---------- Misc ---------- */
.empty-state { text-align: center; color: var(--text-muted); font-size: 13px; padding: 40px 20px; }
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: var(--text-primary); color: var(--surface-1);
  font-size: 13px; padding: 10px 16px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  z-index: 60; max-width: 80%; text-align: center;
}
.toast.show { opacity: 1; }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--gridline); border-top-color: var(--series-1);
  animation: spin 0.8s linear infinite; margin: 30px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pannello admin ---------- */
.admin-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-card input {
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
}
.admin-room-block {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  margin-bottom: 12px;
  overflow: hidden;
}
.admin-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  background: var(--page-plane);
  border-bottom: 1px solid var(--border);
}
.admin-arrows { display: flex; gap: 4px; }
.admin-arrow-btn {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  width: 26px; height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.admin-arrow-btn:disabled { opacity: .3; cursor: default; }
.admin-arrow-btn.has-image { border-color: var(--series-1); color: var(--series-1); }
.admin-image-controls { display: flex; gap: 4px; flex-shrink: 0; }
.admin-device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gridline);
}
.admin-device-row:last-child { border-bottom: none; }
.admin-device-row .admin-device-orig {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-device-row input[type="text"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
}
.admin-device-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.admin-diag-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gridline);
}
.admin-diag-row:last-child { border-bottom: none; }
.admin-diag-row .k { color: var(--text-muted); }
.admin-diag-row .v { font-weight: 600; text-align: right; }
.admin-diag-log {
  margin-top: 8px;
  background: var(--page-plane);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  max-height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Pannello admin: utenti aggiuntivi ---------- */
.admin-user-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.admin-user-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.admin-user-name { font-size: 14px; font-weight: 600; }
.admin-user-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.admin-user-form-title { font-size: 14px; font-weight: 600; }
.admin-user-form-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 6px;
}
.admin-card label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-checklist {
  max-height: 220px;
  overflow-y: auto;
  background: var(--page-plane);
  border-radius: var(--radius-s);
  padding: 8px 10px;
}

/* ---------- Admin > Notifiche: istruzioni cron ---------- */
.notify-setup-steps {
  background: var(--page-plane);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.notify-setup-step { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.notify-setup-step code {
  background: var(--surface-1);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}
.notify-cron-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  word-break: break-all;
  user-select: all;
}
.admin-checklist-room-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin: 8px 0 4px;
}
.admin-checklist-room:first-child .admin-checklist-room-name { margin-top: 0; }
.admin-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}

/* ------------------------------------------------------------------
   Schermi larghi (tablet in verticale, e qualunque telefono/tablet
   ruotato in orizzontale): finora #app restava sempre bloccato a
   max-width:560px, quindi su un tablet vedevi la stessa identica
   colonna stretta da telefono con tanto spazio vuoto ai lati, anche
   ruotando lo schermo. Qui sotto lasciamo che il contenuto usi più
   spazio in orizzontale e che le card dei dispositivi si dispongano
   su più colonne, quando c'è davvero abbastanza posto.

   700px come soglia non è legato a "telefono vs tablet" in astratto,
   ma alla LARGHEZZA disponibile in quel momento: un telefono normale
   in verticale resta sotto i 700px (nessuna modifica, layout invariato
   com'è oggi), ma lo stesso telefono ruotato in orizzontale di solito
   supera i 700px — quindi anche i telefoni, non solo i tablet,
   guadagnano più colonne quando li giri, che è esattamente quello che
   serve per adattarsi "al dispositivo e all'orientamento" invece che
   a un elenco fisso di modelli.
------------------------------------------------------------------- */
@media (min-width: 700px) {
  #app,
  .bottom-nav,
  .modal-sheet {
    max-width: min(1100px, 94vw);
  }
  .device-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}