/* ══════════════════════════════════════════════════════════════
   Home of the IoT app (/) — prefix ih-, inside .iot (ui-tokens.css)
   ══════════════════════════════════════════════════════════════ */

.iot-home { display: flex; flex-direction: column; gap: var(--dcc-s-5); }

.ih-note, .ih-empty {
    display: flex;
    align-items: center;
    gap: var(--dcc-s-3);
    padding: var(--dcc-s-5);
    border: 1px dashed var(--line);
    border-radius: var(--dcc-r-lg);
    background: var(--s-1);
    color: var(--muted);
    font-weight: 600;
}

    .ih-empty { justify-content: center; flex-direction: column; padding: var(--dcc-s-7); }
    .ih-empty i { font-size: 1.8rem; opacity: .6; }

.is-skeleton {
    background: linear-gradient(90deg, var(--s-2) 0%, var(--s-3) 50%, var(--s-2) 100%) !important;
    background-size: 200% 100% !important;
    animation: ih-shimmer 1.4s linear infinite;
    border-color: transparent !important;
}


/* ══ home: one page of frosted glass cards on the theme background (Sellution layout) ══════════
   Light theme: white glass, dark text. Dark theme: navy glass, light text. The live drawing of the hall
   (the smart climate schematic) sits beside the widgets. */
/* frosted glass: one surface for every card of the home page */
.ih-frost, .ih-w,
.iot-home :is(.ih-panel, .ih-hall, .ih-module, .ih-attn-item, .ih-units, .ih-note, .ih-empty) {
    border: 1px solid 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);
}

/* the stage: greeting top start, hall switcher bottom start, widgets on the other side */
.ih-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "intro widgets" "scene widgets" "halls widgets";
    gap: var(--dcc-s-5);
    min-height: min(820px, calc(100vh - 110px));
    padding-block: var(--dcc-s-3) var(--dcc-s-5);
    color: var(--txt);
}

.ih-stage-intro { grid-area: intro; display: flex; flex-direction: column; gap: 6px; max-width: 560px; padding-top: var(--dcc-s-4); }
.ih-stage-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--sun); font-size: var(--dcc-fs-sm); font-weight: 600; }
.ih-stage-intro h1 { margin: 0; color: var(--txt); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.ih-stage-intro p { margin: 0; color: color-mix(in srgb, var(--txt) 82%, transparent); font-size: clamp(1.1rem, .9rem + .9vw, 1.7rem); font-weight: 300; line-height: 1.3; }
.ih-stage-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--dcc-s-3); }
.ih-frost { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 14px; color: var(--txt); font-size: var(--dcc-fs-xs); }
    .ih-frost b { font-weight: 600; }
    .ih-frost .is-sun, .ih-frost.is-warn { color: var(--sun); }

/* the live drawing of the hall (the smart climate schematic), as a big glass card */
.ih-w-scene { grid-area: scene; min-height: 340px; padding-bottom: 6px; overflow: hidden; }
.ih-w-scene-title { display: inline-flex; align-items: center; gap: 8px; }
    .ih-w-scene-title i { color: var(--acc-t); }
.ih-w-scene-art { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; margin: 0 -14px; }
    .ih-w-scene-art .clm-stage-wrap, .ih-w-scene-art .clm-stage { width: 100%; height: 100%; }
    .ih-w-scene-art .clm-stage > svg { width: 100%; height: 100%; max-height: 520px; transform: translate(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -5px)); transition: transform 1s var(--ease-soft); }
    .ih-w-scene-art .clm-legend { display: none !important; }
.ih-w-scene { --px: 0; --py: 0; }

/* hall switcher (Sellution "family hub" bar) */
.ih-stage-halls { grid-area: halls; align-self: end; justify-self: start; display: flex; align-items: center; flex-wrap: wrap; gap: var(--dcc-s-3); max-width: 100%; padding: 10px 12px 10px 18px; border-radius: 22px; }
[dir="rtl"] .ih-stage-halls { padding: 10px 18px 10px 12px; }
.ih-stage-halls-title { display: flex; flex-direction: column; min-width: 0; }
    .ih-stage-halls-title b { font-size: var(--dcc-fs-sm); font-weight: 600; }
    .ih-stage-halls-title small { color: var(--muted); font-size: var(--dcc-fs-2xs); }
.ih-stage-chips { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .ih-stage-chips::-webkit-scrollbar { display: none; }

    .ih-stage-chips button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
        height: 38px;
        padding: 0 14px;
        border: 1px solid var(--frost-line);
        border-radius: 13px;
        background: var(--frost-hi);
        color: var(--muted);
        font-size: var(--dcc-fs-sm);
        font-weight: 500;
        transition: background var(--dcc-t-base) var(--dcc-e-std), color var(--dcc-t-base) var(--dcc-e-std), transform var(--dcc-t-base) var(--dcc-e-spring);
    }

    .ih-stage-chips button:hover { color: var(--txt); transform: translateY(-1px); }
    /* active: the solid pill of the Sellution top tabs, ink on light / light on ink */
    .ih-stage-chips button.is-active { border-color: transparent; background: var(--txt); color: var(--bg); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5); }
    .ih-stage-chips button.is-alert i { color: var(--err-t); }
    .ih-stage-chips.is-gh { padding-inline-start: var(--dcc-s-3); border-inline-start: 1px solid var(--frost-line); }
.ih-chip-skel { width: 90px; height: 38px; border-radius: 13px; background: var(--ink-soft); }

/* widgets: two columns (Sellution), the chart across the bottom */
.ih-widgets {
    grid-area: widgets;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "vents temp" "pad temp" "shade fog" "shade circ" "chart chart";
    gap: 14px;
}

    .ih-widgets > :nth-child(1) { grid-area: temp; }
    .ih-widgets > :nth-child(2) { grid-area: vents; }
    .ih-widgets > :nth-child(3) { grid-area: pad; }
    .ih-widgets > :nth-child(4) { grid-area: fog; }
    .ih-widgets > :nth-child(5) { grid-area: circ; }
    .ih-widgets > :nth-child(6) { grid-area: shade; }
    .ih-widgets > :nth-child(7) { grid-area: chart; }
    .ih-widgets.is-empty { display: flex; }
    .ih-widgets.is-empty .ih-w { flex-direction: row; align-items: center; gap: var(--dcc-s-3); color: var(--muted); }

.ih-w {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 18px 20px;
    border-radius: 26px;
    color: var(--txt);
    transition: transform .55s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft);
}

    .ih-w > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1.02rem; font-weight: 500; }
    .ih-w-go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--muted); font-size: .8rem; transition: background .2s, color .2s; }
    .ih-w-go:hover { background: var(--ink-soft); color: var(--txt); }
    .ih-w-figure { display: flex; align-items: baseline; gap: 10px; }
    .ih-w-figure b { font-size: 1.85rem; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
    .ih-w-figure > span { color: var(--muted); font-size: var(--dcc-fs-sm); }

/* temperature: big number, ruler (Sellution "living room") */
.ih-w-temp { align-items: center; text-align: center; padding-bottom: 12px; }
    .ih-w-temp > header { align-self: stretch; }
.ih-w-temp-big { position: relative; margin-top: 6px; font-size: clamp(3.6rem, 2.6rem + 2.4vw, 5rem); font-weight: 200; line-height: 1; letter-spacing: -.04em; }
    .ih-w-temp-big sup { position: absolute; top: .08em; font-size: .5em; font-weight: 300; }
.ih-w-temp-sub { color: var(--muted); font-size: var(--dcc-fs-sm); }
.ih-w-temp.is-alert .ih-w-temp-sub { color: var(--err-t); }
.ih-w-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 5px 13px; border: 1px solid var(--frost-line); border-radius: 999px; background: var(--frost-hi); font-size: var(--dcc-fs-xs); }

.ih-ruler { position: relative; width: calc(100% + 40px); height: 96px; margin: 10px -20px -8px; overflow: hidden; direction: ltr;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.ih-ruler-track { position: absolute; inset-block: 0; left: 50%; }
    .ih-ruler-track i { position: absolute; bottom: 16px; left: var(--x); width: 2px; height: 16px; margin-left: -1px; border-radius: 2px; background: color-mix(in srgb, var(--txt) 26%, transparent); }
    .ih-ruler-track i.is-major { height: 30px; background: color-mix(in srgb, var(--txt) 50%, transparent); }
    .ih-ruler-track span { position: absolute; top: 8px; left: var(--x); transform: translateX(-50%); color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
    .ih-ruler-track span.is-now { color: var(--txt); font-weight: 600; }
.ih-ruler-sp { position: absolute; bottom: 8px; left: var(--x); width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun); }
.ih-ruler-sel { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 44px; margin-left: -22px; border: 1px solid var(--frost-line); border-radius: 15px; background: linear-gradient(180deg, var(--frost-hi), transparent); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55); }
    .ih-ruler-sel::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 3px; height: 36px; margin-left: -1.5px; border-radius: 3px; background: var(--txt); }

/* vents: glowing bar over a hatched track (Sellution "energy usage") */
.ih-hatchbar { position: relative; height: 46px; border: 1px solid var(--frost-line); border-radius: 14px; overflow: hidden; background: repeating-linear-gradient(-55deg, color-mix(in srgb, var(--txt) 20%, transparent) 0 2px, transparent 2px 8px), var(--frost-hi); }
    .ih-hatchbar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 13px; background: linear-gradient(90deg, #a3e635, #34d399); box-shadow: 0 0 28px -4px rgba(132, 204, 22, .6); transition: width 1.2s var(--dcc-e-out); animation: ih-grow 1.4s var(--dcc-e-out) both; }
[dir="rtl"] .ih-hatchbar i { background: linear-gradient(270deg, #a3e635, #34d399); }
.ih-w-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--dcc-fs-xs); direction: ltr; }
[dir="rtl"] .ih-w-scale { flex-direction: row-reverse; }

/* one-line switches (Sellution "Wi-Fi", "Kitchen") */
.ih-w-switch { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; }
.ih-w-ico { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: var(--ink-soft); color: var(--muted); transition: background .35s, color .35s, box-shadow .35s; }
.ih-w-switch.is-on .ih-w-ico { background: var(--tint-acc-2); color: var(--acc-t); box-shadow: 0 0 18px -6px var(--acc); }
.ih-w-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
    .ih-w-name b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ih-w-name small { color: var(--muted); font-size: var(--dcc-fs-xs); }

/* shade: lit arc of ticks (Sellution "lighting brightness") */
.ih-dial { display: block; width: 100%; height: auto; margin-top: auto; overflow: visible; }
    .ih-dial line { stroke: color-mix(in srgb, var(--txt) 16%, transparent); stroke-width: 6; stroke-linecap: round; }
    .ih-dial line.is-lit { stroke: #84cc16; filter: drop-shadow(0 0 4px rgba(132, 204, 22, .55)); animation: ih-tick-in .5s var(--dcc-e-out) both; animation-delay: calc(var(--i) * 35ms); }
    .ih-dial .knob { fill: #84cc16; filter: drop-shadow(0 0 8px #84cc16); }
[data-bs-theme="dark"] .ih-dial line.is-lit { stroke: #a3e635; }

/* chart of the last 24 h (Sellution "solar charge") */
.ih-w-chart { padding-bottom: 14px; }
.ih-w-chart-plot { position: relative; height: 120px; margin: 4px -20px 0; }
    .ih-w-chart-plot svg { display: block; width: 100%; height: 100%; }
    .ih-w-chart-plot .area { fill: url(#ih-area); }
    .ih-w-chart-plot .line { fill: none; stroke: #f97316; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ih-w-bubble { position: absolute; left: var(--bx); top: var(--by); transform: translate(-100%, calc(-100% - 14px)); padding: 7px 12px; border-radius: 12px; background: var(--txt); color: var(--bg); font-size: var(--dcc-fs-sm); font-weight: 600; white-space: nowrap; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5); }
.ih-w-dot { position: absolute; left: var(--bx); top: var(--by); width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 3px solid #fff; border-radius: 50%; background: #fb923c; box-shadow: 0 0 0 6px rgba(251, 146, 60, .25); animation: ih-live-dot 2.4s ease-out infinite; }
.ih-w-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--dcc-fs-2xs); }
[dir="rtl"] .ih-w-axis { flex-direction: row-reverse; }
.ih-w-chart-empty { display: grid; place-items: center; height: 120px; color: var(--muted); }


/* ══ under the stage: equipment table + attention ══════════════════════ */
.ih-below { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--dcc-s-4); align-items: start; }
.ih-side { display: flex; flex-direction: column; gap: var(--dcc-s-4); min-width: 0; }
.ih-equip-panel { padding-bottom: 6px; }
.ih-table-wrap { margin: 0 calc(var(--dcc-s-4) * -1); overflow-x: auto; }
.ih-table { width: 100%; border-collapse: collapse; font-size: var(--dcc-fs-sm); }
    .ih-table th { padding: 8px var(--dcc-s-4); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--dcc-fs-xs); font-weight: 500; text-align: start; white-space: nowrap; }
    .ih-table td { padding: 10px var(--dcc-s-4); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
    .ih-table tr:last-child td { border-bottom: 0; }
    .ih-table tbody tr { transition: background var(--dcc-t-base) var(--dcc-e-std); }
    .ih-table tbody tr:hover { background: var(--glass-2); }
.ih-dev { display: flex; align-items: center; gap: 12px; color: var(--txt); text-decoration: none; }
    .ih-dev > span:last-child { display: flex; flex-direction: column; min-width: 0; }
    .ih-dev b { font-weight: 500; }
    .ih-dev small { color: var(--muted); font-size: var(--dcc-fs-2xs); }
.ih-dev-ico { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: var(--s-2); color: var(--muted); transition: background .35s, color .35s; }
.ih-table tr.is-on .ih-dev-ico { background: color-mix(in srgb, var(--tone) 15%, transparent); color: var(--tone); }
.ih-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
    .ih-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; }
.ih-table tr.is-on .ih-state { color: var(--acc-t); }
    .ih-table tr.is-on .ih-state::before { opacity: 1; box-shadow: 0 0 0 3px var(--tint-acc); }
.ih-table tr.is-alarm .ih-state { color: var(--err-t); }
.ih-table td.is-go a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--muted); }
    .ih-table td.is-go a:hover { background: var(--s-2); color: var(--acc-t); }
[dir="rtl"] .ih-table td.is-go i, [dir="rtl"] .ih-link i { transform: scaleX(-1); }
.ih-side .ih-attn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dcc-s-2); }
.ih-side .ih-attn-item { padding: var(--dcc-s-3); border-radius: var(--dcc-r-md); }
.ih-side .ih-attn-ico { width: 36px; height: 36px; }
.ih-side .ih-attn-txt b { font-size: 1.25rem; }
.ih-link.is-block { margin-inline-start: 0; align-self: flex-start; }

@keyframes ih-grow { from { width: 0; } }
@keyframes ih-tick-in { from { opacity: 0; } }
@keyframes ih-live-dot { 0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, .5); } 80%, 100% { box-shadow: 0 0 0 12px rgba(251, 146, 60, 0); } }

/* a customer without a climate device: greeting and halls only, the side panels side by side */
.ih-stage.is-lean { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "intro" "halls"; min-height: 0; }
.ih-stage.is-lean .ih-widgets { display: none; }
.ih-below.is-lean { grid-template-columns: 1fr; }
    .ih-below.is-lean .ih-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }

/* smaller screens: greeting, halls, then the widgets in one column of two */
@media (max-width: 1199.98px) {
    .ih-stage { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "intro" "scene" "halls" "widgets"; min-height: 0; }
    .ih-below { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .ih-stage { gap: var(--dcc-s-4); padding-block: var(--dcc-s-2) var(--dcc-s-4); }
    .ih-stage-halls { padding: 10px; border-radius: 18px; }
    .ih-stage-halls-title { display: none; }
    .ih-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "temp temp" "vents vents" "pad fog" "circ circ" "shade shade" "chart chart"; gap: 10px; }
    .ih-w { padding: 16px; border-radius: 22px; }
    .ih-w-switch { padding: 12px; }
    .ih-w-switch .ih-w-ico { display: none; }
    .ih-table th.is-wide, .ih-table td.is-wide { display: none; }
}

/* ── needs attention ──────────────────────────────────────────── */
.ih-attn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dcc-s-3); }

.ih-attn-item {
    display: flex;
    align-items: center;
    gap: var(--dcc-s-3);
    padding: var(--dcc-s-4);
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-lg);
    background: var(--s-1);
    color: var(--txt);
    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);
}

    .ih-attn-item:hover { transform: translateY(-2px); box-shadow: var(--dcc-el-2); color: var(--txt); }

.ih-attn-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--dcc-r-sm); background: var(--s-2); color: var(--muted); font-size: 1.05rem; }
.ih-attn-txt { display: flex; flex-direction: column; min-width: 0; }
    .ih-attn-txt b { font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .ih-attn-txt b small { font-size: .85rem; color: var(--muted); font-weight: 700; }
    .ih-attn-txt > small { color: var(--muted); font-weight: 700; font-size: var(--dcc-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ih-attn-item.is-ok .ih-attn-ico { background: var(--tint-acc); color: var(--ok-t); }
.ih-attn-item.is-err { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); background: color-mix(in srgb, var(--err) 5%, var(--s-1)); }
    .ih-attn-item.is-err .ih-attn-ico { background: var(--tint-err); color: var(--err-t); }
    .ih-attn-item.is-err .ih-attn-txt b { color: var(--err-t); }

/* ── sections ─────────────────────────────────────────────────── */
.ih-section { display: flex; flex-direction: column; gap: var(--dcc-s-3); min-width: 0; }

.ih-section-head { display: flex; align-items: center; gap: var(--dcc-s-3); }
    .ih-section-head h2 { display: inline-flex; align-items: center; gap: var(--dcc-s-2); margin: 0; font-size: var(--dcc-fs-lg); font-weight: 800; color: var(--txt); }
    .ih-section-head h2 i { color: var(--acc-t); font-size: .95em; }

.ih-count { min-width: 26px; height: 24px; padding: 0 8px; border-radius: var(--dcc-r-pill); background: var(--tint-acc); color: var(--acc-t); font-size: var(--dcc-fs-xs); font-weight: 800; line-height: 24px; text-align: center; }

.ih-link { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; color: var(--acc-t); font-weight: 700; font-size: var(--dcc-fs-sm); text-decoration: none; }
    .ih-link i { font-size: .7rem; }
[dir="rtl"] .ih-link i, [dir="rtl"] .ih-go { transform: scaleX(-1); }

/* ── hall cards ───────────────────────────────────────────────── */
.ih-halls { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--dcc-s-4); }

.ih-hall {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 236px;
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-lg);
    background: var(--s-1);
    box-shadow: var(--dcc-el-1);
    overflow: hidden;
    transition: box-shadow var(--dcc-t-base) var(--dcc-e-out), border-color var(--dcc-t-base) var(--dcc-e-std);
}

    .ih-hall::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--acc), var(--acc-2)); }
    .ih-hall:hover { box-shadow: var(--dcc-el-2); }
    .ih-hall.is-alert { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
    .ih-hall.is-alert::before { background: var(--err); }
    .ih-hall.is-offline::before { background: var(--muted); }
    .ih-hall.is-offline .ih-hall-readings { opacity: .55; }

.ih-hall-head { display: flex; align-items: center; gap: var(--dcc-s-3); padding: var(--dcc-s-4) var(--dcc-s-4) 0; }

.ih-hall-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--dcc-r-sm); background: var(--tint-acc); color: var(--acc-t); }
.ih-hall-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .ih-hall-name b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ih-hall-name small { color: var(--muted); font-weight: 600; font-size: var(--dcc-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ih-live { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--muted); font-size: var(--dcc-fs-2xs); font-weight: 800; }
    .ih-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
    .ih-live.is-on { color: var(--ok-t); }
    .ih-live.is-on i { background: var(--ok); box-shadow: 0 0 0 0 var(--tint-acc-2); animation: ih-live 2s ease-out infinite; }
    .ih-live.is-off { color: var(--err-t); }
    .ih-live.is-off i { background: var(--err); }

.ih-hall-readings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dcc-s-3);
    margin: var(--dcc-s-4);
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
}

.ih-read {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ico val" "ico lbl";
    align-items: center;
    column-gap: var(--dcc-s-3);
    padding: var(--dcc-s-3);
    border-radius: var(--dcc-r-md);
    background: var(--s-2);
    transition: background var(--dcc-t-base) var(--dcc-e-std);
}

    .ih-hall-readings:hover .ih-read { background: var(--s-3); }
    .ih-read i { grid-area: ico; font-size: 1.2rem; }
    .ih-read b { grid-area: val; font-size: 1.6rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--txt); }
    .ih-read b small { font-size: .8rem; color: var(--muted); font-weight: 700; margin-inline-start: 2px; }
    .ih-read em { grid-area: lbl; font-style: normal; color: var(--muted); font-size: var(--dcc-fs-2xs); font-weight: 700; }
    .ih-read.is-temp i { color: var(--warm-t); }
    .ih-read.is-hum i { color: var(--cool-t); }
    .ih-read.is-err { background: var(--tint-err); }
    .ih-read.is-err b, .ih-read.is-err i { color: var(--err-t); }

.ih-equip { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--dcc-s-3) var(--dcc-s-4) 0; min-height: 34px; }

.ih-eq {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-pill);
    color: var(--muted);
    font-size: var(--dcc-fs-xs);
    font-weight: 700;
}

    .ih-eq b { font-weight: 800; }
    .ih-eq.is-heat.is-on { border-color: var(--warm); background: var(--tint-warm); color: var(--warm-t); }
    .ih-eq.is-fan.is-on { border-color: var(--cool); background: var(--tint-cool); color: var(--cool-t); }
    .ih-eq.is-fan.is-on i { animation: ih-spin 1.4s linear infinite; }
    .ih-eq.is-err.is-on { border-color: var(--err); background: var(--tint-err); color: var(--err-t); }
    .ih-eq.is-stale { opacity: .5; }
    .ih-eq.is-quiet { border-style: dashed; }
    .ih-eq.is-quiet i { color: var(--ok-t); }

.ih-hall-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    margin-top: auto;
    padding-top: var(--dcc-s-4);
}

    .ih-hall-actions button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 4px 12px;
        border: 0;
        border-top: 1px solid var(--line);
        background: transparent;
        color: var(--muted);
        font-size: var(--dcc-fs-2xs);
        font-weight: 700;
        transition: background var(--dcc-t-base) var(--dcc-e-std), color var(--dcc-t-base) var(--dcc-e-std);
    }

    .ih-hall-actions button + button { border-inline-start: 1px solid var(--line); }
    .ih-hall-actions button i { font-size: .95rem; }
    .ih-hall-actions button:hover { background: var(--tint-acc); color: var(--acc-t); }
    .ih-hall-actions span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── modules + monitoring ─────────────────────────────────────── */
.ih-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--dcc-s-3); }

.ih-module {
    display: flex;
    align-items: center;
    gap: var(--dcc-s-3);
    min-height: 74px;
    padding: var(--dcc-s-3) var(--dcc-s-4);
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-lg);
    background: var(--s-1);
    color: var(--txt);
    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);
}

    a.ih-module:hover { transform: translateY(-2px); box-shadow: var(--dcc-el-2); border-color: var(--tone); color: var(--txt); }
    .ih-module.tone-accent { --tone: var(--acc); --tone-tint: var(--tint-acc); }
    .ih-module.tone-warning { --tone: var(--warm); --tone-tint: var(--tint-warm); }
    .ih-module.tone-info { --tone: var(--cool); --tone-tint: var(--tint-cool); }
    .ih-module.is-locked { opacity: .55; border-style: dashed; }

.ih-module-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--dcc-r-md); background: var(--tone-tint); color: var(--tone); font-size: 1.15rem; }
.ih-module-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .ih-module-txt b { font-weight: 800; }
    .ih-module-txt small { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 600; font-size: var(--dcc-fs-xs); }
.ih-go { color: var(--muted); font-size: .7rem; }

.ih-mon-bar { height: 10px; border-radius: var(--dcc-r-pill); }

.ih-mon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

    .ih-mon-list button {
        display: flex;
        align-items: center;
        gap: var(--dcc-s-3);
        width: 100%;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: var(--dcc-r-sm);
        background: var(--tint-err);
        color: var(--txt);
        text-align: start;
    }

    .ih-mon-list button:hover { border-color: var(--err); }
    .ih-mon-list i { width: 20px; text-align: center; color: var(--err-t); }
    .ih-mon-list span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .ih-mon-list b { font-weight: 700; font-size: var(--dcc-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ih-mon-list small { color: var(--muted); font-size: var(--dcc-fs-2xs); font-weight: 600; }
    .ih-mon-list em { font-style: normal; font-weight: 800; color: var(--err-t); }

.ih-mon-ok { display: flex; align-items: center; gap: var(--dcc-s-2); color: var(--ok-t); font-weight: 700; }


/* heater units row */
.ih-units {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dcc-s-2);
    padding: var(--dcc-s-3) var(--dcc-s-4);
    border: 1px dashed var(--line);
    border-radius: var(--dcc-r-lg);
    background: var(--s-1);
    color: var(--txt);
    text-decoration: none;
}

    .ih-units:hover { border-color: var(--warm); color: var(--txt); }
.ih-units-title { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: var(--dcc-s-2); font-weight: 800; font-size: var(--dcc-fs-sm); }
    .ih-units-title i { color: var(--warm-t); }

.ih-unit {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--s-2);
    color: var(--muted);
    transition: background var(--dcc-t-slow) var(--dcc-e-std), transform var(--dcc-t-base) var(--dcc-e-out);
}

    .ih-unit-flame { font-size: 1.25rem; opacity: .45; transform-origin: 50% 100%; }
    .ih-unit-fan { position: absolute; top: 5px; inset-inline-end: 5px; font-size: .62rem; opacity: .4; }
    .ih-unit-fan.is-on { color: var(--cool-t); opacity: 1; animation: ih-spin 1s linear infinite; }
    .ih-unit b { position: absolute; bottom: 3px; inset-inline-start: 7px; font-size: 10px; font-weight: 800; }
    .ih-unit.is-on { background: linear-gradient(160deg, #fb923c, #ef4444); color: #fff; box-shadow: 0 10px 20px -10px rgba(239, 68, 68, .7); }
    .ih-unit.is-on .ih-unit-flame { opacity: 1; animation: ih-flicker .8s ease-in-out infinite alternate; }
    .ih-unit.is-on .ih-unit-fan.is-on { color: #fff; }
    .ih-unit.is-err { background: var(--tint-err); color: var(--err-t); box-shadow: inset 0 0 0 2px var(--err); }
    .ih-unit.is-err .ih-unit-flame { opacity: 1; }
    .ih-unit.is-dis { opacity: .35; }
    .ih-unit.is-nodata { opacity: .55; border: 1px dashed var(--line); background: transparent; }

/* tone of icons */
.iot-home .tone-acc { --tone: var(--acc); }
.iot-home .tone-cool { --tone: var(--cool); }
.iot-home .tone-warm { --tone: var(--warm); }
.iot-home .tone-err { --tone: var(--err); }


.ih-panel {
    display: flex;
    flex-direction: column;
    gap: var(--dcc-s-3);
    min-width: 0;
    padding: var(--dcc-s-4);
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-xl);
    background: var(--s-1);
    box-shadow: var(--dcc-el-1);
}

    .ih-panel .ih-mon { padding: 0; border: 0; }

@media (max-width: 991.98px) {
    .ih-halls { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

@media (max-width: 575.98px) {
    .iot-home { gap: var(--dcc-s-4); }
    .ih-halls, .ih-modules { grid-template-columns: 1fr; }
    .ih-unit { width: 46px; height: 46px; }
}

@keyframes ih-shimmer { to { background-position: -200% 0; } }
@keyframes ih-spin { to { transform: rotate(360deg); } }
@keyframes ih-live { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 80%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
@keyframes ih-flicker { from { transform: scale(1, .9); } to { transform: scale(1.06, 1.08); } }

/* motion off (system "reduce motion" or the in-app switch, see data-motion in App.razor) */
:root[data-motion="off"] .iot-home *, :root[data-motion="off"] .iot-home *::before { animation: none !important; transition: none !important; }

/* Font Awesome glyphs are wider than their advance box at small sizes: give every inline icon its own width,
   or in flex rows (and in RTL especially) the glyph runs over the text next to it */
.iot-home i.fa { flex: 0 0 auto; min-width: 1.2em; text-align: center; }

/* ══ right now · other sensors · activity ══════════════════════════════════════════════════════
   Three cards every customer sees (inside, outside, system), the halls with their last 24 h, the other
   sensors as tiles, then events / scenarios / heater units. Same frosted surface as the rest. */
.iot-home :is(.ih-card, .ih-tile) {
    border: 1px solid 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);
}

.ih-head-sub { color: var(--muted); font-size: var(--dcc-fs-sm); }

.ih-now { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr); gap: var(--dcc-s-4); align-items: stretch; }
.ih-activity { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--dcc-s-4); align-items: start; }

.ih-card { display: flex; flex-direction: column; gap: var(--dcc-s-4); min-width: 0; padding: var(--dcc-s-5); border-radius: var(--dcc-r-xl); color: var(--txt); }
.ih-card.is-alert { border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.ih-card-head { display: flex; align-items: center; gap: var(--dcc-s-3); flex-wrap: wrap; }
.ih-card-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; background: color-mix(in srgb, var(--tone, var(--acc)) 14%, transparent); color: color-mix(in srgb, var(--tone, var(--acc)) 70%, var(--txt)); font-size: 1.05rem; }
.ih-card-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .ih-card-title b { font-size: var(--dcc-fs-lg); font-weight: 800; }
    .ih-card-title small { color: var(--muted); font-size: var(--dcc-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ih-card-title small.is-ok { color: var(--ok-t); font-weight: 700; }
    .ih-card-title small.is-err { color: var(--err-t); font-weight: 700; }
.ih-card-head .ih-link { margin-inline-start: auto; }

.ih-in-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dcc-s-5); }
.ih-in-main.is-silent { opacity: .62; }
.ih-in-big { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
    .ih-in-big b { font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
    .ih-in-big sup { font-size: .4em; font-weight: 700; margin-inline-start: 2px; }
.ih-state { display: inline-flex; align-items: center; gap: 7px; font-size: var(--dcc-fs-sm); font-weight: 700; }
    .ih-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
    .ih-state.is-ok { color: var(--ok-t); }
    .ih-state.is-err { color: var(--err-t); }
    .ih-state.is-unk { color: var(--muted); }
.ih-in-metrics { flex: 1 1 260px; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--dcc-s-2); }
.ih-metric { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--dcc-r-md); background: color-mix(in srgb, var(--tone, var(--acc)) 11%, transparent); }
    .ih-metric small { color: var(--muted); font-size: var(--dcc-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ih-metric b { font-size: 1.35rem; font-weight: 800; color: color-mix(in srgb, var(--tone, var(--acc)) 72%, var(--txt)); }
    .ih-metric em { font-style: normal; font-size: .55em; font-weight: 600; }
.iot-home .tone-vio { --tone: var(--vio); }

.ih-trend { display: flex; flex-direction: column; gap: 4px; }
.ih-trend-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; color: var(--muted); font-size: var(--dcc-fs-xs); }
    .ih-trend-head .is-cool { color: var(--cool-t); }
    .ih-trend-head .is-warm { color: var(--warm-t); }
.ih-spark { display: block; width: 100%; height: 64px; overflow: visible; }
    .ih-spark polyline { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
    .ih-spark polygon { fill: var(--tint-acc); stroke: none; }
    .ih-spark.is-cool polyline { stroke: var(--cool); }

button.ih-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: var(--dcc-fs-sm); cursor: pointer; }
.ih-link.is-start { margin-inline-start: 0; margin-top: auto; align-self: flex-start; }
.ih-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--dcc-r-md); background: var(--ink-soft); color: var(--muted); font-size: var(--dcc-fs-sm); line-height: 1.6; }
.ih-hint.is-warn { background: var(--tint-pend); color: var(--pend-t); font-weight: 600; }
.ih-pill { margin-inline-start: auto; padding: 5px 10px; border-radius: var(--dcc-r-pill); background: color-mix(in srgb, var(--tone, var(--acc)) 13%, transparent); color: color-mix(in srgb, var(--tone, var(--acc)) 70%, var(--txt)); font-size: var(--dcc-fs-xs); font-weight: 700; white-space: nowrap; }

.ih-wx-main { display: flex; align-items: center; gap: var(--dcc-s-4); }
    .ih-wx-main > b { font-size: 2.8rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
    .ih-wx-main sup { font-size: .42em; }
    .ih-wx-main > span { display: flex; flex-direction: column; gap: 2px; }
    .ih-wx-main strong { font-size: var(--dcc-fs-lg); }
    .ih-wx-main small { color: var(--muted); font-size: var(--dcc-fs-xs); }
.ih-wx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dcc-s-2); }
    .ih-wx-facts span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--dcc-r-sm); background: var(--ink-soft); }
    .ih-wx-facts small { color: var(--muted); font-size: var(--dcc-fs-xs); }
    .ih-wx-facts b { font-weight: 800; white-space: nowrap; }
.ih-wx-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding-top: var(--dcc-s-3); border-top: 1px solid var(--line); text-align: center; }
    .ih-wx-hours span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .ih-wx-hours small { color: var(--muted); font-size: var(--dcc-fs-xs); }
    .ih-wx-hours i { color: var(--sun); }
    .ih-wx-hours b { font-size: var(--dcc-fs-md); }
.ih-wx-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--dcc-fs-sm); }
    .ih-wx-days li { display: flex; align-items: center; gap: 10px; }
    .ih-wx-days span { width: 72px; color: var(--muted); }
    .ih-wx-days i { color: var(--sun); }
    .ih-wx-days em { flex: 1; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ih-wx-days b { font-weight: 700; white-space: nowrap; }

.ih-health .ih-attn { grid-template-columns: 1fr; gap: var(--dcc-s-2); }
.ih-health .ih-attn-item { padding: var(--dcc-s-3); border-radius: var(--dcc-r-md); }

.ih-hall-trend { display: flex; flex-direction: column; gap: 2px; padding-inline: var(--dcc-s-4); }
    .ih-hall-trend .ih-spark { height: 36px; }
    .ih-hall-trend small { color: var(--muted); font-size: var(--dcc-fs-xs); }
.ih-hall.is-silent { opacity: .75; }
    .ih-hall.is-silent .ih-hall-readings { cursor: default; }
    .ih-hall.is-silent .ih-hint { margin: 0 var(--dcc-s-4) var(--dcc-s-4); }

.ih-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--dcc-s-3); }
.ih-tile { display: flex; flex-direction: column; gap: 6px; padding: var(--dcc-s-4); border-radius: var(--dcc-r-lg); color: var(--txt); font: inherit; text-align: start; cursor: pointer; transition: transform .2s var(--ease-soft); }
    .ih-tile:hover { transform: translateY(-2px); }
    .ih-tile.is-alert { border-color: color-mix(in srgb, var(--err) 50%, transparent); }
    .ih-tile-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--dcc-fs-xs); min-width: 0; }
    .ih-tile-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ih-tile-head i { color: var(--cool-t); }
    .ih-tile > b { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
    .ih-tile > b em { font-style: normal; font-size: .5em; color: var(--muted); font-weight: 600; }
    .ih-tile .ih-spark { height: 30px; }
    .ih-tile > small { color: var(--muted); font-size: var(--dcc-fs-xs); }

.ih-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--dcc-s-3); }
    .ih-events li { display: flex; gap: var(--dcc-s-3); align-items: flex-start; }
.ih-ev-dot { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; background: color-mix(in srgb, var(--tone) 14%, transparent); color: color-mix(in srgb, var(--tone) 70%, var(--txt)); font-size: .8rem; }
.ih-ev-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: var(--dcc-fs-sm); }
    .ih-ev-txt b { font-weight: 600; flex: 1 1 100%; }
    .ih-ev-txt em { font-style: normal; color: var(--ok-t); font-size: var(--dcc-fs-xs); font-weight: 700; }
    .ih-ev-txt small { color: var(--muted); font-size: var(--dcc-fs-xs); }

.ih-scen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .ih-scen li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--dcc-r-md); background: var(--ink-soft); font-size: var(--dcc-fs-sm); }
    .ih-scen li > i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
    .ih-scen li.is-on > i { background: var(--acc); box-shadow: 0 0 0 4px var(--tint-acc); }
    .ih-scen b { flex: 1; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ih-scen small { color: var(--muted); font-size: var(--dcc-fs-xs); white-space: nowrap; }
.ih-cta { align-self: flex-start; flex: 0 0 auto; }

.ih-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: var(--dcc-fs-sm); }
.ih-more-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--dcc-r-pill); color: var(--txt); font-weight: 600; }
    .ih-more-item i { color: var(--muted); }
    .ih-more-item small { color: var(--acc-t); font-size: var(--dcc-fs-xs); }
    .ih-more-item small.is-soon { color: var(--pend-t); }

@media (max-width: 1199.98px) {
    .ih-now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ih-now .ih-in { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .ih-now { grid-template-columns: 1fr; }
    .ih-card { padding: var(--dcc-s-4); }
    .ih-wx-hours { grid-template-columns: repeat(6, 52px); overflow-x: auto; }
}