/* Tema "Display": la grafica della centrale di camera con display touch (roomhelperfid/src/touch/touch_ui.cpp).
   Stessi colori: sfondo 0x0D1117, card 0x171D25, bordo 0x262F3A, testo 0xE9EEF3, tenue 0x8893A0, spento 0x4A5461,
   verde 0x3DBE8B, ambra 0xD99A2B, rosso morbido 0xC8475A, accento terra 0x796B59 [Marco]; Montserrat; card
   arrotondate (raggio 24-28 sul display), bottoni a pillola, feedback al tocco (la card si stringe un poco).
   Il terra e' l'accento dei riempimenti; per testi e link si usa un terra piu' chiaro (#B39A7F) che si legge sul fondo. */
html[data-theme="display"] {
  color-scheme: dark;
  --ink: #E9EEF3; --ink-soft: #C3CBD4; --paper: #0D1117; --surface: #171D25;
  --line: #262F3A; --line-soft: #1F2731; --accent: #B39A7F; --accent-dark: #796B59;
  --ok: #3DBE8B; --wait: #D99A2B; --down: #C8475A; --muted: #8893A0;
  --sans: "Montserrat", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ink-bg: #232B36; --ink-bg-fg: #E9EEF3;
  --nav-fg: #8893A0; --nav-fg-strong: #E9EEF3; --nav-muted: #6B7683; --nav-hover: #171D25; --nav-line: #262F3A;
  --nav-btn-line: #262F3A; --nav-foot-fg: #C3CBD4; --nav-icon: #E9EEF3;
  --surface-2: #1C232C; --surface-3: #121820; --accent-soft: rgba(121, 107, 89, .25); --accent-ring: rgba(179, 154, 127, .3);
  --topbar-bg: #0D1117; --topbar-fg: #E9EEF3;
  --occ-none: #4A5461; --occ-in: #C8475A; --pres-in: #8A4A51; --pres-out: #3E7A57; --door-open: #6E7B88; --clima-on: #8A4A51; --clima-eco: #3E7A57; --clima-off: #4A535C; --bar-disabled: #343C46; --ico-stroke: #E9EEF3;
  --radius: 12px; --radius-sm: 6px; --radius-lg: 20px; --radius-panel: 18px; --shadow-card: none;
  --btn-weight: 600; --h-weight: 600;
  --terra: #796B59; --terra-hover: #8B7C69;
}
html[data-theme="display"] body { letter-spacing: -.01em; }
html[data-theme="display"] .rail { background: #0D1117; border-right: 1px solid var(--line); }
html[data-theme="display"] .nav a { border-left: 0; margin: 0 10px; padding: 10px 14px; border-radius: var(--radius); font-weight: 500; }
html[data-theme="display"] .nav a.on { box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="display"] .nav .pill { background: var(--terra); }
html[data-theme="display"] .bell-m .pill { background: #C8475A; box-shadow: 0 0 0 2px #0D1117; }
html[data-theme="display"] .topbar { border-bottom: 1px solid var(--line); }
html[data-theme="display"] .login-wrap { background: #0D1117; }
html[data-theme="display"] .login { border-radius: 24px; padding: 34px; }

/* ---- bottoni a pillola, feedback al tocco come sul display ---- */
html[data-theme="display"] .btn { border-radius: 999px; padding: 9px 20px; transition: transform .14s ease-out, background .14s; }
html[data-theme="display"] .btn:hover { background: #2B3441; border-color: #2B3441; }
html[data-theme="display"] .btn.primary, html[data-theme="display"] .tbtn.on, html[data-theme="display"] .tbtn.on:hover,
html[data-theme="display"] .fchip input:checked + span, html[data-theme="display"] .gw-cam,
html[data-theme="display"] .seg-sw button.on, html[data-theme="display"] .tstat .seg button.on,
html[data-theme="display"] .switch input:checked + span, html[data-theme="display"] .tabs button.on .count,
html[data-theme="display"] .panel .alarm-btn { background: var(--terra); border-color: var(--terra); color: #fff; }
html[data-theme="display"] .btn.primary:hover { background: var(--terra-hover); border-color: var(--terra-hover); }
html[data-theme="display"] .btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
html[data-theme="display"] .btn.ghost:hover { background: var(--surface); }
html[data-theme="display"] .btn.danger { background: transparent; color: #E07A88; border-color: #C8475A; }
html[data-theme="display"] .btn.danger:hover, html[data-theme="display"] .btn.danger.solid { background: #C8475A; color: #fff; }
html[data-theme="display"] .fchip.only input:checked + span { background: var(--ok); border-color: var(--ok); }
html[data-theme="display"] .btn:active, html[data-theme="display"] .tile:active, html[data-theme="display"] .nav a:active { transform: scale(.98); }
html[data-theme="display"] .tile { transition: transform .14s ease-out, border-color .14s; }
html[data-theme="display"] .tile:hover { border-color: #3A4655; }
html[data-theme="display"] .tile.occ-in { border-left-color: #C8475A; }
html[data-theme="display"] .tile.occ-clean { border-left-color: #3DBE8B; }
html[data-theme="display"] .tile.occ-dirty { border-left-color: #6B7683; }
html[data-theme="display"] .occ-legend i.occ-in { background: #C8475A; }
html[data-theme="display"] .occ-legend i.occ-clean { background: #3DBE8B; }
html[data-theme="display"] .occ-legend i.occ-dirty { background: #6B7683; }
html[data-theme="display"] .tile-name { font-size: 18px; }

/* ---- campi e interruttori: come i controlli del Setup sul display (switch 76x40 → 44x24) ---- */
html[data-theme="display"] input, html[data-theme="display"] select.field, html[data-theme="display"] .topbar select {
  background: #0D1117; border-color: var(--line); color: var(--ink);
}
html[data-theme="display"] input:focus, html[data-theme="display"] select.field:focus { border-color: var(--accent); }
html[data-theme="display"] .switch span { width: 44px; height: 24px; border-radius: 12px; background: #262F3A; }
html[data-theme="display"] .switch span::after { width: 20px; height: 20px; }
html[data-theme="display"] .switch input:checked + span::after { transform: translateX(20px); }
html[data-theme="display"] .switch input:checked + span { background: var(--terra); }
html[data-theme="display"] .role-pick button { border-radius: 999px; }

/* ---- tabelle, pannelli, finestre ---- */
html[data-theme="display"] th { color: var(--muted); border-bottom-color: var(--line); }
html[data-theme="display"] .panel-head { border-bottom-color: var(--line); }
html[data-theme="display"] .scrim { background: rgba(0, 0, 0, .65); }
html[data-theme="display"] .modal { border-radius: 24px; }
html[data-theme="display"] .modal-head, html[data-theme="display"] .modal-foot { border-color: var(--line); }
html[data-theme="display"] .dlg { box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
html[data-theme="display"] .toast { border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
html[data-theme="display"] .tip { box-shadow: 0 4px 14px rgba(0, 0, 0, .5); border: 1px solid var(--line); }
html[data-theme="display"] .notice { background: var(--surface-2); border-left-color: var(--accent); border-radius: var(--radius); }
html[data-theme="display"] .notice.alert { color: #E07A88; }
html[data-theme="display"] .secret { border: 1px solid var(--line); border-radius: var(--radius); }
html[data-theme="display"] .board-bar { border-radius: var(--radius); }
html[data-theme="display"] .up-tile, html[data-theme="display"] .tele .cell, html[data-theme="display"] .svc-card { border-radius: var(--radius); }
html[data-theme="display"] .up-tile b, html[data-theme="display"] .tele .cell b { font-weight: 500; }
html[data-theme="display"] .empty b { font-weight: 600; }

/* ---- badge dei profili: chip scure con il colore del profilo nel testo ---- */
html[data-theme="display"] .pbadge { color: #C3CBD4; background: color-mix(in srgb, currentColor 16%, transparent); }
html[data-theme="display"] .pbadge.p-master { color: #9DB8F0; } html[data-theme="display"] .pbadge.p-perm { color: #E0C468; }
html[data-theme="display"] .pbadge.p-hk { color: #7FD3A3; } html[data-theme="display"] .pbadge.p-tech { color: #F0B57A; }
html[data-theme="display"] .pbadge.p-pass { color: #C7B3E8; } html[data-theme="display"] .pbadge.p-guest { color: #8ED3D3; }
html[data-theme="display"] .pbadge.p-service { color: #C3CBD4; }
html[data-theme="display"] .chip { background: var(--surface-2); border-color: var(--line); }
html[data-theme="display"] .rssi-hit rect:hover { fill: rgba(179, 154, 127, .15); }
html[data-theme="display"] .cl-st.eco { color: #4CAF7A; }
html[data-theme="display"] .svc-ico.dirty { color: #6B7683; opacity: .8; }
html[data-theme="display"] .theme-row select { background: #0D1117; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="display"] .btn, html[data-theme="display"] .tile { transition: none; }
  html[data-theme="display"] .btn:active, html[data-theme="display"] .tile:active, html[data-theme="display"] .nav a:active { transform: none; }
}