/* ══════════════════════════════════════════════════════════════
   Smart climate pages (/climate*) — prefix clm-
   Lives inside the .htr container, so it shares the colour tokens, hero, nav, cards, pills and
   segmented control of heater.css. Only what is new for the climate dashboard is defined here.
   ══════════════════════════════════════════════════════════════ */

.clm .clm-warn { color: var(--pend-t); }

/* tone → one accent colour per component */
.clm .tone-accent { --tone: var(--acc); --tone-tint: var(--tint-acc); }
.clm .tone-warning { --tone: var(--warm); --tone-tint: var(--tint-warm); }
.clm .tone-danger { --tone: var(--err); --tone-tint: var(--tint-err); }
.clm .tone-info { --tone: var(--cool); --tone-tint: var(--tint-cool); }

/* ── nav: subsystems that are not built yet ───────────────────── */
.clm-nav-soon {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dcc-s-2);
    height: var(--dcc-h-lg);
    padding: 0 var(--dcc-s-5);
    border-radius: var(--dcc-r-md);
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
    opacity: .55;
    cursor: not-allowed;
}

    .clm-nav-soon small {
        padding: 1px 7px;
        border-radius: var(--dcc-r-pill);
        background: var(--s-3);
        font-size: var(--dcc-fs-2xs);
        font-weight: 700;
    }

/* ── KPI strip ────────────────────────────────────────────────── */
.clm-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--dcc-s-3);
}

.clm-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--dcc-s-3) var(--dcc-s-4) 38px;
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-md);
    background: var(--s-1);
    overflow: hidden;
    transition: transform var(--dcc-t-base) var(--dcc-e-out), box-shadow var(--dcc-t-base) var(--dcc-e-out), border-color var(--dcc-t-base) var(--dcc-e-std);
}

    .clm-kpi:hover { transform: translateY(-2px); box-shadow: var(--dcc-el-2); }

    .clm-kpi > :not(.clm-kpi-spark) { position: relative; z-index: 1; }

.clm-kpi-top { display: flex; align-items: center; gap: var(--dcc-s-2); min-width: 0; }

.clm-kpi-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--tone-tint);
    color: var(--tone);
    font-size: .8rem;
}

.clm-kpi-label {
    font-size: var(--dcc-fs-xs);
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clm-kpi-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: var(--dcc-s-1);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

[dir="rtl"] .clm-kpi-value { justify-content: flex-end; }

    .clm-kpi-value small { font-size: var(--dcc-fs-xs); font-weight: 700; color: var(--muted); }

.clm-kpi-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 20px; font-size: var(--dcc-fs-2xs); color: var(--muted); }

.clm-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: var(--dcc-r-pill);
    background: var(--s-3);
    font-weight: 800;
}

.clm-kpi.is-ok .clm-kpi-delta { background: var(--tint-acc); color: var(--ok-t); }
.clm-kpi.is-warn .clm-kpi-delta { background: var(--tint-pend); color: #b45309; }
.clm-kpi.is-err .clm-kpi-delta { background: var(--tint-err); color: var(--err-t); }
.clm-kpi.is-err { border-color: var(--err); }
[data-bs-theme="dark"] .clm-kpi.is-warn .clm-kpi-delta { color: var(--pend-t); }

.clm-kpi.is-empty .clm-kpi-value { color: var(--muted); }

.clm-kpi-spark { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 34px; pointer-events: none; }

    .clm-kpi-spark .line { fill: none; stroke: var(--tone); stroke-width: 1.6; stroke-linejoin: round; }
    .clm-kpi-spark .area { fill: var(--tone); opacity: .1; }

/* ── main row: stage + side cards ─────────────────────────────── */
.clm-main {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--dcc-s-4);
    align-items: start;
}

/* heater units + 24h schedule */
.clm-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dcc-s-2); margin-bottom: var(--dcc-s-4); }

.clm-unit {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-sm);
    background: var(--s-2);
    font-size: var(--dcc-fs-xs);
    transition: border-color var(--dcc-t-base) var(--dcc-e-std), background var(--dcc-t-base) var(--dcc-e-std);
}

    .clm-unit .n { font-weight: 800; }
    .clm-unit .ico { display: flex; gap: 8px; color: var(--muted); opacity: .55; }
    .clm-unit .ico i.is-on { opacity: 1; }
    .clm-unit .ico .fa-fire.is-on { color: var(--warm-t); }
    .clm-unit .ico .fa-fan.is-on { color: var(--cool-t); animation: clm-spin 1.2s linear infinite; }
    .clm-unit .st { color: var(--muted); font-weight: 700; }
    .clm-unit.is-on { border-color: var(--warm); background: var(--tint-warm); }
    .clm-unit.is-on .st { color: var(--warm-t); }
    .clm-unit.is-on .ico { opacity: 1; }
    .clm-unit.is-err { border-color: var(--err); background: var(--tint-err); }
    .clm-unit.is-err .st { color: var(--err-t); }
    .clm-unit.is-disabled, .clm-unit.is-nodata { opacity: .55; }

.clm-sched-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--dcc-s-2); margin-bottom: var(--dcc-s-2); font-size: var(--dcc-fs-sm); }
    .clm-sched-head .k { display: inline-flex; align-items: center; gap: var(--dcc-s-2); font-weight: 800; }
    .clm-sched-head .k i { color: var(--warm-t); }

.clm-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dcc-s-2); margin-top: var(--dcc-s-3); }

.clm-unit-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .clm-unit .n { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.clm-unit-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 4px; }
    .clm-unit-btns .htr-device { min-width: 0; height: 28px; padding: 0 6px; justify-content: center; font-size: var(--dcc-fs-xs); }

/* subsystem pages */
.clm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--dcc-s-4); align-items: start; }
.clm-ctl { display: flex; flex-direction: column; gap: var(--dcc-s-3); }
.clm-ctl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--dcc-s-3); padding-bottom: var(--dcc-s-3); border-bottom: 1px dashed var(--line); }
    .clm-ctl-row:last-child { padding-bottom: 0; border-bottom: 0; }
    .clm-ctl-row > .k { display: inline-flex; align-items: center; gap: var(--dcc-s-2); font-weight: 800; }
    .clm-ctl-row > .k i { width: 18px; text-align: center; color: var(--muted); }
    .clm-ctl-row .clm-mode-seg { min-width: 180px; }
.clm-ctl .clm-acts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.clm-ctl .clm-act { min-height: 36px; font-size: var(--dcc-fs-sm); }
.clm-ctl .clm-fan-btns .htr-device { height: 36px; font-size: var(--dcc-fs-sm); }

@media (max-width: 991.98px) {
    .clm-split { grid-template-columns: 1fr; }
}

/* quick actions */
.clm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dcc-s-2); }

.clm-action {
    display: inline-flex;
    align-items: center;
    gap: var(--dcc-s-2);
    min-height: 40px;
    padding: 0 var(--dcc-s-3);
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-sm);
    background: var(--s-2);
    color: var(--txt);
    font-weight: 700;
    font-size: var(--dcc-fs-sm);
    text-align: start;
    transition: background var(--dcc-t-base) var(--dcc-e-std), border-color var(--dcc-t-base) var(--dcc-e-std), color var(--dcc-t-base) var(--dcc-e-std);
}

    .clm-action i { width: 18px; text-align: center; color: var(--muted); }
    .clm-action:hover { border-color: var(--acc); }
    .clm-action.is-on { border-color: var(--acc); background: var(--tint-acc); color: var(--acc-t); }
    .clm-action.is-on i { color: var(--acc-t); }

.clm-demo-note { margin-top: var(--dcc-s-3); font-size: var(--dcc-fs-xs); }

.clm-sp { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dcc-s-3); padding: 9px 0; border-bottom: 1px dashed var(--line); }

    .clm-sp:first-child { padding-top: 0; }
    .clm-sp:last-child { padding-bottom: 0; border-bottom: 0; }

    .clm-sp .k { display: inline-flex; align-items: center; gap: var(--dcc-s-2); color: var(--muted); font-weight: 700; }
    .clm-sp .k i { width: 16px; text-align: center; }
    .clm-sp .n b { font-size: 1.1rem; font-weight: 800; }
    .clm-sp .n small { margin-inline-start: 4px; color: var(--muted); font-weight: 700; }

.clm-alarm .htr-row-title i { margin-inline-end: 6px; }
.clm-alarm.is-warning .htr-row-title i { color: var(--pend-t); }
.clm-alarm.is-error .htr-row-title i { color: var(--err-t); }
.clm-alarm.is-info .htr-row-title i { color: var(--cool-t); }
.clm-alarm-time { font-size: var(--dcc-fs-xs); }

/* ── greenhouse stage ─────────────────────────────────────────────
   Isometric drawing with equipment panels and leader lines. Colours come from the
   page tokens (heater.css), so the stage follows the light / dark theme like every card.
   The SVG and the absolutely placed panels share the 1200×640 viewBox space
   (positions are set inline by ClmSchematic), so leader lines meet the panels. */
.clm-stage-wrap { container: clmstage / inline-size; min-width: 0; }

.clm-stage {
    --sc-frame: color-mix(in srgb, var(--muted) 45%, transparent);
    --sc-glass: color-mix(in srgb, var(--cool) 9%, transparent);
    --sc-edge: color-mix(in srgb, var(--txt) 55%, transparent);
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-xl);
    background:
        linear-gradient(180deg, var(--tint-cool), transparent 55%),
        radial-gradient(ellipse at 12% 0%, var(--tint-warm), transparent 45%),
        var(--s-1);
    box-shadow: var(--dcc-el-2);
    overflow: hidden;
}

    .clm-stage[data-night="True"] {
        background:
            linear-gradient(180deg, rgba(99, 102, 241, .12), transparent 60%),
            var(--s-1);
    }

    .clm-stage > svg { display: block; width: 100%; height: auto; }

/* HUD strip on top */
.clm-hud {
    position: absolute;
    top: 1.6%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--dcc-s-3);
    z-index: 2;
    white-space: nowrap;
}

    .clm-hud > span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 12px;
        border: 1px solid var(--line);
        border-radius: var(--dcc-r-pill);
        background: var(--s-1);
        box-shadow: var(--dcc-el-1);
        font-size: var(--dcc-fs-xs);
        font-weight: 700;
        color: var(--muted);
    }

    .clm-hud i { color: var(--muted); font-size: .8rem; }
    .clm-hud-in .fa-thermometer-half { color: var(--warm-t); }
    .clm-hud-in .fa-tint { color: var(--cool-t); }
    .clm-hud i.is-sun { color: #f59e0b; }
    .clm-hud i.is-moon { color: #818cf8; }
    .clm-hud-in b { color: var(--txt); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    .clm-hud-in b small { margin-inline-start: 1px; font-size: .7rem; color: var(--muted); }
    .clm-hud-in i:not(:first-child), .clm-hud-out i:not(:first-child) { margin-inline-start: 6px; }

/* drawing — every colour from the page tokens, faces shaded light-from-top-left */
.clm-sc-site { fill: color-mix(in srgb, var(--acc) 9%, var(--s-1)); stroke: var(--line); stroke-width: 1; }
.clm-sc-site-edge { fill: color-mix(in srgb, var(--acc) 16%, var(--s-2)); stroke: var(--line); stroke-width: 1; }
    .clm-sc-site-edge.is-dark { fill: color-mix(in srgb, var(--acc) 22%, var(--s-3)); }
.clm-sc-apron { fill: var(--s-2); stroke: var(--line); stroke-width: 1; }
.clm-sc-gravel { fill: var(--muted); opacity: .25; }

.clm-sc-knee { fill: color-mix(in srgb, var(--muted) 22%, var(--s-2)); stroke: var(--sc-frame); stroke-width: 1; }
    .clm-sc-knee.is-side { fill: color-mix(in srgb, var(--muted) 32%, var(--s-2)); }
    .clm-sc-knee.is-back { opacity: .6; }
.clm-sc-wall { fill: var(--sc-glass); stroke: none; }
    .clm-sc-wall.is-back { fill: color-mix(in srgb, var(--cool) 5%, transparent); }
    .clm-sc-wall.is-gable { fill: color-mix(in srgb, var(--cool) 12%, transparent); }
.clm-sc-mullion { fill: none; stroke: var(--sc-frame); stroke-width: 1.3; }
    .clm-sc-mullion.is-back { stroke-opacity: .45; stroke-width: 1; }
.clm-sc-door { fill: color-mix(in srgb, var(--cool) 18%, transparent); stroke: var(--sc-edge); stroke-width: 1.6; }
.clm-sc-door-split { stroke: var(--sc-edge); stroke-width: 1; }

.clm-sc-post { fill: none; stroke: var(--sc-edge); stroke-opacity: .55; stroke-width: 2.2; }
.clm-sc-truss { fill: none; stroke: var(--sc-frame); stroke-width: 1.6; }
    .clm-sc-truss.is-web { stroke-width: .9; stroke-opacity: .7; }
.clm-sc-gutter { fill: none; stroke: var(--sc-edge); stroke-width: 4; stroke-linecap: round; opacity: .55; }
.clm-sc-glazing { fill: none; stroke: var(--sc-frame); stroke-width: .9; stroke-opacity: .7; }
.clm-sc-shine { fill: #fff; opacity: .22; }
[data-bs-theme="dark"] .clm-sc-shine { opacity: .06; }

.clm-sc-edges path { fill: none; stroke: var(--sc-edge); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
    .clm-sc-edges path.is-back { stroke: var(--sc-frame); stroke-width: 1.2; }

.clm-sc-roof { fill: url(#clm-glass); stroke: var(--sc-frame); stroke-width: 1; }
    .clm-sc-roof.is-far { opacity: .75; }
.clm-sc-glass-a { stop-color: var(--cool); stop-opacity: .2; }
.clm-sc-glass-b { stop-color: var(--cool); stop-opacity: .06; }
.clm-sc-ridge { fill: none; stroke: var(--sc-edge); stroke-width: 3; stroke-linecap: round; }

/* boxes: three shaded faces */
:is(.clm-sc-pump, .clm-sc-cab, .clm-sc-fanbox, .clm-sc-motor, .clm-sc-bed, .clm-sc-sensorbox, .clm-sc-heater .cab) > polygon { stroke: var(--sc-frame); stroke-width: 1; stroke-linejoin: round; }
:is(.clm-sc-pump, .clm-sc-cab, .clm-sc-fanbox, .clm-sc-motor, .clm-sc-sensorbox) > .top { fill: var(--s-1); }
:is(.clm-sc-pump, .clm-sc-cab, .clm-sc-fanbox, .clm-sc-motor, .clm-sc-sensorbox) > .front { fill: color-mix(in srgb, var(--muted) 14%, var(--s-1)); }
:is(.clm-sc-pump, .clm-sc-cab, .clm-sc-fanbox, .clm-sc-motor, .clm-sc-sensorbox) > .side { fill: color-mix(in srgb, var(--muted) 28%, var(--s-1)); }
.clm-sc-motor.is-on > .top { fill: var(--tint-acc-2); }
.clm-sc-pump > .top { fill: color-mix(in srgb, var(--cool) 30%, var(--s-1)); }
.clm-sc-water.is-on .clm-sc-pump > polygon { stroke: var(--cool); }

/* vents */
.clm-sc-vent { fill: color-mix(in srgb, var(--cool) 16%, transparent); stroke: var(--cool); stroke-width: 1.3; stroke-linejoin: round; }
    .clm-sc-vent.is-open { fill: color-mix(in srgb, var(--cool) 30%, transparent); }
.clm-sc-vent-hole { fill: var(--txt); opacity: .2; }
.clm-sc-vent-arm { stroke: var(--sc-edge); stroke-width: 1.6; stroke-linecap: round; }

/* shade: posts, wires, net, roller tubes */
.clm-sc-shade-post { stroke: var(--sc-frame); stroke-width: 1.2; }
.clm-sc-shade-wire { fill: none; stroke: var(--sc-frame); stroke-width: .9; stroke-dasharray: 2 3; }
.clm-sc-net { fill: url(#clm-net); stroke: var(--warm); stroke-width: 1.2; stroke-opacity: .7; }
.clm-sc-net-line { stroke: var(--warm); stroke-width: 1.2; stroke-opacity: .55; }
.clm-sc-roller { stroke: var(--warm); stroke-width: 4.5; stroke-linecap: round; opacity: .85; }
    .clm-sc-roller.is-out { stroke-width: 5; }
.clm-sc-screen { fill: color-mix(in srgb, var(--pend) 20%, transparent); stroke: none; }
.clm-sc-screen-fold { stroke: color-mix(in srgb, var(--pend) 45%, transparent); stroke-width: 1; }

/* pad wall */
.clm-sc-pad { fill: color-mix(in srgb, #b45309 16%, var(--s-2)); stroke: var(--sc-frame); stroke-width: 1; vector-effect: non-scaling-stroke; }
.clm-sc-pad-line { stroke: #92400e; stroke-width: .5; stroke-opacity: .45; fill: none; }
.clm-sc-pad-wet { fill: var(--cool); opacity: 0; transition: opacity var(--dcc-t-xslow) var(--dcc-e-std); }
.clm-g-fanpad.is-on .clm-sc-pad-wet { opacity: .28; }
.clm-sc-trough { fill: var(--muted); opacity: .6; }
.clm-sc-drip { fill: none; stroke: var(--cool); stroke-width: 1.4; stroke-dasharray: 5 9; vector-effect: non-scaling-stroke; opacity: 0; }
.clm-g-fanpad.is-on .clm-sc-drip { opacity: .85; animation: clm-dash 1s linear infinite; }

/* water supply */
.clm-sc-tank .body { stroke: var(--sc-frame); stroke-width: 1; }
.clm-sc-tank .band { fill: none; stroke: var(--sc-frame); stroke-width: .8; }
.clm-sc-tank .lid { fill: var(--s-1); stroke: var(--sc-frame); stroke-width: 1; }
.clm-sc-steel-a { stop-color: color-mix(in srgb, var(--muted) 35%, var(--s-1)); }
.clm-sc-steel-b { stop-color: var(--s-1); }
.clm-sc-water .pipe { fill: none; stroke: color-mix(in srgb, var(--muted) 60%, var(--s-1)); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.clm-sc-water .flow { fill: none; stroke: var(--cool); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 7; opacity: 0; }
.clm-sc-water.is-on .flow { opacity: .9; animation: clm-dash .9s linear infinite; }
.clm-sc-water.is-on .pipe { stroke: color-mix(in srgb, var(--cool) 45%, var(--s-1)); }

/* fogger */
.clm-sc-pipe { fill: none; stroke: color-mix(in srgb, var(--muted) 60%, var(--s-1)); stroke-width: 2.4; stroke-linecap: round; }
.clm-g-fogger.is-on .clm-sc-pipe { stroke: color-mix(in srgb, var(--cool) 55%, var(--s-1)); }
.clm-sc-dropper { stroke: var(--muted); stroke-width: 1; }
.clm-sc-nozzle { fill: var(--muted); }
.clm-g-fogger.is-on .clm-sc-nozzle { fill: var(--cool); }
.clm-sc-mist { fill: var(--cool); opacity: 0; }
.clm-g-fogger.is-on .clm-sc-mist { animation: clm-mist 2s ease-out infinite; }

/* crop */
.clm-sc-crop .leg { stroke: var(--sc-frame); stroke-width: 1.4; }
.clm-sc-bed > polygon { stroke: color-mix(in srgb, var(--muted) 50%, transparent); stroke-width: .8; }
.clm-sc-bed > .top { fill: color-mix(in srgb, #92400e 30%, var(--s-2)); }
.clm-sc-bed > .front { fill: var(--s-1); }
.clm-sc-bed > .side { fill: var(--s-3); }
.clm-sc-crop .stem { stroke: #15803d; stroke-width: 1.4; }
.clm-sc-crop .leaf { fill: #16a34a; opacity: .9; }
    .clm-sc-crop .leaf.is-top { fill: #22c55e; }
.clm-sc-crop .fruit { fill: #ef4444; }

/* fans */
.clm-sc-chain { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2 2; }
.clm-sc-air { fill: none; stroke: var(--cool); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 7; opacity: 0; }
.clm-g-circ.is-on .clm-sc-air { opacity: .7; animation: clm-dash 1s linear infinite; }
.clm-sc-fan .ring { fill: var(--s-1); stroke: var(--sc-frame); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.clm-sc-fan .box { fill: color-mix(in srgb, var(--muted) 18%, var(--s-1)); stroke: var(--sc-frame); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.clm-sc-fan .cage { fill: none; stroke: var(--muted); stroke-width: .9; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.clm-sc-fan .blades { fill: var(--muted); transform-origin: 0 0; }
.clm-sc-fan .slat { fill: color-mix(in srgb, var(--muted) 45%, var(--s-1)); }
.clm-sc-fan .lamp { fill: var(--muted); }
.clm-sc-fan.is-on .ring { stroke: var(--cool); }
.clm-sc-fan.is-on .blades { fill: var(--cool); animation: clm-spin var(--spin, .8s) linear infinite; }
.clm-sc-fan.is-on .slat { fill: var(--sc-frame); }
.clm-sc-fan.is-on .lamp { fill: var(--ok); }
.clm-sc-fanbox.is-on > .side { fill: color-mix(in srgb, var(--cool) 14%, var(--s-1)); }

/* sensors, controller, weather */
.clm-sc-sensor .wire { stroke: var(--muted); stroke-width: 1; }
.clm-sc-cab .screen { fill: color-mix(in srgb, var(--acc) 30%, #0f172a); }
.clm-sc-cab .led { fill: var(--muted); }
    .clm-sc-cab .led.is-on { fill: var(--ok); }
.clm-sc-cab .vent { fill: none; stroke: var(--sc-frame); stroke-width: .02; }
.clm-sc-cabinet .antenna { stroke: var(--sc-edge); stroke-width: 1.4; }
.clm-sc-cabinet .link { fill: none; stroke: var(--acc); stroke-width: 1.4; stroke-dasharray: 2 5; animation: clm-dash 1.6s linear infinite; }
.clm-sc-weather .pole { stroke: var(--sc-edge); stroke-width: 2.4; }
.clm-sc-weather .arm { stroke: var(--sc-edge); stroke-width: 1.6; }
.clm-sc-weather .panel { fill: color-mix(in srgb, var(--cool) 55%, #0f172a); stroke: var(--sc-frame); stroke-width: 1; }
.clm-sc-weather .shield { fill: var(--s-1); stroke: var(--sc-frame); stroke-width: 1; }
.clm-sc-weather .rotor { animation: clm-spin var(--spin, 1.5s) linear infinite; transform-origin: 0 0; }
.clm-sc-weather .rotor line { stroke: var(--sc-edge); stroke-width: 1.4; }
.clm-sc-weather .rotor circle { fill: var(--s-1); stroke: var(--sc-edge); stroke-width: 1.2; }

/* unit heaters: grey and cold when off, glowing with a flame and heat waves when on */
.clm-sc-heater .cab > .top { fill: var(--s-1); }
.clm-sc-heater .cab > .front { fill: color-mix(in srgb, var(--muted) 16%, var(--s-1)); }
.clm-sc-heater .cab > .side { fill: color-mix(in srgb, var(--muted) 30%, var(--s-1)); }
.clm-sc-heater .stack { stroke: color-mix(in srgb, var(--muted) 70%, var(--s-1)); stroke-width: 4; stroke-linecap: round; }
.clm-sc-heater .window { fill: color-mix(in srgb, var(--muted) 35%, #0f172a); }
.clm-sc-heater .grille { fill: var(--muted); opacity: .55; }
.clm-sc-heater .lamp { fill: var(--muted); }
.clm-sc-heater .flame { fill: url(#clm-fire); opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.clm-sc-heater .glow { opacity: 0; transition: opacity var(--dcc-t-slow) var(--dcc-e-std); }
.clm-sc-heater .wave { fill: none; stroke: var(--warm); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.clm-sc-heater.is-on .glow { opacity: .85; }
.clm-sc-heater.is-on .cab > polygon { stroke: var(--warm); }
.clm-sc-heater.is-on .cab > .front { fill: color-mix(in srgb, var(--warm) 22%, var(--s-1)); }
.clm-sc-heater.is-on .cab > .top { fill: color-mix(in srgb, var(--warm) 12%, var(--s-1)); }
.clm-sc-heater.is-on .window { fill: #7c2d12; }
.clm-sc-heater.is-on .flame { opacity: 1; animation: clm-flicker .9s ease-in-out infinite alternate; }
.clm-sc-heater.is-on .lamp { fill: var(--warm); }
.clm-sc-heater.is-on .wave { animation: clm-heat 1.8s ease-in-out infinite; }
.clm-sc-heater.is-on .stack { stroke: color-mix(in srgb, var(--warm) 55%, var(--muted)); }
.clm-sc-heater.is-err .cab > polygon { stroke: var(--err); }
.clm-sc-heater.is-err .cab > .front { fill: var(--tint-err); }
.clm-sc-heater.is-err .lamp { fill: var(--err); animation: clm-blink 1s steps(2) infinite; }
.clm-sc-heater.is-dis { opacity: .35; }
.clm-sc-heater.is-nodata { opacity: .5; }

.clm-htag rect { fill: var(--s-1); stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .12)); }
.clm-htag .num { fill: var(--s-3); }
.clm-htag .n { fill: var(--muted); font-size: 9.5px; font-weight: 800; text-anchor: middle; }
.clm-htag .t { fill: var(--muted); font-size: 10.5px; font-weight: 800; text-anchor: middle; }
.clm-htag.is-on rect { fill: var(--warm); stroke: var(--warm); }
.clm-htag.is-on .num { fill: #fff; }
.clm-htag.is-on .n { fill: var(--warm); }
.clm-htag.is-on .t { fill: #fff; }
.clm-htag.is-err rect { fill: var(--err); stroke: var(--err); }
.clm-htag.is-err .num { fill: #fff; }
.clm-htag.is-err .n { fill: var(--err); }
.clm-htag.is-err .t { fill: #fff; }
.clm-htag.is-dis { opacity: .5; }
.clm-htag.is-nodata rect { stroke-dasharray: 3 3; }
.clm-htag.is-nodata { opacity: .7; }
.clm-sc-heater .blow { fill: none; stroke: var(--cool); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 5; opacity: 0; }
.clm-sc-heater:has(.is-hfan.is-on) .blow { opacity: .8; animation: clm-dash .8s linear infinite; }
.clm-sc-heater.is-on:has(.is-hfan.is-on) .blow { stroke: var(--warm); }
.clm-htag .hf .bg { fill: var(--s-3); stroke: var(--line); stroke-width: 1; }
.clm-htag .hf .spin { fill: var(--muted); transform-origin: 0 0; }
.clm-htag .hf.is-on .bg { fill: var(--cool); stroke: #fff; }
.clm-htag .hf.is-on .spin { fill: #fff; animation: clm-spin .9s linear infinite; }

/* legend of the state colours */
.clm-legend {
    position: absolute;
    bottom: 1.6%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-pill);
    background: var(--s-1);
    box-shadow: var(--dcc-el-1);
    font-size: var(--dcc-fs-2xs);
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    z-index: 1;
}

    .clm-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .clm-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
    .clm-legend .is-on i { background: var(--acc); }
    .clm-legend .is-heat i { background: var(--warm); }
    .clm-legend .is-fan i { background: var(--cool); }
    .clm-legend .is-off i { background: var(--s-3); border: 1px solid var(--muted); }
    .clm-legend .is-err i { background: var(--err); }
    .clm-legend .is-dis i { background: var(--muted); opacity: .35; }

@keyframes clm-heat { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }

/* leader lines */
.clm-lead path { fill: none; stroke: var(--muted); stroke-opacity: .85; stroke-width: 1.5; stroke-dasharray: 5 4; }
.clm-lead .end { fill: var(--s-1); stroke: var(--muted); stroke-opacity: .7; stroke-width: 1.2; }
.clm-lead .dot { fill: var(--s-1); stroke: var(--muted); stroke-width: 2; }
.clm-lead.is-on path { stroke: var(--acc); stroke-opacity: .8; animation: clm-dash 1.4s linear infinite; }
.clm-lead.is-on .end, .clm-lead.is-on .dot { stroke: var(--acc); stroke-opacity: 1; }
.clm-lead.is-on .dot { fill: var(--acc); transform-box: fill-box; transform-origin: center; animation: clm-pulse 2.4s ease-out infinite; }
.clm-lead.is-alarm path, .clm-lead.is-alarm .end { stroke: var(--err); stroke-opacity: 1; }
.clm-lead.is-alarm .dot { fill: var(--err); stroke: var(--err); }

/* equipment panels */
.clm-chip {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 11px 10px;
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-sm);
    background: var(--s-1);
    box-shadow: var(--dcc-el-1);
    color: var(--txt);
    font-size: var(--dcc-fs-xs);
    text-decoration: none;
    transition: transform var(--dcc-t-base) var(--dcc-e-out), box-shadow var(--dcc-t-base) var(--dcc-e-out), border-color var(--dcc-t-base) var(--dcc-e-std);
}

    .clm-chip.is-on { border-color: color-mix(in srgb, var(--tone) 55%, var(--line)); }
    .clm-chip.is-err { border-color: var(--err); box-shadow: 0 0 0 3px var(--tint-err); }
    .clm-chip-head a.t { display: inline-flex; align-items: center; gap: 6px; color: var(--txt); text-decoration: none; }
    .clm-chip-head a.t:hover { color: var(--tone); }

.clm-chip-head { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 800; font-size: var(--dcc-fs-sm); }

    .clm-chip-head > i:first-child { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--tone-tint); color: var(--tone); font-size: .7rem; }
    .clm-chip-head .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .clm-chip-head .go { color: var(--muted); font-size: .65rem; }

[dir="rtl"] .clm-chip-head .go { transform: scaleX(-1); }

.clm-chip-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--s-2);
    font-size: .95rem;
    font-weight: 800;
    color: var(--muted);
}

    .clm-chip-status .led { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .6; flex: 0 0 auto; }
    .clm-chip-status.is-on { color: var(--ok-t); background: var(--tint-acc); }
    .clm-chip-status.is-on .led { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px var(--tint-acc-2); }
    .clm-chip-status.is-err { color: var(--err-t); background: var(--tint-err); }
    .clm-chip-status.is-err .led { background: var(--err); opacity: 1; animation: clm-blink 1s steps(2) infinite; }

.clm-chip-body { display: flex; flex-direction: column; gap: 6px; }
    .clm-chip-body:empty { display: none; }

.clm-mode-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 9px; background: var(--s-2); border: 1px solid var(--line); }
    .clm-mode-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; font-size: var(--dcc-fs-xs); font-weight: 800; color: var(--muted); cursor: pointer; transition: background var(--dcc-t-base) var(--dcc-e-std), color var(--dcc-t-base) var(--dcc-e-std); }
    .clm-mode-seg button:not(:disabled):hover { background: var(--s-3); color: var(--txt); }
    .clm-mode-seg button:disabled { cursor: default; }
    .clm-mode-seg .is-sel { background: var(--tint-acc-2); color: var(--acc-t); }
    .clm-mode-seg .is-sel.is-man { background: var(--tint-pend); color: #b45309; }
    .clm-mode-seg.is-compact button { min-height: 22px; font-size: var(--dcc-fs-2xs); }
    .clm-mode-seg.is-pending { opacity: .8; }

[data-bs-theme="dark"] .clm-mode-seg .is-sel.is-man { color: var(--pend-t); }

/* one-click commands and switches inside the panels */
.clm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

.clm-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--s-1);
    color: var(--txt);
    font-size: var(--dcc-fs-xs);
    font-weight: 700;
    transition: border-color var(--dcc-t-base) var(--dcc-e-std), background var(--dcc-t-base) var(--dcc-e-std);
}

    .clm-act:not(:disabled):hover { border-color: var(--tone); background: var(--tone-tint); color: var(--tone); }
    .clm-act:disabled { opacity: .45; cursor: not-allowed; }
    .clm-act.is-pending { opacity: .8; }

.clm-fan-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .clm-fan-btns .htr-device { min-width: 0; height: 26px; padding: 0 6px; justify-content: center; font-size: var(--dcc-fs-xs); }

.clm-chip .htr-switch { flex: 0 0 auto; }

.clm-unit-dots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
    .clm-unit-dots span { display: grid; place-items: center; height: 20px; border-radius: 5px; background: var(--s-2); border: 1px solid var(--line); font-size: var(--dcc-fs-2xs); font-weight: 800; color: var(--muted); }
    .clm-unit-dots span.is-on { background: var(--tint-warm-2); border-color: var(--warm); color: var(--warm-t); }
    .clm-unit-dots span.is-err { background: var(--tint-err); border-color: var(--err); color: var(--err-t); }
    .clm-unit-dots span.is-disabled { opacity: .4; }

.clm-hint { font-size: var(--dcc-fs-2xs); color: var(--muted); }

/* state tags pinned on the drawing */
.clm-tag rect { fill: var(--s-1); stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .12)); }
.clm-tag text { fill: var(--txt); font-size: 11px; font-weight: 800; text-anchor: middle; }
.clm-tag .led { fill: var(--muted); opacity: .6; }
.clm-tag.is-on rect { stroke: var(--acc); }
.clm-tag.is-on .led { fill: var(--acc); opacity: 1; }
.clm-tag.is-cool rect { stroke: var(--cool); }
.clm-tag.is-cool .led { fill: var(--cool); opacity: 1; }
.clm-tag.is-warm rect { stroke: var(--warm); }
.clm-tag.is-warm .led { fill: var(--warm); opacity: 1; }
.clm-tag.is-off text { fill: var(--muted); }

.clm-sc-heater.is-on .num circle { fill: var(--warm); stroke: var(--warm); }
.clm-sc-heater.is-on .num text { fill: #fff; }
.clm-sc-heater.is-err .num circle { fill: var(--err); stroke: var(--err); }
.clm-sc-heater.is-err .num text { fill: #fff; }

/* every element of the drawing opens its own page */
.clm-link { cursor: pointer; }
    .clm-link:hover > *, .clm-link:focus-visible > * { filter: drop-shadow(0 0 4px var(--acc)); }
    .clm-link:focus { outline: none; }

.clm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dcc-s-3); }

.clm-meter { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 6px; }

    .clm-meter .k { color: var(--muted); font-weight: 700; }
    .clm-meter b { font-weight: 800; font-variant-numeric: tabular-nums; }
    .clm-meter b small { margin-inline-start: 1px; color: var(--muted); font-weight: 700; }
    .clm-meter .bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--s-3); overflow: hidden; }
    .clm-meter .bar u { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit; background: var(--tone); transition: width var(--dcc-t-xslow) var(--dcc-e-out); }

.clm-line { display: flex; align-items: center; justify-content: space-between; gap: var(--dcc-s-2); }
    .clm-line .k { color: var(--muted); font-weight: 700; }
    .clm-line b { font-weight: 800; }
    .clm-line b small { margin-inline-start: 1px; color: var(--muted); }

.clm-state { color: var(--muted); }
    .clm-state.is-on { color: var(--ok-t); }

.clm-dots { display: inline-flex; flex-wrap: wrap; gap: 5px; }
    .clm-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--s-3); border: 1px solid var(--line); transition: background var(--dcc-t-base) var(--dcc-e-std); }
    .clm-dots i.is-on { background: var(--cool); border-color: var(--cool); }
    .clm-dots.is-heat i.is-on { background: var(--warm); border-color: var(--warm); }
    .clm-dots i.is-err { background: var(--err); border-color: var(--err); }
    .clm-dots i.is-disabled { opacity: .35; }

/* hovering a panel lights up its part of the drawing and its leader line */
.clm-stage:has(.clm-chip[data-k="vents"]:hover) :is(.clm-g-vents, .clm-lead[data-k="vents"]),
.clm-stage:has(.clm-chip[data-k="shade"]:hover) :is(.clm-g-shade, .clm-lead[data-k="shade"]),
.clm-stage:has(.clm-chip[data-k="fanpad"]:hover) :is(.clm-g-fanpad, .clm-lead[data-k="fanpad"]),
.clm-stage:has(.clm-chip[data-k="circ"]:hover) :is(.clm-g-circ, .clm-lead[data-k="circ"]),
.clm-stage:has(.clm-chip[data-k="fogger"]:hover) :is(.clm-g-fogger, .clm-lead[data-k="fogger"]),
.clm-stage:has(.clm-chip[data-k="heater"]:hover) :is(.clm-g-heater, .clm-lead[data-k="heater"]) { filter: drop-shadow(0 0 5px var(--acc)); }

@keyframes clm-spin { to { transform: rotate(360deg); } }
@keyframes clm-dash { to { stroke-dashoffset: -14; } }
@keyframes clm-flicker { from { transform: scale(1, .88); } to { transform: scale(1.08, 1.08); } }
@keyframes clm-mist { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .6; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes clm-pulse { 0% { opacity: 1; transform: scale(1); } 70% { opacity: .4; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes clm-blink { to { opacity: .35; } }

/* narrow stage: HUD and drawing on top, panels as a grid below, no leader lines */
@container clmstage (max-width: 939px) {
    .clm-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dcc-s-3); padding: var(--dcc-s-3); }
    .clm-stage > svg { grid-column: 1 / -1; }
    .clm-hud { position: static; transform: none; grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; white-space: normal; }
    .clm-leads { display: none; }
    .clm-legend { position: static; transform: none; grid-column: 1 / -1; justify-self: center; white-space: normal; }
    .clm-chip[data-k] { position: static; width: auto !important; }
}

@container clmstage (max-width: 520px) {
    .clm-stage { grid-template-columns: 1fr; }
}

/* ── live trends ──────────────────────────────────────────────── */
.clm-trends-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--dcc-s-3); }
    .clm-trends-head .htr-section-title { margin: 0; }

.clm-charts { display: grid; grid-template-columns: 1fr; gap: var(--dcc-s-3); }

.clm-chart {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: var(--dcc-s-3) var(--dcc-s-4) var(--dcc-s-2);
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-md);
    background: var(--s-1);
}

.clm-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--dcc-s-3); }
    .clm-chart-head .t { display: inline-flex; align-items: center; gap: var(--dcc-s-2); min-width: 0; font-weight: 800; }
    .clm-chart-head .ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--tone-tint); color: var(--tone); font-size: .8rem; }
    .clm-chart-head .v { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    .clm-chart-head .v small { margin-inline-start: 3px; font-size: var(--dcc-fs-xs); color: var(--muted); font-weight: 700; }

.clm-chart-legend { display: flex; flex-wrap: wrap; gap: var(--dcc-s-3); font-size: var(--dcc-fs-2xs); font-weight: 700; color: var(--muted); }
    .clm-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .clm-chart-legend .sw { width: 14px; height: 3px; border-radius: 2px; background: var(--acc); }
    .clm-chart-legend .sw.is-dashed { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); height: 2px; }
    .clm-chart-legend .sw.c-acc { background: var(--acc); color: var(--acc-t); }
    .clm-chart-legend .sw.c-acc-2 { background: var(--acc-2); color: var(--acc-2); }
    .clm-chart-legend .sw.c-warm { background: var(--warm); color: var(--warm-t); }
    .clm-chart-legend .sw.c-cool { background: var(--cool); color: var(--cool-t); }
    .clm-chart-legend .sw.c-err { background: var(--err); color: var(--err-t); }
    .clm-chart-legend .sw.is-dashed[class*="c-"] { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
    .clm-chart-legend .sw.is-sp { background: none; border-top: 1px dashed var(--muted); height: 0; }

.clm-chart-plot { width: 100%; height: 170px; }

/* ── responsive ───────────────────────────────────────────────── */
@media (min-width: 768px) {
    .clm-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1500px) {
    .clm-charts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1199.98px) {
    .clm-main { grid-template-columns: 1fr; }
    .clm-main > .htr-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 767.98px) {
    .clm-kpis {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 44%);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        margin-inline: calc(var(--dcc-s-2) * -1);
        padding-inline: var(--dcc-s-2);
        padding-block: 2px;
    }

        .clm-kpis::-webkit-scrollbar { display: none; }
        .clm-kpis .clm-kpi { scroll-snap-align: start; }

    .clm-main > .htr-stack { grid-template-columns: 1fr; }
    .clm-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .clm-links { grid-template-columns: 1fr; }
    .clm-nav-soon { padding: 0 var(--dcc-s-3); }
    .clm-chart-plot { height: 150px; }
}

/* motion off (system "reduce motion" or the in-app switch, see data-motion in App.razor) */
:root[data-motion="off"] :is(.clm .clm-chip, .clm .clm-kpi, .clm .clm-sch-flap, .clm .clm-sch-screen, .clm .clm-meter .bar u) { transition: none !important; }

/* ── compact stage (home page): the drawing and its tags only ── */
.clm-stage.is-compact { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .clm-stage.is-compact :is(.clm-hud, .clm-leads, .clm-chip) { display: none !important; }
    .clm-stage.is-compact .clm-legend { position: static; transform: none; margin: 0 auto var(--dcc-s-2); width: fit-content; white-space: normal; }

@container clmstage (max-width: 939px) {
    .clm-stage.is-compact { display: block; padding: 0; }
}

/* ══════════════════════════════════════════════════════════════
   Settings pages of the subsystems (/climate-*-settings), irrigation, sensors, errors
   ══════════════════════════════════════════════════════════════ */

.clm-fields { display: flex; flex-direction: column; gap: var(--dcc-s-2); }
.clm-fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dcc-s-2) var(--dcc-s-4); align-items: start; }
.clm-fields > .htr-hint, .clm-fields-2 > .htr-hint { margin-bottom: var(--dcc-s-1); }

.clm-field-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .clm-field-t .htr-hint { line-height: 1.5; }
.clm-field.is-off { opacity: .55; }
.clm-field .clm-time { width: 128px; }

.clm-pair { display: inline-flex; align-items: center; gap: var(--dcc-s-2); flex-wrap: wrap; justify-content: flex-end; }
    .clm-pair .htr-input { width: 70px; }
.clm-pair-sep { color: var(--muted); font-size: var(--dcc-fs-xs); }
:root[dir="rtl"] .clm-pair-sep.fa-long-arrow-alt-right { transform: scaleX(-1); }

.clm-mode-tabs button.is-dim { opacity: .55; }
.clm-mode-tabs + .clm-fields { margin-top: var(--dcc-s-3); }

.clm-fan-btns.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clm-fan-btns.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.clm-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--dcc-s-2); }
    .clm-days .htr-device { justify-content: center; height: 38px; min-width: 0; }

/* irrigation: today's programme and the step editor */
.clm-steps { display: flex; flex-direction: column; }
.clm-step {
    display: grid;
    grid-template-columns: 28px 92px 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--dcc-s-3);
    padding: var(--dcc-s-2) var(--dcc-s-4);
    border-top: 1px solid var(--line);
}
    .clm-step:first-child { border-top: 0; }
    .clm-step .n { color: var(--muted); font-weight: 800; }
    .clm-step .t { font-weight: 800; }
    .clm-step .d, .clm-step .st { color: var(--muted); font-size: var(--dcc-fs-xs); }
    .clm-step .v { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--warm-t, var(--muted)); }
    .clm-step.is-live { background: var(--tint-cool); }
        .clm-step.is-live .st { color: var(--cool-t, var(--acc-t)); font-weight: 800; }
    .clm-step.is-done { opacity: .55; }

.clm-step-card { display: flex; flex-direction: column; gap: var(--dcc-s-2); padding: var(--dcc-s-3); border: 1px solid var(--line); border-radius: var(--dcc-r-md); background: var(--s-1); }
    .clm-step-card .htr-row { border: 0; background: transparent; padding: var(--dcc-s-1) 0; }
.clm-step-head { display: flex; align-items: center; justify-content: space-between; }

/* sensors */
.clm-sensors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--dcc-s-2); }
.clm-sensor {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px var(--dcc-s-3);
    padding: var(--dcc-s-3);
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-md);
    background: var(--s-1);
}
    .clm-sensor .n { grid-column: 1 / -1; color: var(--muted); font-size: var(--dcc-fs-xs); font-weight: 700; }
    .clm-sensor .v { font-size: var(--dcc-fs-lg, 1.25rem); font-weight: 800; }
        .clm-sensor .v small { margin-inline-start: 2px; color: var(--muted); font-size: var(--dcc-fs-xs); font-weight: 600; }
    .clm-sensor .e { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; color: var(--err-t, var(--err)); font-size: var(--dcc-fs-xs); font-weight: 700; }
    .clm-sensor.is-off { opacity: .55; }
    .clm-sensor.is-bad { border-color: var(--err); }

.clm-err-watch { margin-top: var(--dcc-s-1); padding-top: var(--dcc-s-2); border-top: 1px dashed var(--line); }

@media (max-width: 767.98px) {
    .clm-fields-2 { grid-template-columns: 1fr; }
    .clm-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .clm-step { grid-template-columns: 24px minmax(0, 1fr) auto; }
        .clm-step .d { display: none; }
        .clm-step .v { grid-column: 2; }
        .clm-step .st { grid-column: 3; grid-row: 1; }
    .clm-field { flex-wrap: wrap; }
}

/* mode picker: the mode that runs now */
.clm-live { display: inline-block; width: 8px; height: 8px; margin-inline-start: 6px; border-radius: 50%; background: var(--acc); animation: clm-live 1.8s ease-out infinite; }
@keyframes clm-live { 0% { box-shadow: 0 0 0 0 var(--tint-acc); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
:root[data-motion="off"] .clm-live { animation: none; }

/* vents: the reason chip */
.clm-reason { padding: 3px 12px; border-radius: var(--dcc-r-pill); background: var(--s-3); font-weight: 700; font-size: var(--dcc-fs-sm); text-align: center; }
    .clm-reason.is-fault, .clm-reason.is-windlimit { background: var(--tint-err); color: var(--err-t, var(--err)); }
    .clm-reason.is-temperature, .clm-reason.is-humidity, .clm-reason.is-co2 { background: var(--tint-cool); }
    .clm-reason.is-manual { background: var(--tint-warm); }

/* VPD table */
.clm-vpd-wrap { overflow-x: auto; }
.clm-vpd th, .clm-vpd td { text-align: center; white-space: nowrap; }
.clm-vpd td.is-col, .clm-vpd th.is-col { background: var(--tint-acc); }
.clm-vpd tr.is-row th, .clm-vpd tr.is-row td { font-weight: 800; }
.clm-vpd td.is-cell { outline: 2px solid var(--acc); outline-offset: -2px; font-weight: 800; }