/* ══════════════════════════════════════════════════════════════
   Visual language of the IoT UI (shell, home, climate, heater): soft glass surfaces, light large
   numbers, glowing switches. Loaded after heater.css / climate.css / home.css and only restyles
   their shared building blocks; layout and markup stay in those files.
   ══════════════════════════════════════════════════════════════ */

/* ── surfaces: the same frosted glass as the home page (tokens in ui-tokens.css) ── */
:is(.htr, .iot) :is(.htr-card, .htr-tile, .clm-kpi, .clm-chart, .htr-stepper-card, .htr-shortcut, .htr-err-card, .htr-hero, .htr-nav, .htr-modbar, .clm-stage, .htr-schematic, .clm-chip) {
    border-color: var(--frost-line);
    background: linear-gradient(160deg, var(--frost-hi), transparent 55%), var(--frost);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    backdrop-filter: blur(22px) saturate(1.35);
    box-shadow: var(--frost-shadow);
}

.iot-home .ih-read b { font-weight: 300; letter-spacing: -.02em; }
.iot-home .ih-section-head h2 { font-weight: 600; }

:is(.htr, .iot) .htr-card { border-radius: var(--dcc-r-lg); }
:is(.htr, .iot) .htr-card-head { border-bottom-color: var(--line); }
:is(.htr, .iot) .htr-card-head h3 { font-weight: 600; font-size: var(--dcc-fs-md); }
:is(.htr, .iot) .htr-card-ico { width: 36px; height: 36px; border-radius: 12px; }
:is(.htr, .iot) .htr-tile:hover, :is(.htr, .iot) .clm-kpi:hover { box-shadow: var(--sh-2); }

/* large figures: light weight, tight tracking (Sellution / Novara numbers) */
:is(.htr, .iot) :is(.htr-tile-value, .clm-kpi-value, .htr-highlight .v, .clm-chart-head .v) {
    font-weight: 300;
    letter-spacing: -.02em;
}

:is(.htr, .iot) .clm-kpi-value { font-size: 1.9rem; }
:is(.htr, .iot) .htr-tile-value { font-size: 1.5rem; }
:is(.htr, .iot) :is(.clm-kpi-label, .htr-tile-label) { font-weight: 500; }
:is(.htr, .iot) :is(.htr-section-title, .htr-page-head h2) { font-weight: 700; }

/* sparkline under each KPI: a fading area instead of a flat tint */
.clm-kpi-spark .area { opacity: .16; }
.clm-kpi-spark .line { stroke-width: 2; stroke-linecap: round; }

/* ── switch (iOS-style with a soft green glow) ───────────────── */
:is(.htr, .iot) .htr-switch {
    width: 50px;
    height: 29px;
    background: var(--s-3);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
    transition: background var(--dcc-t-slow) var(--ease-soft), box-shadow var(--dcc-t-slow) var(--ease-soft);
}

    :is(.htr, .iot) .htr-switch::after {
        width: 23px;
        height: 23px;
        background: linear-gradient(180deg, #fff, #e8ecf3);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
        transition: inset-inline-start var(--dcc-t-slow) var(--ease-soft), transform var(--dcc-t-base) var(--dcc-e-std);
    }

    :is(.htr, .iot) .htr-switch:active::after { transform: scaleX(1.12); }

    :is(.htr, .iot) .htr-switch.is-on {
        background: linear-gradient(90deg, var(--acc), var(--acc-2));
        box-shadow: 0 0 18px -4px var(--acc), inset 0 1px 2px rgba(0, 0, 0, .15);
    }

        :is(.htr, .iot) .htr-switch.is-on::after { inset-inline-start: 24px; }

/* ── segmented controls and section nav: the active item is a raised surface ── */
:is(.htr, .iot) .htr-seg { border-radius: 14px; background: var(--s-2); }
:is(.htr, .iot) .htr-seg button { border-radius: 10px; font-weight: 500; }

    :is(.htr, .iot) .htr-seg button.is-active {
        background: var(--s-1);
        color: var(--txt);
        box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .45);
    }

[data-bs-theme="dark"] :is(.htr, .iot) .htr-seg button.is-active { background: var(--s-3); }

:is(.htr, .iot) .htr-nav { border-radius: 20px; }
:is(.htr, .iot) .htr-nav a { border-radius: 14px; font-weight: 500; }

    :is(.htr, .iot) .htr-nav a.is-active {
        background: linear-gradient(140deg, var(--acc-2), var(--acc) 60%);
        color: #04241a;
        box-shadow: 0 8px 22px -10px var(--acc);
    }

:is(.htr, .iot) .htr-subnav a { font-weight: 500; }
:is(.htr, .iot) .htr-subnav a.is-active { background: var(--tint-acc); }

:is(.htr, .iot) .htr-pill { font-weight: 600; }

/* ── greenhouse stage: glass panels and tags over the drawing ── */
.clm-hud > span, .clm-legend {
    border-color: var(--glass-line);
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
}

.clm-chip {
    border-radius: 16px;
    box-shadow: var(--sh-1);
    transition: transform var(--dcc-t-slow) var(--ease-soft), border-color var(--dcc-t-base) var(--dcc-e-std), box-shadow var(--dcc-t-base) var(--dcc-e-std);
}

    .clm-chip:hover { transform: translateY(-2px); }

.clm-chip-head > i:first-child { width: 26px; height: 26px; border-radius: 9px; }
.clm-chip-status { border-radius: 10px; }

.clm-tag rect, .clm-htag rect { stroke: var(--line-2); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); }

/* ── charts ───────────────────────────────────────────────────── */
.clm-chart { border-radius: var(--dcc-r-lg); }

/* ── heater hall drawing: depth and warm glow ─────────────────── */
/* the heater hall drawing keeps a warm glow under the glass */
.htr-schematic { background: radial-gradient(40rem 18rem at 50% 110%, var(--tint-warm), transparent 60%), linear-gradient(160deg, var(--frost-hi), transparent 55%), var(--frost); }

.htr-sch-house { fill: color-mix(in srgb, var(--cool) 7%, var(--s-2)); stroke: var(--line-2); }
.htr-sch-panel { fill: var(--s-1); stroke: var(--line-2); }
.htr-sch-body { fill: var(--s-1); stroke: var(--line-2); }
.htr-sch-unit { transition: filter var(--dcc-t-base) var(--dcc-e-std); }
.htr-sch-unit.is-heat .htr-sch-body { filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--warm) 45%, transparent)); }
.htr-sch-unit:hover .htr-sch-body { filter: drop-shadow(0 0 6px var(--acc)); }

/* ── shortcuts and list rows ──────────────────────────────────── */
:is(.htr, .iot) .htr-shortcut { border-radius: var(--dcc-r-md); transition: transform var(--dcc-t-slow) var(--ease-soft), border-color var(--dcc-t-base) var(--dcc-e-std); }
:is(.htr, .iot) .htr-shortcut:hover { transform: translateY(-2px); border-color: var(--line-2); }

/* entrance: cards rise in once (stopped with the rest when data-motion="off", see ui-motion.css) */
:is(.htr, .iot) :is(.htr-card, .htr-tile, .clm-kpi, .clm-chart) { animation: ui-rise .6s var(--ease-soft) backwards; }
:is(.htr-grid, .clm-kpis, .clm-charts) > :nth-child(2) { animation-delay: .04s; }
:is(.htr-grid, .clm-kpis, .clm-charts) > :nth-child(3) { animation-delay: .08s; }
:is(.htr-grid, .clm-kpis, .clm-charts) > :nth-child(4) { animation-delay: .12s; }
:is(.htr-grid, .clm-kpis, .clm-charts) > :nth-child(5) { animation-delay: .16s; }
:is(.htr-grid, .clm-kpis, .clm-charts) > :nth-child(n+6) { animation-delay: .2s; }

@keyframes ui-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }