/* ══════════════════════════════════════════════════════════════
   IoT app shell (MainLayout): side rail, top bar, phone tab bar — prefix iot-
   Colours from ui-tokens.css (.iot), sizes / motion / elevation from dcc-tokens.css.
   ══════════════════════════════════════════════════════════════ */

.iot-app {
    --rail-w: 252px;
    --rail-w-min: 76px;
    --top-h: 68px;
    --tabs-h: 64px;
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    color: var(--txt);
    background: var(--bg);
    isolation: isolate;
}

    /* soft colour glows behind everything */
    .iot-app::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(60rem 30rem at 90% -10%, var(--glow-a), transparent 60%),
            radial-gradient(50rem 30rem at -10% 30%, var(--glow-b), transparent 60%);
    }

    .iot-app.is-collapsed { --rail-w: var(--rail-w-min); }

/* body is a fixed-height flex column (Bootstrap): the shell must not shrink to it, or content spills out and the sticky rail scrolls away */
#fb_app_root.iot-app { flex: 1 0 auto; }

.iot-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.iot-content { flex: 1 0 auto; padding-block: var(--dcc-s-5) var(--dcc-s-8); }

/* ── shared small controls ──────────────────────────────────── */
.iot-icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--s-1);
    box-shadow: var(--sh-1);
    color: var(--muted);
    font-size: 1rem;
    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(--ease-soft);
}

    .iot-icon-btn:hover { background: var(--s-2); color: var(--txt); }
    .iot-icon-btn:active { transform: scale(.94); }
    .iot-rail .iot-icon-btn { border-color: transparent; background: transparent; box-shadow: none; }

.iot-avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--vio), var(--cool));
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    flex: 0 0 auto;
}

    .iot-avatar.is-lg { width: 44px; height: 44px; font-size: 1rem; }

/* ── side rail ──────────────────────────────────────────────── */
.iot-rail {
    position: sticky;
    top: 0;
    z-index: 105;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--rail-w);
    width: var(--rail-w);
    height: 100vh;
    border-inline-end: 1px solid var(--line);
    background: linear-gradient(180deg, var(--glass-2), transparent 40%), color-mix(in srgb, var(--s-1) 70%, var(--bg));
    transition: width var(--dcc-t-slow) var(--dcc-e-std), flex-basis var(--dcc-t-slow) var(--dcc-e-std), transform var(--dcc-t-slow) var(--dcc-e-out);
}

.iot-rail-brand {
    display: flex;
    align-items: center;
    gap: var(--dcc-s-2);
    min-height: var(--top-h);
    padding: 0 var(--dcc-s-4);
}

.iot-rail-logo {
    display: flex;
    align-items: center;
    gap: var(--dcc-s-3);
    flex: 1;
    min-width: 0;
    color: var(--txt);
    font-weight: 800;
    font-size: var(--dcc-fs-md);
    text-decoration: none;
}

    .iot-rail-logo img { width: 40px; height: 40px; padding: 6px; border: 1px solid var(--line); border-radius: 13px; background: var(--s-1); box-shadow: 0 8px 20px -10px var(--acc); object-fit: contain; flex: 0 0 auto; }
    .iot-rail-logo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .iot-rail-logo:hover { color: var(--acc-t); }

.iot-rail-collapse i { transition: transform var(--dcc-t-slow) var(--dcc-e-std); }
[dir="rtl"] .iot-rail-collapse i { transform: scaleX(-1); }
.iot-app.is-collapsed .iot-rail-collapse i { transform: scaleX(-1); }
[dir="rtl"] .iot-app.is-collapsed .iot-rail-collapse i { transform: none; }
.iot-rail-close { display: none; }

.iot-rail-nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--dcc-s-3) var(--dcc-s-3) var(--dcc-s-6);
    scrollbar-width: thin;
}

.iot-rail-group + .iot-rail-group { margin-top: var(--dcc-s-4); }

.iot-rail-title {
    padding: 0 var(--dcc-s-3) var(--dcc-s-2);
    color: var(--muted);
    font-size: var(--dcc-fs-2xs);
    font-weight: 800;
    letter-spacing: var(--dcc-tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
}

.iot-rail-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--dcc-s-3);
    min-height: 44px;
    padding: 0 var(--dcc-s-3);
    border-radius: 14px;
    color: var(--muted);
    font-weight: 500;
    font-size: var(--dcc-fs-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dcc-t-base) var(--dcc-e-std), color var(--dcc-t-base) var(--dcc-e-std);
}

    .iot-rail-link i { width: 20px; text-align: center; color: var(--muted); font-size: .95rem; flex: 0 0 auto; }
    .iot-rail-link span { overflow: hidden; text-overflow: ellipsis; }
    .iot-rail-link:hover { background: var(--glass-2); color: var(--txt); }
    .iot-rail-link.is-active { background: linear-gradient(90deg, var(--tint-acc), transparent); color: var(--txt); }
    [dir="rtl"] .iot-rail-link.is-active { background: linear-gradient(270deg, var(--tint-acc), transparent); }
    .iot-rail-link.is-active i { color: var(--acc-t); }

    .iot-rail-link.is-active::before {
        content: '';
        position: absolute;
        inset-block: 9px;
        inset-inline-start: -12px;
        width: 3px;
        border-radius: 0 4px 4px 0;
        background: var(--acc);
        box-shadow: 0 0 12px var(--acc);
    }

[dir="rtl"] .iot-rail-link.is-active::before { border-radius: 4px 0 0 4px; }

.iot-rail-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 6px;
    padding-inline-start: 22px;
    border-inline-start: 2px solid var(--line);
    margin-inline-start: 22px;
}

    .iot-rail-sub a {
        display: flex;
        align-items: center;
        gap: var(--dcc-s-2);
        min-height: 34px;
        padding: 0 var(--dcc-s-3);
        border-radius: var(--dcc-r-xs);
        color: var(--muted);
        font-size: var(--dcc-fs-xs);
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    .iot-rail-sub a i { width: 16px; text-align: center; font-size: .8rem; }
    .iot-rail-sub a:hover { color: var(--txt); background: var(--s-2); }
    .iot-rail-sub a.is-active { color: var(--acc-t); }

/* collapsed rail: icons only, labels as tooltips (title) */
@media (min-width: 992px) {
    .iot-app.is-collapsed .iot-rail-brand { padding: 0; justify-content: center; flex-direction: column; gap: 4px; padding-block: 8px; }
    .iot-app.is-collapsed .iot-rail-logo { flex: 0 0 auto; justify-content: center; }
    .iot-app.is-collapsed .iot-rail-logo span,
    .iot-app.is-collapsed .iot-rail-link span,
    .iot-app.is-collapsed .iot-rail-sub { display: none; }
    .iot-app.is-collapsed .iot-rail-title { height: 1px; padding: 0; margin: var(--dcc-s-2) var(--dcc-s-3); overflow: hidden; background: var(--line); color: transparent; }
    .iot-app.is-collapsed .iot-rail-link { justify-content: center; padding: 0; }
}

.iot-scrim { display: none; }

/* ── top bar (page title + filters + actions) ──────────────── */
.iot-top {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--dcc-s-3);
    min-height: var(--top-h);
    padding: 8px clamp(16px, 2.2vw, 40px);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 76%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}

.iot-top-menu { display: none; }

.iot-top-page {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dcc-s-3);
}

    .iot-top-page .page-title { min-width: 0; }
    .iot-top-page .page-heading { font-size: 1.2rem !important; }

.iot-top-actions { display: flex; align-items: center; gap: var(--dcc-s-2); flex: 0 0 auto; }

.iot-bell b {
    position: absolute;
    top: 2px;
    inset-inline-end: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--dcc-r-pill);
    background: var(--err);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.iot-bell.has-alerts i { color: var(--err-t); animation: iot-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }

.iot-user {
    display: flex;
    align-items: center;
    gap: var(--dcc-s-2);
    height: 42px;
    padding: 3px 10px 3px 4px;
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-pill);
    background: var(--s-1);
    color: var(--txt);
    font-weight: 700;
    font-size: var(--dcc-fs-sm);
}

[dir="rtl"] .iot-user { padding: 3px 4px 3px 10px; }
.iot-user > i { color: var(--muted); font-size: .8rem; }
.iot-user-name { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* popovers (theme, user) */
.iot-pop-wrap { position: relative; }

.iot-pop {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--dcc-r-md);
    background: var(--s-1);
    box-shadow: var(--dcc-el-3);
    animation: iot-pop var(--dcc-t-base) var(--dcc-e-out);
}

    .iot-pop.is-user { min-width: 240px; }

    .iot-pop > a, .iot-pop > button {
        display: flex;
        align-items: center;
        gap: var(--dcc-s-3);
        min-height: 40px;
        padding: 0 var(--dcc-s-3);
        border: 0;
        border-radius: var(--dcc-r-xs);
        background: transparent;
        color: var(--txt);
        font-weight: 600;
        font-size: var(--dcc-fs-sm);
        text-align: start;
        text-decoration: none;
    }

    .iot-pop > a i, .iot-pop > button i { width: 18px; text-align: center; color: var(--muted); }
    .iot-pop > a:hover, .iot-pop > button:hover { background: var(--s-2); color: var(--txt); }

.iot-pop-head { display: flex; align-items: center; gap: var(--dcc-s-3); padding: var(--dcc-s-3); margin-bottom: 4px; border-bottom: 1px solid var(--line); }
    .iot-pop-head b { display: block; font-size: var(--dcc-fs-sm); }
    .iot-pop-head small { color: var(--muted); font-weight: 600; }

.iot-pop-scrim { position: fixed; inset: 0; z-index: 99; }

/* light / dark switch: a knob slides under the active icon */
.iot-theme {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--s-1);
    box-shadow: var(--sh-1);
}

    .iot-theme button {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 34px;
        height: 30px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--muted);
        transition: color var(--dcc-t-base) var(--dcc-e-std);
    }

    .iot-theme .knob {
        position: absolute;
        top: 4px;
        bottom: 4px;
        inset-inline-start: 4px;
        width: 34px;
        border-radius: 10px;
        background: var(--s-3);
        box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35);
        transition: inset-inline-start var(--dcc-t-slow) var(--ease-soft);
    }

/* the knob sits under the stored choice: light, system (middle) or dark */
[data-theme-mode="system"] .iot-theme .knob { inset-inline-start: 38px; }
[data-theme-mode="dark"] .iot-theme .knob { inset-inline-start: 72px; }
:root:not([data-theme-mode="system"]):not([data-theme-mode="dark"]) .iot-theme .is-light,
[data-theme-mode="system"] .iot-theme .is-system,
[data-theme-mode="dark"] .iot-theme .is-dark { color: var(--txt); }

/* the theme row of the user menu is for phones only (the top bar has the switch) */
.iot-pop-row.is-theme { display: none; }

/* ── phone tab bar ──────────────────────────────────────────── */
.iot-tabs { display: none; }

/* ── phones and tablets: rail becomes a drawer, tabs at the bottom ── */
@media (max-width: 991.98px) {
    .iot-app { --top-h: 60px; }

    .iot-rail {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(300px, 86vw);
        flex-basis: auto;
        box-shadow: var(--dcc-el-4);
        transform: translateX(-105%);
    }

    [dir="rtl"] .iot-rail { transform: translateX(105%); }
    .iot-app.is-drawer .iot-rail { transform: none; }

    .iot-rail-collapse { display: none; }
    .iot-rail-close { display: inline-grid; }

    .iot-scrim {
        position: fixed;
        inset: 0;
        z-index: 104;
        background: rgba(15, 23, 42, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dcc-t-slow) var(--dcc-e-std);
    }

    .iot-app.is-drawer .iot-scrim { display: block; opacity: 1; pointer-events: auto; }

    .iot-top { padding: 6px 12px; gap: var(--dcc-s-2); }
    .iot-top-menu { display: inline-grid; }
    .iot-top-page .page-breadcrumb-clip { display: none; }
    .iot-user-name, .iot-user > i { display: none; }
    .iot-user { padding: 3px; border: 0; background: transparent; }

    .iot-content { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 10px + var(--dcc-s-5)); }
    /* phones: the theme choice moves into the user menu, to leave room for the page title */
    .iot-theme { display: none; }
    .iot-pop-row.is-theme { display: flex; }

    /* the "install app" button sits above the floating tab bar */
    body:has(.iot-tabs) .pwa-install-container { bottom: calc(var(--tabs-h, 64px) + 22px + env(safe-area-inset-bottom, 0px)); }

    /* floating glass pill above the bottom edge */
    .iot-tabs {
        position: fixed;
        inset-inline: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 102;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 2px;
        height: var(--tabs-h);
        padding: 6px;
        border: 1px solid var(--glass-line);
        border-radius: 22px;
        background: var(--glass);
        box-shadow: var(--sh-2);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        backdrop-filter: blur(18px) saturate(1.4);
    }

    .iot-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: transparent;
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 700;
        text-decoration: none;
    }

        .iot-tab i { font-size: 1.1rem; }
        .iot-tab span { max-width: 100%; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .iot-tab { border-radius: 16px; transition: background var(--dcc-t-base) var(--dcc-e-std), color var(--dcc-t-base) var(--dcc-e-std); }
        .iot-tab.is-active { color: var(--acc-t); background: var(--tint-acc); }

    /* a system whose pages are not built yet: greyed, not a link, a small "soon" pill over the icon */
    .iot-tab.is-soon { color: var(--muted); opacity: .6; cursor: default; }
        .iot-tab.is-soon > i { filter: grayscale(1); }
    .iot-tab-soon {
        position: absolute;
        top: 3px;
        inset-inline-start: calc(50% + 2px);
        padding: 0 4px;
        border-radius: var(--dcc-r-pill);
        background: var(--s-3);
        color: var(--muted);
        font-size: 8px;
        font-weight: 700;
        line-height: 13px;
        white-space: nowrap;
    }

    .iot-tab-badge {
        position: absolute;
        top: 6px;
        inset-inline-start: calc(50% + 4px);
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: var(--dcc-r-pill);
        background: var(--err);
        color: #fff;
        font-size: 10px;
        line-height: 17px;
        text-align: center;
    }
}

@keyframes iot-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes iot-ring { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(14deg); } 93% { transform: rotate(-12deg); } 96% { transform: rotate(6deg); } }

/* motion off (system "reduce motion" or the in-app switch, see data-motion in App.razor) */
:root[data-motion="off"] :is(.iot-rail, .iot-scrim, .iot-pop) { transition: none; animation: none; }
:root[data-motion="off"] .iot-bell.has-alerts i { animation: none; }

/* main categories and categories still to come */
.iot-rail-link.is-main { font-weight: 800; }
.iot-rail-link.is-soon { color: var(--muted); cursor: default; opacity: .7; }
    .iot-rail-link.is-soon:hover { background: transparent; color: var(--muted); }
    .iot-rail-link.is-soon small { margin-inline-start: auto; padding: 1px 8px; border-radius: var(--dcc-r-pill); background: var(--s-3); font-size: var(--dcc-fs-2xs); font-weight: 700; }

@media (min-width: 992px) {
    .iot-app.is-collapsed .iot-rail-link.is-soon small { display: none; }
}

/* user menu: animations setting (system / on / off) */
.iot-pop-row { display: flex; align-items: center; justify-content: space-between; gap: var(--dcc-s-3); padding: 6px var(--dcc-s-3); color: var(--txt); font-size: var(--dcc-fs-sm); font-weight: 600; }
    .iot-pop-row > span { display: inline-flex; align-items: center; gap: var(--dcc-s-3); }
    .iot-pop-row > span i { width: 18px; text-align: center; color: var(--muted); }

.iot-mini-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--s-2); }
    .iot-mini-seg button { height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: var(--dcc-fs-xs); font-weight: 600; white-space: nowrap; }
    .iot-mini-seg button.is-active { background: var(--s-1); color: var(--acc-t); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .4); }
[data-bs-theme="dark"] .iot-mini-seg button.is-active { background: var(--s-3); }

/* ── search filters drawer (PageTitlesAndAction): frosted sheet, numbered cascade, pinned actions ── */
.iot-app .toolbar-filter-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--s-1) !important;
    color: var(--acc-t) !important;
    box-shadow: var(--sh-1);
}

    .iot-app .toolbar-filter-btn .badge { background: var(--err) !important; box-shadow: 0 0 0 2px var(--s-1); }

.offcanvas.iot-filters {
    --bs-offcanvas-width: min(420px, 100vw);
    display: flex;
    flex-direction: column;
    border: 0;
    border-inline-start: 1px solid var(--glass-line);
    background: linear-gradient(180deg, var(--glass-2), transparent 30%), color-mix(in srgb, var(--s-1) 88%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: var(--sh-2);
    color: var(--txt);
}

.iot-filters-head { display: flex; align-items: center; gap: var(--dcc-s-3); padding: var(--dcc-s-5) var(--dcc-s-5) var(--dcc-s-4); }
.iot-filters-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; background: linear-gradient(140deg, var(--acc-2), var(--acc) 60%); color: #04241a; font-size: 1.05rem; box-shadow: 0 10px 22px -10px var(--acc); }
.iot-filters-title { flex: 1; min-width: 0; }
    .iot-filters-title h5 { margin: 0; color: var(--txt); font-size: 1.15rem; font-weight: 700; }
    .iot-filters-title small { display: block; color: var(--muted); font-size: var(--dcc-fs-xs); }
.iot-filters-close { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 13px; background: var(--s-1); color: var(--muted); transition: transform var(--dcc-t-base) var(--dcc-e-spring), color var(--dcc-t-base); }
    .iot-filters-close:hover { color: var(--txt); transform: rotate(90deg); }

.iot-filters-body { flex: 1; overflow-y: auto; padding: 0 var(--dcc-s-5) var(--dcc-s-5); }

/* what is chosen now */
.iot-filters-now { margin-bottom: var(--dcc-s-5); padding: var(--dcc-s-4); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--line)); border-radius: 18px; background: radial-gradient(20rem 8rem at 0% 0%, var(--tint-acc), transparent 70%), var(--s-2); }
.iot-filters-count { display: inline-flex; align-items: center; gap: 8px; color: var(--acc-t); font-size: var(--dcc-fs-sm); font-weight: 600; }
    .iot-filters-count b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 8px; background: var(--acc); color: #04241a; font-size: var(--dcc-fs-xs); }
.iot-filters-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--dcc-s-3); }
    .iot-filters-chips span { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--s-1); color: var(--txt); font-size: var(--dcc-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .iot-filters-chips i { color: var(--acc-t); font-size: .75rem; }

/* the cascade: numbered steps joined by a line */
.iot-filters-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: var(--dcc-s-4); }
.iot-filters-step { position: relative; counter-increment: step; padding-inline-start: 46px; }

    .iot-filters-step::before {
        content: counter(step);
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid var(--line-2);
        border-radius: 11px;
        background: var(--s-1);
        color: var(--muted);
        font-size: var(--dcc-fs-sm);
        font-weight: 700;
        transition: background var(--dcc-t-slow) var(--dcc-e-std), color var(--dcc-t-slow) var(--dcc-e-std);
    }

    .iot-filters-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 38px;
        bottom: calc(var(--dcc-s-4) * -1 + 6px);
        inset-inline-start: 15px;
        width: 2px;
        border-radius: 2px;
        background: var(--line-2);
    }

    .iot-filters-step.is-set::before { border-color: transparent; background: linear-gradient(140deg, var(--acc-2), var(--acc)); color: #04241a; box-shadow: 0 6px 14px -6px var(--acc); }
    .iot-filters-step.is-set:not(:last-child)::after { background: linear-gradient(180deg, var(--acc), var(--line-2)); }
    .iot-filters-step label { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 6px; color: var(--txt); font-size: var(--dcc-fs-sm); font-weight: 600; }
    .iot-filters-step label i { width: 16px; color: var(--muted); text-align: center; }

/* the selects (Choices.js) as soft fields */
.iot-filters .choices { margin: 0; }

.iot-filters .choices__inner,
.iot-filters .form-select {
    min-height: 50px;
    padding: 12px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background-color: var(--s-2) !important;
    color: var(--txt) !important;
    font-size: var(--dcc-fs-sm);
    transition: border-color var(--dcc-t-base) var(--dcc-e-std), box-shadow var(--dcc-t-base) var(--dcc-e-std);
}

.iot-filters .choices.is-focused .choices__inner,
.iot-filters .choices.is-open .choices__inner { border-color: var(--acc) !important; box-shadow: 0 0 0 4px var(--tint-acc); }
.iot-filters .choices__list--single { padding: 0 !important; }
.iot-filters .choices__list--single .choices__item { color: var(--txt); }
.iot-filters .choices__placeholder { color: var(--muted); opacity: 1; }
.iot-filters .choices[data-type*="select-one"]::after { border-color: var(--muted) transparent transparent; }

.iot-filters .choices__list--dropdown,
.iot-filters .choices__list[aria-expanded] {
    z-index: 20;
    margin-top: 6px;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: var(--s-1) !important;
    box-shadow: var(--sh-2);
    overflow: hidden;
}

.iot-filters .choices__list--dropdown .choices__item { padding: 10px 14px !important; color: var(--txt); font-size: var(--dcc-fs-sm); }
.iot-filters .choices__list--dropdown .choices__item.is-highlighted { background: var(--tint-acc) !important; color: var(--txt); }
.iot-filters .choices__input { border-radius: 10px; background: var(--s-2) !important; color: var(--txt); }

/* pinned actions */
.iot-filters-foot { display: flex; gap: var(--dcc-s-2); padding: var(--dcc-s-4) var(--dcc-s-5) calc(var(--dcc-s-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--s-1) 70%, transparent); }

.iot-filters-apply, .iot-filters-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 var(--dcc-s-5);
    border-radius: 14px;
    font-size: var(--dcc-fs-sm);
    font-weight: 600;
    transition: transform var(--dcc-t-base) var(--dcc-e-spring), box-shadow var(--dcc-t-base);
}

    .iot-filters-apply { flex: 1; border: 0; background: linear-gradient(140deg, var(--acc-2), var(--acc) 60%); color: #04241a; box-shadow: 0 12px 24px -12px var(--acc); }
    .iot-filters-apply:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -12px var(--acc); }
    .iot-filters-clear { border: 1px solid color-mix(in srgb, var(--err) 35%, var(--line)); background: var(--tint-err); color: var(--err-t); }
    .iot-filters-apply:active, .iot-filters-clear:active { transform: scale(.97); }

/* the steps arrive one after another when the drawer opens */
.offcanvas.iot-filters.show .iot-filters-step { animation: iot-step-in .5s var(--ease-soft) backwards; }
.iot-filters-step:nth-child(2) { animation-delay: .05s; }
.iot-filters-step:nth-child(3) { animation-delay: .1s; }
.iot-filters-step:nth-child(4) { animation-delay: .15s; }
@keyframes iot-step-in { from { opacity: 0; transform: translateY(10px); } }
:root[data-motion="off"] .iot-filters * { animation: none !important; transition: none !important; }

/* ── experimental module (AppNav Beta): a small violet tag ── */
.iot-beta, .iot-tab-soon.is-beta, .ih-beta, .htr-pill.is-beta {
    background: var(--tint-vio);
    color: color-mix(in srgb, var(--vio) 72%, var(--txt));
}

.iot-beta { margin-inline-start: auto; padding: 1px 8px; border-radius: var(--dcc-r-pill); font-size: var(--dcc-fs-2xs); font-weight: 700; }
.iot-app.is-collapsed .iot-beta { display: none; }
.ih-beta { display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; font-size: var(--dcc-fs-2xs); font-style: normal; font-weight: 700; vertical-align: middle; }

/* ── locked: an entry or page the selected customer has no device for (AppNav Feature, MainLayout) ── */
.iot-lock-ico { font-size: .7rem; color: var(--muted); }
.iot-rail-link.is-locked, .iot-rail-sub a.is-locked, .iot-tab.is-locked { color: var(--muted); opacity: .62; }
.iot-rail-link.is-locked > i:first-child, .iot-tab.is-locked > i:first-child { filter: grayscale(1); }
.iot-rail-link .iot-lock-ico, .iot-rail-sub .iot-lock-ico { margin-inline-start: auto; }
.iot-app.is-collapsed .iot-rail-link .iot-lock-ico { position: absolute; top: 6px; inset-inline-end: 8px; font-size: .55rem; }
.iot-tab { position: relative; }
.iot-tab .iot-lock-ico { position: absolute; top: 6px; inset-inline-start: calc(50% + 6px); font-size: .6rem; }

/* the page itself: grey, still and faded out under the note */
.iot-gate-wrap { position: relative; }
.iot-gate.is-locked {
    max-height: 72vh;
    overflow: hidden;
    filter: grayscale(1);
    opacity: .45;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
    mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
}

    .iot-gate.is-locked *, .iot-gate.is-locked *::before, .iot-gate.is-locked *::after { animation: none !important; transition: none !important; }

.iot-lock-card {
    position: absolute;
    z-index: 5;
    top: clamp(24px, 12vh, 120px);
    inset-inline: 0;
    width: min(440px, calc(100% - 32px));
    margin-inline: auto;
    padding: 26px 26px 24px;
    border: 1px solid var(--frost-line);
    border-radius: 26px;
    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), var(--sh-2);
    color: var(--txt);
    text-align: center;
    animation: ui-rise .5s var(--ease-soft) both;
}

    .iot-lock-card h2 { margin: 14px 0 6px; color: var(--txt); font-size: 1.2rem; font-weight: 700; }
    .iot-lock-card p { margin: 0 auto 18px; max-width: 36ch; color: var(--muted); line-height: 1.8; }
    .iot-lock-card .btn i { margin-inline-end: 8px; }

.iot-lock-card-ico {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--ink-soft);
    color: var(--muted);
    font-size: 1.4rem;
    box-shadow: inset 0 0 0 1px var(--line);
}

:root[data-motion="off"] .iot-lock-card { animation: none; }