/* v13: one installation expands inside its own grid cell. */
.v1 .object-equipment-grid { align-items: start; }
.v1 article.equipment-overview-tile { cursor: default; }
.v1 article.equipment-overview-tile:hover { filter: none; }
.v1 .object-equipment-tile.inline-expanded { grid-column: 1 / -1; }
.unit-card-rail { display: flex; align-items: center; gap: 7px; }
.unit-card-rail .badge { font-size: 9px; padding: 5px 7px; }
.unit-card-rail .unit-alarm { margin-left: auto; width: 25px; height: 25px; }
.unit-power-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; padding: 5px; flex: none; }
.unit-power-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.unit-power-icon.power-on { background: #168765; color: #fff; border-color: #117152; }
.unit-power-icon.power-off { background: #dfe4e9; color: #62727d; border-color: #c7d0d8; }
.unit-power-icon.power-offline,.unit-power-icon.power-unknown { background: #e9edf0; color: #a0aab2; }
.unit-power-icon:disabled { opacity: 1; }
.unit-open-button { display: flex; flex-direction: column; align-items: stretch; gap: 7px; background: transparent; color: inherit; padding: 0; text-align: left; border-radius: 4px; }
.unit-open-button:active { transform: none; }
.unit-card-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.35; font-weight: 600; }
.unit-card-name > span { color: #819597; font-weight: 400; font-size: 18px; }
.inline-expanded .unit-open-button { display: grid; grid-template-columns: minmax(0,1fr) minmax(210px,1fr); gap: 6px 18px; align-items: center; }
.inline-expanded .unit-card-name { grid-column: 1; }
.inline-expanded .unit-open-button > .temperature-pair { grid-column: 2; grid-row: 1 / 3; border: 0; padding: 0; }
.inline-expanded .unit-secondary-readings { grid-column: 1; justify-content: flex-start; }
.inline-trend { border-top: 1px solid #dce6e4; padding-top: 6px; }
.trend-toggle { display: block; width: 100%; padding: 0; text-align: left; background: transparent; color: inherit; border-radius: 4px; }
.trend-toggle:active { transform: none; }
.trend-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; font-size: 9px; line-height: 1.5; color: #6d8387; }
.trend-caption strong { font-weight: 500; }
.trend-caption > span { color: #17827e; font-size: 9px; }
.temperature-chart { display: block; overflow: visible; }
.spark-chart { width: 100%; height: 35px; margin: 2px 0; }
.temperature-chart polyline { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.chart-actual { stroke: #138e91; fill: #138e91; }
.chart-target { stroke: #a28256; fill: #a28256; stroke-dasharray: 4 4; }
.chart-grid { stroke: #e0e7e8; stroke-width: 1; }
.temperature-chart text { font: 11px Arial,sans-serif; fill: #6c8186; }
.trend-legend { display: flex; gap: 12px; align-items: center; font-size: 9px; color: #72848a; }
.trend-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.trend-legend > span:before { content: ''; width: 12px; border-top: 2px solid #138e91; }
.trend-legend > .legend-target:before { border-top: 2px dashed #a28256; }
.trend-legend > small { margin-left: auto; font-size: 8px; color: #9a8b6c; }
.chart-empty { display: block; padding: 10px 0; color: #89979f; font-size: 10px; font-weight: 400; }
.week-history { margin-top: 8px; border: 1px solid #dce4e6; padding: 8px; border-radius: 7px; background: #ffffffc9; }
.week-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 11px; }
.week-heading strong { font-weight: 500; }
.week-heading > span { display: flex; gap: 5px; }
.week-heading button { width: 30px; height: 28px; background: #e7efee; color: #267d79; border-radius: 5px; font-size: 17px; }
.history-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #85a7a4 #e9eeee; touch-action: pan-x pan-y; }
.week-chart { min-width: 1120px; width: 1120px; max-width: none; height: 180px; }
.history-hint { font-size: 9px; color: #819096; margin-top: 5px; }
.inline-unit-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px 14px; border-top: 1px solid #dce6e4; padding-top: 8px; }
.inline-controls { display: grid; gap: 7px; align-content: start; }
.inline-control-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
.inline-controls .stepper button { width: 30px; height: 30px; }
.inline-controls .stepper output { min-width: 58px; font-size: 14px; }
.inline-controls .mode-buttons button { padding: 8px 9px; font-size: 10px; }
.inline-unit-meta { font-size: 9px; color: #819096; line-height: 1.5; }
.inline-section-title { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 500; }
.inline-section-title small { font-size: 9px; font-weight: 400; color: #8a989e; }
.scheme-flow { display: flex; align-items: center; justify-content: space-between; gap: 3px; margin-top: 7px; }
.scheme-flow > span { display: grid; gap: 4px; text-align: center; min-width: 0; flex: 1; }
.scheme-flow i { font-style: normal; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #dfeeed; color: #258a86; margin: auto; font-size: 17px; }
.scheme-flow small { font-size: 8px; color: #839398; white-space: nowrap; }
.scheme-flow b { font-size: 10px; font-weight: 500; }
.scheme-flow > em { font-size: 11px; font-style: normal; color: #8fb3ae; margin-bottom: 15px; }
.inline-data-note { grid-column: 1 / -1; font-size: 9px; color: #8b806b; line-height: 1.4; }
.v1 .object-tile-bottom > button { padding: 3px 0; background: transparent; font-size: 9px; color: #198585; font-weight: 600; }
@media(max-width:520px) {
  .inline-unit-body { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .inline-expanded .unit-open-button { display: flex; }
  .inline-expanded .unit-open-button > .temperature-pair { padding: 7px 0; border-top: 1px solid #dce6e4; border-bottom: 1px solid #dce6e4; }
  .inline-expanded .unit-secondary-readings { justify-content: space-between; }
  .inline-unit-body .inline-controls { gap: 8px; }
  .scheme-flow small { font-size: 9px; }
}

.v1 .object-equipment-grid:has(.inline-expanded) > article:last-child:nth-child(even) { grid-column: 1 / -1; }

/* v14: a 24-hour viewport over a seven-day timeline. */
.day-chart-shell { display: flex; min-width: 0; }
.history-axis { flex: 0 0 34px; display: block; }
.history-axis text { font: 11px Arial,sans-serif; fill: #6c8186; }
.day-chart-shell > .history-scroll { min-width: 0; flex: 1; }
.day-chart-shell .week-chart { min-width: 0; }
.history-range { font-size: 10px; color: #5d787d; margin: 1px 0 7px 34px; font-variant-numeric: tabular-nums; }
.week-heading { flex-wrap: wrap; }
.week-heading .history-now { width: auto; padding: 0 8px; font-size: 10px; }
.history-hint { line-height: 1.5; }

/* v15: the alarm indicator opens the installation's own journal. */
button.unit-alarm { padding: 0; cursor: pointer; }
button.unit-alarm:hover { outline: 1px solid currentColor; outline-offset: 2px; }
.unit-alarm-journal { border: 1px solid #d8e0e3; background: #ffffffeb; border-radius: 8px; padding: 10px; }
.journal-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.journal-heading strong { display: block; font-size: 13px; font-weight: 600; }
.journal-heading small { display: block; font-size: 9px; color: #819198; line-height: 1.5; margin-top: 3px; }
.journal-heading > button { width: 28px; height: 28px; border-radius: 6px; background: #edf1f3; color: #5d7079; font-size: 20px; flex: none; }
.journal-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.journal-filters button { padding: 7px 9px; border-radius: 5px; background: #edf2f3; color: #74858c; font-size: 10px; }
.journal-filters button.active { background: #30353b; color: #fff; }
.journal-note { font-size: 9px; line-height: 1.5; color: #8d806a; margin-bottom: 6px; }
.journal-records { display: grid; gap: 7px; max-height: 255px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; padding: 2px; }
.journal-record { display: grid; gap: 4px; padding: 9px 10px; border: 1px solid #e3e8eb; border-left: 3px solid #a5b0b6; border-radius: 5px; background: #f8fafb; }
.journal-record.record-active { border-left-color: #d7253b; background: #fff3f4; }
.journal-record.record-resolved { border-left-color: #5a9b86; }
.journal-record-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.journal-state { font-size: 10px; font-weight: 600; color: #65847a; }
.record-active .journal-state { color: #c3263b; }
.record-unknown .journal-state { color: #85939b; }
.journal-code { font-size: 10px; color: #7d8e96; font-variant-numeric: tabular-nums; }
.journal-record > strong { font-size: 11px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.journal-time { font-size: 9px; color: #839198; line-height: 1.4; font-variant-numeric: tabular-nums; }
.journal-empty { font-size: 11px; color: #839198; padding: 12px 0; }

/* v16: compact horizontal time zoom controls. */
.history-zoom-controls { display: inline-flex; gap: 4px; align-items: center; border-left: 1px solid #d4e0df; padding-left: 6px; margin-left: 2px; }
.week-heading .history-interval { display: inline-block; min-width: 44px; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: #267d79; }
.week-heading [data-action="history-zoom"] { font-size: 20px; background: #dcebea; color: #247b77; }

/* v17: per-installation weekly operating window. */
.unit-schedule { grid-column: 1 / -1; border-top: 1px solid #dce6e4; padding-top: 9px; }
.schedule-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.schedule-heading > strong { font-size: 12px; font-weight: 500; }
.schedule-status { padding: 4px 7px; background: #e4e9ec; color: #7a898f; border-radius: 5px; font-size: 9px; flex: none; }
.schedule-status.enabled { color: #1d795e; background: #dcefe5; }
.schedule-enable { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; cursor: pointer; }
.schedule-enable input { accent-color: #138e91; width: 15px; height: 15px; margin: 0; }
.schedule-days { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; border: 0; margin: 9px 0; }
.schedule-days legend { font-size: 10px; color: #7b8b92; margin-bottom: 6px; padding: 0; }
.schedule-days label { position: relative; cursor: pointer; }
.schedule-days input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.schedule-days span { display: grid; place-items: center; min-width: 33px; height: 30px; padding: 0 6px; border-radius: 5px; border: 1px solid #d4dfe2; font-size: 11px; color: #7d8c94; background: #f5f8f9; }
.schedule-days input:checked + span { background: #138e91; border-color: #138e91; color: #fff; }
.schedule-days input:focus-visible + span { outline: 2px solid #30353b; outline-offset: 2px; }
.schedule-times { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.schedule-times > label { display: grid; gap: 5px; font-size: 10px; color: #687f87; }
.schedule-times input { width: 126px; min-width: 0; padding: 7px 8px; height: 34px; border: 1px solid #d4dfe2; border-radius: 6px; background: #fff; color: #344e58; font-size: 13px; }
.schedule-times > button { height: 34px; padding: 7px 12px; font-size: 11px; }
.schedule-next { font-size: 10px; color: #258278; line-height: 1.5; margin-top: 8px; }
.schedule-hint { font-size: 9px; line-height: 1.5; color: #8b8c7e; margin-top: 4px; }
.unit-schedule .form-error:empty { display: none; }
@media(max-width:440px) { .schedule-heading > strong { font-size: 11px; } .schedule-times input { width: 112px; } }

/* v18: schedule is collapsed by default. */
details.unit-schedule > summary.schedule-heading { list-style: none; cursor: pointer; margin-bottom: 0; min-height: 28px; gap: 10px; }
details.unit-schedule > summary::-webkit-details-marker { display: none; }
details.unit-schedule > summary::marker { content: ''; }
details.unit-schedule > summary .schedule-status { margin-left: auto; }
details.unit-schedule > summary:after { content: '›'; font-size: 23px; line-height: 1; color: #6c8a8a; transition: transform .15s; }
details.unit-schedule[open] > summary:after { transform: rotate(90deg); }
details.unit-schedule[open] > summary { margin-bottom: 9px; }
details.unit-schedule > summary:focus-visible { outline: 2px solid #138e91; outline-offset: 3px; border-radius: 4px; }

/* Configured temperature cells use available width. */
.v1 .equipment-mini-readings.temperature-pair { grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); }

.qr-upload { position:relative; margin:2px 0 8px; overflow:hidden; }
.qr-upload input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.profile-site .text-link { background:transparent; padding:7px 0 0; font-size:10px; }

/* v23: configurable card information and ordered composition. */
.card-primary-parameters { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:6px 10px; padding:6px 0 2px; border-top:1px solid #dce6e4; margin-top:6px; width:100%; }
.card-primary-parameters > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.card-primary-parameters small { color:#879ba2; font-size:9px; line-height:1.35; overflow-wrap:anywhere; }
.card-primary-parameters b { color:#406a72; font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.inline-expanded .unit-open-button > .card-primary-parameters { grid-column:1/-1; grid-row:auto; }
.unit-extra-parameters { grid-column:1/-1; padding-top:7px; border-top:1px solid #dce6e4; min-width:0; }
.unit-extra-parameters h4 { font-weight:500; font-size:11px; margin:0 0 7px; }
.unit-extra-parameters .configured-readings { border:0; padding:0; gap:8px; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.unit-extra-parameters .configured-readings > span { padding:7px 9px; border-radius:5px; background:rgba(255,255,255,.5); min-width:0; overflow-wrap:anywhere; }
.unit-extra-parameters .configured-readings b { font-size:13px; margin-top:3px; }
.unit-composition { min-width:0; }
.unit-composition .scheme-flow { overflow-x:auto; justify-content:flex-start; padding:6px 0; }
.unit-composition .scheme-flow > span { flex:0 0 80px; min-width:75px; }
.unit-composition .scheme-flow small { white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
.composition-unset { font-size:10px; line-height:1.5; color:#8b9da5; padding:9px 0; }
.v1 .equipment-mini-readings.temperature-pair small { white-space:normal; overflow-wrap:anywhere; }
.temperature-pair > span { min-width:0; }
.inline-unit-body > .inline-controls,.inline-unit-body > .unit-composition { grid-column:1/-1; }
.unit-composition .scheme-flow > span { flex:0 0 66px; min-width:64px; }