/* ── Theme tokens ─────────────────────────────────────────────── */ /* * IMPORTANT: :root MUST be the default theme (dark). * Do NOT put light tokens on :root — that always matches and * races with [data-theme="dark"] (same specificity → broken cascade). * Light is only applied when data-theme="light" is set on . */ :root { --bg: #0F1115; --surface: #181B22; --surface2: #22262F; --surface3: #2A2F3A; --border: rgba(255, 255, 255, 0.08); --border2: rgba(255, 255, 255, 0.14); --text: #F2F0EC; --text2: #C9C6BC; --text3: #A8A59C; --heat: #E07A45; --heat-bg: rgba(224, 122, 69, 0.14); --cool: #60A5FA; --cool-bg: rgba(96, 165, 250, 0.14); --monitor: #A78B7A; --monitor-bg: rgba(167, 139, 122, 0.14); --off: #8E8B82; --topbar-icon: #C4B5FD; --topbar-icon-active: #EDE9FE; --danger-soft: rgba(185, 28, 28, 0.18); --danger-soft-active: rgba(185, 28, 28, 0.28); --danger-text: #FCA5A5; --ok-soft: rgba(74, 222, 128, 0.12); --warn-soft: rgba(251, 191, 36, 0.12); --info-soft: rgba(96, 165, 250, 0.12); --shadow: 0 10px 36px rgba(0, 0, 0, 0.45); --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35); --radius: 14px; --radius-sm: 8px; /* Cancelli — shared home + /gates (non duplicare nei fogli pagina) */ --gt-open: #4ADE80; --gt-open-fill: #15803D; --gt-pulse: #FBBF24; --gt-move: #38BDF8; --gt-move-ink: #0C4A6E; color-scheme: dark; } html[data-theme="light"] { --bg: #F2F0EC; --surface: #FAFAF8; --surface2: #EEECEA; --surface3: #CFD8DC; --border: rgba(0, 0, 0, 0.08); --border2: rgba(0, 0, 0, 0.13); --text: #1A1A18; --text2: #6B6B66; --text3: #A0A09A; --heat: #C84B1A; --heat-bg: #FAEDE7; --cool: #1A6BC8; --cool-bg: #E7EEFA; --monitor: #8D6E63; --monitor-bg: #EFEBE9; --off: #A0A09A; --topbar-icon: #7E57C2; --topbar-icon-active: #311B92; --danger-soft: #FEF2F2; --danger-soft-active: #FEE2E2; --danger-text: #991B1B; --ok-soft: #F0FDF4; --warn-soft: #FFFBEB; --info-soft: #EEF2FF; --shadow: 0 8px 28px rgba(26, 26, 24, 0.07); --shadow-sm: 0 2px 10px rgba(26, 26, 24, 0.05); --gt-open: #15803D; --gt-open-fill: #15803D; --gt-pulse: #EAB308; --gt-move: #0284C7; --gt-move-ink: #fff; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--bg); color: var(--text); } h1:focus { outline: none; } a, .btn-link { color: #0071c1; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: #1b6ec2; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } code { color: #c02d76; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ── App shell ────────────────────────────────────────────────── */ .app { display: flex; flex-direction: column; height: 100svh; max-width: 1200px; margin: 0 auto; background: var(--bg); } .page { background: var(--bg); } /* ── Header ───────────────────────────────────────────────────── */ .header { padding: 20px 20px 0; flex-shrink: 0; } .header-top { --header-toolbar-h: 34px; display: flex; align-items: flex-start; /* titolo allineato in alto alla toolbar, meta sotto */ justify-content: space-between; gap: 8px; margin-bottom: 18px; min-width: 0; } .app-title{ cursor: pointer; } /* Clima (/climate): back + titolo + azioni (niente meta home) */ .climate-header-top { align-items: center; } .climate-header-brand { flex: 1 1 auto; min-width: 0; } .climate-title { font-size: 1.28rem; font-weight: 700; letter-spacing: -0.03em; height: auto; line-height: 1.2; } .header-brand { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; } .header-title { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; /* Stessa altezza dei bottoni → allineamento ottico con la toolbar */ line-height: var(--header-toolbar-h); height: var(--header-toolbar-h); display: flex; align-items: center; white-space: nowrap; } /* Hack: tap su titolo/versione → /gates (entry temporanea) */ .header-title-gates { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } /* Versione a fianco di "Clima" */ .header-title .header-ver { font-size: 0.68em; font-weight: 500; color: var(--text2); letter-spacing: 0; margin-left: 0.25em; line-height: 1; } /* Ora · connessione HA (riga sotto il titolo) */ .header-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.3em; margin-top: 2px; font-size: 12px; line-height: 1.2; color: var(--text2); font-family: 'DM Mono', ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .header-meta-sep { opacity: 0.45; flex-shrink: 0; } .header-meta-conn { overflow: hidden; text-overflow: ellipsis; } .header-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; flex-shrink: 0; height: var(--header-toolbar-h); } /* Sottotitolo pagine dettaglio (zone, timeline, …) — allineato a Doors/Energia */ .header-sub { font-size: 0.8rem; font-weight: 500; color: var(--text3); margin-top: 3px; align-self: stretch; line-height: 1.3; } @media (max-width: 420px) { .header-top { --header-toolbar-h: 32px; } .header-title { font-size: 22px; } .header-title .header-ver { font-size: 0.62em; } .header-meta { font-size: 11px; } .season-badge { padding: 0 8px; font-size: 11px; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-btn { width: 32px; height: 32px; margin-left: 0; margin-right: 0; font-size: 15px; } } .season-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: var(--header-toolbar-h, 34px); padding: 0 12px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; flex-shrink: 0; border: 1px solid transparent; transition: all 0.2s; box-sizing: border-box; } .season-badge.heat { background: var(--heat-bg); color: var(--heat); border-color: rgba(200,75,26,0.15); } .season-badge.cool { background: var(--cool-bg); color: var(--cool); border-color: rgba(26,107,200,0.15); } .season-badge.dhw { /*background: var(--heat-bg);*/ color: var(--heat); border-color: rgba(200,75,26,0.15); } /* ── Summary ──────────────────────────────────────────────────── */ .summary-row { display: flex; gap: 8px; margin-bottom: 18px; } .summary-chip { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; align-items: center; flex-direction: column; gap: 1px; } /* Entry to /statistics without an extra topbar button */ button.summary-chip-link { font-family: inherit; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; } button.summary-chip-link:active { transform: scale(0.98); background: var(--surface2); } .sc-val { font-size: 18px; font-weight: 600; font-family: 'DM Mono', monospace; display: inline-flex; align-items: center; gap: 4px; } .sc-val span { font-size: 11px; font-weight: 400; color: var(--text2); } /* Shared climate metric icons (summary chips + floor strip) */ .ico-temp, .ico-hum { font-weight: 400; line-height: 1; } .ico-temp { color: var(--heat); } .ico-hum { color: var(--cool); } .sc-val .ico-temp, .sc-val .ico-hum { font-size: 15px; } .sc-lbl { font-size: 10px; color: var(--text3); letter-spacing: 0.3px; text-transform: uppercase; } /* ── Tabs ─────────────────────────────────────────────────────── */ .tabs-wrap { display: flex; gap: 4px; padding-bottom: 1px; overflow-x: auto; scrollbar-width: none; } .tabs-wrap::-webkit-scrollbar { display: none; } .tab-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--text3); cursor: pointer; white-space: nowrap; transition: all 0.18s; flex-shrink: 0; } .tab-btn.active { color: var(--text); background: var(--surface2); border-color: var(--border2); box-shadow: 0 0 0 1px color-mix(in srgb, #60A5FA 25%, transparent); } /* Floor averages under tabs — full width strip (overridden by .cl-floor-strip on /climate) */ .floor-stats-strip { display: flex; gap: 8px; margin-top: 6px; width: 100%; user-select: none; } .floor-stats-strip .fs-cell { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); line-height: 1.15; } .floor-stats-strip .fs-label { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .floor-stats-strip .fs-val { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0; } .floor-stats-strip .ico-temp, .floor-stats-strip .ico-hum { font-size: 13px; } .floor-stats-strip .fs-unit { font-size: 10px; font-weight: 400; color: var(--text2); } /* ── Content ──────────────────────────────────────────────────── */ .content { flex: 1; overflow-y: auto; padding: 16px 20px 24px; scrollbar-width: none; } .content::-webkit-scrollbar { display: none; } /* ── Zone grid ────────────────────────────────────────────────── */ /* Sempre 2 col uguali: con N dispari l’ultima resta mezza riga (non span 2) */ .zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ── Zone card ────────────────────────────────────────────────── */ /* ---- Zone card (climate mockup v1) ---- */ .zcard { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm, 14px); padding: 14px 12px 12px; position: relative; overflow: hidden; cursor: pointer; min-height: 148px; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); transition: transform 0.12s, border-color 0.12s; } @media (max-width: 1099px) { .zcard { min-height: 168px; padding: 16px 13px 14px; } } @media (min-width: 1100px) { .zcard { min-height: 156px; } .zcard:hover { border-color: var(--border2); } } .zcard:active { transform: scale(0.97); } /* strip colorata top */ .zcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; } .zcard.heating { border-color: rgba(200, 75, 26, 0.35); background: linear-gradient(160deg, rgba(200, 75, 26, 0.04) 0%, var(--surface) 55%); } .zcard.heating::before { background: var(--heat); } .zcard.cooling { border-color: rgba(26, 107, 200, 0.35); background: linear-gradient(160deg, rgba(26, 107, 200, 0.04) 0%, var(--surface) 55%); } .zcard.cooling::before { background: var(--cool); } .zcard.idle { border-color: rgba(200, 75, 26, 0.2); } .zcard.idle::before { background: var(--border2); } .zcard.powered-off { opacity: 0.65; } .zcard.powered-off::before { background: var(--border2); } /* Zona passiva (solo sensori) — strip Material Brown */ .zcard.passive { border-color: rgba(141, 110, 99, 0.35); background: linear-gradient(160deg, color-mix(in srgb, var(--monitor-bg) 90%, transparent) 0%, var(--surface) 55%); } .zcard.passive::before { background: var(--monitor); } /* ---- Header ---- */ .zc-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; gap: 8px; } .zc-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .zc-icon { font-size: 18px; display: inline-block; margin-right: 4px; line-height: 1; } .zc-name { font-size: 0.82rem; font-weight: 700; display: inline-block; } /* badge manuale */ .zc-manual { display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; background: var(--warn-soft); border: 1px solid rgba(180, 130, 0, 0.3); font-size: 9px; font-weight: 700; color: #7A5500; white-space: nowrap; flex-shrink: 0; } /* badge zona passiva / monitor */ .zc-monitor { display: flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; background: var(--monitor-bg); border: 1px solid rgba(141, 110, 99, 0.3); font-size: 9px; font-weight: 700; letter-spacing: 0.02em; color: var(--monitor); white-space: nowrap; flex-shrink: 0; text-transform: uppercase; } /* ---- Temperatura + Umidità ---- */ .zc-temp-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 0; flex: 1; } .zc-temp-box { display: flex; align-items: baseline; gap: 2px; } .zc-temp-icon { font-size: 16px; display: inline-block; line-height: 1; } .zc-temp { font-size: 1.85rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-family: ui-monospace, "Cascadia Mono", Consolas, "DM Mono", monospace; } .zc-temp.t-heat { color: var(--heat); } .zc-temp.t-cool { color: var(--cool); } .zc-temp.t-ok { color: var(--text); } .zc-unit { font-size: 14px; color: var(--text2); margin-left: 2px; } /* ---- Umidità Box ---- */ .zc-hum-box { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 4px 0; } .zc-hum-label { font-size: 9px; color: var(--text3); text-transform: uppercase; font-weight: 500; letter-spacing: 0.3px; } .zc-hum-value { font-size: 20px; font-weight: 600; color: var(--text2); font-family: monospace; display: flex; align-items: center; gap: 3px; } /* ---- Setpoint Row ---- */ .zc-setpoint-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; margin-bottom: 0; padding-top: 10px; border-top: 1px solid var(--border); } .zc-sp-label { font-size: 9px; color: var(--text3); text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; min-width: 40px; } /*.zc-sp-preset { width: 1ch !important; overflow: hidden !important; white-space: nowrap !important; }*/ .zc-sp-value { font-size: 16px; font-weight: 600; color: var(--text); font-family: monospace; } .zc-sp-icon-sleep { color: orange; } .zc-sp-icon-eco { color: lightseagreen; } .zc-sp-icon-comfort-cool { color: cornflowerblue; } .zc-sp-icon-comfort-heat { color: orangered; } .zc-sp-icon-manual { color: pink; } /* Switch badge aligned to right */ .zc-setpoint-row .zc-switch { flex-shrink: 0; } .zc-hum-icon { font-size: 16px; display: inline-block; line-height: 1; } .zc-sensors { display: none; } /* ---- Bottom ---- */ .zc-bottom { display: flex; align-items: center; justify-content: space-between; } /* switch stato */ .zc-switch { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; } .zc-switch.s-heat { background: var(--heat-bg); color: var(--heat); } .zc-switch.s-cool { background: var(--cool-bg); color: var(--cool); } .zc-switch.s-off { background: var(--surface2); color: var(--text3); } .zc-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .zc-switch.s-heat .zc-dot, .zc-switch.s-cool .zc-dot { animation: pulse-dot 1.5s ease-in-out infinite; } /* power stato */ .zc-power { display: inline-flex; align-items: center; gap: 4px; font-size: 0.62rem; color: var(--text3); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 7px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); flex-shrink: 0; } .zc-power.p-on { color: #4ADE80; background: color-mix(in srgb, #4ADE80 12%, transparent); border-color: color-mix(in srgb, #4ADE80 28%, transparent); } html[data-theme="light"] .zc-power.p-on { color: #15803D; background: color-mix(in srgb, #22C55E 14%, transparent); border-color: color-mix(in srgb, #22C55E 30%, transparent); } .zc-pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .zc-power.p-on .zc-pdot { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent); } /* ── Detail panel ─────────────────────────────────────────────── */ .detail-panel { display: none; margin-top: 4px; grid-column: span 2; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden; } .detail-panel.visible { display: block; } .dp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); } .dp-title { font-size: 15px; font-weight: 600; } .dp-close { width: 28px; height: 28px; border-radius: 50%; background: var(--surface2); border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text2); } .dp-sensors { display: flex; border-bottom: 1px solid var(--border); } .dp-sensor { flex: 1; padding: 12px 16px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; } .dp-sensor:last-child { border-right: none; } .dp-s-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; } .dp-s-val { font-size: 20px; font-weight: 600; font-family: 'DM Mono', monospace; } .dp-s-val span { font-size: 12px; font-weight: 400; color: var(--text2); } .dp-s-delta { font-size: 11px; font-family: 'DM Mono', monospace; } .dp-s-delta.pos { color: var(--heat); } .dp-s-delta.neg { color: var(--cool); } .dp-s-delta.zero { color: var(--text3); } .dp-setpoint { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .dp-sp-lbl { font-size: 12px; color: var(--text2); font-weight: 500; } .dp-sp-controls { display: flex; align-items: center; gap: 14px; } .dp-sp-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface2); font-size: 20px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; } .dp-sp-btn:active { transform: scale(0.94); } .dp-sp-val { font-size: 20px; font-weight: 600; font-family: 'DM Mono', monospace; min-width: 58px; text-align: center; } .dp-presets { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); } .dp-preset { padding: 10px 8px; text-align: center; cursor: pointer; border-right: 1px solid var(--border); transition: background 0.12s; } .dp-preset:last-child { border-right: none; } .dp-preset.active { background: var(--surface2); } .dp-preset.active .dp-p-name { color: var(--text); font-weight: 600; } .dp-p-icon { font-size: 16px; display: block; margin-bottom: 3px; } .dp-p-name { font-size: 11px; color: var(--text2); display: block; font-weight: 500; } .dp-p-temp { font-size: 10px; color: var(--text3); display: block; font-family: 'DM Mono', monospace; margin-top: 1px; } .dp-preset.active .dp-p-temp { color: var(--heat); } .dp-controls { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 8px; } .dp-status { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; } .dp-status.heat { background: var(--heat-bg); color: var(--heat); } .dp-status.cool { background: var(--cool-bg); color: var(--cool); } .dp-status.off { background: var(--surface2); color: var(--text3); } .dp-status.monitor { background: var(--monitor-bg); color: var(--monitor); border: 1px solid rgba(141, 110, 99, 0.3); } .dp-s-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } @keyframes pdot { 0%,100% { opacity: 1 } 50% { opacity: .3 } } .dp-status.heat .dp-s-dot, .dp-status.cool .dp-s-dot { animation: pdot 1.5s ease-in-out infinite; } .dp-right-controls { display: flex; align-items: center; gap: 8px; } .fan-toggle { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border2); background: transparent; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; color: var(--text2); cursor: pointer; } .fan-toggle.on { background: var(--cool-bg); border-color: rgba(26,107,200,.3); color: var(--cool); } @keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .fan-toggle.on .fan-ic { animation: spin 1.5s linear infinite; display: inline-block; } .fan-timer-selector { padding: 12px 14px 14px; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: -2px; } .fan-timer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; } .fan-timer-btn { padding: 14px 4px; border-radius: var(--radius-sm); border: 1.5px solid var(--border2); background: var(--surface2); font-size: 15px; font-weight: 600; cursor: pointer; color: var(--text); width: 100%; } .fan-timer-btn:active { background: var(--border2); transform: scale(0.96); } .fan-timer-label { font-size: 12px; color: var(--text2); margin: 0; } .fan-bar.selector-open { border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .fan-timer-remaining { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 20px; /* background: rgba(26,107,200,0.12); color: var(--cool); */ background: var(--heat-bg); color: var(--heat); font-family: 'DM Mono', monospace; } .pwr-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border2); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text2); } .pwr-btn.on-heat { border-color: rgba(200,75,26,.4); color: var(--heat); background: var(--heat-bg); } .pwr-btn.on-cool { border-color: rgba(26,107,200,.4); color: var(--cool); background: var(--cool-bg); } /* ── Setup screen ─────────────────────────────────────────────── */ .setup-overlay { display: flex; align-items: center; justify-content: center; min-height: 100svh; padding: 24px; background: var(--bg); } .setup-card { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 32px 24px; width: 100%; max-width: 400px; } .setup-icon { font-size: 40px; text-align: center; margin-bottom: 16px; } .setup-title { font-size: 20px; font-weight: 600; text-align: center; margin-bottom: 6px; } .setup-sub { font-size: 13px; color: var(--text2); text-align: center; margin-bottom: 28px; } .setup-form { display: flex; flex-direction: column; gap: 16px; } .setup-field { display: flex; flex-direction: column; gap: 5px; } .setup-label { font-size: 12px; font-weight: 500; color: var(--text2); } .setup-input { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border2); background: var(--bg); font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text); outline: none; transition: border-color 0.15s; } .setup-input:focus { border-color: var(--text); } .setup-hint { font-size: 11px; color: var(--text3); } .setup-error { font-size: 12px; color: var(--heat); background: var(--heat-bg); padding: 8px 12px; border-radius: var(--radius-sm); } .setup-btn { padding: 12px; border-radius: var(--radius-sm); border: none; background: var(--text); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px; } .setup-btn:disabled { opacity: 0.5; cursor: not-allowed; } .topbar-btn { width: var(--header-toolbar-h, 34px); height: var(--header-toolbar-h, 34px); margin-left: 0; margin-right: 0; border-radius: 50%; border: 1px solid var(--border2); background: transparent; color: var(--topbar-icon, #7E57C2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; transition: all 0.15s; box-sizing: border-box; padding: 0; } .topbar-btn:active { background: var(--surface2); color: var(--topbar-icon-active, #311B92); } .topbar-btn.hp-off { color: #B91C1C; border-color: rgba(185, 28, 28, 0.35); background: var(--danger-soft, #FEF2F2); } /* Banner: PdC main power off — plant actuators blocked */ .plant-power-banner { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 14px; padding: 9px 12px; border: 1px solid rgba(185, 28, 28, 0.22); border-radius: 10px; background: var(--danger-soft, #FEF2F2); color: var(--danger-text, #991B1B); font-size: 12px; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .plant-power-banner i:first-child { font-size: 15px; flex-shrink: 0; opacity: 0.9; } .plant-power-banner span { flex: 1; min-width: 0; } .plant-power-banner strong { font-weight: 700; } .plant-power-banner-go { font-size: 12px; opacity: 0.55; flex-shrink: 0; } .plant-power-banner:active { background: var(--danger-soft-active, #FEE2E2); } /* ── Zone Detail page ────────────────────────────────────────── */ /* ── Unified detail page chrome (align with Doors / Mower / Energia) ── */ .detail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .detail-header > div { flex: 1; min-width: 0; } .detail-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Back: 40×40, raggio 12, surface + border (non cerchio pieno) */ .back-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 1.45rem; color: var(--text2); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; padding: 0; transition: background 0.15s, border-color 0.12s; } .back-btn:active { background: var(--surface2); } /* Titolo pagine dettaglio (zone, timeline, climate, …) */ .detail-header .header-title, .azt-title, .climate-title, .qa-title, .je-title { font-size: 1.28rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; height: auto !important; color: var(--text); } .detail-header .header-sub, .header-sub { font-size: 0.8rem; font-weight: 500; color: var(--text3); margin-top: 3px; line-height: 1.3; } .climate-header-top { align-items: center; gap: 10px; } .qa-top-bar, .je-top-bar { gap: 10px; } .detail-sensors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .detail-sensor-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; } button.detail-sensor-card-link { width: 100%; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.12s, box-shadow 0.12s, background 0.12s; } button.detail-sensor-card-link:active { background: var(--surface2, #EEECEA); border-color: rgba(0, 0, 0, 0.14); } .dsc-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; } .dsc-value { font-size: 32px; font-weight: 600; line-height: 1.1; font-family: 'DM Mono', monospace; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 4px; } .dsc-value .dsc-icon { font-size: 18px; display: inline-block; line-height: 1; } .dsc-value span { font-size: 18px; font-weight: 400; color: var(--text2); margin-left: 2px; } .dsc-delta { font-size: 12px; font-family: 'DM Mono', monospace; margin-top: 4px; } .dsc-delta.pos { color: var(--heat); } .dsc-delta.neg { color: var(--cool); } .dsc-delta.zero { color: var(--text3); } .detail-section { margin-top: 20px; } .detail-section-title { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; font-weight: 500; display: flex; align-items: center; } /*.detail-manual-badge { font-size: 11px; padding: 1px 6px; border-radius: var(--border-radius-md); background: var(--color-background-warning); color: var(--color-text-warning); margin-left: 6px; }*/ .detail-manual-badge { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--warn-soft); border: 1px solid rgba(180,130,0,0.3); color: #7A5500; margin-left: 6px; } /* ---- Switch State (Stato dell'impianto) ---- */ .detail-switch-state { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 4px; border-radius: var(--radius); border: 2px solid; font-size: 14px; font-weight: 600; text-transform: capitalize; letter-spacing: 0.4px; } .detail-switch-state.dss-heat { background: linear-gradient(135deg, rgba(200, 75, 26, 0.1) 0%, rgba(200, 75, 26, 0.04) 100%); border-color: var(--heat); color: var(--heat); } .detail-switch-state.dss-cool { background: linear-gradient(135deg, rgba(26, 107, 200, 0.1) 0%, rgba(26, 107, 200, 0.04) 100%); border-color: var(--cool); color: var(--cool); } .detail-switch-state.dss-off { background: var(--surface2); border-color: var(--border2); color: var(--text3); } .dss-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse-dot 1.5s ease-in-out infinite; } .detail-switch-state.dss-off .dss-dot { animation: none; opacity: 0.6; } .dss-label { display: inline-block; } .detail-setpoint { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 20px; } .detail-sp-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface2); font-size: 26px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background 0.12s; } .detail-sp-btn:active { background: var(--border2); transform: scale(0.94); } .detail-sp-value { font-size: 28px; font-weight: 600; font-family: 'DM Mono', monospace; color: var(--text); background: var(--surface2); padding: 12px 24px; border-radius: calc(var(--radius) * 0.8); } .detail-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .detail-preset { padding: 8px 8px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); cursor: pointer; text-align: center; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: 4px; } .detail-preset.active { border-color: var(--heat); background: var(--heat-bg); } .detail-preset-icon { font-size: 22px; } .detail-preset-name { font-size: 13px; color: var(--text2); font-weight: 500; } .detail-preset.active .detail-preset-name { color: var(--heat); font-weight: 600; } .detail-preset-temp { font-size: 12px; color: var(--text3); font-family: 'DM Mono', monospace; } .detail-preset.active .detail-preset-temp { color: var(--heat); } .detail-not-found { display: flex; align-items: center; justify-content: center; height: 100svh; color: var(--text2); font-size: 14px; } /*.fan-big-toggle { width: 100%; padding: 20px 16px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--border2); background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all 0.2s; } .fan-big-toggle.on { background: var(--cool-bg); border-color: rgba(26,107,200,0.35); } .fan-big-ic { font-size: 36px; display: block; transition: transform 0.3s; } .fan-big-toggle.on .fan-big-ic { animation: spin 1.2s linear infinite; display: inline-block; }*/ .fan-big-toggle { width: 100%; padding: 12px 16px; /* era 20px, ora 12px */ border-radius: var(--radius); cursor: pointer; border: 1px solid var(--border2); background: var(--surface); display: flex; align-items: center; gap: 14px; /* row invece di column */ transition: all 0.2s; } .fan-big-ic { font-size: 28px; flex-shrink: 0; } /* era 36px */ .fan-big-label { font-size: 13px; color: var(--text2); font-weight: 500; flex: 1; text-align: left; } .fan-big-state { font-size: 16px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--text3); } .fan-big-toggle.on .fan-big-state { color: var(--cool); } .fan-big-toggle.on .fan-big-label { color: var(--cool); } .fan-big-toggle.on { background: var(--cool-bg); border-color: rgba(26,107,200,0.35); } .fan-big-toggle.on .fan-big-ic { animation: spin 1.2s linear infinite; display: inline-block; } /*.fan-big-label { font-size: 13px; color: var(--text2); font-weight: 500; }*/ /*.fan-big-state { font-size: 18px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--text3); }*/ /*.fan-big-toggle.on .fan-big-state { color: var(--cool); } .fan-big-toggle.on .fan-big-label { color: var(--cool); }*/ .floor-bar { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 14px; margin-top: 8px; cursor: pointer; transition: all 0.2s; } .floor-bar.on { background: var(--cool-bg); border-color: rgba(26,107,200,0.25); } .floor-bar-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } /*.floor-bar.on .floor-bar-icon { background: rgba(26,107,200,0.12); animation: spin 2s linear infinite; }*/ /* ── Fan bar (opzione B) ─────────────────────────────────────── */ .fan-bar { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 12px; cursor: pointer; transition: all 0.2s; } .fan-bar.on { background: var(--cool-bg); border-color: rgba(26,107,200,0.25); } .fan-bar.readonly, .floor-bar.readonly { cursor: default; opacity: 0.88; } .fan-bar-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .fan-bar.on .fan-bar-icon { background: rgba(26,107,200,0.12); animation: spin 2s linear infinite; } .fan-bar-text { flex: 1; } .fan-bar-name { font-size: 13px; font-weight: 600; color: var(--text); } .fan-bar.on .fan-bar-name { color: var(--cool); } .fan-bar-sub { font-size: 11px; color: var(--text3); margin-top: 2px; } .fan-bar.on .fan-bar-sub { color: rgba(26,107,200,0.6); } .fan-bar-badge { font-size: 12px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--text3); background: var(--surface2); padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border2); flex-shrink: 0; transition: all 0.2s; } .fan-bar-badge.on { color: var(--cool); background: rgba(26,107,200,0.12); border-color: rgba(26,107,200,0.25); } /* ── Comfort levels ──────────────────────────────────────────── */ .comfort-cold { color: #1A6BC8; } /* blu — freddo */ .comfort-ok { color: #2E7D32; } /* verde — ok */ .comfort-hot { color: #C84B1A; } /* arancione — caldo */ .comfort-dry { color: #B8860B; } /* giallo scuro — secco */ .comfort-humid { color: #1565C0; } /* blu scuro — umido */ .dsc-comfort-icon { font-size: 18px; margin-top: 2px; } .config-reload-error, .config-reload-ok { font-size: 11px; padding: 6px 12px; border-radius: var(--radius-sm); margin-top: 8px; text-align: center; } .config-reload-error { background: var(--heat-bg); color: var(--heat); } .config-reload-ok { background: var(--cool-bg); /*color: var(--cool);*/ color: #2E7D32; } .tsc-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface2); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } .tsc-bar.on { background: var(--heat-bg, #fff3e0); border-color: var(--heat, #e65100); } .tsc-bar.on-heat { background: var(--heat-bg); border-color: #e65100; } .tsc-bar.on-cool { background: #e3f2fd; border-color: #1a6bc8; } .tsc-bar.manual { border-style: dashed; } .tsc-bar.open { border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .tsc-left { display: flex; align-items: center; gap: 6px; } .tsc-state { font-size: 14px; font-weight: 600; } .tsc-label { font-size: 12px; color: var(--text2); } .tsc-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; } .tsc-badge.manual { background: #fde8e8; color: #c0392b; } .tsc-badge.timer { background: rgba(26,107,200,0.12); color: var(--cool); font-family: 'DM Mono', monospace; } .tsc-timer-selector { padding: 10px 14px 12px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--surface); } .tsc-timer-label { font-size: 11px; color: var(--text2); margin-bottom: 8px; } .tsc-timer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .tsc-timer-btn { padding: 10px 4px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); width: 100%; } /* ---- QuickActionsPage ---- */ .qa-wrapper { min-height: 100dvh; width: 100%; display: flex; flex-direction: column; align-items: stretch; background: var(--bg); color: var(--text); } .qa-page { flex: 1; display: flex; flex-direction: column; width: 100%; padding: 0.75rem; padding-bottom: 0; box-sizing: border-box; } .qa-list { flex: 1; } @media (min-width: 600px) { .qa-wrapper { align-items: center; } .qa-page { max-width: 600px; } } /* ---- Top bar ---- */ .qa-top-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 0.75rem; } /* ---- App / account panel (theme, password) ---- */ .qa-app-panel { margin-bottom: 1rem; } .qa-app-label { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.4rem 2px; } .qa-app-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); } .qa-app-row { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .qa-app-row:last-child { border-bottom: none; } .qa-app-row:hover { background: color-mix(in srgb, var(--surface2) 55%, transparent); } .qa-app-row:active { transform: scale(0.995); } .qa-app-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; } .qa-app-ico.theme { background: color-mix(in srgb, #A78BFA 16%, transparent); color: #C4B5FD; } html[data-theme="light"] .qa-app-ico.theme { background: #EDE9FE; color: #7C3AED; } .qa-app-ico.key { background: color-mix(in srgb, #60A5FA 14%, transparent); color: #93C5FD; } html[data-theme="light"] .qa-app-ico.key { background: #DBEAFE; color: #2563EB; } .qa-app-ico.logout { background: color-mix(in srgb, #F87171 14%, transparent); color: #FCA5A5; } html[data-theme="light"] .qa-app-ico.logout { background: #FEE2E2; color: #DC2626; } .qa-logout-form { margin: 0; padding: 0; } .qa-logout-form .qa-app-row { border-bottom: none; } .qa-app-row.qa-app-info { cursor: default; } .qa-app-row.qa-app-info:hover, .qa-app-row.qa-app-info:active { background: transparent; transform: none; } .qa-app-ico.about { background: var(--surface2); color: var(--text2); } .qa-app-ico.fs { background: color-mix(in srgb, #60A5FA 14%, transparent); color: #93C5FD; } html[data-theme="light"] .qa-app-ico.fs { background: #DBEAFE; color: #2563EB; } .qa-app-row:disabled { opacity: 0.55; cursor: not-allowed; } html.clima-fs body { padding-top: env(safe-area-inset-top, 0px); padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); } .qa-app-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .qa-app-title { font-size: 0.95rem; font-weight: 650; letter-spacing: -0.01em; } .qa-app-sub { font-size: 0.78rem; color: var(--text3); font-weight: 500; line-height: 1.3; } .qa-app-aside { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); } .qa-app-chev { color: var(--text3); font-size: 1.05rem; } /*.qa-back { width: 34px; height: 34px; border: 0.5px solid var(--border); border-radius: var(--radius-sm); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 18px; flex-shrink: 0; }*/ .qa-title { font-size: 1.28rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--text); flex: 1; } .qa-select-all { font-size: 13px; color: var(--cool); background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; } /* ---- Count ---- */ .qa-count { font-size: 12px; color: var(--text2); margin-bottom: 0.75rem; min-height: 18px; } /* ---- Device list ---- */ .qa-floor-label { font-size: 11px; font-weight: 500; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.75rem 0 0.4rem 2px; } .qa-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.1s; } .qa-row.selected { border-color: var(--cool); background: rgba(26, 107, 200, 0.07); } .qa-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border2); background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; transition: all 0.1s; } .qa-row.selected .qa-check { background: var(--cool); border-color: var(--cool); color: #fff; } .qa-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text2); flex-shrink: 0; } .qa-icon.on { background: rgba(21,128,61,0.12); color: #15803d; } .qa-icon.fan { background: rgba(26,107,200,0.12); color: var(--cool); } .qa-icon.pwr-off { background: var(--surface2); color: var(--border2); } .qa-info { flex: 1; min-width: 0; } .qa-name { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qa-sub { font-size: 12px; color: var(--text2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Badges ---- */ .qa-badge { font-size: 11px; padding: 2px 7px; border-radius: 20px; font-weight: 500; flex-shrink: 0; } .badge-on { background: rgba(21,128,61,0.12); color: #15803d; } .badge-off { background: var(--surface2); color: var(--text2); border: 0.5px solid var(--border); } .badge-man { background: var(--warn-soft); color: var(--heat); } .badge-pwr { background: var(--surface2); color: var(--text2); border: 0.5px solid var(--border); font-style: italic; } /* ---- Actions bar — always at bottom ---- */ .qa-actions { position: sticky; bottom: 0; margin-top: auto; width: 100%; box-sizing: border-box; padding: 0.75rem; background: var(--surface3); border: 0.5px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } @media (min-width: 600px) { .qa-actions { border-radius: var(--radius-sm); margin-bottom: 1rem; } } .qa-actions-group { margin-bottom: 8px; } .qa-actions-group:last-child { margin-bottom: 0; } .qa-group-label { font-size: 11px; color: var(--text2); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; } .qa-group-hint { font-size: 10px; color: var(--border2); } .qa-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .qa-btn { padding: 11px 8px; border-radius: var(--radius-sm); border: 0.5px solid var(--border2); background: var(--surface); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--text); transition: background 0.1s; box-sizing: border-box; } .qa-btn:disabled { opacity: 0.35; cursor: default; } .qa-btn:not(:disabled):active { transform: scale(0.97); } .qa-btn.danger { color: #c0392b; border-color: rgba(192,57,43,0.4); } .qa-btn.success { color: #15803d; border-color: rgba(21,128,61,0.4); } .qa-btn.pwr-off { color: var(--text2); } .qa-btn.pwr-on { color: var(--cool); border-color: rgba(26,107,200,0.4); } /*.qa-select-btn { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border: 0.5px solid var(--cool); border-radius: var(--radius-sm); background: none; color: var(--cool); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; } .qa-select-btn:active { background: rgba(26,107,200,0.07); }*/ .qa-floor-header { display: flex; align-items: center; justify-content: space-between; margin: 0.75rem 0 0.4rem 2px; } /* sposta qa-floor-label dentro qa-floor-header, rimuovi il margin dal vecchio */ .qa-floor-header .qa-floor-label { margin: 0; } .qa-floor-select-btn { background: none; border: none; cursor: pointer; color: var(--text2); font-size: 15px; padding: 2px 4px; display: flex; align-items: center; } .qa-floor-select-btn:active { color: var(--cool); } /* ---- Preset editor (ZoneDetail) ---- */ .zd-edit-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; /*border: 0.5px solid var(--border2);*/ border-radius: var(--radius-sm); /*background: none;*/ /*color: var(--text);*/ font-size: 14px; font-weight: 500; /*cursor: pointer;*/ } .zd-edit-btn:active { background: var(--surface2); } .zd-preset-editor { margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--border); } .zd-pe-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; } .zd-pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; } .zd-pe-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--text2); } .zd-pe-grid input { padding: 8px 10px; border: 0.5px solid var(--border2); border-radius: var(--radius-sm); background: var(--surface2); color: var(--text); font-size: 14px; font-weight: 500; width: 100%; box-sizing: border-box; } .zd-save-btn { width: 100%; margin-top: 14px; padding: 11px; border: none; border-radius: var(--radius-sm); background: var(--cool); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .zd-save-btn:active { opacity: 0.85; } /* ---- JobEditorPage ---- */ .je-wrapper { min-height: 100dvh; width: 100%; display: flex; flex-direction: column; } .je-page { flex: 1; width: 100%; padding: 0.75rem; box-sizing: border-box; } @media (min-width: 600px) { .je-wrapper { align-items: center; } .je-page { max-width: 600px; } } /* ---- Top bar ---- */ .je-top-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; } /*.je-back { width: 34px; height: 34px; border: 0.5px solid var(--border); border-radius: var(--radius-sm); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 18px; flex-shrink: 0; } */ .je-title { font-size: 1.28rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--text); flex: 1; } .je-new-btn { width: 34px; height: 34px; border: 0.5px solid var(--cool); border-radius: var(--radius-sm); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--cool); font-size: 18px; } /* ---- Job list ---- */ .je-empty { font-size: 14px; color: var(--text2); text-align: center; margin-top: 2rem; } .je-group-label { font-size: 11px; font-weight: 500; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.75rem 0 0.4rem 2px; } .je-group-label:first-child { margin-top: 0; } .je-job-row { display: flex; align-items: center; padding: 12px 14px; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; gap: 10px; } .je-job-info { flex: 1; min-width: 0; } .je-job-name { font-size: 14px; font-weight: 500; color: var(--text); } .je-job-sub { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .je-job-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .je-badge.disabled { font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--surface2); color: var(--text2); border: 0.5px solid var(--border); } .je-chevron { font-size: 13px; color: var(--border2); } /* ---- Form ---- */ .je-form { display: flex; flex-direction: column; gap: 14px; } .je-field { display: flex; flex-direction: column; gap: 5px; } .je-field label { font-size: 12px; color: var(--text2); font-weight: 500; } .je-field input[type="text"], .je-field input[type="number"], .je-field input[type="time"], .je-field select { padding: 9px 12px; border: 0.5px solid var(--border2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; width: 100%; box-sizing: border-box; } .je-field input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .je-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ---- Days grid ---- */ .je-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .je-day-btn { padding: 8px 4px; border-radius: var(--radius-sm); border: 0.5px solid var(--border2); background: var(--surface); font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text2); } .je-day-btn.selected { background: var(--cool); border-color: var(--cool); color: #fff; } /* ---- Toggle ON/OFF ---- */ .je-toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .je-toggle-btn { padding: 10px; border-radius: var(--radius-sm); border: 0.5px solid var(--border2); background: var(--surface); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text2); } .je-toggle-btn.selected { background: var(--cool); border-color: var(--cool); color: #fff; } /* ---- Zone selector ---- */ .je-floor-label { font-size: 11px; font-weight: 500; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin: 8px 0 4px 2px; } .je-zones-list { display: flex; flex-direction: column; gap: 5px; } .je-zone-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; user-select: none; font-size: 14px; color: var(--text); } .je-zone-row.selected { border-color: var(--cool); background: rgba(26, 107, 200, 0.07); } .je-zone-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; } .je-zone-row.selected .je-zone-check { background: var(--cool); border-color: var(--cool); color: #fff; } /* ---- Form actions ---- */ .je-form-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 0.5px solid var(--border); margin-top: 4px; } .je-form-actions .btn { flex: 1; } /* ---- Users ---- */ .us-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; color: var(--text2); background: var(--surface2); border: 0.5px solid var(--border); } .us-row-locked .us-avatar { color: #FCA5A5; border-color: color-mix(in srgb, #F87171 40%, var(--border)); } .us-you { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cool); vertical-align: middle; } .us-badge { font-size: 11px; padding: 2px 7px; border-radius: 20px; border: 0.5px solid var(--border); font-weight: 600; } .us-badge.active { background: color-mix(in srgb, #4ADE80 14%, var(--surface)); border-color: color-mix(in srgb, #4ADE80 35%, var(--border)); color: #86EFAC; } html[data-theme="light"] .us-badge.active { background: #F0FDF4; border-color: #BBF7D0; color: #166534; } .us-badge.locked { background: color-mix(in srgb, #F87171 14%, var(--surface)); border-color: color-mix(in srgb, #F87171 35%, var(--border)); color: #FCA5A5; } html[data-theme="light"] .us-badge.locked { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; } .us-lock-btn { width: 30px; height: 30px; border: 0.5px solid var(--border2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text2); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; } .us-lock-btn:hover:not(:disabled) { border-color: var(--cool); color: var(--cool); } .us-lock-btn.locked { color: #FCA5A5; border-color: color-mix(in srgb, #F87171 40%, var(--border)); } .us-lock-btn:disabled { opacity: 0.4; cursor: not-allowed; } .us-feedback { font-size: 13px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, #60A5FA 12%, var(--surface)); border: 0.5px solid color-mix(in srgb, #60A5FA 28%, var(--border)); color: var(--text); } .us-feedback.error { background: color-mix(in srgb, #F87171 12%, var(--surface)); border-color: color-mix(in srgb, #F87171 32%, var(--border)); color: #FCA5A5; } .us-status-row { display: flex; align-items: center; gap: 10px; } .us-status-hint { font-size: 12px; color: var(--text2); } .us-form-actions { flex-wrap: wrap; } .us-form-actions .btn { flex: 1 1 calc(50% - 8px); min-width: 120px; } /* ── AllZonesTimeline — stili pagina in AllZonesTimeline.razor.css ── */ /* Fallback globale se usato altrove: compact non troppo basso */ .zjd-timeline-compact { --zjd-bar-radius: 12px; } .zjd-timeline-compact .zjd-bar { height: 52px; } .zjd-seg.readonly { cursor: default; } .zjd-now.no-label { top: 0; bottom: 0; } /* ── ZoneJobDetails — 24h preset timeline (mobile-first) ─────── */ /* Full-width shell: no desktop max-width cap on phone */ .zjd-page { width: 100%; max-width: 100%; margin: 0; } .zjd-header { padding: 12px 10px 0; } .zjd-title { font-size: 1.28rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; height: auto !important; } .zjd-title-row, .zjdv-title.zjd-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; line-height: 1.15 !important; } .zjd-zone-heading { min-width: 0; } .zjd-title-row .zc-switch { flex-shrink: 0; font-size: 11px; padding: 4px 9px; letter-spacing: 0.01em; } /* Prossima automazione (header) */ .zjd-next { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; min-width: 0; line-height: 1.25; } .zjd-next-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3); } .zjd-next-time { font-size: 12px; font-weight: 600; font-family: 'DM Mono', monospace; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; } .zjd-next-name { font-size: 13px; font-weight: 500; color: var(--text2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Override generic .content padding — tight side margins for timeline */ .zjd-page .zjd-content, .zjd-content { width: 100%; max-width: none; margin: 0; padding: 10px 8px 28px; box-sizing: border-box; } .zjd-empty { font-size: 14px; color: var(--text2); text-align: center; margin-top: 2rem; } .zjd-empty-inline { font-size: 13px; color: var(--text2); padding: 8px 4px 4px; margin: 0; } /* Legend */ .zjd-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; padding: 0 2px; } .zjd-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); } .zjd-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .zjd-dot.sleep, .zjd-preset-badge.sleep { background: #B8D4F0; } .zjd-dot.eco, .zjd-preset-badge.eco { background: #C5E8C0; } .zjd-dot.comfort, .zjd-preset-badge.comfort { background: #F5D9A8; } .zjd-dot.manual, .zjd-preset-badge.manual { background: #D8D4CE; } .zjd-dot.fan { border-radius: 3px; background: repeating-linear-gradient( -45deg, rgba(14, 165, 233, 0.75), rgba(14, 165, 233, 0.75) 2px, rgba(14, 165, 233, 0.2) 2px, rgba(14, 165, 233, 0.2) 5px ); border: 1px solid rgba(14, 165, 233, 0.5); } .zjd-dot.plant { border-radius: 3px; background: repeating-linear-gradient( -45deg, rgba(168, 85, 247, 0.7), rgba(168, 85, 247, 0.7) 2px, rgba(168, 85, 247, 0.18) 2px, rgba(168, 85, 247, 0.18) 5px ); border: 1px solid rgba(168, 85, 247, 0.5); } /* Timeline — full available width */ .zjd-timeline { width: 100%; margin-bottom: 18px; --zjd-bar-radius: 14px; } .zjd-bar { position: relative; width: 100%; height: 56px; border-radius: var(--zjd-bar-radius); background: var(--surface2); border: 1px solid var(--border); overflow: visible; } .zjd-timeline.has-overlays .zjd-bar { height: 74px; } .zjd-timeline.has-overlays .zjd-seg { /* label preset nella metà alta, sopra la striscia overlay */ padding-bottom: 26px; box-sizing: border-box; justify-content: flex-start; padding-top: 8px; } /* Overlay fan / forza impianto (sovrapposti, non partizionano) */ .zjd-ov { position: absolute; top: 58%; bottom: 0; z-index: 4; min-width: 3px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; border-top: 1.5px dashed transparent; pointer-events: none; } .zjd-ov.radius-left { border-radius: 0 0 0 calc(var(--zjd-bar-radius) - 1px); } .zjd-ov.radius-right { border-radius: 0 0 calc(var(--zjd-bar-radius) - 1px) 0; } .zjd-ov.radius-both { border-radius: 0 0 var(--zjd-bar-radius) var(--zjd-bar-radius); } .zjd-ov.fan { background: repeating-linear-gradient( -45deg, rgba(14, 165, 233, 0.62), rgba(14, 165, 233, 0.62) 3px, rgba(14, 165, 233, 0.22) 3px, rgba(14, 165, 233, 0.22) 7px ); border-top-color: rgba(2, 132, 199, 0.75); box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.35); } .zjd-ov.plant { background: repeating-linear-gradient( -45deg, rgba(168, 85, 247, 0.58), rgba(168, 85, 247, 0.58) 3px, rgba(168, 85, 247, 0.18) 3px, rgba(168, 85, 247, 0.18) 7px ); border-top-color: rgba(126, 34, 206, 0.7); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.35); } .zjd-ov.active { box-shadow: inset 0 0 0 1px rgba(229, 57, 53, 0.35), 0 0 0 1px rgba(229, 57, 53, 0.4); } .zjd-ov-label { font-size: 9px; font-weight: 700; letter-spacing: 0.02em; color: #0c4a6e; text-shadow: 0 0 4px rgba(255, 255, 255, 0.85); white-space: nowrap; pointer-events: none; } .zjd-ov.plant .zjd-ov-label { color: #4c1d95; } /* Timeline verticale: striscia a destra */ .zjdv-ov { position: absolute; right: 0; width: 22%; z-index: 4; min-height: 2px; box-sizing: border-box; border-left: 1.5px dashed transparent; pointer-events: none; } .zjdv-ov.fan { background: repeating-linear-gradient( -45deg, rgba(14, 165, 233, 0.62), rgba(14, 165, 233, 0.62) 3px, rgba(14, 165, 233, 0.22) 3px, rgba(14, 165, 233, 0.22) 7px ); border-left-color: rgba(2, 132, 199, 0.75); } .zjdv-ov.plant { background: repeating-linear-gradient( -45deg, rgba(168, 85, 247, 0.58), rgba(168, 85, 247, 0.58) 3px, rgba(168, 85, 247, 0.18) 3px, rgba(168, 85, 247, 0.18) 7px ); border-left-color: rgba(126, 34, 206, 0.7); } .zjdv-ov.active { box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.45); } .zjd-bar-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text3); padding: 0 8px; text-align: center; } .zjd-seg { position: absolute; /* Altezza piena; raggio solo sui capi esterni (.radius-left/right/both) */ top: 0; bottom: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden; min-width: 2px; box-sizing: border-box; border: 1px solid transparent; padding: 0 2px; transition: filter 0.15s; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Capi a filo con 00:00 / 24:00 — stesso raggio della barra */ .zjd-seg.radius-left { border-radius: var(--zjd-bar-radius) 0 0 var(--zjd-bar-radius); } .zjd-seg.radius-right { border-radius: 0 var(--zjd-bar-radius) var(--zjd-bar-radius) 0; } .zjd-seg.radius-both { border-radius: var(--zjd-bar-radius); } .zjd-seg.sleep { background: #C9DEF5; border-color: rgba(100, 149, 200, 0.25); color: #2A4A6E; } .zjd-seg.eco { background: #CDEDC9; border-color: rgba(90, 160, 90, 0.25); color: #2D5A2D; } .zjd-seg.comfort { background: #F7E0B8; border-color: rgba(200, 150, 60, 0.3); color: #6B4A12; } .zjd-seg.manual { background: #E0DCD6; border-color: var(--border2); color: var(--text2); } /* Preset attivo "adesso" — allineato alla timeline verticale */ .zjd-seg.active { box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.45); z-index: 2; } /* Selezione utente (tap) — leggero, distinto dal rosso "now" */ .zjd-seg.selected { outline: 2px dashed rgba(70, 120, 190, 0.75); outline-offset: 1px; z-index: 3; filter: brightness(1.04); } .zjd-seg:focus-visible { outline: 2px solid rgba(70, 120, 190, 0.9); outline-offset: 1px; z-index: 4; } .zjd-seg-name { font-size: 11px; font-weight: 600; line-height: 1.1; white-space: nowrap; } .zjd-seg-hours { font-size: 9px; font-weight: 500; opacity: 0.75; font-family: 'DM Mono', monospace; white-space: nowrap; } /* Now marker */ .zjd-now { position: absolute; top: -6px; bottom: -6px; width: 0; z-index: 5; pointer-events: none; transform: translateX(-50%); } .zjd-now-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #E53935; border-radius: 1px; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.15); } .zjd-now-line::before { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #E53935; } .zjd-now-label { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: #E53935; font-family: 'DM Mono', monospace; white-space: nowrap; background: var(--bg); padding: 0 3px; border-radius: 3px; } .zjd-now.edge-left .zjd-now-label { left: 0; transform: translateX(0); } .zjd-now.edge-right .zjd-now-label { left: auto; right: 0; transform: none; } /* Hour marks */ .zjd-hours { display: flex; justify-content: space-between; width: 100%; /* Spazio per la label HH:mm del marker "now" (evita sovrapposizione) */ margin-top: 26px; padding: 0 1px; font-size: 10px; color: var(--text3); font-family: 'DM Mono', monospace; box-sizing: border-box; } /* Fasce list */ .zjd-list-card { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px; margin-bottom: 12px; box-sizing: border-box; } .zjd-list-card.zjd-other { opacity: 0.95; } .zjd-list-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: 0.01em; } .zjd-fascia { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border); min-height: 40px; } .zjd-fascia:last-child { border-bottom: none; } .zjd-fascia.active { background: rgba(229, 57, 53, 0.08); border-radius: var(--radius-sm); border-bottom-color: transparent; margin: 0 -2px; padding-left: 8px; padding-right: 8px; } .zjd-fascia.selected { outline: 2px dashed rgba(70, 120, 190, 0.7); outline-offset: -1px; background: rgba(70, 120, 190, 0.1); border-bottom-color: transparent; border-radius: var(--radius-sm); } .zjd-fascia.active.selected { background: linear-gradient( 90deg, rgba(229, 57, 53, 0.1), rgba(70, 120, 190, 0.12) ); } .zjd-fascia { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s, outline-color 0.12s; } .zjd-fascia:focus-visible { outline: 2px solid rgba(70, 120, 190, 0.85); outline-offset: -1px; } .zjd-fascia.disabled { opacity: 0.45; } .zjd-fascia-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .zjd-active-dot { width: 8px; height: 8px; border-radius: 50%; background: #E53935; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.18); } .zjd-fascia-name { font-size: 13px; font-weight: 500; color: var(--text); min-width: 0; /* allow wrap on very narrow screens so time stays readable */ white-space: normal; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .zjd-fascia-time { font-weight: 400; color: var(--text2); font-size: 12px; white-space: nowrap; } .zjd-preset-badge { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 20px; color: #1A1A18; border: 1px solid transparent; } .zjd-preset-badge.sleep { background: #C9DEF5; border-color: rgba(100, 149, 200, 0.3); color: #2A4A6E; } .zjd-preset-badge.eco { background: #CDEDC9; border-color: rgba(90, 160, 90, 0.3); color: #2D5A2D; } .zjd-preset-badge.comfort { background: #F7E0B8; border-color: rgba(200, 150, 60, 0.35); color: #6B4A12; } .zjd-action-badge { flex-shrink: 0; font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: 20px; background: var(--surface2); color: var(--text2); border: 1px solid var(--border); } .zjd-fascia-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .zjd-edit-btn, .zjdv-edit-btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface2); color: var(--text2); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; font-size: 13px; line-height: 1; -webkit-tap-highlight-color: transparent; transition: background 0.12s, color 0.12s, border-color 0.12s; } .zjd-edit-btn:hover, .zjdv-edit-btn:hover { color: var(--text); border-color: var(--border); background: var(--surface); } .zjd-edit-btn:active, .zjdv-edit-btn:active { background: var(--surface2); } /* Phablet / small tablet */ @media (min-width: 400px) { .zjd-header { padding: 14px 12px 0; } .zjd-page .zjd-content, .zjd-content { padding: 12px 12px 32px; } .zjd-bar { height: 58px; border-radius: 16px; } .zjd-seg-name { font-size: 12px; } .zjd-seg-hours { font-size: 10px; } .zjd-hours { font-size: 11px; } .zjd-list-card { padding: 12px 12px; } } /* Tablet / desktop: keep readable width, still generous */ @media (min-width: 600px) { .zjd-page { max-width: 720px; margin: 0 auto; } .zjd-header { padding: 20px 16px 0; } .zjd-title { font-size: 1.28rem !important; } .zjd-page .zjd-content, .zjd-content { padding: 14px 16px 36px; } .zjd-bar { height: 56px; } .zjd-fascia-name { white-space: nowrap; } } /* Wide screens: cap a bit higher so timeline stays usable */ @media (min-width: 900px) { .zjd-page { max-width: 860px; } } /* ════════════════════════════════════════════════════════════════ ZoneJobDetailsVertical — 24h preset timeline VERTICALE Prefisso: zjdv- (separato da zjd- orizzontale sopra) ════════════════════════════════════════════════════════════════ */ /* Shell — stessa logica adattativa in larghezza di .zjd-page */ .zjdv-page { width: 100%; max-width: 100%; margin: 0; } .zjdv-header { padding: 12px 10px 0; } .zjdv-title { font-size: 1.28rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; height: auto !important; } .zjdv-page .zjdv-content, .zjdv-content { width: 100%; max-width: none; margin: 0; padding: 10px 8px 28px; box-sizing: border-box; } .zjdv-empty { font-size: 14px; color: var(--text2); text-align: center; margin-top: 2rem; } .zjdv-empty-inline { font-size: 13px; color: var(--text2); padding: 8px 4px 4px; margin: 0; } /* Legend */ .zjdv-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; padding: 0 2px; } .zjdv-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); } .zjdv-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .zjdv-dot.sleep, .zjdv-preset-badge.sleep { background: #B8D4F0; } .zjdv-dot.eco, .zjdv-preset-badge.eco { background: #C5E8C0; } .zjdv-dot.comfort, .zjdv-preset-badge.comfort { background: #F5D9A8; } .zjdv-dot.manual, .zjdv-preset-badge.manual { background: #D8D4CE; } /* Timeline verticale: ore a sinistra + traccia a destra */ .zjdv-timeline { display: flex; width: 100%; gap: 0; margin-bottom: 18px; /* Altezza fissa per percentuali top/height dei segmenti (≈ 30px/ora) */ --zjdv-track-h: min(72vh, 720px); min-height: var(--zjdv-track-h); } .zjdv-hours { position: relative; width: 28px; flex-shrink: 0; height: var(--zjdv-track-h); font-size: 10px; color: var(--text3); font-family: 'DM Mono', monospace; box-sizing: border-box; } .zjdv-hour-mark { position: absolute; left: 0; right: 2px; transform: translateY(-50%); text-align: right; line-height: 1; user-select: none; } /* 00 in alto e 24 in basso: evita clipping */ .zjdv-hour-mark:first-child { transform: translateY(0); } .zjdv-hour-mark:last-child { transform: translateY(-100%); } .zjdv-track { position: relative; flex: 1; min-width: 0; height: var(--zjdv-track-h); border-radius: 14px; background: var(--surface2); border: 1px solid var(--border); overflow: visible; } .zjdv-track-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text3); padding: 12px; text-align: center; } /* Segmenti — posizionati con top/height % (asse verticale 0–24h) */ .zjdv-seg { position: absolute; left: 4px; right: 4px; border-radius: 10px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; overflow: hidden; min-height: 2px; box-sizing: border-box; border: 1px solid transparent; padding: 4px 8px; transition: filter 0.15s, box-shadow 0.15s; cursor: pointer; -webkit-tap-highlight-color: transparent; } .zjdv-seg.active { box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.45); z-index: 2; } /* Selezione utente (tap) — leggero, distinto dal rosso "now" */ .zjdv-seg.selected { outline: 2px dashed rgba(70, 120, 190, 0.75); outline-offset: 1px; z-index: 3; filter: brightness(1.04); } .zjdv-seg:focus-visible { outline: 2px solid rgba(70, 120, 190, 0.9); outline-offset: 1px; z-index: 4; } .zjdv-seg.sleep { background: #C9DEF5; border-color: rgba(100, 149, 200, 0.25); color: #2A4A6E; } .zjdv-seg.eco { background: #CDEDC9; border-color: rgba(90, 160, 90, 0.25); color: #2D5A2D; } .zjdv-seg.comfort { background: #F7E0B8; border-color: rgba(200, 150, 60, 0.3); color: #6B4A12; } .zjdv-seg.manual { background: #E0DCD6; border-color: var(--border2); color: var(--text2); } .zjdv-seg-job { font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .zjdv-seg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; } .zjdv-seg-meta-inline { flex-wrap: nowrap; } .zjdv-seg-preset { font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.01em; } .zjdv-seg-hours { font-size: 10px; font-weight: 500; opacity: 0.8; font-family: 'DM Mono', monospace; white-space: nowrap; } .zjdv-seg-duration { font-size: 9px; font-weight: 500; opacity: 0.65; font-family: 'DM Mono', monospace; } .zjdv-seg-letter { font-size: 11px; font-weight: 700; line-height: 1; } /* Now marker — linea orizzontale */ .zjdv-now { position: absolute; left: -2px; right: -2px; height: 0; z-index: 5; pointer-events: none; transform: translateY(-50%); } .zjdv-now-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #E53935; border-radius: 1px; transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.15); } .zjdv-now-line::before { content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #E53935; } .zjdv-now-label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 600; color: #E53935; font-family: 'DM Mono', monospace; white-space: nowrap; background: var(--bg); padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(229, 57, 53, 0.25); line-height: 1.2; } .zjdv-now.edge-top .zjdv-now-label { top: 0; transform: translateY(2px); } .zjdv-now.edge-bottom .zjdv-now-label { top: auto; bottom: 0; transform: translateY(-2px); } /* Fasce list (stesso pattern di zjd) */ .zjdv-list-card { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px; margin-bottom: 12px; box-sizing: border-box; } .zjdv-list-card.zjdv-other { opacity: 0.95; } .zjdv-list-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: 0.01em; } .zjdv-fascia { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border); min-height: 40px; } .zjdv-fascia:last-child { border-bottom: none; } .zjdv-fascia.active { background: rgba(229, 57, 53, 0.08); border-radius: var(--radius-sm); border-bottom-color: transparent; margin: 0 -2px; padding-left: 8px; padding-right: 8px; } .zjdv-fascia.selected { outline: 2px dashed rgba(70, 120, 190, 0.7); outline-offset: -1px; background: rgba(70, 120, 190, 0.1); border-bottom-color: transparent; border-radius: var(--radius-sm); } .zjdv-fascia.active.selected { background: linear-gradient( 90deg, rgba(229, 57, 53, 0.1), rgba(70, 120, 190, 0.12) ); } .zjdv-fascia { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s, outline-color 0.12s; } .zjdv-fascia:focus-visible { outline: 2px solid rgba(70, 120, 190, 0.85); outline-offset: -1px; } .zjdv-fascia.disabled { opacity: 0.45; } .zjdv-fascia-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .zjdv-active-dot { width: 8px; height: 8px; border-radius: 50%; background: #E53935; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.18); } .zjdv-fascia-name { font-size: 13px; font-weight: 500; color: var(--text); min-width: 0; white-space: normal; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .zjdv-fascia-time { font-weight: 400; color: var(--text2); font-size: 12px; white-space: nowrap; } .zjdv-fascia-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .zjdv-preset-badge { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 20px; color: #1A1A18; border: 1px solid transparent; } .zjdv-preset-badge.sleep { background: #C9DEF5; border-color: rgba(100, 149, 200, 0.3); color: #2A4A6E; } .zjdv-preset-badge.eco { background: #CDEDC9; border-color: rgba(90, 160, 90, 0.3); color: #2D5A2D; } .zjdv-preset-badge.comfort { background: #F7E0B8; border-color: rgba(200, 150, 60, 0.35); color: #6B4A12; } .zjdv-action-badge { flex-shrink: 0; font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: 20px; background: var(--surface2); color: var(--text2); border: 1px solid var(--border); } /* Phablet / small tablet */ @media (min-width: 400px) { .zjdv-header { padding: 14px 12px 0; } .zjdv-page .zjdv-content, .zjdv-content { padding: 12px 12px 32px; } .zjdv-hours { width: 32px; font-size: 11px; } .zjdv-seg { padding: 6px 10px; left: 5px; right: 5px; } .zjdv-seg-job { font-size: 13px; } .zjdv-seg-preset { font-size: 12px; } .zjdv-seg-hours { font-size: 11px; } .zjdv-list-card { padding: 12px 12px; } } /* Tablet / desktop */ @media (min-width: 600px) { .zjdv-page { max-width: 720px; margin: 0 auto; } .zjdv-header { padding: 20px 16px 0; } .zjdv-title { font-size: 1.28rem !important; } .zjdv-page .zjdv-content, .zjdv-content { padding: 14px 16px 36px; } .zjdv-timeline { --zjdv-track-h: min(75vh, 780px); } .zjdv-fascia-name { white-space: nowrap; } } /* Wide screens */ @media (min-width: 900px) { .zjdv-page { max-width: 860px; } .zjdv-timeline { --zjdv-track-h: min(78vh, 840px); } }