/* RoomHelper: componenti nostri sopra Bootstrap 5 + toolbox di October (prefisso rh-).
   Qui vive cio' che October non ha: la scheda della camera (rh-tile), la spia del lettore (led), le icone di servizio,
   la striscia del termostato, la fascia dell'allarme bagno, i badge dei profili. Tutto sui token di Bootstrap/October
   (--bs-*, --oc-*), cosi' le palette (Default di October, Standard, Display) cambiano anche questi. */
:root, [data-bs-theme="light"] {
  --rh-ok: #5e9e2e; --rh-wait: #e67e22; --rh-down: var(--oc-color-negative); --rh-muted: var(--bs-secondary-color);
  --rh-occ-in: #d0342c; --rh-occ-clean: var(--oc-selection); --rh-occ-dirty: #9aa0a6; --rh-occ-none: var(--oc-mainnav-bg);
  --rh-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --rh-ico-stroke: #35425b;
}
[data-bs-theme="dark"] { --rh-ok: #41b862; --rh-ico-stroke: #e0e0e0; --rh-occ-none: #6c757d; }

.hidden { display: none !important; }
.mono { font-family: var(--rh-mono); }
.subtle, .hint { font-size: 12.5px; color: var(--rh-muted); }
.hint { margin: 5px 0 0; }
.err { color: var(--rh-down); font-size: 13.5px; margin-top: 8px; }
.st-ok { color: var(--rh-ok); } .st-wait { color: var(--rh-wait); } .st-down { color: var(--rh-down); } .st-muted { color: var(--rh-muted); }

/* ---- pagina ---- */
.rh-page { padding: 20px 20px 60px; }
.rh-page h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 4px; color: var(--bs-heading-color); }
.rh-page h2 { font-size: 1.1rem; font-weight: 600; margin: 28px 0 12px; color: var(--bs-heading-color); }
.rh-page .lede { font-size: 15px; color: var(--bs-secondary-color); max-width: 70ch; margin: 0 0 18px; }
.rh-page .lede b { color: var(--bs-body-color); font-weight: 600; }
.rh-search { max-width: 320px; min-width: 200px; }
.tbtn .badge { margin-left: 4px; }

/* ---- menu: voce struttura e avatar con le iniziali ---- */
.mainmenu-account-avatar#avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bs-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.mainmenu-item .counter { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--rh-down); color: #fff; font-size: 11px; font-weight: 600; text-align: center; vertical-align: middle; margin-left: 6px; }
.rh-account-menu { min-width: 260px; }
.mode-tag { font-family: var(--rh-mono); font-size: 11px; border: 1px solid var(--bs-border-color); border-radius: 3px; padding: 1px 6px; color: var(--rh-muted); }
.mode-tag.edge { border-color: var(--bs-primary); color: var(--bs-primary); }
.repl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
#propItem .nav-label { padding: 0 12px; opacity: .85; }
#propItem .form-select { display: inline-block; width: auto; margin: 8px 12px; background-color: transparent; color: var(--oc-mainnav-color); border-color: rgba(255,255,255,.3); }

/* ---- accesso: la pagina di login di October (colonna del modulo + fondo caldo) ---- */
.rh-login { display: flex; min-height: 100vh; }
.rh-login .outer-form-cell { display: block; width: 380px; flex: none; background: var(--bs-body-bg); }
.rh-login .outer-theme-cell { flex: 1; background: #fef6eb radial-gradient(ellipse at 30% 20%, #fff 0%, #fef6eb 45%, #f6e4cf 100%); }
.rh-login .rh-logo { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--bs-heading-color); margin: 0 0 4px; }
.rh-login .rh-logo span { font-weight: 400; color: var(--bs-secondary-color); font-size: 14px; margin-left: 8px; letter-spacing: 0; }
.rh-login h2 { font-size: 18px; font-weight: 600; margin: 24px 0 6px; }
.rh-login .form-group { margin-bottom: 16px; }
.rh-login .login-button { width: 100%; margin-top: 6px; }
@media (max-width: 700px) { .rh-login .outer-theme-cell { display: none; } .rh-login .outer-form-cell { width: 100%; } }

/* ---- griglia camere ---- */
/* ---- Home: riquadri come i widget della dashboard di October 4 ---- */
.rh-dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 12px 12px 4px; }
.rh-widget { --tone: var(--bs-secondary-color); display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color); border-radius: 8px; color: var(--bs-body-color); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .15s, box-shadow .15s; }
a.rh-widget:hover { border-color: var(--tone); box-shadow: 0 2px 8px rgba(0,0,0,.08); color: var(--bs-body-color); }
.rh-widget.tone-ok { --tone: var(--rh-ok); } .rh-widget.tone-down { --tone: var(--rh-down); } .rh-widget.tone-wait { --tone: var(--rh-wait); }
.rh-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rh-widget-title { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
.rh-widget-ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, transparent); }
.rh-widget-val { font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--bs-heading-color); }
.rh-widget.tone-down .rh-widget-val, .rh-widget.tone-wait .rh-widget-val { color: var(--tone); }
.rh-widget-val small { font-size: 16px; font-weight: 400; color: var(--bs-secondary-color); }
.rh-widget-sub { font-size: 12.5px; color: var(--bs-secondary-color); }
@media (max-width: 600px) { .rh-dash { grid-template-columns: 1fr 1fr; gap: 8px; } .rh-widget { padding: 12px; } .rh-widget-val { font-size: 24px; } }
.rh-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.rh-tile { display: block; text-decoration: none; color: inherit; padding: 14px 16px; border-left: 4px solid var(--bs-border-color);
  transition: box-shadow .12s, border-color .12s; }
.rh-tile:hover { box-shadow: 0 3px 10px rgba(53, 66, 91, .10); color: inherit; }   /* niente border-color: la barra di stato a sinistra resta del suo colore */
.rh-tile, .rh-tile:hover, .rh-tile:focus { text-decoration: none; }
.rh-tile.occ-in { border-left-color: var(--rh-occ-in); }
.rh-tile.occ-clean { border-left-color: var(--rh-occ-clean); }
.rh-tile.occ-dirty { border-left-color: var(--rh-occ-dirty); }
.rh-tile.occ-none { border-left-color: var(--rh-occ-none); }
.rh-tile.maint { border-right: 4px solid #e07000; }
.rh-tile.tile-off { background: var(--bs-tertiary-bg); border-left-color: var(--bs-border-color); color: var(--rh-muted); }
.rh-tile.tile-off > * { opacity: .6; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile-name { display: inline-flex; align-items: center; font-size: 17px; font-weight: 600; letter-spacing: -.2px; color: var(--bs-heading-color); }
.tile-right { display: inline-flex; align-items: center; gap: 9px; }
.tile-dev { font-family: var(--rh-mono); font-size: 11px; color: var(--rh-muted); }
.tile-uid { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.tile-uid:hover { color: var(--bs-primary); }
.tile-ip { color: var(--bs-link-color); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tile-code { margin-top: 10px; font-family: var(--rh-mono); font-size: 21px; letter-spacing: 1px; }
.tile-code.name { font-family: inherit; letter-spacing: 0; font-size: 19px; font-weight: 500; }
.tile-code.name.free { color: var(--rh-muted); }
.tile-code.none { font-size: 14px; letter-spacing: 0; color: var(--rh-muted); font-family: inherit; }
.tile-meta { margin-top: 3px; font-size: 13px; color: var(--rh-muted); }
.tile-stay { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px; font-size: 12.5px; color: var(--rh-muted); text-align: right; }
.tile-stay b { font-weight: 500; color: var(--bs-body-color); font-variant-numeric: tabular-nums; }
.stay-flag { font-style: normal; font-size: 11px; font-weight: 500; color: var(--rh-wait); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 2px; vertical-align: 1px; }
.tile-guest { justify-content: space-between; margin-top: 10px; padding-top: 8px; }
.tile-guest .tg-name { font-size: 14.5px; font-weight: 500; color: var(--bs-body-color); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-guest .tg-name.free { color: var(--rh-muted); font-weight: 400; }
.tile-guest + .tile-meta { margin-top: 4px; }
.key-ico { color: var(--rh-ok); flex: none; vertical-align: -2px; }
.tile-foot { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--bs-border-color-translucent); display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.tile-last { color: var(--bs-body-color); }
.tile-last + .tile-foot { margin-top: 9px; }
.occ-legend { display: inline-flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--rh-muted); }
.occ-legend span { display: inline-flex; align-items: center; gap: 6px; }
.occ-legend i { width: 4px; height: 13px; display: inline-block; }
.occ-legend i.occ-in { background: var(--rh-occ-in); } .occ-legend i.occ-clean { background: var(--rh-occ-clean); }
.occ-legend i.occ-dirty { background: var(--rh-occ-dirty); } .occ-legend i.occ-none { background: var(--rh-occ-none); }
.rh-filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 10px 16px; margin-bottom: 14px; }
.rh-filters .form-check { margin: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 0; }
.rh-filters .form-check-input { margin: 0; }
.rh-filters .rh-lab { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rh-muted); }
.rh-filters .occ-legend { margin-left: auto; }
.rh-filters .cnt { font-variant-numeric: tabular-nums; }
.board-status { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--bs-border-color); font-size: 14px; color: var(--bs-secondary-color); }
.board-status b { color: var(--bs-body-color); font-weight: 600; }

/* spia del lettore (in alto a destra sulla scheda) e pallini di stato */
.led { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--bs-border-color); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); cursor: help; }
.led.ok { background: radial-gradient(circle at 35% 35%, #7be0a6, #1f9d55 60%); box-shadow: 0 0 0 1px #1a7f45, 0 0 6px rgba(31,157,85,.55); }
.led.wait { background: radial-gradient(circle at 35% 35%, #ffe08a, #e0a100 60%); box-shadow: 0 0 0 1px #b88400, 0 0 6px rgba(224,161,0,.55); }
.led.down { background: radial-gradient(circle at 35% 35%, #ff9a8f, #d0342c 60%); box-shadow: 0 0 0 1px #a52620, 0 0 7px rgba(208,52,44,.6); animation: led-blink 1.6s ease-in-out infinite; }
.led.led-go { cursor: pointer; } .led.led-go:hover { transform: scale(1.25); }
@keyframes led-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .led.down { animation: none; } }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--rh-muted); display: inline-block; }
.dot.ok { background: var(--rh-ok); } .dot.wait { background: var(--rh-wait); } .dot.down { background: var(--rh-down); }

/* badge di stato: contorno nel colore dello stato (il .badge pieno di Bootstrap resta per i contatori) */
.badge.b-ok, .badge.b-wait, .badge.b-down, .badge.b-muted { background: transparent; border: 1px solid currentColor; font-weight: 500; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.badge.b-ok { color: var(--rh-ok); } .badge.b-wait { color: var(--rh-wait); } .badge.b-down { color: var(--rh-down); } .badge.b-muted { color: var(--rh-muted); }

/* icone di servizio (ui/icons.svg): il bordo e' un <rect> in currentColor, il tratto prende --ico-ink */
/* fila unica: le icone scorrono una dopo l'altra, tre per riga sulla scheda stretta, quattro sul telefono */
.svc { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 0; margin-top: 10px; margin-inline: -4px; }
.svc > .svc-it { flex: 0 0 33.333%; }
.svc.bottom { margin-top: 8px; }
.svc-it { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.svc-it small { font-size: 10.5px; letter-spacing: -.2px; line-height: 1.25; color: var(--bs-body-color); white-space: nowrap; }
.svc-it small.svc-at { margin-top: -1px; color: var(--rh-muted); }
.svc-ico { width: 42px; height: 41px; flex: none; color: var(--rh-ico-stroke); --ico-ink: var(--rh-ico-stroke); --ico-paper: var(--bs-body-bg); --ico-fw: 13px; }
.svc-ico.requested { color: #e0a100; --ico-fw: 44px; } .svc-ico.cleaning { color: #c62828; --ico-fw: 44px; }
.svc-ico.clean { color: #2e7d32; --ico-fw: 44px; } .svc-ico.dirty { color: #9aa0a6; --ico-fw: 44px; opacity: .55; }
.svc-ico.alarm { color: #c62828; --ico-fw: 44px; animation: svc-beat 1.4s ease-in-out infinite; }
.svc-it:has(.alarm) small { color: #c62828; font-weight: 600; }
@keyframes svc-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .svc-ico.alarm { animation: none; } }
.svc-ico.alarm.seen { animation: none; }
.svc-ico.door { color: #e0a100; --ico-fw: 44px; } .svc-ico.tech { color: #c62828; --ico-fw: 44px; }
.svc-ico.maint-flag { color: #e07000; --ico-ink: #e07000; --ico-fw: 44px; }
.maint-flag-wrap { display: inline-flex; margin-left: 8px; }
.tile-head .svc-ico.maint-flag { width: 23px; height: 22px; --ico-fw: 52px; }
.svc-ico.winclima { color: #c62828; --ico-fw: 44px; }
.svc.big { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-inline: 0; }
.svc-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius); padding: 10px 14px 10px 10px; min-width: 220px; }
.svc-card .svc-ico { width: 56px; height: 54px; }
.svc-card b { display: block; font-weight: 600; } .svc-card small { color: var(--rh-muted); font-size: 12.5px; }

/* striscia del termostato sulla scheda */
.clima-strip { position: relative; margin-top: 10px; padding-top: 9px; }
.clima-strip::before { content: ""; position: absolute; top: 0; left: 4px; right: 4px; border-top: 1px solid var(--bs-border-color-translucent); }
.cl-box { height: 41px; display: flex; align-items: center; justify-content: center; }
.cl-st { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; border: 1px solid currentColor; white-space: nowrap; }
.cl-st.on { color: var(--rh-ok); } .cl-st.eco { color: var(--bs-primary); } .cl-st.off { color: var(--rh-muted); } .cl-st.offline { color: var(--rh-down); }
.cl-temp { font-size: 21px; font-weight: 500; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }

/* fascia dell'allarme bagno: rosso pieno, sopra ogni pagina */
.alarm-bar { display: flex; align-items: center; gap: 14px; background: var(--rh-down); color: #fff; padding: 12px 16px; margin: 0 0 2px; border-left: 6px solid #6b241a; }
.alarm-bar .alarm-ico { width: 40px; height: 39px; flex: none; color: #fff; background: #fff; border-radius: 6px; --ico-fw: 13px; }
.alarm-bar .alarm-txt { flex: 1; min-width: 0; } .alarm-bar .alarm-txt b { display: block; letter-spacing: .02em; }
.alarm-bar .alarm-txt small { display: block; opacity: .9; font-size: 12.5px; }
.alarm-bar .btn-secondary { --bs-btn-bg: transparent; --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.55); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.55); }
.alarm-bar .alarm-btn { --bs-btn-bg: #fff; --bs-btn-color: var(--rh-down); --bs-btn-hover-bg: #f3f3f3; --bs-btn-hover-color: var(--rh-down); font-weight: 600; }

/* badge dei profili dei codici */
.pbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; border-radius: 4px; padding: 2px 8px 2px 6px; white-space: nowrap; background: #e4e7e1; color: #35425b; }
.pb-ico { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pbadge.p-master { background: #dce6f8; color: #1e4fa8; } .pbadge.p-perm { background: #f4e6b8; color: #7a5a00; }
.pbadge.p-hk { background: #d9efe3; color: #1d6b43; } .pbadge.p-tech { background: #fce6cc; color: #95520a; }
.pbadge.p-pass { background: #e7e0f3; color: #553c8b; } .pbadge.p-guest { background: #d8eeee; color: #1d6468; }
.pbadge.p-service { background: #e4e7e1; color: #2c3d47; }

/* finestre: il popup di October e' il modal di Bootstrap; i vecchi .modal-head/.modal-foot sono header/footer */
.modal-dialog:has(.modal-wide) { max-width: 960px; }
.modal .modal-wide { display: none; }
.modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.modal-header p { margin: 4px 0 0; font-size: 13px; color: var(--rh-muted); flex-basis: 100%; }
.modal-header { flex-wrap: wrap; }
.rh-dlg .dlg-text { margin: 0 0 4px; white-space: pre-line; color: var(--bs-body-color); font-size: 14px; }
.rh-dlg .dlg-label { display: block; margin: 12px 0 5px; font-size: 12.5px; color: var(--rh-muted); }

/* messaggi flash: come oc.flashMsg di October, in alto al centro */
.rh-flash-root { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 10300; align-items: center; pointer-events: none; }
.rh-flash { display: inline-flex; align-items: center; gap: 10px; background: var(--bs-body-bg); color: var(--bs-body-color); padding: 10px 18px 10px 14px; border-radius: 30px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 14px; max-width: 480px; pointer-events: auto; animation: rh-flash-in .18s ease-out; }
.rh-flash i { font-size: 18px; } .rh-flash.success i { color: var(--rh-ok); } .rh-flash.warning i { color: var(--rh-wait); } .rh-flash.error i { color: var(--rh-down); }
@keyframes rh-flash-in { from { opacity: 0; transform: translateY(-6px); } }

/* tooltip immediato (data-tip) */
.tip { position: fixed; z-index: 10700; max-width: 280px; padding: 6px 9px; border-radius: 5px; background: var(--oc-mainnav-bg); color: #fff; font-size: 12px; line-height: 1.35;
  white-space: pre-line; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .08s, transform .08s; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.tip.on { opacity: 1; transform: none; }
.tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: var(--oc-mainnav-bg); transform: rotate(45deg); }
.tip.below::after { bottom: auto; top: -4px; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }

/* pulizia tabelle nelle card */
.card > .table, .card > .tbl-wrap > .table { margin-bottom: 0; }
.tbl-wrap { overflow-x: auto; }
@media (max-width: 600px) { .rh-page { padding: 12px 12px 40px; } .rh-board { grid-template-columns: 1fr; gap: 8px; } .rh-filters .occ-legend { margin-left: 0; } }

/* ---- toolbar di pagina: quella del toolbox e' a tabella e scorre con il suo JS; qui va a capo da sola ---- */
.rh-page .control-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 0 14px; }
.rh-page .control-toolbar .toolbar-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; white-space: normal; }
.rh-page .control-toolbar .toolbar-item.fix-width { margin-left: auto; }
.rh-page .control-toolbar .toolbar-divider { margin: 0 4px; height: 24px; padding: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.card-header h2, .card-header h3 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--bs-heading-color); }
.rh-page .table th, .rh-page .table td { padding: .55rem .75rem; }
/* login: il layout "outer" di October usa un logo immagine e un h2 in serif; qui il nome in chiaro con il font del corpo */
body.outer .rh-login .rh-logo, body.outer .rh-login .outer-form-container h2, body.outer .rh-login p { font-family: var(--bs-body-font-family); text-align: left; }
body.outer .rh-login .outer-form-container h2 { padding: 0; margin: 22px 0 6px; font-size: 18px; font-weight: 600; }
/* menu su telefono: il bottone compare sotto i 992px, dove la mainnav di October nasconde le voci */
.rh-menu-toggle { display: none; }
@media (max-width: 991.98px) { .rh-menu-toggle { display: inline-block; } #nav { display: none; } }
#navMobile .list-group-item i { font-size: 18px; width: 24px; text-align: center; }
/* compat moduli: le vecchie righe a due colonne (.field-row) finche' i moduli non passano ai form-group di October */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.field-full { margin-bottom: 14px; }
.field-row .hint, .field-full .hint, .modal-body .hint { margin: 6px 0 0; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* ---- telefono: Camere compatta ---- */
@media (max-width: 600px) {
  .rh-page .control-toolbar { gap: 8px; padding-bottom: 10px; }
  .rh-page .control-toolbar .toolbar-item.fix-width { width: 100%; margin-left: 0; }
  .rh-page .control-toolbar .rh-search { max-width: none; width: 100%; }
  .rh-page .control-toolbar .btn { padding: 8px 12px; }
  .rh-tile { padding: 10px 12px; }
  .tile-name { font-size: 18px; }
  .tile-dev { font-size: 10.5px; } .tile-dev .tile-ip { display: none; }
  .svc > .svc-it { flex: 0 0 25%; }
  .svc-ico { width: 38px; height: 37px; }
  .svc-it small { font-size: 10px; }
  .tile-code { margin-top: 6px; font-size: 18px; } .tile-meta { font-size: 12.5px; }
  .tile-foot { margin-top: 8px; padding-top: 7px; font-size: 12px; }
  .tile-guest { margin-top: 6px; }
  .clima-strip { margin-top: 6px; padding-top: 6px; }
  .rh-filters { padding: 8px 12px; gap: 6px 14px; }
  .board-status { font-size: 13px; }
}
/* ---- elenchi (rhlist.js): ricerca del toolbar di October e tabelle larghe che scorrono nel loro riquadro ---- */
.control-search .form-control.is-searchable { padding-right: 32px; min-width: 240px; }
.control-list .list-content { overflow-x: auto; }
.control-list { margin-bottom: 18px; }
.rh-page > .control-list, .rh-page > .control-list:last-child { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-table-bg); }
.rh-page > .control-list table.table.data { border-bottom: 0; }
.card > .control-list { margin: 0; }
.rh-filter-bar > div > .form-label { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--rh-muted); margin: 0 0 3px; }
.rh-filter-bar .form-select { width: auto; min-width: 140px; }
/* ---- griglia Camere: lo sfondo caldo della vecchia UI dietro le schede; hover grigio = "la sto scegliendo" [Marco 2026-09-30] ---- */
.rh-page:has(.rh-board), #layout-body:has(.rh-board) { background: #e9eae5; }
.rh-page:has(.rh-board) { min-height: 100%; }
[data-bs-theme="dark"] .rh-page:has(.rh-board), [data-bs-theme="dark"] #layout-body:has(.rh-board) { background: #16181c; }
.rh-tile { transition: background-color .12s, box-shadow .12s; }
.rh-tile:hover { background: #f3f4f6; box-shadow: 0 3px 10px rgba(53, 66, 91, .10); }
.rh-tile.tile-off:hover { background: #eceef1; }
/* sul fondo caldo della griglia i bottoni grigi del toolbox si perdono: bianchi con bordo (btn-default di October) */
.rh-page:has(.rh-board) .btn-secondary { --bs-btn-bg: #fff; --bs-btn-color: var(--bs-body-color); --bs-btn-hover-bg: #f6f7f9; --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-active-bg: #eceef1; --bs-btn-box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px 0, rgba(64, 68, 82, 0.2) 0 0 0 1px; }
.rh-page:has(.rh-board) .rh-filters { background: #fff; }
.rh-page:has(.rh-board) .input-group-text { background: #fff; }
@media (max-width: 600px) { .rh-page > .lede { display: none; } .rh-page h1 { font-size: 1.25rem; margin-bottom: 10px; } }
/* pannello Filtri con tendine (Accessi, Registro, Tessere): etichetta piccola e tendina in linea */
.rh-fsel { display: inline-flex; align-items: center; gap: 8px; }
.rh-fsel .rh-flab { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rh-muted); white-space: nowrap; }
.rh-fsel .form-select { width: auto; min-width: 130px; padding-top: 4px; padding-bottom: 4px; }
/* menu dell'utente: sempre agganciato a destra, sotto l'avatar */
.mainmenu-items .dropdown-menu.rh-account-menu { position: absolute; right: 0 !important; left: auto !important; top: 100% !important; transform: none !important; inset: auto 0 auto auto !important; margin-top: 4px; }
.rh-guide p { font-size: 14.5px; line-height: 1.55; }
.rh-guide p:last-child { margin-bottom: 0; }
/* ---- telefono: scheda camera e Lettori ---- */
@media (max-width: 600px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; flex: none; }
  /* Lettori: sul telefono restano stato, lettore, camera, allineato e azioni (le celle portano list-cell-name-<colonna>) */
  #rhl-devices .list-cell-name-cpu, #rhl-devices .list-cell-name-kind, #rhl-devices .list-cell-name-ip, #rhl-devices .list-cell-name-fw,
  #rhl-devices .list-cell-name-audit, #rhl-devices .list-cell-name-diag, #rhl-devices .list-setup { display: none; }
  .rh-page .control-toolbar .dropdown-menu .dropdown-item { padding: 10px 16px; }
  .card-header { padding: 10px 12px; } .card-body { padding: 12px; }
}
/* ---- niente padding di pagina [Marco 2026-09-30]: il contenuto arriva ai bordi, come le liste di October ---- */
#layout-body, .layout-container, .padded-container { padding: 0; }
.rh-page { padding: 0 0 40px; }
.rh-page h1 { margin: 14px 12px 2px; } .rh-page > .lede { margin: 0 12px 12px; }
.rh-page .control-toolbar { padding: 12px 12px 10px; }
.rh-page > .card, .rh-page > .rh-filters, .rh-page > .notice, .rh-page > .callout, .rh-page > .tabs, .rh-page > .board-status, .rh-page > .dev-head, .rh-page > .back, .rh-page > .hint { margin-left: 12px; margin-right: 12px; }
.rh-page > .control-list { margin: 0 0 18px; border-left: 0; border-right: 0; border-radius: 0; }
.rh-board { padding: 0 12px 12px; }
.rh-page:has(.rh-board) .control-toolbar { padding-top: 14px; }
@media (max-width: 600px) { .rh-page { padding-bottom: 30px; } .rh-page .control-toolbar { padding: 10px 10px 8px; } .rh-board { padding: 0 8px 8px; } .rh-page h1 { margin: 10px 10px 2px; } }
.rh-page h2.rh-list-title { margin: 10px 12px 8px; }
.rh-list-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-heading-color); margin: 6px 12px 8px; }
.rh-list-title .subtle { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* segnale a barra (piena = forte) con parola e percentuale; i dati tecnici nel tooltip */
.rh-sig { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: help; }
.rh-sig .bar-g { width: 56px; height: 7px; margin: 0; max-width: none; background: var(--bs-border-color); }
.rh-sig .rh-sig-t { font-size: 12.5px; color: var(--rh-muted); } .rh-sig .rh-sig-t b { color: var(--bs-body-color); font-weight: 600; }
/* dentro un elenco cliccabile i link nelle celle sono neri (October): il padre resta un link riconoscibile */
.control-list.list-rowlink tbody td a.rh-link, .control-list.list-rowlink tbody td a.rh-link:hover { color: var(--bs-link-color); text-decoration: underline; text-underline-offset: 2px; }
/* verde / giallo / rosso anche sulla parola e sulla percentuale [Marco 2026-09-30] */
.rh-sig.ok .rh-sig-t, .rh-sig.ok .rh-sig-t b { color: var(--rh-ok); }
.rh-sig.wait .rh-sig-t, .rh-sig.wait .rh-sig-t b { color: var(--rh-wait); }
.rh-sig.down .rh-sig-t, .rh-sig.down .rh-sig-t b { color: var(--rh-down); }
.rh-sig .bar-g.ok i { background: var(--rh-ok); } .rh-sig .bar-g.wait i { background: var(--rh-wait); } .rh-sig .bar-g.down i { background: var(--rh-down); }
.rh-page > .bld-tabs { margin: 0 12px 12px; }
/* titolo di ogni edificio nella griglia (vista "Tutte"): allineato agli altri elementi, con l'icona dell'edificio */
.rh-page h2.bld-head { display: flex; align-items: center; gap: 8px; margin: 14px 12px 8px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--bs-heading-color); }
.rh-page h2.bld-head .bi { font-size: 18px; color: var(--rh-muted); }
.rh-page h2.bld-head .subtle { text-transform: none; letter-spacing: 0; font-weight: 400; }
@media (max-width: 600px) { .rh-page h2.bld-head { margin: 10px 8px 6px; } }
/* accesso comune (portone, cancello): card diversa dalle camere — fondo freddo, bordo tratteggiato, icona; il banco di prova simile */
.rh-tile.tile-common, .rh-tile.tile-bench { background: #f3f6fb; border-style: dashed; border-left-style: solid; }
.rh-tile.tile-common:hover, .rh-tile.tile-bench:hover { background: #eaeff7; }
.rh-tile.tile-common .tile-name, .rh-tile.tile-bench .tile-name { color: #35425b; }
.rh-tile .tile-kind-ico { font-size: 17px; margin-right: 8px; color: #5e6d8c; }
.rh-tile.tile-bench { background: #fbf7ef; } .rh-tile.tile-bench:hover { background: #f5eedf; }
/* scheda camera: il blocco "Ultima apertura" (e sotto lo stato del lettore) sta sempre in fondo, allineato fra le schede della riga */
.rh-tile { display: flex; flex-direction: column; }
.rh-tile > .tile-last { margin-top: auto; }
.rh-tile:not(:has(> .tile-last)) > .tile-foot:last-child { margin-top: auto; }
.tile-esito { font-size: 15px; flex: none; } .tile-esito.ok { color: var(--rh-ok); } .tile-esito.down { color: var(--rh-down); }
/* altezza minima delle schede: le righe della griglia restano regolari anche con schede quasi vuote */
.rh-tile { min-height: 250px; }
@media (max-width: 600px) { .rh-tile { min-height: 0; } }

/* ---- elenchi a gruppi (rhList groupKey): +/− a sinistra, testa del gruppo grigia, figli rientrati, come la legacy ---- */
.control-list table.table.data th.rh-tcol, .control-list table.table.data td.rh-tcol { width: 38px; padding-right: 0; }
.rh-gtoggle { width: 22px; height: 22px; padding: 0; border: 1px solid var(--bs-border-color); border-radius: 4px; background: var(--bs-body-bg);
  color: var(--bs-body-color); font: 600 15px/1 var(--rh-mono); cursor: pointer; vertical-align: middle; }
.rh-gtoggle:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.control-list table.table.data tr.rh-ghead > td { background: var(--bs-tertiary-bg); }
.control-list table.table.data tr.rh-gchild > td { font-size: 13px; }

/* Grafico della temperatura nella pagina della camera: letta (primario, piena) e impostata (arancio, tratteggiata)
   sullo stesso grafico. I rettangoli del tooltip vanno trasparenti, altrimenti l'SVG li riempie di nero. */
:root { --rh-clima-sp: #e67e22;  }
.pres-rows .clima-tr svg{height:64px}
.clima-sp{fill:none;stroke:var(--rh-clima-sp);stroke-width:2;stroke-dasharray:6 4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.clima-leg{display:flex;flex-direction:column;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px}
.clima-leg i{display:inline-block;width:14px;border-top:2px solid var(--accent);vertical-align:middle;margin-right:5px}
.clima-leg i.sp{border-top:2px dashed var(--rh-clima-sp)}
.rssi-hit rect{fill:transparent}
.rssi-hit rect:hover{fill:rgba(var(--bs-primary-rgb),.10)}
/* Barra del termostato: grigio spento, verde ECO, blu acceso [Marco 2026-10-24] */
:root { --clima-on: #3498db; --clima-eco: #5e9e2e; --clima-off: #c3c8cc; }

/* ---- scheda camera [Marco 2026-10-25: «contatori sopra, termostato sopra a meta', usabilita' e ui»] ----
   Contatori come i widget della Home, cliccabili (il riquadro acceso = l'elenco aperto in fondo); sotto, due colonne:
   termostato a sinistra, Soggiorno + Stato camera + Servizio a destra; poi presenza ospite e l'elenco scelto. */
.rh-room-kpi { margin: 4px 12px 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rh-kpi { cursor: pointer; text-align: left; font: inherit; padding: 12px 14px; }
.rh-kpi .rh-widget-val { font-size: 26px; }
.rh-kpi:hover { border-color: var(--bs-primary); }
.rh-kpi.on { border-color: var(--bs-primary); box-shadow: inset 0 0 0 1px var(--bs-primary); }
.rh-kpi.on .rh-widget-ico { background: var(--bs-primary); color: #fff; }
.rh-kpi.on .rh-widget-title { color: var(--bs-primary); }
.rh-room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0 12px; align-items: start; }
.rh-room-col { min-width: 0; }
.rh-room-col > .card { margin: 0 0 14px; }
.rh-room-col:only-child { grid-column: 1 / -1; }
.rh-elenco > .card { margin: 0 12px 14px; }
.rh-elenco { scroll-margin-top: 12px; }
@media (max-width: 900px) { .rh-room-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .rh-room-kpi { grid-template-columns: 1fr 1fr; gap: 8px; } .rh-kpi { padding: 10px 12px; } .rh-kpi .rh-widget-val { font-size: 22px; } .rh-kpi .rh-widget-ico { width: 26px; height: 26px; font-size: 13px; } }
/* soggiorno, stato camera, riepilogo presenza: regole del legacy che in ui2 mancavano (etichette e valori appiccicati) */
.stay-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; }
.stay-big > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.stay-big small { font-size: 12px; color: var(--rh-muted); }
.stay-big b { font-weight: 600; font-size: 15px; color: var(--bs-body-color); }
.stay-big .badge { margin-top: 2px; }
.tele { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tele .cell { border: 1px solid var(--bs-border-color); padding: 10px 12px; border-radius: var(--bs-border-radius); background: var(--bs-body-bg); }
.tele .cell small { display: block; color: var(--rh-muted); font-size: 12px; }
.tele .cell b { font-size: 17px; font-weight: 600; display: block; margin: 2px 0; }
.tele .cell.on { border-left: 3px solid var(--rh-ok); } .tele .cell.warn { border-left: 3px solid var(--rh-wait); } .tele .cell.alert { border-left: 3px solid var(--rh-down); }
.up-tile { border: 1px solid var(--bs-border-color); padding: 10px 12px; border-radius: var(--bs-border-radius); }
.up-tile b { display: block; font-size: 22px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.up-tile span { font-size: 12.5px; color: var(--rh-muted); }
/* ---- termostato grande: stato nel titolo (badge nei colori --clima-*), display, comandi ---- */
.rh-clima-badge { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 12px; color: #fff; background: var(--rh-muted); }
.rh-clima-badge.t-on { background: var(--clima-on); } .rh-clima-badge.t-eco { background: var(--clima-eco); }
.rh-clima-badge.t-off { background: var(--clima-off); color: #333; } .rh-clima-badge.t-offline { background: var(--rh-down); }
.tstat.tstat-big { max-width: none; margin-top: 0; border: 0; padding: 0; gap: 14px; background: transparent; }
.t2-disp { --t2: var(--rh-muted); position: relative; display: flex; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 10px;
  border: 1px solid var(--bs-border-color); border-left: 6px solid var(--t2); background: color-mix(in srgb, var(--t2) 9%, var(--bs-body-bg)); }
.tstat-big.t-on .t2-disp { --t2: var(--clima-on); } .tstat-big.t-eco .t2-disp { --t2: var(--clima-eco); }
.tstat-big.t-off .t2-disp { --t2: var(--clima-off); } .tstat-big.t-offline .t2-disp { --t2: var(--rh-down); }
.t2-main { flex: none; min-width: 140px; }
.t2-temp { font-size: 52px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); }
.t2-temp small { font-size: 20px; font-weight: 400; color: var(--rh-muted); margin-left: 4px; }
.t2-temp-lab { font-size: 11.5px; color: var(--rh-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.t2-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; flex: 1; min-width: 0; }
.t2-kv small { display: block; font-size: 11.5px; color: var(--rh-muted); text-transform: uppercase; letter-spacing: .04em; }
.t2-kv b { font-size: 17px; font-weight: 600; }
.tstat-big.t-off .t2-temp, .tstat-big.t-off .t2-side, .tstat-big.t-offline .t2-temp, .tstat-big.t-offline .t2-side { opacity: .5; }
.t2-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px;
  background: rgba(255,255,255,.78); border-radius: 10px; color: var(--rh-down); font-weight: 600; font-size: 17px; z-index: 1; }
[data-bs-theme="dark"] .t2-off { background: rgba(0,0,0,.65); }
.t2-off small { font-weight: 400; font-size: 12.5px; color: var(--rh-muted); }
.tstat-big .tstat-ctl { grid-template-columns: 90px 1fr; gap: 10px 12px; }
.tstat-big .tstat-ctl label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.tstat-big .seg { gap: 6px; }
.tstat-big .seg button, .tstat-big .spc button { padding: 8px 14px; font-size: 14px; min-width: 44px; min-height: 38px; }
.tstat-big .spc button { font-size: 20px; line-height: 1; padding: 4px 16px; }
.tstat-big .spc b { min-width: 92px; font-size: 20px; font-variant-numeric: tabular-nums; }
.tstat-big .seg button.q-on.on { background: var(--clima-on); border-color: var(--clima-on); color: #fff; }
.tstat-big .seg button.q-eco.on { background: var(--clima-eco); border-color: var(--clima-eco); color: #fff; }
.tstat-big .seg button.q-off.on { background: #6c757d; border-color: #6c757d; color: #fff; }
.tstat-big .tstat-foot { margin-top: -4px; }
@media (max-width: 480px) {
  .t2-disp { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; }
  .t2-side { width: 100%; }
  .tstat-big .tstat-ctl { grid-template-columns: 1fr; gap: 4px 0; }
  .tstat-big .tstat-ctl label { margin-top: 8px; }
}