/* dashboard/css/36-domotica.css — estratto da app.css (2026-07, split senza build). */
/* ===== DOMOTICA stile iOS ===== */
/* Bersaglio dello swap htmx del blocco stato: deve esistere nel DOM ma NON
   generare un box, altrimenti si infila fra .app-main (flex su desktop) e i
   suoi figli, cambiando spaziature e margin-collapse. */
.dom-stato { display: contents; }
.dom-card { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); margin: 10px 18px 0; padding: 16px; }
.dom-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.dom-card .stato-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.dom-card .stato-pill.connesso { background: #E8F8EE; color: var(--ok); }
.dom-card .stato-pill.disconnesso { background: #FCE4E4; color: var(--danger); }
.dom-card .btn-reboot { width: 100%; padding: 12px; border: 1.5px solid var(--brand); color: var(--brand); border-radius: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--surface); cursor: pointer; transition: background 120ms ease, transform 80ms ease; }
.dom-card .btn-reboot:hover { background: var(--brand-soft); }
.dom-card .btn-reboot:active { transform: scale(0.97); }

.dom-channel { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); margin: 10px 18px 0; padding: 16px; }
.dom-channel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dom-channel-head .ico { width: 28px; height: 28px; color: var(--ink-2); }
.dom-channel-head .name { font-size: 15px; font-weight: 700; }
.dom-channel-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.dom-channel-row + .dom-channel-row { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
/* Gruppo credenziali (LCS + Ricorda password) unito, poi stacco verso i toggle. */
.field.lcs-field { margin-bottom: 6px; }
.dom-channel-row.lcs-remember-row { margin-bottom: 22px; }
.dom-channel-row .lbl { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.toggle-ios { width: 50px; height: 30px; background: var(--line); border-radius: 15px; position: relative; transition: background .2s; flex-shrink: 0; }
.toggle-ios::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.toggle-ios.on { background: var(--brand); }
.toggle-ios.on::after { transform: translateX(20px); }
/* Domotica: toggle bloccato mentre il comando htmx è in volo */
form.htmx-request .toggle-ios { pointer-events: none; }
/* Transizione comando: colore OBIETTIVO ombreggiato che PULSA finché il cloud
   non conferma (pieno solo a conferma — mai stato "finto"). Il pulse è
   l'indicatore di attività NN/g per attese 1-10s, inline sul controllo. */
@keyframes dom-sync-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .6; } }
.toggle-ios.pending-on { background: var(--brand); opacity: .45; pointer-events: none; animation: dom-sync-pulse 1.2s ease-in-out infinite; }
.toggle-ios.pending-on::after { transform: translateX(20px); }
.toggle-ios.pending-off { background: var(--line); opacity: .45; pointer-events: none; animation: dom-sync-pulse 1.2s ease-in-out infinite; }
.toggle-ios.pending-off::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .toggle-ios.pending-on, .toggle-ios.pending-off { animation: none; }
}
/* Micro-label di attesa accanto alla label di riga durante il pending */
.dom-sync-note { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 6px; white-space: nowrap; }
/* Attivo in automatico: stato visibile ma non comandabile (governa la centralina) */
.dom-channel .toggle-ios[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.consent-state { font-size: 13px; font-weight: 700; }
.consent-state.is-on { color: var(--ok, #16a34a); }
.consent-state.is-off { color: var(--ink-3); }

/* Sensor strip */
.sensor-strip { padding: 10px 18px 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sensor-cell { background: var(--surface); border-radius: 12px; padding: 12px 8px; box-shadow: var(--shadow-card); text-align: center; }
.sensor-cell .v { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.sensor-cell .l { font-size: 10px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }