@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Layout/CardDashboardComponent.razor.rz.scp.css */
.card-dashboard[b-mg75xw0rxw] {
    position: relative;
}

/* A DisplaySection .cards-section margin-top-ja felfelé collapse-elt és lejjebb tolta a kártya-blokkot.
   Itt kinullázzuk, így a kártyák teteje a sáv alatt, egyenletes térközzel kezdődik. */
.card-dashboard[b-mg75xw0rxw]  .cards-section {
    margin-top: 0;
}

/* ==== NÉZET MÓD: sima, doboz nélküli szerkesztő-gomb ====
   Jobbra igazított, minimális magasságú sor egyetlen sima (Plain) gombbal — nincs keret/árnyék, így a
   kártya-rács közel marad a fenti térkép/értesítés blokkokhoz (a régi ~50px-es dobozsáv helyett). */
.dashboard-editrow[b-mg75xw0rxw] {
    display: flex;
    justify-content: flex-end;
    margin-block: 0.25rem;
}

/* ==== SZERKESZTŐ SÁV (csak szerkesztő módban) ====
   A sáv magasságát a gombok egységes min-height-je adja. A gombok a sor ELEJÉN (balra), a tipp utánuk. */
.dashboard-editbar[b-mg75xw0rxw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block: 0.75rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--c-border-subtle);
    border-radius: 10px;
    background: var(--list-bg);
    box-shadow: 0 1px 3px var(--c-shadow-sm);
}

.dashboard-editbar__actions[b-mg75xw0rxw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Tipp a gombok után, a maradék helyet kitölti; EGY sor, túlcsordulásnál "…" (a teljes szöveg a title-ben)
   → nem növeli a sáv magasságát. */
.dashboard-editbar__hint[b-mg75xw0rxw] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-clr);
    font-size: 0.8rem;
}

/* Mobilon a gombok teljes szélességben, egyenlően osztozva; a tipp elrejtve helytakarékosságból. */
@media (max-width: 768px) {
    .dashboard-editbar__actions[b-mg75xw0rxw] {
        width: 100%;
    }

    .dashboard-editbar__actions[b-mg75xw0rxw]  .app-btn {
        flex: 1 1 auto;
    }

    .dashboard-editbar__hint[b-mg75xw0rxw] {
        display: none;
    }
}
/* /Layout/CoreSelector.razor.rz.scp.css */
.dropdown[b-yf7vycexdo] {
    /* status dots/borders: online -> globális --online-clr, offline -> --critical-clr */
    --offline-clr: var(--critical-clr);
    --online-clr: var(--c-success);
    position: relative;
    display: inline-block;
    width: 200px;
    user-select: none; /* Non-standard */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

    .dropdown button[b-yf7vycexdo] {
        background-color: var(--list-bg);
        color: var(--text-clr);
        padding: 5px 5px;
        font-size: 16px;
        border: var(--border-thin);
        border-radius: var(--list-border-radius);
        cursor: pointer;
        box-shadow: 0 1px 2px var(--c-shadow-xs), 0 2px 8px var(--c-shadow-xs);
        display: flex;
        align-items: center;
        width: 100%;
        /* height: 60px; */
        box-sizing: border-box;
        transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, border-radius 0.3s ease;
    }

        .dropdown button:hover[b-yf7vycexdo] {
            box-shadow: 0 4px 16px var(--c-shadow-sm);
        }

        .dropdown button:focus-visible[b-yf7vycexdo] {
            outline: 2px solid var(--primary-clr);
            outline-offset: 2px;
            border-radius: inherit;
        }

:root[data-theme="dark"] .dropdown button[b-yf7vycexdo],
:root[data-theme="night"] .dropdown button[b-yf7vycexdo] {
    box-shadow: 0 1px 2px var(--c-shadow-sm), 0 2px 8px var(--c-shadow-md);
}

    :root[data-theme="dark"] .dropdown button:hover[b-yf7vycexdo],
    :root[data-theme="night"] .dropdown button:hover[b-yf7vycexdo] {
        box-shadow: 0 4px 16px var(--c-shadow-lg);
    }

    .dropdown.open button[b-yf7vycexdo] {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

/* Átlátszó réteg a dropdown mögött: bárhova koppintva/kattintva bezárja.
   A dropdown-content (z-index:10000) fölötte marad, így a kereső és a hajólista kattintható. */
.dropdown-backdrop[b-yf7vycexdo] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: transparent;
}

.dropdown-content[b-yf7vycexdo] {
    display: none;
    position: absolute;
    padding: 5px;
    background-color: var(--list-bg);
    min-width: 100%;
    border: var(--border-thin);
    box-shadow: 0 4px 16px var(--c-shadow-sm);
    z-index: 10000;
    border-bottom-left-radius: var(--list-border-radius);
    border-bottom-right-radius: var(--list-border-radius);
}

:root[data-theme="dark"] .dropdown-content[b-yf7vycexdo],
:root[data-theme="night"] .dropdown-content[b-yf7vycexdo] {
    box-shadow: 0 8px 24px var(--c-shadow-lg);
}

.dropdown.open .dropdown-content[b-yf7vycexdo] {
    display: block;
}

    .dropdown.open .dropdown-content .items[b-yf7vycexdo] {
        display: grid;
    }

    .dropdown.open .dropdown-content .items p[b-yf7vycexdo] {
        margin-block: 0.5rem;
        font-style: italic;
        text-align: center;
        color: var(--muted-clr);
        font-size: 0.8rem;
    }

.dropdown-content a[b-yf7vycexdo] {
    display: flex;
    align-items: center;
    padding: 5px;
    text-decoration: none;
    color: var(--text-clr);
    text-align: left;
    border-radius: var(--list-border-radius);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .dropdown-content a:not(:has(.selected))[b-yf7vycexdo] {
        cursor: pointer;
    }

    .dropdown-content a:hover[b-yf7vycexdo] {
        background-color: color-mix(in srgb, var(--primary-clr) 6%, var(--list-bg));
    }

    .dropdown-content a:focus-visible[b-yf7vycexdo] {
        outline: 2px solid var(--primary-clr);
        outline-offset: 2px;
        border-radius: inherit;
    }

    /* Az éppen kiválasztott hajó: tartós háttér-kiemelés (a halványítás az offline-t jelenti) */
    .dropdown-content a:has(.selected)[b-yf7vycexdo] {
        background-color: color-mix(in srgb, var(--primary-clr) 10%, transparent);
        border-radius: var(--list-border-radius);
    }

    .dropdown-content a:last-child[b-yf7vycexdo] {
        border-bottom-left-radius: var(--list-border-radius);
        border-bottom-right-radius: var(--list-border-radius);
    }

.menu-item[b-yf7vycexdo] {
    display: flex;
    align-items: center;
}

    .menu-item img[b-yf7vycexdo] {
        width: 40px;
        height: 40px;
        /* flex item: hosszú hajónév összenyomná, a kép torzulna */
        flex-shrink: 0;
        border-radius: 8px;
        margin-right: 10px;
        object-fit: cover;
    }

    /* Offline hajó: az egész sor halványítva, mint a FleetOverview kártyáin */
    .menu-item.offline[b-yf7vycexdo] {
        opacity: 0.45;
        filter: grayscale(0.4);
    }

    .menu-item span[b-yf7vycexdo] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

#selectedOption img[b-yf7vycexdo] {
    width: 40px;
    height: 40px;
    /* flex item: hosszú hajónév összenyomná, a kép torzulna */
    flex-shrink: 0;
    border-radius: 8px;
    margin-right: 10px;
    object-fit: cover;
}

    /* Online border */
    #selectedOption img.online[b-yf7vycexdo] {
        border: 2px solid var(--online-clr);
    }

    /* Offline border */
    #selectedOption img.offline[b-yf7vycexdo] {
        border: 2px solid var(--offline-clr);
    }

/* Töltő karika a hajókép helyén, amíg az le nem töltődik (a régi üres <img src=""> helyett, ami
   törött-kép ikonként villant be). Ugyanaz a 40×40-es slot + margó, hogy a layout ne ugorjon a kép
   beérkezésekor. */
.core-img-loading[b-yf7vycexdo] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .core-img-loading.online[b-yf7vycexdo] {
        border: 2px solid var(--online-clr);
    }

    .core-img-loading.offline[b-yf7vycexdo] {
        border: 2px solid var(--offline-clr);
    }

/* Tömörebb név + státusz-pötty + chevron — a mockup core-pillje szerint */
#selectedOption .core-info[b-yf7vycexdo] {
    min-width: 0;
}

#selectedOption .core-name[b-yf7vycexdo] {
    font-weight: 600;
    line-height: 1.2;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#selectedOption .core-status[b-yf7vycexdo] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    line-height: 1.3;
}

    #selectedOption .core-status.online[b-yf7vycexdo] {
        color: var(--online-clr);
    }

    #selectedOption .core-status.offline[b-yf7vycexdo] {
        color: var(--offline-clr);
    }


#selectedOption .core-chevron[b-yf7vycexdo] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding-left: 8px;
    color: var(--muted-clr);
    flex: none;
    transition: transform 0.2s ease;
}

.dropdown.open #selectedOption .core-chevron[b-yf7vycexdo] {
    transform: rotate(180deg);
}

@media (min-width: 470px){
    .dropdown-content.wide[b-yf7vycexdo] {
        right: 0;
        border-top-left-radius: var(--list-border-radius);
    }

        .dropdown-content.wide .items[b-yf7vycexdo] {
            grid-template-columns: repeat(2, minmax(190px, 1fr));
            column-gap: 0.5rem;
        }
}

@media (prefers-reduced-motion: reduce) {
    *[b-yf7vycexdo] {
        transition-duration: .01ms !important;
    }
}
/* /Layout/DashboardNotificationsComponent.razor.rz.scp.css */
/* Jobb-sáv értesítés-doboz — surface kártya, a FleetOverview összefoglaló panel mintájára.
   A FleetOverview overview-notif* szabályai scoped-ek, nem öröklődnek ide, ezért ide másoltuk
   őket (token-alapúak, így mindhárom téma alatt működnek). A level-chip a közös <AlarmChip>. */
.dash-notif[b-op7ptw3v69] {
    /* a térkép-magas grid-cellát tölti ki (grid 1. sor = --dashboard-map-h); a fejléc fix,
       a bejegyzés-lista (.dash-notif__list) görget, ha nem fér el. */
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: 0 2px 5px var(--c-shadow-sm);
    padding: 0.75rem;
}

/* A bejegyzés-lista a fejléc alatti maradék helyet tölti ki és belül görget (min-height:0 kell,
   hogy a flex-gyerek a szülő alá ZSUGORODHASSON, különben túlnőne a térkép-magas kártyán). */
.dash-notif__list[b-op7ptw3v69] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.dash-notif__header[b-op7ptw3v69] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

    .dash-notif__header h3[b-op7ptw3v69] {
        margin: 0;
    }

.dash-notif__more[b-op7ptw3v69] {
    display: inline-flex;
    align-items: center;
    color: var(--muted-clr);
    text-decoration: none;
    transition: color 0.15s ease;
}

    .dash-notif__more:hover[b-op7ptw3v69] {
        color: var(--primary-clr);
    }

.dash-notif__empty[b-op7ptw3v69] {
    margin: 0;
    color: var(--muted-clr);
    font-style: italic;
    text-align: center;
    font-size: 0.8rem;
    padding-block: 0.5rem;
}

/* ── Notification entries (FleetOverview.razor.css scope-ból másolva) ── */
.overview-notif-entry[b-op7ptw3v69] {
    display: flex;
    gap: 0.55rem;
    padding: 0.55rem 0;
    border-bottom: var(--border-thin);
}

    .overview-notif-entry:last-child[b-op7ptw3v69] {
        border-bottom: none;
    }

.overview-notif__bar[b-op7ptw3v69] {
    width: 3px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 1rem;
}

    .overview-notif__bar.level-info[b-op7ptw3v69] {
        background-color: var(--info-clr);
    }

    .overview-notif__bar.level-warning[b-op7ptw3v69] {
        background-color: var(--warning-clr);
    }

    .overview-notif__bar.level-critical[b-op7ptw3v69] {
        background-color: var(--critical-clr);
    }

.overview-notif__content[b-op7ptw3v69] {
    flex: 1;
    min-width: 0;
}

.overview-notif__top[b-op7ptw3v69] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.2rem;
}

.overview-notif__core[b-op7ptw3v69] {
    font-size: 0.78rem;
    font-weight: 600;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.overview-notif__meta[b-op7ptw3v69] {
    font-size: 0.67rem;
    color: var(--muted-clr);
}

.notif-ongoing[b-op7ptw3v69] {
    color: var(--c-notif-ongoing);
    font-weight: 600;
}

.notif-resolved[b-op7ptw3v69] {
    color: var(--resolved-clr);
    font-weight: 600;
}
/* /Layout/Elements/AlarmChip.razor.rz.scp.css */
.alarm-chip[b-dsuj3ld60o] {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    width: fit-content;
    border-radius: 10px;
    padding: 0.4em 0.6em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: clamp(0.5rem, calc(0.5rem + 1dvw), 1rem);
    white-space: nowrap;
    line-height: 1;
}

.alarm-chip__icon[b-dsuj3ld60o] {
    flex: none;
}

/* Kompakt méret (dashboard / fleet-overview mini-lista) — a korábbi .chip--sm helyett. */
.alarm-chip.is-sm[b-dsuj3ld60o] {
    padding: 0.15em 0.45em;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
    gap: 0.25em;
}

/* ── SÚLYOSSÁG — kitöltött színes chip ──────────────────────────────────── */
.is-filled[b-dsuj3ld60o] {
    color: var(--c-on-notif); /* light/dark: fehér; night: szürkés-pirosas */
}

.alarm-chip--info[b-dsuj3ld60o] {
    background-color: var(--info-clr); /* light/dark: mély indigó; night: sötét maroon */
}

.alarm-chip--critical[b-dsuj3ld60o] {
    background-color: var(--critical-clr); /* piros */
}

.alarm-chip--warning[b-dsuj3ld60o] {
    background-color: var(--warning-clr); /* amber */
}

/* ── ÁLLAPOT — outline chip, IKON NÉLKÜL ──────────────────────────────────── */
.is-outline[b-dsuj3ld60o] {
    background-color: transparent;
    border: 1.5px solid currentColor;
    /* a keret kompenzálása, hogy a chip mérete egyezzen a kitöltöttel (0.4em alap) */
    padding-block: calc(0.4em - 1.5px);
    padding-inline: calc(0.6em - 1.5px);
}

/* resolved + done = azonos semleges szürke (a szöveg különbözteti meg) */
.alarm-chip--resolved[b-dsuj3ld60o],
.alarm-chip--done[b-dsuj3ld60o] {
    color: var(--resolved-clr);
}

/* ongoing = aktív: a notifikáció SZINTJÉNEK színe (--alarm-lvl) + pulzáló glow.
   Ha nincs level átadva, a --c-notif-ongoing (pirosas narancs) a fallback. A glow a chip
   aktuális színéből (currentColor) készül, color-mix-szel féláttetszővé téve. */
.alarm-chip--ongoing[b-dsuj3ld60o] {
    color: var(--alarm-lvl, var(--c-notif-ongoing));
    border-width: 2.5px;
    animation: alarm-chip-pulse-b-dsuj3ld60o 1.5s ease-in-out infinite;
}

@keyframes alarm-chip-pulse-b-dsuj3ld60o {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 transparent;
    }
    50% {
        opacity: 0.55;
        box-shadow: 0 0 13px 4px color-mix(in srgb, var(--alarm-lvl, var(--c-notif-ongoing)) 70%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .alarm-chip--ongoing[b-dsuj3ld60o] {
        animation: none;
    }
}
/* /Layout/Elements/AppButton.razor.rz.scp.css */
.app-btn[b-sxyq40ei5s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--text-clr);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    /* A belső szöveg-span a globális `span { color: text-clr }`-t felülírva a GOMB színét ÖRÖKLI — enélkül a
   primary fehér szövege is text-clr lenne. Scoped selector → specifikusabb, mint a globális span. */
    .app-btn span[b-sxyq40ei5s] {
        color: inherit;
    }

    .app-btn:focus-visible[b-sxyq40ei5s] {
        outline: 2px solid var(--primary-clr);
        outline-offset: 2px;
    }

    .app-btn:disabled[b-sxyq40ei5s] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* SIZING */
.app-btn--sm[b-sxyq40ei5s] {
    font-size: 0.75rem;
}

.app-btn--md[b-sxyq40ei5s] {
    font-size: 0.85rem;
}

.app-btn--lg[b-sxyq40ei5s] {
    font-size: 1rem;
}

.app-btn--sm:not(.app-btn--icon)[b-sxyq40ei5s] {
    min-height: 1.85rem;
}

.app-btn--md:not(.app-btn--icon)[b-sxyq40ei5s] {
    min-height: 2.25rem;
}

.app-btn--lg:not(.app-btn--icon)[b-sxyq40ei5s] {
    min-height: 2.6rem;
}

/* ICON ONLY */
.app-btn--icon[b-sxyq40ei5s] {
    min-height: 0;
    padding: 0.4rem;
}

/* BASIC VARIANTS */
.app-btn--primary[b-sxyq40ei5s] {
    color: var(--c-on-primary);
    background: var(--primary-clr);
    border-color: var(--primary-clr);
}

    .app-btn--primary:hover:not(:disabled)[b-sxyq40ei5s] {
        background: color-mix(in srgb, var(--primary-clr) 80%, black);
        border-color: color-mix(in srgb, var(--primary-clr) 80%, black);
    }

.app-btn--secondary[b-sxyq40ei5s] {
    color: var(--text-clr);
    border-color: currentColor;
}

    .app-btn--secondary:hover:not(:disabled)[b-sxyq40ei5s] {
        background: var(--c-surface-hover);
    }

.app-btn--tertiary[b-sxyq40ei5s] {
    color: var(--text-clr);
}

    .app-btn--tertiary:hover:not(:disabled)[b-sxyq40ei5s] {
        background: var(--c-surface-hover);
    }

.app-btn--danger[b-sxyq40ei5s] {
    color: var(--c-on-error);
    background: var(--delete-clr);
    border-color: var(--delete-clr);
}

    .app-btn--danger:hover:not(:disabled)[b-sxyq40ei5s] {
        background: color-mix(in srgb, var(--delete-clr) 60%, transparent);
        border-color: color-mix(in srgb, var(--delete-clr) 60%, transparent);
    }

/* PLAIN MODE */
.app-btn--plain[b-sxyq40ei5s] {
    background: none;
    border-color: transparent;
}

    .app-btn--plain.app-btn--primary[b-sxyq40ei5s] {
        color: var(--primary-clr);
    }

        .app-btn--plain.app-btn--primary:hover:not(:disabled)[b-sxyq40ei5s] {
            background: color-mix(in srgb, currentColor 12%, transparent);
        }

    .app-btn--plain.app-btn--danger[b-sxyq40ei5s] {
        color: var(--delete-clr);
    }

        .app-btn--plain.app-btn--danger:hover:not(:disabled)[b-sxyq40ei5s] {
            background: color-mix(in srgb, currentColor 12%, transparent);
        }

.app-btn.app-btn--plain.favorite[b-sxyq40ei5s] {
    color: var(--c-favourite);
}

    .app-btn.app-btn--plain.favorite:hover:not(:disabled)[b-sxyq40ei5s] {
        background: color-mix(in srgb, var(--c-favourite) 22%, transparent);
        border-color: color-mix(in srgb, var(--c-favourite) 22%, transparent);
    }

/* BACK BUTTON */
.back-btn[b-sxyq40ei5s] {
    justify-self: start;
}
/* /Layout/Elements/CustomToggleSwitch.razor.rz.scp.css */
.nt-switch[b-apu7zpgev5] {
    --nt-w: 50px;
    --nt-h: 28px;
    width: var(--nt-w);
    height: var(--nt-h);
    flex: none;
    padding: 3px;
    border: none;
    border-radius: 999px;
    background: var(--extra-muted-clr);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background-color .2s ease;
}

/* Kompakt méret (40×20) — a Small="true"-val jelölt konfig/„engedélyezve" toggle-ökhöz.
   A thumb és az elcsúszás a --nt-h / --nt-w alapján számol, így automatikusan skálázódik. */
.nt-switch--sm[b-apu7zpgev5] {
    --nt-w: 40px;
    --nt-h: 20px;
}

.nt-switch__thumb[b-apu7zpgev5] {
    width: calc(var(--nt-h) - 6px);
    height: calc(var(--nt-h) - 6px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px var(--c-shadow-lg);
    transition: transform .2s ease;
}

.nt-switch--on[b-apu7zpgev5] {
    background: var(--primary-clr);
}

    .nt-switch--on .nt-switch__thumb[b-apu7zpgev5] {
        transform: translateX(calc(var(--nt-w) - var(--nt-h)));
    }

.nt-switch:disabled[b-apu7zpgev5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.nt-switch:focus-visible[b-apu7zpgev5] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}
/* /Layout/Elements/KpiTile.razor.rz.scp.css */
.kpi-tile[b-70h3cmr3sv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-left: 4px solid var(--c-divider);
    min-width: 0;
}

.kpi-tile--ok[b-70h3cmr3sv] {
    border-left-color: var(--c-success);
    color: var(--c-success);
}

.kpi-tile--exceeded[b-70h3cmr3sv] {
    border-left-color: var(--warning-clr);
    color: var(--warning-clr);
}

.kpi-tile--neutral[b-70h3cmr3sv] {
    color: var(--muted-clr);
}

.kpi-tile__body[b-70h3cmr3sv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-tile__value[b-70h3cmr3sv] {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
}

.kpi-tile__label[b-70h3cmr3sv] {
    font-size: 0.75rem;
    color: var(--muted-clr);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-tile__target[b-70h3cmr3sv] {
    font-size: 0.7rem;
    color: var(--muted-clr);
    opacity: 0.8;
}
/* /Layout/Elements/NightModeSwitch.razor.rz.scp.css */
.night-mode-switch[b-fxk32i1qfr] {
    --w: 104px;
    --h: 26px;
    --thumb: 20px;
    --pad: 3px;
    --step: calc((var(--w) - var(--thumb) - var(--pad) * 2) / 3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.night-mode-switch__track[b-fxk32i1qfr] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: var(--w);
    height: var(--h);
    padding: 0 var(--pad);
    border-radius: 999px;
    background: linear-gradient(135deg, #cfe6ff 0%, #9ec9ff 100%);
    box-shadow: inset 0 2px 4px rgba(0, 60, 130, 0.18),
                inset 0 -1px 0 rgba(255, 255, 255, 0.5),
                0 1px 2px rgba(0, 60, 130, 0.08);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.night-mode-switch.is-dark .night-mode-switch__track[b-fxk32i1qfr] {
    background: linear-gradient(135deg, #0c1a33 0%, #1b3a6b 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55),
                inset 0 -1px 0 rgba(var(--c-primary-rgb), 0.18),
                0 0 12px rgba(var(--c-primary-rgb), 0.25);
}

.night-mode-switch__option[b-fxk32i1qfr] {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
    width: var(--thumb);
    height: var(--thumb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border-radius: 50%;
    transition: color 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

.night-mode-switch__option:focus-visible[b-fxk32i1qfr] {
    outline: 2px solid rgba(var(--c-primary-rgb), 0.6);
    outline-offset: 2px;
}

.night-mode-switch__option--sun[b-fxk32i1qfr] {
    color: #ffb800;
    filter: drop-shadow(0 0 3px rgba(255, 184, 0, 0.6));
}

.night-mode-switch__option--auto[b-fxk32i1qfr] {
    color: #1f3a5f;
    opacity: 0.75;
}

.night-mode-switch__option--moon[b-fxk32i1qfr] {
    color: #1f3a5f;
    opacity: 0.55;
}

.night-mode-switch.is-dark .night-mode-switch__option--sun[b-fxk32i1qfr] {
    opacity: 0.85;
    color: #e6eef7;
    filter: none;
}

.night-mode-switch.is-dark .night-mode-switch__option--auto[b-fxk32i1qfr] {
    color: #e6eef7;
    opacity: 0.85;
}

.night-mode-switch.is-dark .night-mode-switch__option--moon[b-fxk32i1qfr] {
    opacity: 1;
    color: #e6eef7;
    filter: drop-shadow(0 0 4px rgba(180, 210, 255, 0.7));
}

/* Night (red-shift) option */
.night-mode-switch__option--night[b-fxk32i1qfr] {
    color: #b22222;
    opacity: 0.55;
}

.night-mode-switch.is-dark .night-mode-switch__option--night[b-fxk32i1qfr] {
    color: #ef4444;
    opacity: 0.85;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.6));
}

.night-mode-switch__thumb[b-fxk32i1qfr] {
    position: absolute;
    top: var(--pad);
    left: var(--pad);
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 50%;
    z-index: 1;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f5faff 60%, #e2ecf4 100%);
    box-shadow: 0 2px 4px rgba(0, 60, 130, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                background 0.4s ease,
                box-shadow 0.4s ease;
}

.night-mode-switch--mode-auto .night-mode-switch__thumb[b-fxk32i1qfr] { transform: translateX(0); }
.night-mode-switch--mode-light .night-mode-switch__thumb[b-fxk32i1qfr] { transform: translateX(var(--step)); }
.night-mode-switch--mode-dark .night-mode-switch__thumb[b-fxk32i1qfr] { transform: translateX(calc(var(--step) * 2)); }
.night-mode-switch--mode-night .night-mode-switch__thumb[b-fxk32i1qfr] { transform: translateX(calc(var(--step) * 3)); }

.night-mode-switch.is-dark .night-mode-switch__thumb[b-fxk32i1qfr] {
    background: radial-gradient(circle at 30% 30%, #3a6db8 0%, #1f3a5f 70%, #14253f 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55),
                0 0 10px rgba(var(--c-primary-rgb), 0.5),
                0 0 0 1px rgba(var(--c-primary-rgb), 0.3) inset;
}

.night-mode-switch__option:hover ~ .night-mode-switch__thumb[b-fxk32i1qfr],
.night-mode-switch__track:hover .night-mode-switch__thumb[b-fxk32i1qfr] {
    box-shadow: 0 2px 6px rgba(0, 60, 130, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.night-mode-switch.is-dark .night-mode-switch__track:hover .night-mode-switch__thumb[b-fxk32i1qfr] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65),
                0 0 14px rgba(var(--c-primary-rgb), 0.7),
                0 0 0 1px rgba(var(--c-primary-rgb), 0.4) inset;
}

.night-mode-switch__option:active ~ .night-mode-switch__thumb[b-fxk32i1qfr] {
    transition-duration: 0.15s;
}

/* Red-shift track + thumb when Night is the active mode. Placed LAST on purpose: it has the same
   specificity as the generic .is-dark blue thumb/hover rules above, so source order decides — these
   must come after to win (otherwise the night selection shows the blue dark-mode thumb). */
.night-mode-switch--mode-night.is-dark .night-mode-switch__track[b-fxk32i1qfr] {
    background: linear-gradient(135deg, #1a0606 0%, #3a0d0d 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6),
                inset 0 -1px 0 rgba(239, 68, 68, 0.15),
                0 0 12px rgba(178, 34, 34, 0.35);
}

.night-mode-switch--mode-night.is-dark .night-mode-switch__thumb[b-fxk32i1qfr] {
    background: radial-gradient(circle at 30% 30%, #b22222 0%, #7a1515 70%, #4a0d0d 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6),
                0 0 10px rgba(239, 68, 68, 0.5),
                0 0 0 1px rgba(239, 68, 68, 0.3) inset;
}

.night-mode-switch--mode-night.is-dark .night-mode-switch__track:hover .night-mode-switch__thumb[b-fxk32i1qfr] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65),
                0 0 14px rgba(239, 68, 68, 0.7),
                0 0 0 1px rgba(239, 68, 68, 0.4) inset;
}

/* NIGHT téma: a NEM kiválasztott ikonok tompított (muted) színnel, hogy ne ríjanak ki a piros témából
   (a fenti .is-dark szabályok világoskékre húznák őket). A kiválasztott (aria-checked=true) érintetlen,
   az a piros thumb-on marad. Magasabb specificitás + source-order → felülírja a .is-dark opció-színeket. */
.night-mode-switch--mode-night.is-dark .night-mode-switch__option[aria-checked="false"][b-fxk32i1qfr] {
    color: var(--muted-clr);
    opacity: 0.55;
    filter: none;
}
/* /Layout/EmptyChartPageComponent.razor.rz.scp.css */
.empty-page[b-qwahwhbucr] {
    display: grid;
    place-content: center;
    /* A szülő .wireframe egy CSS-grid (kis/közepes chart-méretnél TÖBB oszlop) — enélkül az
       empty-page csak az ELSŐ oszlopot foglalná el → balra, keskenyen jelenne meg. A teljes
       rácsot átfogjuk + width:100%, hogy bármilyen szülőnél (grid/flex/block) kitöltse a lapot. */
    grid-column: 1 / -1;
    width: 100%;
    min-height: 80dvh;
    padding: 2rem;
    font-size: 2rem;
    text-align: center;
}

/* Az „üres oldal" akció-gomb (AppButton) középre igazítva a grid-en. A gomb VIZUÁLJÁT az AppButton
   adja (Primary, Large, + ikon) — itt csak pozicionálunk. */
.empty-page__actions[b-qwahwhbucr] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

    .empty-page__icon[b-qwahwhbucr] {
        width: 10rem;
        margin: auto;
        opacity: 0.5;
    }

.empty-page p[b-qwahwhbucr] {
    margin-top: 1rem;
    font-style: italic;
    font-size: 1.25rem;
}
/* /Layout/FleetCameraPlayerComponent.razor.rz.scp.css */
.video-wrapper[b-83kx2vfe7v] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-media-bg);
    transform: translateZ(0);
}

.video-wrapper video[b-83kx2vfe7v] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--c-media-bg);
}

.controls[b-83kx2vfe7v] {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    padding: 0.5rem;
    border-radius: 5px;
    background: var(--c-scrim-weak);
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    container-type: inline-size;
    container-name: controls;
}

.controls button[b-83kx2vfe7v],
.controls input[b-83kx2vfe7v] {
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.controls button:focus-visible[b-83kx2vfe7v],
.controls input:focus-visible[b-83kx2vfe7v] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}

.video-wrapper:hover .controls[b-83kx2vfe7v],
.video-wrapper:focus-visible .controls[b-83kx2vfe7v] {
    opacity: 1;
    pointer-events: all;
}

.live-indicator[b-83kx2vfe7v] {
    display: block;
    width: 16px;
    aspect-ratio: 1;
    margin-left: auto;
    border-radius: 50%;
    background: var(--rec-clr);
    border: 2px solid var(--rec-clr);
}

.live-indicator.empty[b-83kx2vfe7v] {
    background: transparent;
}

.unauthorized-camera[b-83kx2vfe7v] {
    display: grid;
    place-content: center;
    position: relative;
    height: 100%;
    background: var(--list-bg);
    color: var(--text-clr);
    font-weight: 500;
    font-style: italic;
    font-size: 1.125rem;
}

.unauthorized-camera span[b-83kx2vfe7v] {
    display: grid;
    place-content: center;
    position: absolute;
    inset: 0;
    padding-inline: 1rem;
    text-align: center;
}
/* /Layout/GeofenceMapComponent.razor.rz.scp.css */
.geofence-map-help[b-geli65hrqu] {
    font-size: 0.85rem;
    color: var(--muted-clr);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

[b-geli65hrqu] .leaflet-control-locate-me {
    cursor: pointer;
    user-select: none;
}
/* /Layout/GeofencingComponent.razor.rz.scp.css */
/* Az oszlop-sablon a .base-list-en (a fantom #geofencing id helyett, ami a LazySection wrapperre
   került). A Blazor CSS-izoláció ([b-xxx]) így is a komponensre szűkíti.

   FONTOS: a fejléc és MINDEN sor KÜLÖN grid-konténer, ezért az `auto` akció-oszlop külön-külön
   méretezné magát (a fejlécben a rövid "Műveletek" felirat, a sorokban a toggle + 2 ikon-gomb
   ~134px) → a maradékból számolt 2fr/1fr oszlopok elcsúsznának a fejléc és a sorok között.
   Ezért az akció-oszlop alsó korlátja FIX 9rem (144px) — elég a toggle + 2 db Lg ikon-gombra
   és a fejléc-feliratra is, így minden konténerben ugyanannyi. (Ld. AutomationComponent.) */
.base-list[b-zd9ckwtl6y] {
    --gtc: 2fr 1fr minmax(9rem, auto);
}

    .base-list__header[b-zd9ckwtl6y],
    .base-list__row:not(.empty-row)[b-zd9ckwtl6y] {
        grid-template-columns: var(--gtc);
        column-gap: 1.5rem;
    }

/* Az „engedélyezve" toggle az akció-sáv első eleme → az ikon-gombokhoz igazítjuk
   (a sáv alapból stretch, a fix magasságú toggle különben a tetejére ragadna). */
.base-list__actions[b-zd9ckwtl6y] {
    align-items: center;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.sidebar[b-r4qeei1jqp] {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 280px;
    height: 100dvh;
    padding-left: var(--main-padding);
    padding-top: 30px;
    overflow: hidden;
    /* Light: recede to the tinted page colour — a pure --list-bg slab read as "too white".
       Dark/night keep the surface panel via the overrides further down. */
    background: var(--background-clr);
    border-right: var(--border-thin);
    font-size: clamp(0.9rem, calc(0.78rem + 0.6dvh), 1.05rem);
    color: var(--text-clr);
}

.sidebar > div[b-r4qeei1jqp] {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    width: 100%;
}

.top-links[b-r4qeei1jqp],
.main-links[b-r4qeei1jqp],
.bottom-links[b-r4qeei1jqp] {
    --gap: clamp(0.5rem, calc(0.25rem + 2dvh), 1.25rem);
    display: grid;
    gap: 0.125rem;
}

.top-links[b-r4qeei1jqp] {
    margin-bottom: var(--gap);
}

/* WP6 R1 csoportfa — min-width:0 a grid-item csapda ellen (pattern_nautech_page_grid_minwidth_trap):
   a .main-links display:grid, egy widebb fa-elem enélkül az EGÉSZ sidebart tolná szélesebbre. */
.tree-nav-section[b-r4qeei1jqp] {
    min-width: 0;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: var(--border-thin);
}

.main-links[b-r4qeei1jqp] {
    margin-top: calc(var(--main-padding) + var(--gap));
    overflow-y: auto;
    overflow-x: hidden;
}

.bottom-links[b-r4qeei1jqp] {
    position: sticky;
    bottom: 0;
    padding-block: 1rem;
    margin-top: auto;
    overflow: hidden;
}

/* Mode Toggle Switch */
.mode-toggle-container[b-r4qeei1jqp] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
}

.mode-toggle[b-r4qeei1jqp] {
    position: relative;
    display: flex;
    background: rgba(var(--c-primary-rgb), 0.05);
    border-radius: 30px;
    padding: 2px;
    width: 100%;
    cursor: pointer;
    border: 1px solid rgba(var(--c-primary-rgb), 0.15);
    box-shadow: inset 0 2px 4px var(--c-shadow-xs);
}

.mode-toggle-option[b-r4qeei1jqp] {
    flex: 1;
    text-align: center;
    padding: 3px 0;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mode-toggle-option.active[b-r4qeei1jqp] {
    color: #000;
    font-weight: 700;
}

.mode-toggle-slider[b-r4qeei1jqp] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 2px);
    height: calc(100% - 4px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(240, 248, 255, 1) 100%);
    border-radius: 26px;
    box-shadow: 0 2px 6px rgba(var(--c-primary-rgb), 0.2);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 0;
}

.mode-toggle.fleet-active .mode-toggle-slider[b-r4qeei1jqp] {
    transform: translateX(100%);
}

.sidebar a[b-r4qeei1jqp] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    text-decoration: none;
    color: black;
    letter-spacing: 2px;
    transition: color 0.3s ease;
    padding-block: calc(var(--gap) / 2 - 0.125rem);
}

    .sidebar a:hover[b-r4qeei1jqp] {
        color: #000;
    }

.main-links a[b-r4qeei1jqp],
.bottom-links > a[b-r4qeei1jqp],
.selected[b-r4qeei1jqp] {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-right: 8px;
    /* Vízszintes belső tér: a kijelölés/hover háttér (::before, az <a> teljes padding-boxát
       tölti ki) így az ikon bal oldalán is túlnyúlik, ahelyett hogy közvetlenül ráérne.
       A 10px border-radius miatt is kell, hogy a tartalom ne lógjon a lekerekített sarokba. */
    padding-inline: 0.75rem;
}

    .main-links a[b-r4qeei1jqp]::before,
    .bottom-links > a[b-r4qeei1jqp]::before,
    .selected[b-r4qeei1jqp]::before {
        content: "";
        position: absolute;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        background: color-mix(in srgb, var(--primary-clr) 16%, transparent);
        transition: left 0.3s ease;
    }

    .main-links a:hover[b-r4qeei1jqp]::before,
    .bottom-links > a:hover[b-r4qeei1jqp]::before,
    a.selected[b-r4qeei1jqp]::before {
        left: 0;
    }

.sidebar a.selected[b-r4qeei1jqp],
.sidebar a:hover.selected[b-r4qeei1jqp] {
    font-weight: 700;
    color: var(--primary-clr);
}

:root[data-theme="dark"] .sidebar a.selected[b-r4qeei1jqp] {
    color: var(--primary-clr);
}

/* A menü alján lévő ikon-sor (theme selector + settings / account / logout). Két gond volt:
   1) kijelöléskor a megosztott `.selected` szabály padding-inline + margin-right-et adott az ikonnak,
      amitől elmozdult a sor → itt FIX paddinget adunk, mindegyik ikonnak egyformán (nincs elmozdulás);
   2) a bal→jobb becsúszó ::before csík helyett háttér-fade hover/kijelölésre — mint a többi menüelem. */
.bottom-actions[b-r4qeei1jqp] {
    margin-top: 0.5rem;
}

.bottom-actions > a[b-r4qeei1jqp] {
    /* felülírja a megosztott `.selected` paddingját/marginját → nincs elmozdulás kijelöléskor */
    margin-right: 0;
    padding: 0.4rem;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    /* a becsúszó csík kikapcsolása ezeknél — háttér-fade-et használunk helyette */
    .bottom-actions > a[b-r4qeei1jqp]::before {
        content: none;
    }

    .bottom-actions > a:hover[b-r4qeei1jqp],
    .bottom-actions > a.selected[b-r4qeei1jqp] {
        background: color-mix(in srgb, var(--primary-clr) 16%, transparent);
    }

    .bottom-actions > a.selected[b-r4qeei1jqp] {
        color: var(--primary-clr);
    }

:root[data-theme="dark"] .bottom-actions > a:hover[b-r4qeei1jqp],
:root[data-theme="dark"] .bottom-actions > a.selected[b-r4qeei1jqp] {
    background: color-mix(in srgb, var(--primary-clr) 24%, transparent);
}

:root[data-theme="night"] .bottom-actions > a:hover[b-r4qeei1jqp],
:root[data-theme="night"] .bottom-actions > a.selected[b-r4qeei1jqp] {
    background: color-mix(in srgb, var(--primary-clr) 30%, transparent);
}

.nautechcontent[b-r4qeei1jqp] {
    padding: var(--main-padding);
    justify-content: center;
    align-items: center;
}

/* ═══════════════════ Menü fejléc: logó + összecsukó gomb ═══════════════════
   A logó-link egy FIX szélességű, overflow:hidden doboz. Összecsukott menüben ugyanez a
   doboz szűkül a szóvédjegy első betűjére ("n") — nincs külön ikon-logó fájl, és a két
   márka ugyanazt a megoldást használja (csak a szélességek térnek el). */
.sidebar-head[b-r4qeei1jqp] {
    /* A két szélesség a FEJLÉCEN ül (nem a logó-linken), mert az összecsukott fejléc paddingja is
       számol a logó-doboz szélességével — a custom property pedig csak lefelé öröklődik. */
    --brand-w: 125px;
    --brand-n-w: 17px; /* a nautech szóvédjegy "n"-je 125px-en ~14.7px-ig tart, az "a" 17.8px-en kezdődik */
    display: flex;
    align-items: center;
    gap: 0.25rem;
    /* a gomb jobb széle a menüpont-pirulák jobb szélére essen (azoknak margin-right: 8px) */
    padding-right: 8px;
}

:root[data-brand="networker"] .sidebar-head[b-r4qeei1jqp] {
    --brand-w: 147px;
    --brand-n-w: 18px; /* a networker "n"-je 147px-en ~16.7px-ig tart, az "e" 19.4px-en kezdődik */
}

.sidebar a.sidebar-brand[b-r4qeei1jqp] {
    display: flex;
    align-items: center;
    flex: none;
    overflow: hidden;
    width: var(--brand-w);
    padding-block: 0;
    transition: width 0.25s ease;
}

    /* a logó ne zsugorodjon a szűkülő dobozban — kilógjon, és a doboz vágja le */
    .sidebar a.sidebar-brand > *[b-r4qeei1jqp] {
        flex: none;
    }

/* Mobilon nincs összecsukás (a hamburger a menü kapcsolója) — a gombot a desktop blokk kapcsolja be. */
.nav-collapse-btn[b-r4qeei1jqp] {
    display: none;
}

/* A téma-kapcsoló burkolója csak fogódzó az összecsukott menü CSS-ének (a NightModeSwitch saját
   gyökere másik CSS-scope-ban van, innen nem címezhető). `display: contents` → a kapcsoló marad
   a .bottom-actions közvetlen flex-eleme, vagyis a nyitott menü elrendezése bitre a régi. */
.theme-switch-slot[b-r4qeei1jqp] {
    display: contents;
}

.hamburger[b-r4qeei1jqp] {
    display: none;
}

/* A címke felveszi a maradék helyet, így a badge a sor jobb széléhez tapad (mockup). */
.nav-label[b-r4qeei1jqp] {
    flex: 1;
}

/* Számjegyes értesítés-badge a korábbi színes pötty helyett (mockup-stílus). */
.nav-badge[b-r4qeei1jqp] {
    flex: none;
    /* a kijelölés-csík (::before) fölött legyen, ne takarja a sárga jelölőt (Z-tengely fix) */
    position: relative;
    z-index: 1;
    margin-right: 8px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
}

.nav-badge.warn[b-r4qeei1jqp] {
    background-color: var(--warning-clr);
}

.nav-badge.crit[b-r4qeei1jqp] {
    background-color: var(--critical-clr);
}

/* Notification badge a hamburger gombon (mobil). A .hamburger desktopon display:none,
   így a badge is csak mobilon látszik. Abszolút pozícionált, ezért nem ad grid-sort a
   három csíkhoz (a .hamburger.nautechactive div:nth-child animáció érintetlen marad). */
.hamburger-badge[b-r4qeei1jqp] {
    position: absolute;
    top: -8px;
    left: 18px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
    /* a kattintás menjen át a hamburgerre, ne a badge nyelje el */
    pointer-events: none;
    z-index: 3;
}

.hamburger-badge.warn[b-r4qeei1jqp] {
    background-color: var(--warning-clr);
}

.hamburger-badge.crit[b-r4qeei1jqp] {
    background-color: var(--critical-clr);
}

/* Nyitott menünél (X-állapot) a sidebarban már látszik a saját nav-badge — ne duplázzuk. */
.hamburger.nautechactive .hamburger-badge[b-r4qeei1jqp] {
    display: none;
}

.fleet-supervision-back-link[b-r4qeei1jqp] {
    color: var(--primary-clr) !important;
    font-weight: 500;
}

.fleet-supervision-back-arrow[b-r4qeei1jqp] {
    font-size: 1.1rem;
    line-height: 1;
    display: inline-block;
    width: 23px;
    text-align: center;
}

@media (max-width: 900px) {
    .sidebar[b-r4qeei1jqp] {
        background: var(--background-clr);
        transform: translateX(-100%); /* Hide by default */
        transition: transform 0.2s ease;
    }

        .sidebar.show[b-r4qeei1jqp] {
            transform: translateX(0); /* Show on activation */
            z-index: 1001;
        }

    .hamburger[b-r4qeei1jqp] {
        display: grid;
        gap: 0.5rem;
        position: absolute;
        top: 32px;
        left: var(--main-padding);
        z-index: 2;
        cursor: pointer;
    }

        .hamburger div[b-r4qeei1jqp] {
            width: 27px;
            height: 4px;
            background-color: var(--primary-clr);
            transition: all 0.2s ease;
        }

        .hamburger.nautechactive div:nth-child(1)[b-r4qeei1jqp] {
            transform: rotate(-45deg) translateY(5px);
        }

        .hamburger.nautechactive div:nth-child(2)[b-r4qeei1jqp] {
            opacity: 0;
        }

        .hamburger.nautechactive div:nth-child(3)[b-r4qeei1jqp] {
            transform: rotate(45deg) translateY(-5px);
        }

        .hamburger.nautechactive[b-r4qeei1jqp] {
            left: 230px;
            z-index: 1100;
            position: fixed;
        }
}

@media (min-width: 900px) {
    .nautechcontent[b-r4qeei1jqp] {
        padding-left: 280px;
        padding-right: var(--main-padding);
    }
}

/* ═══════════════════════ ÖSSZECSUKHATÓ MENÜ — CSAK DESKTOP ═══════════════════════
   A fejléc jobb felső gombja ikon-sávvá húzza össze a menüt: marad a logó "n" betűje, a
   menüpont-ikonok és a lenti akció-ikonok; a feliratok kifakulnak, a sáv szélessége pedig
   animáltan szűkül (a tartalom bal paddingja ugyanazzal az ütemmel követi).

   Három tudatos döntés:
   1) A BELSŐ panel (.sidebar > div) megtartja a nyitott szélességét, csak a sáv vágja le. Így a
      menüpontok belső elrendezése bitre ugyanaz marad az animáció alatt: egyetlen felirat sem
      tördelődik át, nem ugrál a sormagasság. (Több nyelven — pl. hu "Riasztások aktiválása" —
      a felirat ma is két sorba fut, tehát a `white-space: nowrap` csonkolna.) Kivétel a fejléc,
      ami a sáv szélességére szűkül, különben az összecsukó gomb kicsúszna a képből.
   2) Az ikonok VÍZSZINTESEN NEM MOZDULNAK el összecsukáskor — a sáv szélessége pont akkora,
      hogy a helyben maradó ikon a sáv közepére essen. Így az animáció alatt sincs ugrálás.
   3) Nincs hover-kinyitás: összecsukott állapotban a menüpontok sima linkek, a navigáció nem
      nyitja vissza a menüt (a választás localStorage-ban is megmarad, lásd js/site.js nautechNav).
   A teljes blokk min-width: 900px alatt van, tehát mobilon minden a korábbi marad — a .page-en
   ottfelejtett `nav-collapsed` osztálynak sincs semmilyen hatása. */
@media (min-width: 900px) {
    .page[b-r4qeei1jqp] {
        /* 2 × (oldalpadding + pirula-padding) + 24px ikon → az ikon a sáv közepén */
        --nav-rail-w: calc(2 * var(--main-padding) + 48px);
    }

    .sidebar[b-r4qeei1jqp] {
        /* A `transition` EGYETLEN property: ez a szabály felülírja az app.css közös
           téma-animációját a .sidebar-on, ezért azt itt újra fel kell sorolni. */
        transition: width 0.25s ease,
                    background-color 0.25s ease,
                    color 0.25s ease,
                    border-color 0.25s ease;
    }

    .nautechcontent[b-r4qeei1jqp] {
        transition: padding-left 0.25s ease;
    }

    .sidebar > div[b-r4qeei1jqp] {
        /* FIX (nem %-os) szélesség MINDKÉT állapotban — pontosan a mai számított érték.
           Ha %-os maradna, kinyitáskor a panel egy pillanatra a sáv szélességére ugrana, és
           minden felirat újratördelődne, mielőtt a sáv utoléri. Így viszont a belső elrendezés
           az animáció egyik irányában sem változik. */
        width: calc(280px - var(--main-padding));
    }

    .sidebar-head[b-r4qeei1jqp] {
        /* explicit szélesség, nem `auto`: `auto`-ról a böngésző nem animál (a gomb ugrana) */
        width: calc(280px - var(--main-padding));
        transition: width 0.25s ease, padding 0.25s ease;
    }

    .sidebar .nav-label[b-r4qeei1jqp] {
        transition: opacity 0.18s ease, line-height 0.25s ease;
    }

    .main-links a[b-r4qeei1jqp]::before,
    .bottom-links > a[b-r4qeei1jqp]::before,
    .selected[b-r4qeei1jqp]::before {
        /* a becsúszó csík szélessége is animál (lásd a lenti összecsukott szabályt);
           a `left` átmenetet itt újra fel kell sorolni, mert a transition egyetlen property */
        transition: left 0.3s ease, width 0.25s ease;
    }

    /* ── Az összecsukó gomb ── */
    .nav-collapse-btn[b-r4qeei1jqp] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        margin-left: auto;
        width: 28px;
        height: 28px;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease,
                    width 0.25s ease, height 0.25s ease;
    }

        .nav-collapse-btn:hover[b-r4qeei1jqp] {
            background: color-mix(in srgb, var(--primary-clr) 16%, transparent);
            color: var(--primary-clr);
        }

        .nav-collapse-btn:focus-visible[b-r4qeei1jqp] {
            outline: 2px solid var(--primary-clr);
            outline-offset: 2px;
        }

    :root[data-theme="dark"] .nav-collapse-btn:hover[b-r4qeei1jqp] {
        background: color-mix(in srgb, var(--primary-clr) 24%, transparent);
    }

    :root[data-theme="night"] .nav-collapse-btn:hover[b-r4qeei1jqp] {
        background: color-mix(in srgb, var(--primary-clr) 30%, transparent);
    }

    /* ── Összecsukott állapot ── */
    .page.nav-collapsed .sidebar[b-r4qeei1jqp] {
        width: var(--nav-rail-w);
    }

    .page.nav-collapsed .nautechcontent[b-r4qeei1jqp] {
        padding-left: var(--nav-rail-w);
    }

    /* A chevron megfordul → "kinyitás" (nem kell hozzá második ikon). A gomb DOBOZA összecsukva
       kicsit kisebb, hogy a 68px-es fejlécben maradjon valódi térköz az "n" után — a chevron
       maga (24px-es glif) mindkét állapotban azonos méretű. */
    .page.nav-collapsed .nav-collapse-btn[b-r4qeei1jqp] {
        transform: rotate(180deg);
        width: 26px;
        height: 26px;
    }

    .page.nav-collapsed .sidebar a.sidebar-brand[b-r4qeei1jqp] {
        width: var(--brand-n-w);
    }

    /* A belső panel a nyitott szélességén marad (fent, fixen) — a sáv vágja le.
       Egyedül a fejléc szűkül a sávra, hogy az összecsukó gomb látható (és kattintható) maradjon.

       A bal padding a logó "n"-jét PONTOSAN a menüpont-ikonok oszlopának közepére teszi
       (pirula-padding + fél ikon − fél logó-doboz), a chevron pedig a margin-left: auto miatt
       jobbra kerül tőle. A maradék hely (~5px) így közéjük kerül térköznek, a gomb jobbján
       pedig marad 6px, hogy ne tapadjon a sáv széléhez. */
    .page.nav-collapsed .sidebar-head[b-r4qeei1jqp] {
        width: calc(var(--nav-rail-w) - var(--main-padding));
        padding-left: calc(0.75rem + 12px - var(--brand-n-w) / 2);
        padding-right: 5px;
    }

    /* A hover/kijelölés csíkja a sávon belül maradjon: a pirula LAYOUT szélessége változatlan
       (különben újratördelődnének a feliratok), csak a ::before rövidül a sáv belső szélességére
       — így az ikon körül rendes, lekerekített négyzet lesz, nem a sáv széléig futó sáv. */
    .page.nav-collapsed .main-links a[b-r4qeei1jqp]::before,
    .page.nav-collapsed .bottom-links > a[b-r4qeei1jqp]::before,
    .page.nav-collapsed .selected[b-r4qeei1jqp]::before {
        width: calc(var(--nav-rail-w) - 2 * var(--main-padding));
        border-radius: 10px;
    }

    /* A felirat a helyét is adja vissza, nem csak kifakul. Enélkül a TÖBB SORBA tört feliratok
       (pl. hu "Digitális kapcsolók") a sávban is magasabban tartanák a sorukat, mint a többit —
       az ikon-oszlop ritmusa megtörne, és pont ott ugrana a hover-kiemelés.
       A line-height: 0 a sorboxokat nullázza (a szöveg kilóg, de a pirula levágja), és ellentétben
       a `position: absolute`-tal vagy a `display: none`-nal ANIMÁLHATÓ: a sormagasság a sávval
       együtt, folyamatosan áll be. A tördelés maga nem változik, tehát újratördelés sincs. */
    .page.nav-collapsed .sidebar .nav-label[b-r4qeei1jqp] {
        opacity: 0;
        line-height: 0;
        /* a visibility csak a fade LEFUTÁSA UTÁN kapcsoljon (különben a felirat azonnal eltűnne) */
        visibility: hidden;
        transition: opacity 0.18s ease, line-height 0.25s ease, visibility 0s linear 0.18s;
    }

    /* A vissza-nyíl (admin menü) nem Icon, hanem egy 1.1rem-es karakter: amint a felirat már nem
       adja a sormagasságot, ez a sor 6px-szel alacsonyabb lenne a többinél. Ikon-méretre húzzuk. */
    .page.nav-collapsed .fleet-supervision-back-arrow[b-r4qeei1jqp] {
        width: 24px;
        line-height: 24px;
    }

    /* Az értesítés-darabszám az ikon jobb-felső sarkába költözik (a felirat helye elfogyott). */
    .page.nav-collapsed .nav-badge[b-r4qeei1jqp] {
        position: absolute;
        top: 0.1rem;
        left: 1.4rem; /* pirula-padding (0.75rem) + ~fél ikon */
        margin-right: 0;
        min-width: 0.95rem;
        height: 0.95rem;
        padding: 0 0.2rem;
        font-size: 0.6rem;
    }

    /* A széles vezérlők (téma-kapcsoló, hajó/flotta váltó) nem férnek el a sávban — kinyitva
       egy kattintással elérhetők. */
    .page.nav-collapsed .theme-switch-slot[b-r4qeei1jqp],
    .page.nav-collapsed .mode-toggle-container[b-r4qeei1jqp] {
        display: none;
    }

    .page.nav-collapsed .bottom-actions[b-r4qeei1jqp] {
        flex-direction: column;
        /* az !important NEM ízlés kérdése: a markupon bootstrap `align-items-center` van,
           a bootstrap utility-k pedig maguk is !important-tel jönnek */
        align-items: flex-start !important;
        /* pirula-padding (0.75rem) − az akció-ikonok saját paddingja (0.4rem) → egy vonalban
           a menüpont-ikonokkal */
        padding-left: 0.35rem;
    }
}

/* Csökkentett mozgás: a menü azonnal ugorjon a végállapotba (a funkció marad, az animáció nem). */
@media (prefers-reduced-motion: reduce) {
    .sidebar[b-r4qeei1jqp],
    .sidebar-head[b-r4qeei1jqp],
    .sidebar a.sidebar-brand[b-r4qeei1jqp],
    .sidebar .nav-label[b-r4qeei1jqp],
    .nav-collapse-btn[b-r4qeei1jqp],
    .nautechcontent[b-r4qeei1jqp] {
        transition-duration: 0.01ms;
    }
}

/* ===== Dark mode sidebar ===== */
:root[data-theme="dark"] .sidebar[b-r4qeei1jqp] {
    background: var(--list-bg);
    color: var(--text-clr);
}

:root[data-theme="dark"] .sidebar a[b-r4qeei1jqp] {
    color: var(--text-clr);
}

:root[data-theme="dark"] .sidebar a:hover[b-r4qeei1jqp] {
    color: #ffffff;
}

:root[data-theme="dark"] .main-links a[b-r4qeei1jqp]::before,
:root[data-theme="dark"] .bottom-links > a[b-r4qeei1jqp]::before,
:root[data-theme="dark"] .selected[b-r4qeei1jqp]::before {
    background: color-mix(in srgb, var(--primary-clr) 24%, transparent);
}

:root[data-theme="dark"] .sidebar-logo[b-r4qeei1jqp] {
    filter: invert(1);
}

:root[data-theme="dark"] .mode-toggle[b-r4qeei1jqp] {
    background: rgba(var(--c-primary-rgb), 0.08);
    border-color: rgba(var(--c-primary-rgb), 0.25);
    box-shadow: inset 0 2px 4px var(--c-shadow-sm);
}

:root[data-theme="dark"] .mode-toggle-option[b-r4qeei1jqp] {
    color: rgba(230, 238, 247, 0.5);
}

:root[data-theme="dark"] .mode-toggle-option.active[b-r4qeei1jqp] {
    color: #ffffff;
}

:root[data-theme="dark"] .mode-toggle-slider[b-r4qeei1jqp] {
    background: linear-gradient(135deg, #1f3a5f 0%, #2a4e80 100%);
    box-shadow: 0 2px 8px rgba(var(--c-primary-rgb), 0.35);
}

/* NIGHT (piros) téma: külön override kell — különben a base fekete szöveg (rgba(0,0,0,.4)) és a
   .active fekete a sötét háttéren gyakorlatilag láthatatlan (a user jelezte). Token-alapú, követi a témát. */
:root[data-theme="night"] .mode-toggle[b-r4qeei1jqp] {
    background: color-mix(in srgb, var(--primary-clr) 8%, transparent);
    border-color: color-mix(in srgb, var(--primary-clr) 22%, transparent);
    box-shadow: inset 0 2px 4px var(--c-shadow-sm);
}

:root[data-theme="night"] .mode-toggle-option[b-r4qeei1jqp] {
    color: var(--muted-clr);
}

:root[data-theme="night"] .mode-toggle-option.active[b-r4qeei1jqp] {
    color: var(--text-clr);
    font-weight: 700;
}

:root[data-theme="night"] .mode-toggle-slider[b-r4qeei1jqp] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-clr) 35%, #1a0a0a) 0%, color-mix(in srgb, var(--primary-clr) 55%, #1a0a0a) 100%);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-clr) 35%, transparent);
}

:root[data-theme="dark"] .fleet-supervision-back-link[b-r4qeei1jqp] {
    color: rgba(var(--c-primary-rgb), 0.85) !important;
}

@media (max-width: 900px) {
    :root[data-theme="dark"] .sidebar[b-r4qeei1jqp] {
        background: var(--background-clr);
    }

    :root[data-theme="dark"] .hamburger div[b-r4qeei1jqp] {
        background-color: var(--primary-clr);
    }
}

/* ===== Night mode sidebar (red-shift) =====
   The dark overrides above are gated on [data-theme="dark"] and do NOT apply to night, so the
   black source SVGs and the base `color: black` nav text stayed black and vanished on the
   #1A0A0A panel. Mirror them with night-appropriate (light dusty-red) values. */
:root[data-theme="night"] .sidebar[b-r4qeei1jqp] {
    background: var(--list-bg);
    color: var(--text-clr);
}

:root[data-theme="night"] .sidebar a[b-r4qeei1jqp],
:root[data-theme="night"] .sidebar a:hover[b-r4qeei1jqp] {
    color: var(--text-clr);
}

:root[data-theme="night"] .main-links a[b-r4qeei1jqp]::before,
:root[data-theme="night"] .bottom-links > a[b-r4qeei1jqp]::before,
:root[data-theme="night"] .selected[b-r4qeei1jqp]::before {
    background: color-mix(in srgb, var(--primary-clr) 30%, transparent);
}

:root[data-theme="night"] .sidebar-logo[b-r4qeei1jqp] {
    filter: invert(40%) sepia(70%) saturate(1600%) hue-rotate(-12deg) brightness(1.0);
}

@media (max-width: 900px) {
    :root[data-theme="night"] .sidebar[b-r4qeei1jqp] {
        background: var(--background-clr);
    }

    :root[data-theme="night"] .hamburger div[b-r4qeei1jqp] {
        background-color: var(--primary-clr);
    }
}
/* /Layout/Nodes/AlarmActionsBar.razor.rz.scp.css */
.alarm-actions[b-hsu3nc02gr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    /* A min-width:0 a rácsban ülő szekciónál kötelező: enélkül a leghosszabb szűrő-címke
       feszíti szét a kártyát, és a lap vízszintesen görgethetővé válik. */
    min-width: 0;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--c-divider);
}

.alarm-actions__filters[b-hsu3nc02gr],
.alarm-actions__buttons[b-hsu3nc02gr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.alarm-actions__filters[b-hsu3nc02gr]  fluent-select {
    min-width: 9rem;
}

/* Telefon-szélességen a két csoport egymás alá kerül és teljes szélességű lesz: a gombok
   így is elérik a 44 px-es érintési célméretet. */
@media (max-width: 480px) {
    .alarm-actions[b-hsu3nc02gr] {
        flex-direction: column;
        align-items: stretch;
    }

    .alarm-actions__buttons[b-hsu3nc02gr] {
        justify-content: flex-start;
    }
}
/* /Layout/Nodes/AlarmBanner.razor.rz.scp.css */
.alarm-banner[b-gds87j55ic] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    margin-bottom: 0.9rem;
    color: var(--c-on-notif);
    font-weight: 600;
}

.alarm-banner--info[b-gds87j55ic] {
    background-color: var(--info-clr);
}

.alarm-banner--warning[b-gds87j55ic] {
    background-color: var(--warning-clr);
}

.alarm-banner--critical[b-gds87j55ic],
.alarm-banner--emergency[b-gds87j55ic] {
    background-color: var(--critical-clr);
}

/* K2 (review-javítás): a "nincs aktív riasztás" sáv szándékosan halvány - jelen van (a terv "mindig
   látható" szava szerint), de nem versenyez vizuálisan egy valódi riasztással. */
.alarm-banner--clear[b-gds87j55ic] {
    background-color: var(--list-bg);
    color: var(--muted-clr);
    font-weight: 500;
    border: 1px solid var(--c-divider);
}

.alarm-banner__text[b-gds87j55ic] {
    flex: 1 1 auto;
    min-width: 0;
}

.alarm-banner__action[b-gds87j55ic] {
    flex: none;
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}
/* /Layout/Nodes/GroupTreeNav.razor.rz.scp.css */
/* A GroupTreeNav a MainLayout .main-links blokkjába ágyazódik. Blazor CSS-izolációja a szülő
   MainLayout.razor.css szabályait NEM terjeszti a gyerek-komponens saját elemeire (a scope-attribútum
   csak a MainLayout.razor markupjára kerül) — ezért a pirula-hover/kijelölés stílusát itt, saját
   tokenekkel (--primary-clr stb.) ismételjük meg, nem duplikáljuk a teljes összecsukott-sidebar logikát
   (az ikon-only összecsukott mód a teljes WP6 finomítása, l. handoff). */

.tree-nav__root[b-vhvympbxb9] {
    display: flex;
    flex-direction: column;
}

.tree-nav__row[b-vhvympbxb9] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.tree-nav__toggle[b-vhvympbxb9] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
}

.tree-nav__toggle:hover[b-vhvympbxb9] {
    background: color-mix(in srgb, var(--primary-clr) 16%, transparent);
}

.tree-nav__link[b-vhvympbxb9] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    padding: 0.35rem 0.6rem;
    transition: background-color 0.2s ease;
}

.tree-nav__link:hover[b-vhvympbxb9] {
    background: color-mix(in srgb, var(--primary-clr) 16%, transparent);
}

.tree-nav__link .nav-label[b-vhvympbxb9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tree-nav__children[b-vhvympbxb9] {
    display: flex;
    flex-direction: column;
    padding-left: 1.6rem;
}

.tree-nav__link--child[b-vhvympbxb9] {
    font-size: 0.9rem;
}

.tree-nav__dot[b-vhvympbxb9] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: auto;
}

.tree-nav__dot--critical[b-vhvympbxb9] {
    background-color: var(--critical-clr);
}

.tree-nav__dot--warning[b-vhvympbxb9] {
    background-color: var(--warning-clr);
}

.tree-nav__dot--info[b-vhvympbxb9] {
    background-color: var(--info-clr);
}

.tree-nav__dot--stale[b-vhvympbxb9] {
    background-color: var(--stale-clr);
}

.tree-nav__retry[b-vhvympbxb9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted-clr);
    cursor: pointer;
    padding: 0.35rem 0.6rem;
}
/* /Layout/Nodes/HierarchySwitcher.razor.rz.scp.css */
.hierarchy-switcher[b-6w15o8ljuw] {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem 0.6rem;
    min-width: 0;
}

.hierarchy-switcher__picker[b-6w15o8ljuw] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.hierarchy-switcher__edit[b-6w15o8ljuw] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 6px;
    color: var(--muted-clr);
    text-decoration: none;
}

.hierarchy-switcher__edit:hover[b-6w15o8ljuw] {
    background: color-mix(in srgb, var(--primary-clr) 12%, transparent);
    color: var(--primary-clr);
}

.hierarchy-switcher__label[b-6w15o8ljuw] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-clr);
}

.hierarchy-switcher__select[b-6w15o8ljuw] {
    min-width: 0;
    max-width: 100%;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
}
/* /Layout/Nodes/NodeAlarmsView.razor.rz.scp.css */
.node-alarms[b-y9633agilq] {
    min-width: 0;
}

.node-alarms__empty[b-y9633agilq] {
    color: var(--muted-clr);
    padding: 1rem 0;
}

.node-alarms__list[b-y9633agilq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.node-alarm-row[b-y9633agilq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    background-color: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-left: 4px solid var(--muted-clr);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.node-alarm-row--emergency[b-y9633agilq],
.node-alarm-row--critical[b-y9633agilq] {
    border-left-color: var(--critical-clr);
    color: var(--critical-clr);
}

.node-alarm-row--warning[b-y9633agilq] {
    border-left-color: var(--warning-clr);
    color: var(--warning-clr);
}

.node-alarm-row--info[b-y9633agilq] {
    border-left-color: var(--info-clr);
    color: var(--info-clr);
}

.node-alarm-row__body[b-y9633agilq] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: var(--text-clr);
}

.node-alarm-row__title[b-y9633agilq] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-alarm-row__message[b-y9633agilq] {
    font-size: 0.85rem;
    color: var(--muted-clr);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-alarm-row__time[b-y9633agilq] {
    font-size: 0.7rem;
    color: var(--extra-muted-clr);
}

.node-alarm-row__acked[b-y9633agilq] {
    flex: none;
    font-size: 0.75rem;
    color: var(--muted-clr);
}

/* ── WP7: riasztás-akciók, jelölések (wp7-alarms.md §6.8) ─────────────────────────────── */

.node-alarm-row[b-y9633agilq] {
    /* A sor kijelölhető: a shelve EGY riasztásra vonatkozik, tehát kell célpont. */
    cursor: pointer;
}

.node-alarm-row--selected[b-y9633agilq] {
    outline: 2px solid var(--primary-clr);
    outline-offset: -2px;
}

.node-alarm-row__badges[b-y9633agilq] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}

.node-alarm-badge[b-y9633agilq] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.node-alarm-badge--firstout[b-y9633agilq] {
    color: var(--critical-clr);
}

.node-alarm-badge--uncertain[b-y9633agilq] {
    color: var(--warning-clr);
}

.node-alarm-badge--shelved[b-y9633agilq],
.node-alarm-badge--stale[b-y9633agilq] {
    color: var(--muted-clr);
}

/* "Nyugtázás úton": a cloud már nyugtázott, de a parancs még nem ért le az edge-re. A csipogó
   ilyenkor SZÁNDÉKOSAN hangos marad, tehát a felhasználónak látnia kell a köztes állapotot. */
.node-alarm-row__acked--pending[b-y9633agilq] {
    color: var(--warning-clr);
    font-style: italic;
}

/* Telefon-szélességen a sor két sorba tördel: a jelölések a szöveg alá kerülnek, a gomb marad
   jobbra. A lap így sem görget vízszintesen. */
@media (max-width: 480px) {
    .node-alarm-row[b-y9633agilq] {
        flex-wrap: wrap;
    }

    /* Az ikon és a szöveg EGY sorban marad, a jelölések és a gomb alattuk tördelnek. A
       `flex: 1 1 auto` egy hosszú tag-névnél 100 százalék fölé nőne és lelökné az ikont a saját
       sorába - ettől a sorok magassága soronként ingadozna (screenshot-mérésen látszott). */
    .node-alarm-row__body[b-y9633agilq] {
        flex: 1 1 0;
    }

    .node-alarm-row__badges[b-y9633agilq] {
        width: 100%;
    }
}
/* /Layout/Nodes/NodeCamerasView.razor.rz.scp.css */
.node-cameras[b-62zg3b1k59] {
    min-width: 0;
}

.node-cameras__empty[b-62zg3b1k59] {
    color: var(--muted-clr);
    padding: 1rem 0;
}

.node-cameras__grid[b-62zg3b1k59] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.node-camera-tile[b-62zg3b1k59] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    background-color: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-radius: 10px;
    padding: 0.6rem;
}

.node-camera-tile__name[b-62zg3b1k59] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-clr);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Layout/Nodes/NodeMapView.razor.rz.scp.css */
.node-map-view[b-rjsyav2gs7] {
    min-width: 0;
}

.node-map-view__empty[b-rjsyav2gs7] {
    color: var(--muted-clr);
    padding: 0.5rem 0;
}

/* S2 (review-javítás): a korábbi szöveges koordináta-lista helyett egy valódi, olvasás-only térkép -
   fix magasság, mert a MapLibre/Leaflet konténer 0 magasságnál nem tud méretet mérni. */
.node-map-view__map[b-rjsyav2gs7] {
    width: 100%;
    height: 480px;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
}
/* /Layout/Nodes/NodeTreeBranch.razor.rz.scp.css */
.node-tree-branch[b-1ac20ps6jb] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.node-tree-branch__row[b-1ac20ps6jb] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding-left: calc(var(--node-tree-depth, 0) * 1rem);
    min-width: 0;
}

.node-tree-branch__toggle[b-1ac20ps6jb],
.node-tree-branch__toggle-spacer[b-1ac20ps6jb] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border: none;
    background: transparent;
    color: var(--muted-clr);
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
}

.node-tree-branch__toggle:hover[b-1ac20ps6jb] {
    background: color-mix(in srgb, var(--primary-clr) 12%, transparent);
}

.node-tree-branch__link[b-1ac20ps6jb] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    text-decoration: none;
    color: var(--text-clr);
    border-radius: 8px;
    padding: 0.25rem 0.4rem;
}

.node-tree-branch__link:hover[b-1ac20ps6jb] {
    background: color-mix(in srgb, var(--primary-clr) 10%, transparent);
}

.node-tree-branch__name[b-1ac20ps6jb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.node-tree-branch__dot[b-1ac20ps6jb] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.node-tree-branch__dot--critical[b-1ac20ps6jb] {
    background-color: var(--critical-clr);
}

.node-tree-branch__dot--warning[b-1ac20ps6jb] {
    background-color: var(--warning-clr);
}

.node-tree-branch__dot--info[b-1ac20ps6jb] {
    background-color: var(--info-clr);
}

.node-tree-branch__dot--stale[b-1ac20ps6jb] {
    background-color: var(--stale-clr);
}

.node-tree-branch__children[b-1ac20ps6jb] {
    display: flex;
    flex-direction: column;
}
/* /Layout/Nodes/NodeTreeView.razor.rz.scp.css */
.node-tree-view[b-jbhfh78cah] {
    min-width: 0;
}

.node-tree-view__empty[b-jbhfh78cah] {
    color: var(--muted-clr);
    padding: 1rem 0;
}
/* /Layout/Nodes/RollupChipsRow.razor.rz.scp.css */
.rollup-chips[b-hvwdnyxds5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.rollup-chip[b-hvwdnyxds5] {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    border-radius: 10px;
    padding: 0.25em 0.55em;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Rendben lévő sor: egyetlen halvány csipet (ISA-101, §19.3 "az abnormalitás ad súlyt"). */
.rollup-chip--ok[b-hvwdnyxds5] {
    color: var(--muted-clr);
    background-color: var(--list-bg);
    border-color: var(--c-divider);
}

.rollup-chip--info[b-hvwdnyxds5] {
    color: var(--c-on-notif);
    background-color: var(--info-clr);
}

.rollup-chip--warning[b-hvwdnyxds5] {
    color: var(--c-on-notif);
    background-color: var(--warning-clr);
}

.rollup-chip--emergency[b-hvwdnyxds5] {
    color: var(--c-on-notif);
    background-color: var(--critical-clr);
}

.rollup-chip--connectivity[b-hvwdnyxds5],
.rollup-chip--quality[b-hvwdnyxds5] {
    color: var(--warning-clr);
    background-color: transparent;
    border-color: currentColor;
}

.rollup-chip__text[b-hvwdnyxds5] {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Layout/Nodes/TagCard.razor.rz.scp.css */
.tag-card[b-wsdz4376el] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0; /* grid/flex item ne nyúljon a tartalom szélességére (pattern_nautech_page_grid_minwidth_trap) */
    background-color: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-left: 4px solid transparent;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    box-shadow: var(--elev-rest);
}

.tag-card--limit-info[b-wsdz4376el] {
    border-left-color: var(--info-clr);
}

.tag-card--limit-warning[b-wsdz4376el] {
    border-left-color: var(--warning-clr);
}

.tag-card--limit-critical[b-wsdz4376el],
.tag-card--limit-emergency[b-wsdz4376el] {
    border-left-color: var(--critical-clr);
}

.tag-card__header[b-wsdz4376el] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem 0.5rem;
    min-width: 0;
}

/* The name gets first claim on the header's width; with 2-3 mode buttons + the quality icon, a
   narrow card (grid minmax 200px) does not have room for both on one line at full name length -
   wrapping the actions to their own line (below) reads better than truncating "Battery voltage"
   down to "Battery ..." (found via the WP6 visual verification screenshots). */
.tag-card__name[b-wsdz4376el] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-clr);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tag-card__header-actions[b-wsdz4376el] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.tag-card__mode-btn[b-wsdz4376el] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-clr);
    cursor: pointer;
    padding: 0;
}

.tag-card__mode-btn:hover[b-wsdz4376el] {
    background: color-mix(in srgb, var(--primary-clr) 12%, transparent);
}

.tag-card__mode-btn.is-active[b-wsdz4376el] {
    color: var(--primary-clr);
    background: color-mix(in srgb, var(--primary-clr) 16%, transparent);
}

.tag-card__quality[b-wsdz4376el] {
    flex: none;
    display: inline-flex;
    align-items: center;
}

.tag-card__value[b-wsdz4376el] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.tag-card__viz[b-wsdz4376el] {
    display: inline-flex;
    align-items: center;
    margin-right: 0.1rem;
}

.tag-card__number[b-wsdz4376el] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-clr);
    line-height: 1;
}

.tag-card__number--empty[b-wsdz4376el] {
    color: var(--muted-clr);
}

.tag-card__unit[b-wsdz4376el] {
    font-size: 0.85rem;
    color: var(--muted-clr);
}

.tag-card__footer[b-wsdz4376el] {
    font-size: 0.7rem;
    color: var(--extra-muted-clr);
}

/* ── Chart mode ─────────────────────────────────────────────────────────── */

.tag-card__chart[b-wsdz4376el] {
    min-width: 0;
}

/* ── Gauge mode ─────────────────────────────────────────────────────────── */

.tag-card__gauge[b-wsdz4376el] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
}

.tag-card__gauge-svg[b-wsdz4376el] {
    width: 100%;
    max-width: 160px;
    height: auto;
}

.tag-card__gauge-track[b-wsdz4376el] {
    fill: none;
    stroke: var(--c-divider);
    stroke-width: 6;
    stroke-linecap: round;
}

.tag-card__gauge-needle[b-wsdz4376el] {
    stroke: var(--primary-clr);
    stroke-width: 2.5;
    stroke-linecap: round;
    transform-origin: 50px 52px;
    transition: transform 0.3s ease;
}

.tag-card__gauge-hub[b-wsdz4376el] {
    fill: var(--primary-clr);
}

.tag-card__value--gauge[b-wsdz4376el] {
    justify-content: center;
    width: 100%;
}
/* /Layout/Nodes/TagChartCard.razor.rz.scp.css */
.tag-chart-card[b-vduvm3erzj] {
    min-width: 0;
    background-color: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-radius: 10px;
    padding: 0.9rem;
    box-shadow: var(--elev-rest);
}

/* Embedded in TagCard Chart mode: no own frame/name (the host card already draws both). */
.tag-chart-card--embedded[b-vduvm3erzj] {
    border: none;
    box-shadow: none;
    padding: 0;
    background-color: transparent;
}

.tag-chart-card__header[b-vduvm3erzj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.tag-chart-card__name[b-vduvm3erzj] {
    font-weight: 600;
    color: var(--text-clr);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.tag-chart-card__range[b-vduvm3erzj] {
    /* flex-wrap a fejlécen + min-width:0 itt: 375 px-en a natív <select> nem zsugorodik a
       tartalmára (pattern_nautech_page_grid_minwidth_trap rokon esete) — enélkül a felirat a
       viewporton túlra lógott ki, screenshot-tal mérve. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
}

.tag-chart-card__error[b-vduvm3erzj] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    padding: 1rem 0;
    text-align: center;
}
/* /Layout/Nodes/TagControlsComponent.razor.rz.scp.css */
.tag-controls[b-85u4yztcqw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    background-color: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
}

.tag-controls--disabled[b-85u4yztcqw] {
    opacity: 0.6;
}

.tag-controls__header[b-85u4yztcqw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.tag-controls__name[b-85u4yztcqw] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-clr);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tag-controls__quality[b-85u4yztcqw] {
    flex: none;
    display: inline-flex;
}

.tag-controls__momentary-btn[b-85u4yztcqw] {
    font: inherit;
    font-weight: 600;
    color: var(--c-on-notif);
    background-color: var(--primary-clr);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    user-select: none;
}

.tag-controls__momentary-btn:disabled[b-85u4yztcqw] {
    cursor: not-allowed;
    background-color: var(--muted-clr);
}

.tag-controls__setpoint[b-85u4yztcqw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.tag-controls__setpoint-input[b-85u4yztcqw] {
    min-width: 0;
    width: 6rem;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--body-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
}

.tag-controls__unit[b-85u4yztcqw] {
    color: var(--muted-clr);
    font-size: 0.85rem;
}

.tag-controls__outcome[b-85u4yztcqw] {
    font-size: 0.75rem;
    color: var(--warning-clr);
}

/* ── WP8 (wp8-control.md §4.5) ─────────────────────────────────────────────── */

.tag-controls__badges[b-85u4yztcqw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
}

/* Forced: the displayed value is a simulation, not a measurement. Warning colour, not error -
   forcing is a deliberate commissioning tool, not a fault. */
.tag-controls__forced[b-85u4yztcqw] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-on-notif);
    background-color: var(--warning-clr);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

/* Manual lock: automation is locked out, the operator is not. Muted outline, because this is a
   normal maintenance state - it must be visible without shouting. */
.tag-controls__locked[b-85u4yztcqw] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted-clr);
    border: 1px solid var(--c-divider);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

.tag-controls__sbo[b-85u4yztcqw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}

.tag-controls__sbo-hint[b-85u4yztcqw] {
    font-size: 0.72rem;
    color: var(--muted-clr);
    min-width: 0;
}

.tag-controls__outcome--ok[b-85u4yztcqw] {
    color: var(--c-success, var(--muted-clr));
}
/* /Layout/OwnerSelector.razor.rz.scp.css */
.owner-dropdown[b-ff9gwr34zr] {
    position: relative;
    display: inline-block;
    min-width: 180px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .owner-dropdown button[b-ff9gwr34zr] {
        background-color: var(--list-bg);
        color: var(--text-clr);
        padding: 8px 12px;
        font-size: 16px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0px 4px 8px var(--c-shadow-sm);
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
        transition: border-radius 0.3s ease;
    }

:root[data-theme="dark"] .owner-dropdown button[b-ff9gwr34zr] {
    box-shadow: 0px 4px 8px var(--c-shadow-sm);
}

    .owner-dropdown.open button[b-ff9gwr34zr] {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

.owner-dropdown-content[b-ff9gwr34zr] {
    display: none;
    position: absolute;
    right: 0;
    padding: 5px;
    background-color: var(--list-bg);
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px var(--c-shadow-md);
    z-index: 10000;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

:root[data-theme="dark"] .owner-dropdown-content[b-ff9gwr34zr] {
    box-shadow: 0px 8px 16px 0px var(--c-shadow-lg);
}

.owner-dropdown.open .owner-dropdown-content[b-ff9gwr34zr] {
    display: block;
}

    .owner-dropdown.open .owner-dropdown-content .items[b-ff9gwr34zr] {
        display: grid;
    }

.owner-dropdown-content a[b-ff9gwr34zr] {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--text-clr);
    cursor: pointer;
    border-radius: 4px;
}

    .owner-dropdown-content a:hover[b-ff9gwr34zr] {
        background-color: var(--c-divider);
    }

    .owner-dropdown-content a.owner-selected[b-ff9gwr34zr] {
        font-weight: bold;
        color: var(--primary-clr);
    }

    .owner-dropdown-content a:last-child[b-ff9gwr34zr] {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
/* /Layout/SamplingComponent.razor.rz.scp.css */
/* Mintavételi szekció. A tartalom a szomszédos szekciók (Modbus, Automations) kártya-mintáját követi: a cím és a
   Save a split-headerben, alatta EGY kártya a leírással, a kapcsolókkal, a mezőrácsal és a súgósorokkal. Kártya nélkül
   a rács a lap széléig futott, és a szekció kilógott a többi közül. */
.sampling__card[b-0fm063u2vj] {
    display: grid;
    gap: 0.5rem;
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: var(--elev-rest);
    padding: 1rem 1.25rem 1.25rem;
}

/* A mezők auto-fill rácsban: mobilon egy oszlop, széles nézetben 4-6. MINDEN mező a saját cellájában, címke fölötte:
   a Fluent szám-mező a címkét és a beviteli elemet testvérként adja, tehát burkoló nélkül a rácsban külön cellába
   kerültek, és páratlan oszlopszámnál a párok szétcsúsztak (a "Depth" címkéje a sor végén, a mezője a következő sor
   elején). */
.sampling__grid[b-0fm063u2vj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem 1.25rem;
    margin-block: 0.5rem 0.25rem;
}

.sampling__field[b-0fm063u2vj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

    .sampling__field[b-0fm063u2vj]  fluent-number-field {
        width: 100%;
    }

    .sampling__field[b-0fm063u2vj]  label {
        color: var(--muted-clr);
        font-size: 0.85rem;
    }

.sampling__desc[b-0fm063u2vj],
.sampling__hint[b-0fm063u2vj] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin-block: 0.25rem;
}

/* Jogosultsági sor: a vezérlők letiltása önmagában nem mondja meg, MIÉRT tiltottak. */
.sampling__hint--lock[b-0fm063u2vj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Műveletsor a kártya alján: balra a jogosultsági sor (ha van), jobbra a Save. A gomb a kártyán BELÜL van, mert a
   fejlécben (a szomszédos szekciók "új elem" gombjának helyén) lap-szintű műveletnek látszott. */
.sampling__actions[b-0fm063u2vj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: var(--border-thin);
}

    .sampling__actions .sampling__hint--lock[b-0fm063u2vj] {
        margin-block: 0;
        margin-right: auto;
    }

/* A két kapcsoló egy sorban, de szűk nézetben tördel: a feliratok hosszabbak, mint a mezőké. */
.sampling__toggles[b-0fm063u2vj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-block: 0.5rem;
}

.sampling__toggle[b-0fm063u2vj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sampling__toggle-label[b-0fm063u2vj] {
    font-size: 0.9rem;
}

/* Figyelmeztető sáv. A bal szegély hordozza a szemantikát (nem a teljes háttér), hogy a szöveg
   kontrasztja éjszakai módban is megmaradjon. */
.sampling__notice[b-0fm063u2vj] {
    border: 1px solid var(--c-border-subtle);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--c-surface-elevated);
    padding: 0.5rem 0.75rem;
    margin-block: 0.25rem;
    font-size: 0.85rem;
}

.sampling__notice--info[b-0fm063u2vj]  { border-left-color: var(--c-border-subtle); }
.sampling__notice--warn[b-0fm063u2vj]  { border-left-color: var(--warning-clr); }
.sampling__notice--error[b-0fm063u2vj] { border-left-color: var(--critical-clr); }
/* /Layout/TopBarSection.razor.rz.scp.css */
.outer[b-h2boz7686z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--text-clr);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Page title - mockup uses a restrained ~18-20px weight 600 (was a large default h1). */
.left h1[b-h2boz7686z] {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Mandatory focus ring for any interactive/focusable element in the title row. */
.outer :focus-visible[b-h2boz7686z] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    *[b-h2boz7686z] {
        transition-duration: .01ms !important;
    }
}

/* Az oldalcímet sehol nem jelenítjük meg: desktopon a sidebar mutatja az aktív oldalt,
   mobilon pedig (felhasználói kérésre) szintén nem kell a core/owner választótól balra.
   A felső sávban így csak a választó marad, jobbra igazítva (ms-auto). */
.left[b-h2boz7686z] {
    display: none;
}
/* /Layout/UnitsComponent.razor.rz.scp.css */
/* 3-fokozatú desktop chart-méret szegmentált választó (Large / Medium / Small). */
.chart-size-setting[b-80mgujiu7c] {
    margin-top: 1.5rem;
}

    .chart-size-setting .section-title[b-80mgujiu7c] {
        margin-bottom: 0.5rem;
    }

.chart-size-options[b-80mgujiu7c] {
    display: inline-flex;
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    overflow: hidden;
    background: var(--list-bg);
}

.chart-size-opt[b-80mgujiu7c] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-clr);
    padding: 0.4rem 1.1rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .chart-size-opt + .chart-size-opt[b-80mgujiu7c] {
        border-left: var(--border-thin);
    }

    .chart-size-opt:hover[b-80mgujiu7c] {
        background: color-mix(in srgb, var(--primary-clr) 8%, var(--list-bg));
    }

    .chart-size-opt.active[b-80mgujiu7c] {
        background: var(--primary-clr);
        color: #fff;
    }


.base-list[b-80mgujiu7c] {
    --gtc: 2fr 1fr 2fr auto;
}

.base-list__header[b-80mgujiu7c] {
    grid-template-columns: var(--gtc);
}

.base-list__row:not(.empty-row)[b-80mgujiu7c] {
    grid-template-columns: var(--gtc);
}
/* /Layout/UpdateBanner.razor.rz.scp.css */
.update-banner[b-ajkrg5skfy] {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 24px);
    padding: 12px 14px 12px 16px;
    border: 1px solid color-mix(in srgb, var(--c-on-primary) 32%, transparent);
    border-radius: 999px;
    color: var(--c-on-primary);
    background: linear-gradient(135deg, var(--c-primary) 0%, color-mix(in srgb, var(--c-primary) 72%, black) 100%);
    animation: update-banner-in-b-ajkrg5skfy 320ms cubic-bezier(0.16, 1, 0.3, 1) both,
               update-banner-glow-b-ajkrg5skfy 2.4s ease-in-out 320ms infinite;
}

.update-icon[b-ajkrg5skfy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--c-on-primary);
    background: color-mix(in srgb, var(--c-on-primary) 22%, transparent);
    animation: update-banner-spin-b-ajkrg5skfy 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.update-banner.busy .update-icon[b-ajkrg5skfy] {
    animation: update-banner-spin-fast-b-ajkrg5skfy 900ms linear infinite;
}

.update-text[b-ajkrg5skfy] {
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--c-on-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.update-banner[b-ajkrg5skfy]  .update-action {
    flex-shrink: 0;
    min-height: 2.4rem;
    padding: 0.45rem 1.3rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--c-primary);
    background: var(--c-on-primary);
    border-color: var(--c-on-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.update-banner[b-ajkrg5skfy]  .update-action:hover:not(:disabled) {
    color: var(--c-primary);
    background: var(--c-on-primary);
    border-color: var(--c-on-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

.update-banner[b-ajkrg5skfy]  .update-action:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

@keyframes update-banner-in-b-ajkrg5skfy {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(24px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes update-banner-glow-b-ajkrg5skfy {
    0%, 100% {
        box-shadow: 0 10px 34px rgba(var(--c-primary-rgb), 0.42), 0 0 0 0 rgba(var(--c-primary-rgb), 0.5);
    }

    50% {
        box-shadow: 0 10px 34px rgba(var(--c-primary-rgb), 0.42), 0 0 0 12px rgba(var(--c-primary-rgb), 0);
    }
}

@keyframes update-banner-spin-fast-b-ajkrg5skfy {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes update-banner-spin-b-ajkrg5skfy {
    0%, 55% {
        transform: rotate(0deg);
    }

    75%, 100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 560px) {
    .update-banner[b-ajkrg5skfy] {
        left: 12px;
        right: 12px;
        max-width: none;
        transform: none;
        gap: 12px;
        padding: 12px;
        border-radius: 20px;
        animation-name: update-banner-in-mobile-b-ajkrg5skfy, update-banner-glow-b-ajkrg5skfy;
    }

    .update-text[b-ajkrg5skfy] {
        flex: 1;
        font-size: 14px;
        white-space: normal;
    }
}

@keyframes update-banner-in-mobile-b-ajkrg5skfy {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .update-banner[b-ajkrg5skfy],
    .update-icon[b-ajkrg5skfy] {
        animation: none;
    }
}
/* /Pages/Account/AccountSection.razor.rz.scp.css */
.account-section[b-0optyu04xo] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: start;
    min-height: 100%;
    /* Bal behúzás, hogy az azonos --list-bg színű sub-nav kártya NE tapadjon a sidebarhoz
       (csak itt kell — a dashboard flush-ban marad). A többi oldalt a globális layout nem érinti. */
    padding-left: var(--main-padding);
}

.account-nav[b-0optyu04xo] {
    position: sticky;
    top: 1rem;
    background: var(--list-bg);
    color: var(--text-clr);
    border-radius: var(--list-border-radius);
    padding: 1.5rem 1rem;
    box-shadow: 0 2px 8px var(--c-shadow-xs);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.account-nav h2[b-0optyu04xo] {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--muted-clr);
    margin: 0 0 0.75rem 0.5rem;
    letter-spacing: 0.04em;
}

.account-nav nav[b-0optyu04xo] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.account-nav nav a[b-0optyu04xo] {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.account-nav nav a:hover[b-0optyu04xo] {
    background-color: color-mix(in srgb, var(--primary-clr) 8%, transparent);
}

.account-nav nav a.active[b-0optyu04xo] {
    background-color: color-mix(in srgb, var(--primary-clr) 15%, transparent);
    color: var(--primary-clr);
    font-weight: 500;
}

.account-nav nav a:focus-visible[b-0optyu04xo] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}

.account-nav-group[b-0optyu04xo] {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--muted-clr);
    letter-spacing: 0.04em;
}

.account-content[b-0optyu04xo] {
    background: var(--list-bg);
    color: var(--text-clr);
    border-radius: var(--list-border-radius);
    padding: 2rem;
    box-shadow: 0 2px 8px var(--c-shadow-xs);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.account-header h1[b-0optyu04xo] {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    color: var(--text-clr);
}

.account-subtitle[b-0optyu04xo] {
    margin: 0 0 1.5rem 0;
    color: var(--muted-clr);
}

.account-body[b-0optyu04xo]  .account-card {
    background: transparent;
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-clr);
}

.account-body[b-0optyu04xo]  .account-card h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.05rem;
    color: var(--text-clr);
}

.account-body[b-0optyu04xo]  .account-card .card-subtitle {
    margin: 0 0 1rem 0;
    color: var(--muted-clr);
    font-size: 0.9rem;
}

.account-body[b-0optyu04xo]  .credential-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: var(--border-thin);
}

.account-body[b-0optyu04xo]  .credential-row:first-of-type {
    border-top: none;
}

.account-body[b-0optyu04xo]  .credential-row .meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.account-body[b-0optyu04xo]  .credential-row .meta strong {
    font-size: 0.95rem;
    color: var(--text-clr);
}

.account-body[b-0optyu04xo]  .credential-row .meta .ts {
    color: var(--muted-clr);
    font-size: 0.8rem;
}

.account-body[b-0optyu04xo]  .credential-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.account-body[b-0optyu04xo]  .credential-setup-row {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 0 0.25rem;
    border-top: var(--border-thin);
}

.account-body[b-0optyu04xo]  .credential-row + .credential-setup-row {
    border-top: var(--border-thin);
}

.account-body[b-0optyu04xo]  .device-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-top: var(--border-thin);
}

.account-body[b-0optyu04xo]  .device-row:first-of-type {
    border-top: none;
}

.account-body[b-0optyu04xo]  .device-row .device-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-clr) 8%, transparent);
    color: var(--primary-clr);
}

.account-body[b-0optyu04xo]  .device-row .device-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-clr);
}

.account-body[b-0optyu04xo]  .device-row .device-current {
    background: var(--primary-clr);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.account-body[b-0optyu04xo]  .device-row .device-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
    font-size: 0.8rem;
    color: var(--muted-clr);
    margin-top: 0.25rem;
}

.account-body[b-0optyu04xo]  .device-row .device-meta span:nth-child(2n+1) {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.7rem;
}

.account-body[b-0optyu04xo]  .profile-form {
    display: grid;
    gap: 1rem;
    max-width: 480px;
}

.account-body[b-0optyu04xo]  .profile-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .account-section[b-0optyu04xo] {
        grid-template-columns: 1fr;
    }
    .account-nav[b-0optyu04xo] {
        position: static;
    }
    .account-nav nav[b-0optyu04xo] {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ===== Dark mode ===== */
:root[data-theme="dark"] .account-nav[b-0optyu04xo],
:root[data-theme="dark"] .account-content[b-0optyu04xo] {
    box-shadow: 0 2px 8px var(--c-shadow-sm);
}

:root[data-theme="dark"] .account-nav nav a:hover[b-0optyu04xo] {
    background-color: rgba(var(--c-primary-rgb), 0.12);
}

:root[data-theme="dark"] .account-nav nav a.active[b-0optyu04xo] {
    background-color: rgba(var(--c-primary-rgb), 0.18);
    color: var(--primary-clr);
}

:root[data-theme="dark"] .account-body[b-0optyu04xo]  .device-row .device-icon {
    background: rgba(var(--c-primary-rgb), 0.15);
}
/* /Pages/AlarmJournalPage.razor.rz.scp.css */
.alarm-journal[b-7wxvwb1ddo] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    /* A lap törzse SOHA nem görgethet vízszintesen: a tábla a saját wrapperében görgethet. */
    min-width: 0;
}

.alarm-kpi[b-7wxvwb1ddo] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.alarm-kpi__tiles[b-7wxvwb1ddo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.alarm-kpi__lists[b-7wxvwb1ddo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.6rem;
}

.alarm-kpi__list[b-7wxvwb1ddo] {
    background: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-width: 0;
}

.alarm-kpi__list h4[b-7wxvwb1ddo] {
    margin: 0 0 0.35rem 0;
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.alarm-kpi__list ul[b-7wxvwb1ddo] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
}

.alarm-journal__toolbar[b-7wxvwb1ddo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    min-width: 0;
}

.alarm-journal__empty[b-7wxvwb1ddo] {
    color: var(--muted-clr);
    padding: 1.5rem 0;
}

.alarm-journal__scroll[b-7wxvwb1ddo] {
    overflow-x: auto;
    min-width: 0;
}

.alarm-journal__table[b-7wxvwb1ddo] {
    width: 100%;
    border-collapse: collapse;
    /* A táblának van alsó szélessége: alatta a wrapper görget, nem a lap. */
    min-width: 40rem;
}

.alarm-journal__table th[b-7wxvwb1ddo],
.alarm-journal__table td[b-7wxvwb1ddo] {
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--c-divider);
    vertical-align: top;
}

.alarm-journal__table th[b-7wxvwb1ddo] {
    color: var(--muted-clr);
    font-weight: 600;
    white-space: nowrap;
}

.alarm-journal__row--emergency td:first-child[b-7wxvwb1ddo],
.alarm-journal__row--critical td:first-child[b-7wxvwb1ddo] {
    border-left: 4px solid var(--critical-clr);
}

.alarm-journal__row--warning td:first-child[b-7wxvwb1ddo] {
    border-left: 4px solid var(--warning-clr);
}

.alarm-journal__row--info td:first-child[b-7wxvwb1ddo] {
    border-left: 4px solid var(--muted-clr);
}

.alarm-journal__flags[b-7wxvwb1ddo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.alarm-journal__badge[b-7wxvwb1ddo] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.alarm-journal__badge--firstout[b-7wxvwb1ddo] {
    color: var(--critical-clr);
}

.alarm-journal__badge--uncertain[b-7wxvwb1ddo] {
    color: var(--warning-clr);
}

.alarm-journal__badge--stale[b-7wxvwb1ddo] {
    color: var(--muted-clr);
}

/* k-3b-4 (wp14-fable-review-3b.md): a K10 lapozó-sornak eddig nem volt saját szabálya - inline
   alapelrendezéssel renderelt (elfért, de a gombok nem igazodtak a táblához, nem volt felső térköz).
   Az .alarm-journal__toolbar mintáját követi: flex + gap + a táblától elválasztó felső margó. */
.alarm-journal__pager[b-7wxvwb1ddo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.alarm-journal__pager-label[b-7wxvwb1ddo] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin-right: auto;
}

@media (max-width: 480px) {
    .alarm-journal__toolbar[b-7wxvwb1ddo] {
        flex-direction: column;
        align-items: stretch;
    }

    .alarm-journal__pager-label[b-7wxvwb1ddo] {
        margin-right: 0;
        width: 100%;
    }
}
/* /Pages/AlarmRulesPage.razor.rz.scp.css */
.alarm-rules[b-d88jhxtbjf] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 0;
    width: 100%;
}

.alarm-rules__section[b-d88jhxtbjf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.alarm-rules__toolbar[b-d88jhxtbjf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.alarm-rules__toolbar-actions[b-d88jhxtbjf] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.alarm-rules__title[b-d88jhxtbjf] {
    margin: 0;
    font-size: 1.15rem;
}

.alarm-rules__hint[b-d88jhxtbjf] {
    color: var(--muted-clr);
}

.alarm-rules__table[b-d88jhxtbjf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.alarm-rules__table th[b-d88jhxtbjf],
.alarm-rules__table td[b-d88jhxtbjf] {
    text-align: left;
    vertical-align: middle;
    padding: 0.4rem 0.5rem;
    border-bottom: var(--border-thin);
}

.alarm-rules__table th[b-d88jhxtbjf] {
    color: var(--muted-clr);
    font-weight: 600;
}

.alarm-rules__row--disabled[b-d88jhxtbjf] {
    color: var(--muted-clr);
}

.alarm-rules__badge[b-d88jhxtbjf] {
    display: inline-block;
    margin-left: 0.4rem;
    color: var(--warning-clr);
    font-size: 0.7rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0.02rem 0.3rem;
}

.alarm-rules__confirm[b-d88jhxtbjf] {
    display: flex;
    gap: 0.4rem;
    white-space: nowrap;
}
/* /Pages/AutomationRulesPage.razor.rz.scp.css */
.automation-rules[b-l6gtnx2kne] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    width: 100%;
}

.automation-rules__tabs[b-l6gtnx2kne] {
    display: flex;
    gap: 0.5rem;
}

.automation-rules__toolbar[b-l6gtnx2kne] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.automation-rules__toolbar select[b-l6gtnx2kne] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

.automation-rules__hint[b-l6gtnx2kne] {
    color: var(--muted-clr);
}

.automation-rules__table[b-l6gtnx2kne] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.automation-rules__table th[b-l6gtnx2kne],
.automation-rules__table td[b-l6gtnx2kne] {
    text-align: left;
    vertical-align: middle;
    padding: 0.4rem 0.5rem;
    border-bottom: var(--border-thin);
}

.automation-rules__table th[b-l6gtnx2kne] {
    color: var(--muted-clr);
    font-weight: 600;
}

.automation-rules__row--disabled[b-l6gtnx2kne] {
    color: var(--muted-clr);
}

.automation-rules__confirm[b-l6gtnx2kne] {
    display: flex;
    gap: 0.4rem;
    white-space: nowrap;
}

.automation-rules__pager[b-l6gtnx2kne] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.automation-rules__page-number[b-l6gtnx2kne] {
    color: var(--muted-clr);
    font-size: 0.85rem;
}
/* /Pages/CameraComponent.razor.rz.scp.css */
.video-wrapper[b-9ku0mz695q] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-media-bg);
    transform: translateZ(0);
}

.video-wrapper video[b-9ku0mz695q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--c-media-bg);
    /* A loading-ból a kész képbe finoman úsztat be (a stream beindulásakor opacity 0 → 1). */
    transition: opacity 0.4s ease;
}

.controls[b-9ku0mz695q] {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    padding: 0.5rem;
    border-radius: 5px;
    background: var(--c-scrim-weak);
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    container-type: inline-size;
    container-name: controls;
}

.video-wrapper.show-controls .controls[b-9ku0mz695q],
.video-wrapper:hover .controls[b-9ku0mz695q],
.video-wrapper:focus-visible .controls[b-9ku0mz695q] {
    opacity: 1;
    pointer-events: all;
}

.video-wrapper.fullscreen .controls.visible[b-9ku0mz695q] {
    opacity: 1;
    pointer-events: all;
}

.video-wrapper.fullscreen .controls.hidden[b-9ku0mz695q] {
    opacity: 0;
    pointer-events: none;
}

.live-indicator[b-9ku0mz695q] {
    display: block;
    width: 16px;
    aspect-ratio: 1;
    margin-left: auto;
    border-radius: 50%;
    background: var(--rec-clr);
    border: 2px solid var(--rec-clr);
}

.live-indicator.empty[b-9ku0mz695q] {
    background: transparent;
}

.unauthorized-camera[b-9ku0mz695q] {
    display: grid;
    place-content: center;
    position: relative;
    height: 100%;
    border-radius: 10px;
    background: var(--list-bg);
    color: var(--text-clr);
    font-weight: 500;
    font-style: italic;
    font-size: 1.125rem;
}

.unauthorized-camera span[b-9ku0mz695q] {
    display: grid;
    place-content: center;
    position: absolute;
    inset: 0;
    padding-inline: 1rem;
    text-align: center;
}

/* ── Kamera loading állapot ──
   A korábbi nyers shimmer-csík helyett: sötét, a videó fekete hátterébe simán átmenő felület
   (témától független, hogy ne ugráljon a kép betöltéskor), finom átsuhanó fény-sweep, középen
   lassan "lélegző" kamera ikon + halvány felirat. */
.camera-loading[b-9ku0mz695q] {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.65rem;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, #2a2e33 0%, #16181b 58%, #0c0d0f 100%);
}

/* Ferde fény-sweep, ami lassan áthalad a sötét felületen. */
.camera-loading[b-9ku0mz695q]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(var(--nt-white-rgb), 0.07) 50%, transparent 68%);
    transform: translateX(-100%);
    animation: camera-loading-sweep-b-9ku0mz695q 1.8s ease-in-out infinite;
}

@keyframes camera-loading-sweep-b-9ku0mz695q {
    100% {
        transform: translateX(100%);
    }
}

.camera-loading__icon[b-9ku0mz695q] {
    position: relative;
    display: grid;
    place-content: center;
    color: #fff;
    animation: camera-loading-pulse-b-9ku0mz695q 2s ease-in-out infinite;
}

@keyframes camera-loading-pulse-b-9ku0mz695q {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.07);
    }
}

.camera-loading__label[b-9ku0mz695q] {
    position: relative;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

/* A globális cards.css csak a transition-öket fékezi reduced-motion esetén, az animation-öket nem
   — itt explicit megállítjuk a mozgást. */
@media (prefers-reduced-motion: reduce) {
    .camera-loading[b-9ku0mz695q]::after,
    .camera-loading__icon[b-9ku0mz695q] {
        animation: none;
    }
}
/* /Pages/ConfigHistoryPage.razor.rz.scp.css */
.config-history[b-lg49sa7i4f] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    width: 100%;
}

.config-history__title[b-lg49sa7i4f] {
    margin: 0;
    font-size: 1.3rem;
}

.config-history__hint[b-lg49sa7i4f] {
    color: var(--muted-clr);
}

.config-history__badge[b-lg49sa7i4f] {
    display: flex;
    align-items: center;
    gap: 0.5em;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    width: fit-content;
}

.config-history__badge--synced[b-lg49sa7i4f] {
    /* WP6c-S3 review-javítás (K4): var(--resolved-clr) a notifikáció-lista SZÁNDÉKOSAN tompított
       "lezárt" jelvénye (szürke), nem siker-szín - a direkt var(--c-success) a helyes zöld, mert
       nincs hozzá Tier-3 alias. */
    border: 1px solid var(--c-success);
    color: var(--c-success);
}

.config-history__badge--pending[b-lg49sa7i4f] {
    border: 1px solid var(--warning-clr);
    color: var(--warning-clr);
}

.config-history__deferred[b-lg49sa7i4f] {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin: 0;
}

.config-history__section[b-lg49sa7i4f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.config-history__section-title[b-lg49sa7i4f] {
    margin: 0;
    font-size: 1rem;
}

.config-history__table[b-lg49sa7i4f] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.config-history__table th[b-lg49sa7i4f],
.config-history__table td[b-lg49sa7i4f] {
    text-align: left;
    vertical-align: middle;
    padding: 0.4rem 0.5rem;
    border-bottom: var(--border-thin);
}

.config-history__table th[b-lg49sa7i4f] {
    color: var(--muted-clr);
    font-weight: 600;
}

.config-history__pager[b-lg49sa7i4f] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.config-history__page-number[b-lg49sa7i4f] {
    color: var(--muted-clr);
    font-size: 0.85rem;
}

.config-history__diffpicker[b-lg49sa7i4f] {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.config-history__field[b-lg49sa7i4f] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.config-history__field label[b-lg49sa7i4f] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.config-history__field select[b-lg49sa7i4f] {
    min-width: 6rem;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.config-history__diff-error[b-lg49sa7i4f] {
    color: var(--delete-clr);
}

.config-history__diff-truncated[b-lg49sa7i4f] {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    color: var(--warning-clr);
    margin: 0;
}

.config-history__diff[b-lg49sa7i4f] {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.82rem;
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.6rem 0;
    overflow-x: auto;
}

.config-history__diff-line[b-lg49sa7i4f] {
    white-space: pre;
    padding: 0 0.8rem;
}

.config-history__diff-line--removed[b-lg49sa7i4f] {
    color: var(--delete-clr);
    background-color: color-mix(in srgb, var(--delete-clr) 8%, transparent);
}

.config-history__diff-line--added[b-lg49sa7i4f] {
    /* WP6c-S3 review-javítás (K4): l. a --badge--synced megjegyzését - var(--c-success), nem a
       tompított notifikáció-token. */
    color: var(--c-success);
    background-color: color-mix(in srgb, var(--c-success) 8%, transparent);
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* 1. sor = térkép (bal) + notifications-kártya (jobb), azonos (térkép-)magasságban.
   2. sor = a dinamikus adat-kártyák rácsa, TELJES SZÉLESSÉGBEN.
   A grid a kártya-rács (.cards-section) oszlop-modulját használja (repeat(auto-fill, minmax(200px,1fr))
   + 0.75rem oszlopköz), így a notifications-kártya az UTOLSÓ 2 oszlopra esik → PONTOSAN 2 kis adat-kártya
   széles, a térkép pedig az ezen kívüli összes oszlopot kitölti. align-items:stretch a notif-kitöltéshez. */
/* Container-query kontextus: a rács a SAJÁT rendelkezésre álló szélességére vált egyoszlopra (lásd lent),
   nem a viewportra. Így a sidebar-szélességtől függetlenül megbízhatóan stackel. */
.dashboard-grid-wrap[b-ehrrchotl9] {
    container-type: inline-size;
    width: 100%;
}

.dashboard-grid[b-ehrrchotl9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* 1. sor FIX = a térkép magassága (közös token, a map-card is ezt használja). */
    --dashboard-map-h: 300px;
    grid-template-rows: var(--dashboard-map-h) auto;
    /* az oszlopköz MEGEGYEZIK a .cards-section gap-jével (0.75rem), különben a notif 2 oszlopa nem
       lenne pontosan 2 kártya széles (a kártyák közti rés is 0.75rem). */
    column-gap: 0.75rem;
    align-items: stretch;
}

    .dashboard-grid__map[b-ehrrchotl9] {
        /* a notif 2 oszlopán kívüli ÖSSZES oszlop */
        grid-column: 1 / -3;
        grid-row: 1;
        min-width: 0;
    }

    .dashboard-grid__cards[b-ehrrchotl9] {
        /* Teljes szélesség: a kártya-rács az összes oszlopot átfogja (a notifications alatti helyet is). */
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        /* a presetek a térkép fölé lebegnek + a "Mérések" felirat törölve → a kártyák a 2. sor tetején
           kezdődnek, EGY magasságban a notifications-kártyával. position:relative a lebegő ceruzához. */
        position: relative;
    }

    .dashboard-grid__notif[b-ehrrchotl9] {
        /* Az UTOLSÓ 2 oszlop = pontosan 2 kis adat-kártya szélessége; a térképpel egy magasságban (1. sor). */
        grid-column: -3 / -1;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
    }

/* Map presented as a rounded surface card (mockup parity) rather than a square edge-to-edge block. */
.dashboard-map-card[b-ehrrchotl9] {
    width: 100%;
    min-width: 0;
    height: var(--dashboard-map-h, 300px);
    border-radius: var(--list-border-radius);
    overflow: hidden;
    border: var(--border-thin);
    box-shadow: var(--elev-rest);
}

/* Ha a rendelkezésre álló szélességbe < 3 oszlop fér (≈660px alatt), nincs hely a térkép + 2-kártyás
   notif egymás melletti elrendezésének → a negatív-vonalas span-ek (map 1/-3, notif -3/-1) 2 oszlopnál
   EGYBEESNÉNEK (a térkép a notif ALÁ csúszna). Ezért egyoszlopossá váltunk: térkép / kártyák / notif
   DOM-sorrendben egymás alá. Container-query (a .dashboard-grid-wrap tényleges szélességére), NEM
   viewport-media-query — így a sidebar szélességétől függetlenül pontos. */
@container (max-width: 660px) {
    .dashboard-grid[b-ehrrchotl9] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

        .dashboard-grid__map[b-ehrrchotl9],
        .dashboard-grid__cards[b-ehrrchotl9],
        .dashboard-grid__notif[b-ehrrchotl9] {
            grid-column: 1;
            grid-row: auto;
        }
}
/* /Pages/Dashboards/CamerasDash.razor.rz.scp.css */
.cameras-wrapper[b-cp0y895l33] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1rem;
}

/* Egy-egy kamera kicsi, lekerekített kártyában: cím-fejléc + 16:9 élő kép. */
.camera[b-cp0y895l33] {
    display: flex;
    flex-direction: column;
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--c-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .camera:hover[b-cp0y895l33] {
        border-color: color-mix(in srgb, var(--primary-clr) 35%, var(--c-divider));
        box-shadow: 0 4px 16px var(--c-shadow-md);
    }

    .camera .subsection-title[b-cp0y895l33] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0;
        padding: 0.6rem 0.75rem;
        font-size: 14px;
    }

        .camera .subsection-title[b-cp0y895l33]  svg {
            flex-shrink: 0;
        }

    .camera .camera-name[b-cp0y895l33] {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.footage-gallery[b-cp0y895l33] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.footage-card[b-cp0y895l33] {
    cursor: pointer;
    border-radius: var(--list-border-radius);
    overflow: hidden;
    background: var(--list-bg);
    transition: transform 0.15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .footage-card:hover[b-cp0y895l33] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px var(--c-shadow-lg);
    }

    .footage-card:focus-visible[b-cp0y895l33] {
        outline: 2px solid var(--primary-clr);
        outline-offset: 2px;
    }

.footage-thumbnail-wrapper[b-cp0y895l33] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--background-clr);
    overflow: hidden;
}

.footage-thumbnail[b-cp0y895l33] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.footage-play-overlay[b-cp0y895l33] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-scrim-weak);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.footage-card:hover .footage-play-overlay[b-cp0y895l33] {
    opacity: 1;
}

.footage-duration[b-cp0y895l33] {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.75rem;
    color: white;
    background: var(--c-scrim-medium);
    padding: 1px 5px;
    border-radius: 4px;
}

.footage-info[b-cp0y895l33] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.75rem;
}

.footage-date[b-cp0y895l33] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.footage-comment[b-cp0y895l33] {
    font-size: 0.78rem;
    color: var(--muted-clr);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A kép a kártya teljes szélességét kitölti; a lekerekítést a .camera kártya adja,
   így nincs dupla (belső + külső) lekerekítés. */
.camera[b-cp0y895l33]  .video-wrapper,
.camera[b-cp0y895l33]  .unauthorized-camera {
    border-radius: 0;
}
/* /Pages/Dashboards/Details.razor.rz.scp.css */
.hrr-cap-banner[b-ujpei2824c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background: var(--list-bg);
    border: 1px solid var(--warning-clr);
    border-radius: var(--list-border-radius);
    color: var(--warning-clr);
}

.hrr-cap-banner > span[b-ujpei2824c] {
    flex-grow: 1;
}

.details-chart-wrapper[b-ujpei2824c] {
    position: relative;
}

.hrr-status-badge[b-ujpei2824c] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    pointer-events: none;
}

.hrr-status-badge[b-ujpei2824c]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

    .hrr-status-badge.live[b-ujpei2824c] {
        background: var(--list-bg);
        color: var(--c-success);
    }

.hrr-status-badge.paused[b-ujpei2824c] {
    background: var(--list-bg);
    color: var(--muted-clr);
}
/* /Pages/Dashboards/Sections/DateIntervalPickerComponent.razor.rz.scp.css */
/* N5 — az időtartomány-választó (.section) balra, a chart-méret választó jobbra egy sorban. */
.dateintervalpicker[b-p5t1l5b6d6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* 3-fokozatú szegmentált chart-méret választó (Large/Medium/Small). */
.chart-size-toggle[b-p5t1l5b6d6] {
    display: inline-flex;
    border: var(--border-thin);
    border-radius: 8px;
    overflow: hidden;
    background: var(--list-bg);
    flex: none;
}

.chart-size-toggle__opt[b-p5t1l5b6d6] {
    border: none;
    background: transparent;
    color: var(--muted-clr);
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .chart-size-toggle__opt + .chart-size-toggle__opt[b-p5t1l5b6d6] {
        border-left: var(--border-thin);
    }

    .chart-size-toggle__opt:hover[b-p5t1l5b6d6] {
        background: color-mix(in srgb, var(--primary-clr) 8%, transparent);
        color: var(--text-clr);
    }

    .chart-size-toggle__opt.active[b-p5t1l5b6d6] {
        background: var(--primary-clr);
        color: #fff;
    }

/* Mobilon (<900px) rejtve: a --chart-cols csak ≥900px-en hat, a chartok ott úgyis 1 oszloposak. */
@media (max-width: 900px) {
    .chart-size-toggle[b-p5t1l5b6d6] {
        display: none;
    }
}
/* /Pages/DataConnectionsPage.razor.rz.scp.css */
.data-connections[b-5dwojbe3jn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.data-connections__toolbar[b-5dwojbe3jn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.data-connections__title[b-5dwojbe3jn] {
    margin: 0;
    font-size: 1.3rem;
}

/* pattern_nautech_page_grid_minwidth_trap: min-width:0 on both grid children, not just the wrapper -
   otherwise the form column's inputs push the whole page wider than the viewport. */
.data-connections__layout[b-5dwojbe3jn] {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: 1rem;
    min-width: 0;
    align-items: start;
}

@media (max-width: 768px) {
    .data-connections__layout[b-5dwojbe3jn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.data-connections__list[b-5dwojbe3jn] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.data-connections__list-item[b-5dwojbe3jn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    text-align: left;
}

.data-connections__list-item.is-selected[b-5dwojbe3jn] {
    border-color: var(--primary-clr);
    background-color: color-mix(in srgb, var(--primary-clr) 10%, var(--list-bg));
}

.data-connections__list-name[b-5dwojbe3jn] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-connections__list-driver[b-5dwojbe3jn] {
    flex: 0 0 auto;
    color: var(--muted-clr);
    font-size: 0.8rem;
}

.data-connections__list-badge[b-5dwojbe3jn] {
    flex: 0 0 auto;
    color: var(--warning-clr);
    font-size: 0.75rem;
}

.data-connections__form[b-5dwojbe3jn] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

.data-connections__hint[b-5dwojbe3jn] {
    color: var(--muted-clr);
}

.data-connections__field[b-5dwojbe3jn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.data-connections__field--checkbox[b-5dwojbe3jn] {
    flex-direction: row;
    align-items: center;
}

.data-connections__field--stacked[b-5dwojbe3jn] {
    width: 100%;
}

.data-connections__field label[b-5dwojbe3jn] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.data-connections__field input[b-5dwojbe3jn],
.data-connections__field select[b-5dwojbe3jn],
.data-connections__field textarea[b-5dwojbe3jn] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.data-connections__field textarea[b-5dwojbe3jn] {
    width: 100%;
    resize: vertical;
    font-family: monospace;
}

.data-connections__field textarea.has-error[b-5dwojbe3jn] {
    border-color: var(--delete-clr);
}

.data-connections__field-error[b-5dwojbe3jn] {
    color: var(--delete-clr);
    font-size: 0.8rem;
}

.data-connections__row[b-5dwojbe3jn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    min-width: 0;
}

.data-connections__row .data-connections__field[b-5dwojbe3jn] {
    flex: 1 1 10rem;
    min-width: 0;
}

.data-connections__error[b-5dwojbe3jn] {
    color: var(--delete-clr);
    margin: 0;
}

.data-connections__actions[b-5dwojbe3jn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.data-connections__test-ok[b-5dwojbe3jn] {
    color: var(--resolved-clr);
}

.data-connections__test-fail[b-5dwojbe3jn] {
    color: var(--delete-clr);
}

.data-connections__confirm[b-5dwojbe3jn] {
    border: 1px solid var(--delete-clr);
    border-radius: 8px;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.data-connections__confirm-actions[b-5dwojbe3jn] {
    display: flex;
    gap: 0.5rem;
}
/* /Pages/DataDevicesPage.razor.rz.scp.css */
.data-devices[b-2l8ox9imzk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.data-devices__toolbar[b-2l8ox9imzk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.data-devices__toolbar-actions[b-2l8ox9imzk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.data-devices__title[b-2l8ox9imzk] {
    margin: 0;
    font-size: 1.3rem;
}

.data-devices__layout[b-2l8ox9imzk] {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 1rem;
    min-width: 0;
    align-items: start;
}

@media (max-width: 768px) {
    .data-devices__layout[b-2l8ox9imzk] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.data-devices__list[b-2l8ox9imzk] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.data-devices__list-item[b-2l8ox9imzk] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
}

.data-devices__list-item.is-selected[b-2l8ox9imzk] {
    border-color: var(--primary-clr);
    background-color: color-mix(in srgb, var(--primary-clr) 10%, var(--list-bg));
}

.data-devices__list-item-main[b-2l8ox9imzk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background: none;
    border: none;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    text-align: left;
}

.data-devices__health-dot[b-2l8ox9imzk] {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.data-devices__health-dot--healthy[b-2l8ox9imzk] { background-color: var(--resolved-clr); }
.data-devices__health-dot--degraded[b-2l8ox9imzk] { background-color: var(--warning-clr); }
.data-devices__health-dot--failed[b-2l8ox9imzk] { background-color: var(--delete-clr); }
.data-devices__health-dot--disabled[b-2l8ox9imzk] { background-color: var(--extra-muted-clr); }
.data-devices__health-dot--unknown[b-2l8ox9imzk] { background-color: var(--muted-clr); }

.data-devices__list-name[b-2l8ox9imzk] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-devices__list-badge[b-2l8ox9imzk] {
    flex: 0 0 auto;
    color: var(--warning-clr);
    font-size: 0.75rem;
}

.data-devices__list-override[b-2l8ox9imzk] {
    flex: 0 0 auto;
    color: var(--muted-clr);
    font-size: 0.75rem;
}

.data-devices__form[b-2l8ox9imzk] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

.data-devices__hint[b-2l8ox9imzk] {
    color: var(--muted-clr);
}

.data-devices__field[b-2l8ox9imzk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.data-devices__field--checkbox[b-2l8ox9imzk] {
    flex-direction: row;
    align-items: center;
}

.data-devices__field label[b-2l8ox9imzk] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.data-devices__field input[b-2l8ox9imzk],
.data-devices__field select[b-2l8ox9imzk] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.data-devices__row[b-2l8ox9imzk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    min-width: 0;
}

.data-devices__row .data-devices__field[b-2l8ox9imzk] {
    flex: 1 1 10rem;
    min-width: 0;
}

.data-devices__error[b-2l8ox9imzk] {
    color: var(--delete-clr);
    margin: 0;
}

.data-devices__actions[b-2l8ox9imzk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.data-devices__confirm[b-2l8ox9imzk] {
    border: 1px solid var(--delete-clr);
    border-radius: 8px;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.data-devices__confirm-actions[b-2l8ox9imzk] {
    display: flex;
    gap: 0.5rem;
}
/* /Pages/DeviceTemplatesPage.razor.rz.scp.css */
.device-templates[b-5ns6udxnn6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.device-templates__toolbar[b-5ns6udxnn6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.device-templates__title[b-5ns6udxnn6] {
    margin: 0;
    font-size: 1.3rem;
}

/* pattern_nautech_page_grid_minwidth_trap: min-width:0 on both grid children. The form column is
   wider than the S1 pages' - the three definition-editor tables need the room. */
.device-templates__layout[b-5ns6udxnn6] {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: 1rem;
    min-width: 0;
    align-items: start;
}

@media (max-width: 768px) {
    .device-templates__layout[b-5ns6udxnn6] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.device-templates__list[b-5ns6udxnn6] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.device-templates__group-title[b-5ns6udxnn6] {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted-clr);
}

.device-templates__list-item[b-5ns6udxnn6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    text-align: left;
}

.device-templates__list-item.is-selected[b-5ns6udxnn6] {
    border-color: var(--primary-clr);
    background-color: color-mix(in srgb, var(--primary-clr) 10%, var(--list-bg));
}

.device-templates__list-name[b-5ns6udxnn6] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-templates__list-driver[b-5ns6udxnn6] {
    flex: 0 0 auto;
    color: var(--muted-clr);
    font-size: 0.8rem;
}

.device-templates__list-badge[b-5ns6udxnn6] {
    flex: 0 0 auto;
    color: var(--warning-clr);
    font-size: 0.75rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

.device-templates__list-badge--muted[b-5ns6udxnn6] {
    color: var(--muted-clr);
}

.device-templates__form[b-5ns6udxnn6] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

.device-templates__hint[b-5ns6udxnn6] {
    color: var(--muted-clr);
}

.device-templates__field[b-5ns6udxnn6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.device-templates__field--checkbox[b-5ns6udxnn6] {
    flex-direction: row;
    align-items: center;
}

.device-templates__field label[b-5ns6udxnn6],
.device-templates__field-label[b-5ns6udxnn6] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.device-templates__field input[b-5ns6udxnn6],
.device-templates__field select[b-5ns6udxnn6] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.device-templates__scope-locked[b-5ns6udxnn6] {
    color: var(--text-clr);
}

.device-templates__row[b-5ns6udxnn6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    min-width: 0;
}

.device-templates__row .device-templates__field[b-5ns6udxnn6] {
    flex: 1 1 10rem;
    min-width: 0;
}

.device-templates__error[b-5ns6udxnn6] {
    color: var(--delete-clr);
    margin: 0;
}

.device-templates__actions[b-5ns6udxnn6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.device-templates__confirm[b-5ns6udxnn6] {
    border: 1px solid var(--delete-clr);
    border-radius: 8px;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.device-templates__confirm-actions[b-5ns6udxnn6] {
    display: flex;
    gap: 0.5rem;
}
/* /Pages/Dialogs/AddressShiftDialog.razor.rz.scp.css */
/* WP11-A (wp11-industrial.md §2.3): the bulk address shift dialog. The preview table is the point
   of the dialog, so it gets the vertical room; the form above it stays compact. */

.address-shift[b-9gtd9aodf3] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

.address-shift__hint[b-9gtd9aodf3] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin: 0;
}

.address-shift__form[b-9gtd9aodf3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem;
    min-width: 0;
}

.address-shift__field[b-9gtd9aodf3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.address-shift__field > span[b-9gtd9aodf3] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.address-shift__field input[b-9gtd9aodf3],
.address-shift__field select[b-9gtd9aodf3] {
    font: inherit;
    min-width: 0;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
}

.address-shift__error[b-9gtd9aodf3] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--delete-clr);
    font-size: 0.85rem;
    margin: 0;
}

.address-shift__summary[b-9gtd9aodf3] {
    font-size: 0.85rem;
    margin: 0;
}

.address-shift__conflicts[b-9gtd9aodf3] {
    border: var(--border-thin);
    border-left: 3px solid var(--delete-clr);
    border-radius: 6px;
    padding: 0.5rem;
}

.address-shift__conflict-title[b-9gtd9aodf3] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--delete-clr);
    font-size: 0.85rem;
    margin: 0 0 0.4rem 0;
}

/* The table may be wider than the dialog on a phone; it scrolls on its own, the dialog body does not. */
.address-shift__table-scroll[b-9gtd9aodf3] {
    overflow-x: auto;
    max-height: 22rem;
    overflow-y: auto;
    min-width: 0;
}

.address-shift__table[b-9gtd9aodf3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.address-shift__table th[b-9gtd9aodf3],
.address-shift__table td[b-9gtd9aodf3] {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: var(--border-thin);
    white-space: nowrap;
}

.address-shift__table th[b-9gtd9aodf3] {
    position: sticky;
    top: 0;
    background-color: var(--c-surface-elevated);
    color: var(--muted-clr);
    font-weight: 600;
}

.address-shift__row--conflict td[b-9gtd9aodf3] {
    color: var(--delete-clr);
}
/* /Pages/Dialogs/AlarmRuleEditDialog.razor.rz.scp.css */
.alarmrule-edit__row[b-lmuzjmrmy9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.alarmrule-edit__row label[b-lmuzjmrmy9] {
    flex: 0 0 auto;
    min-width: 9rem;
}

.alarmrule-edit__row--stacked[b-lmuzjmrmy9] {
    flex-direction: column;
    align-items: stretch;
}

.alarmrule-edit__row--stacked label[b-lmuzjmrmy9] {
    min-width: 0;
    margin-bottom: 0.3rem;
}

.alarmrule-edit__row select[b-lmuzjmrmy9],
.alarmrule-edit__row input[type="text"][b-lmuzjmrmy9],
.alarmrule-edit__row input[type="number"][b-lmuzjmrmy9] {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

.alarmrule-edit__grid[b-lmuzjmrmy9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.alarmrule-edit__field[b-lmuzjmrmy9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.alarmrule-edit__field label[b-lmuzjmrmy9] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.alarmrule-edit__field input[b-lmuzjmrmy9],
.alarmrule-edit__field select[b-lmuzjmrmy9] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.alarmrule-edit__checks[b-lmuzjmrmy9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.alarmrule-edit__checks label[b-lmuzjmrmy9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.alarmrule-edit__section[b-lmuzjmrmy9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.alarmrule-edit__section-head[b-lmuzjmrmy9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.alarmrule-edit__section-head h3[b-lmuzjmrmy9] {
    margin: 0;
    font-size: 0.9rem;
}

.alarmrule-edit__hint[b-lmuzjmrmy9] {
    color: var(--muted-clr);
    font-size: 0.85rem;
}

.alarmrule-edit__table-scroll[b-lmuzjmrmy9] {
    /* WP6c-S3 review-javítás (K6): a Tag-select oszlop nem zsugorodhat 1 karakterre - a dialógus
       max-width-je alatt a tábla ehelyett görgethető, az AutomationRuleEditDialog mintája. */
    overflow-x: auto;
}

.alarmrule-edit__table[b-lmuzjmrmy9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.alarmrule-edit__table th[b-lmuzjmrmy9],
.alarmrule-edit__table td[b-lmuzjmrmy9] {
    text-align: left;
    vertical-align: middle;
    padding: 0.25rem 0.4rem;
    border-bottom: var(--border-thin);
}

.alarmrule-edit__table th[b-lmuzjmrmy9] {
    color: var(--muted-clr);
    font-weight: 600;
}

.alarmrule-edit__table input[b-lmuzjmrmy9],
.alarmrule-edit__table select[b-lmuzjmrmy9] {
    min-width: 0;
    width: 100%;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 4px;
    padding: 0.2rem 0.35rem;
}

.alarmrule-edit__table select.alarmrule-edit__table-tagselect[b-lmuzjmrmy9] {
    /* WP6c-S3 review-javítás (K6): a Tag-név a hét oszlop közül a leghosszabb - a fenti generikus
       ".alarmrule-edit__table select" szabály (min-width: 0) nélküle 1 karakterre zsugorodott
       ("Motor hőmérséklet" -> "M"). A két-osztályos szelektor SZÁNDÉKOSAN specifikusabb a fenti
       elem+osztály szabálynál, különben a cascade sorrendje dönt, nem a szándék.
       B22 (WP13 Sáv B, wp6c.md §6 sor 188, wp6c-lane-s3-review2.md "Megjegyzés" #1): a review2 9rem
       mellett a leghosszabb névnél ("Motor hőmérséklet") még 1-2 karaktert vágott ("Motor
       hőmérékle") - nem blokkoló, de a review saját javaslata szerint (11-12rem) egy szélesebb
       min-width teljesen levágás-mentes megjelenítést ad. A tábla a szülő ".alarmrule-edit__table-
       scroll"-on ÚGYIS overflow-x:auto (fent) - egy szélesebb oszlop legfeljebb a görgetést hozza
       be korábban, nem tör el semmit.
       */
    min-width: 12rem;
}

.alarmrule-edit__details[b-lmuzjmrmy9] {
    margin-bottom: 0.6rem;
}

.alarmrule-edit__details summary[b-lmuzjmrmy9] {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--muted-clr);
    margin-bottom: 0.5rem;
}
/* /Pages/Dialogs/Alarms/ShelveAlarmDialog.razor.rz.scp.css */
/* A mezők közti függőleges ritmus: a dialógus-törzs alapértelmezésben nem ad rést, és a három
   blokk (indok, időtartam, megjegyzés) enélkül összeragad. */
[b-d4gi3ui2iq] > div {
    margin-bottom: 0.9rem;
    min-width: 0;
}

[b-d4gi3ui2iq] fluent-text-area,
[b-d4gi3ui2iq] fluent-select {
    width: 100%;
}

/* A lejárat-megjegyzés a shelve LÉNYEGE (az elnyomás nem lehet örökös), de nem beviteli mező:
   halkabb, kisebb szöveg, hogy a két kötelező mező maradjon a fókuszban. */
.shelve-note[b-d4gi3ui2iq] {
    margin: 0;
    color: var(--muted-clr);
    font-size: 0.85rem;
    line-height: 1.35;
}
/* /Pages/Dialogs/AutomationRuleEditDialog.razor.rz.scp.css */
.automationrule-edit__row[b-rg3a69rb69] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.automationrule-edit__row label[b-rg3a69rb69] {
    flex: 0 0 auto;
    min-width: 9rem;
}

.automationrule-edit__row select[b-rg3a69rb69],
.automationrule-edit__row input[type="text"][b-rg3a69rb69],
.automationrule-edit__row input[type="number"][b-rg3a69rb69] {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

.automationrule-edit__grid[b-rg3a69rb69] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.automationrule-edit__field[b-rg3a69rb69] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.automationrule-edit__field label[b-rg3a69rb69] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.automationrule-edit__field input[b-rg3a69rb69],
.automationrule-edit__field select[b-rg3a69rb69] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.automationrule-edit__checks[b-rg3a69rb69] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.automationrule-edit__checks label[b-rg3a69rb69] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.automationrule-edit__section[b-rg3a69rb69] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.automationrule-edit__section-head[b-rg3a69rb69] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.automationrule-edit__section-head h3[b-rg3a69rb69] {
    margin: 0;
    font-size: 0.9rem;
}

.automationrule-edit__hint[b-rg3a69rb69] {
    color: var(--muted-clr);
    font-size: 0.85rem;
}

.automationrule-edit__table-scroll[b-rg3a69rb69] {
    overflow-x: auto;
}

.automationrule-edit__table[b-rg3a69rb69] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.automationrule-edit__table th[b-rg3a69rb69],
.automationrule-edit__table td[b-rg3a69rb69] {
    text-align: left;
    vertical-align: middle;
    padding: 0.25rem 0.4rem;
    border-bottom: var(--border-thin);
    white-space: nowrap;
}

.automationrule-edit__table th[b-rg3a69rb69] {
    color: var(--muted-clr);
    font-weight: 600;
}

.automationrule-edit__table input[b-rg3a69rb69],
.automationrule-edit__table select[b-rg3a69rb69] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 4px;
    padding: 0.2rem 0.35rem;
}

.automationrule-edit__table input[type="number"][b-rg3a69rb69] {
    width: 6rem;
}

.automationrule-edit__input--error[b-rg3a69rb69] {
    border-color: var(--delete-clr) !important;
}

.automationrule-edit__days[b-rg3a69rb69] {
    display: flex;
    gap: 0.15rem;
}

.automationrule-edit__day[b-rg3a69rb69] {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.65rem;
    color: var(--muted-clr);
    gap: 0.1rem;
}
/* /Pages/Dialogs/DeviceTemplateDefinitionEditor.razor.rz.scp.css */
.tpl-def[b-7bq8p3capm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.tpl-def__section[b-7bq8p3capm] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.tpl-def__section-head[b-7bq8p3capm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.tpl-def__section-title[b-7bq8p3capm] {
    margin: 0;
    font-size: 1rem;
}

.tpl-def__hint[b-7bq8p3capm] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin: 0;
}

.tpl-def__table-scroll[b-7bq8p3capm] {
    overflow-x: auto;
    max-height: 22rem;
    overflow-y: auto;
    min-width: 0;
}

.tpl-def__table[b-7bq8p3capm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.tpl-def__table th[b-7bq8p3capm],
.tpl-def__table td[b-7bq8p3capm] {
    text-align: left;
    vertical-align: middle;
    padding: 0.25rem 0.4rem;
    border-bottom: var(--border-thin);
}

.tpl-def__table th[b-7bq8p3capm] {
    position: sticky;
    top: 0;
    background-color: var(--c-surface-elevated);
    color: var(--muted-clr);
    font-weight: 600;
    white-space: nowrap;
}

.tpl-def__table input[b-7bq8p3capm],
.tpl-def__table select[b-7bq8p3capm] {
    min-width: 0;
    width: 100%;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 4px;
    padding: 0.2rem 0.35rem;
}

.tpl-def__unit[b-7bq8p3capm] {
    width: 4rem;
}

.tpl-def__indent-cell[b-7bq8p3capm] {
    display: flex;
    white-space: nowrap;
}

.tpl-def__address-summary[b-7bq8p3capm] {
    color: var(--muted-clr);
    white-space: nowrap;
}

.tpl-def__row--error[b-7bq8p3capm] {
    border-left: 3px solid var(--delete-clr);
}

.tpl-def__row--highlight[b-7bq8p3capm] {
    background-color: color-mix(in srgb, var(--primary-clr) 12%, transparent);
}

.tpl-def__error-row td[b-7bq8p3capm] {
    color: var(--delete-clr);
    font-size: 0.78rem;
    padding: 0.15rem 0.4rem 0.4rem;
    border-bottom: var(--border-thin);
}

.tpl-def__warning-row td[b-7bq8p3capm] {
    color: var(--warning-clr);
    font-size: 0.78rem;
    padding: 0.15rem 0.4rem 0.4rem;
    border-bottom: var(--border-thin);
}

.tpl-def__detail-row td[b-7bq8p3capm] {
    padding: 0.5rem;
    background-color: var(--c-surface-elevated);
}

.tpl-def__detail[b-7bq8p3capm] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tpl-def__detail-group[b-7bq8p3capm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tpl-def__detail-group label[b-7bq8p3capm] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.78rem;
    color: var(--muted-clr);
    min-width: 6rem;
}

.tpl-def__detail-group label input[b-7bq8p3capm],
.tpl-def__detail-group label select[b-7bq8p3capm] {
    font-size: 0.85rem;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
}

.tpl-def__checkbox-field[b-7bq8p3capm] {
    flex-direction: row !important;
    align-items: center;
    min-width: 0 !important;
}

.tpl-def__field[b-7bq8p3capm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tpl-def__field--stacked[b-7bq8p3capm] {
    width: 100%;
}

.tpl-def__field textarea[b-7bq8p3capm] {
    width: 100%;
    min-width: 0;
    resize: vertical;
    font-family: monospace;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.5rem;
}

.tpl-def__field textarea.has-error[b-7bq8p3capm] {
    border-color: var(--delete-clr);
}

.tpl-def__field-error[b-7bq8p3capm] {
    color: var(--delete-clr);
    font-size: 0.8rem;
}
/* /Pages/Dialogs/EditCoreDialog.razor.rz.scp.css */
.add-owner-btn[b-spac448727] {
    border-radius: 5px;
    border: 2px solid var(--primary-clr);
    background: transparent;
}

[b-spac448727] .add-owner-form {
    background: var(--background-clr);
    padding: 1rem;
    border-radius: 5px;
}

.save-btn[b-spac448727] {
    background: var(--primary-clr);
    color: white;
}
/* /Pages/Dialogs/OperatingModeActivateConfirmDialog.razor.rz.scp.css */
.mode-confirm[b-zl8f2lqxv3] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.mode-confirm__hint[b-zl8f2lqxv3] {
    margin: 0;
}

.mode-confirm__countdown[b-zl8f2lqxv3] {
    color: var(--muted-clr);
    font-size: 0.9rem;
    margin: 0;
}

.mode-confirm__expired[b-zl8f2lqxv3] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--warning-clr);
    margin: 0;
}

.mode-confirm__error[b-zl8f2lqxv3] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--delete-clr);
    margin: 0;
}
/* /Pages/Dialogs/TagBatchEditDialog.razor.rz.scp.css */
.tag-batch-edit-dialog__hint[b-t14n9dqhwg] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin: 0 0 0.8rem 0;
}

/* K3 (review-javítás): a kijelöltek közti duplikátum-/átfedés-jelzés - csak tájékoztat, a dialógus
   nem szerkeszti a cím-mezőket, tehát nem hozhat létre új ütközést. */
.tag-batch-edit-dialog__hint--warning[b-t14n9dqhwg] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--warning-clr);
}

.tag-batch-edit-dialog__row[b-t14n9dqhwg] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.tag-batch-edit-dialog__row label[b-t14n9dqhwg] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 9rem;
}

.tag-batch-edit-dialog__row select[b-t14n9dqhwg],
.tag-batch-edit-dialog__row input[type="text"][b-t14n9dqhwg],
.tag-batch-edit-dialog__row input[type="number"][b-t14n9dqhwg] {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}
/* /Pages/Dialogs/TagEditDialog.razor.rz.scp.css */
.tag-edit-dialog__tagkey[b-7ydmmdsfd8] {
    color: var(--muted-clr);
    font-size: 0.8rem;
    font-family: monospace;
    margin: 0 0 0.6rem 0;
}

.tag-edit-dialog__subheading[b-7ydmmdsfd8] {
    margin: 0.9rem 0 0.3rem 0;
    font-size: 0.95rem;
}

.tag-edit-dialog__field[b-7ydmmdsfd8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.tag-edit-dialog__field--stacked[b-7ydmmdsfd8] {
    width: 100%;
}

.tag-edit-dialog__field label[b-7ydmmdsfd8] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.tag-edit-dialog__field input[b-7ydmmdsfd8],
.tag-edit-dialog__field select[b-7ydmmdsfd8],
.tag-edit-dialog__field textarea[b-7ydmmdsfd8] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

.tag-edit-dialog__field textarea[b-7ydmmdsfd8] {
    width: 100%;
    resize: vertical;
    font-family: monospace;
}

.tag-edit-dialog__field textarea.has-error[b-7ydmmdsfd8] {
    border-color: var(--delete-clr);
}

.tag-edit-dialog__row[b-7ydmmdsfd8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.7rem;
    min-width: 0;
}

.tag-edit-dialog__row .tag-edit-dialog__field[b-7ydmmdsfd8] {
    flex: 1 1 8rem;
    min-width: 0;
}

.tag-edit-dialog__checkbox[b-7ydmmdsfd8] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
    white-space: nowrap;
}

.tag-edit-dialog__hint[b-7ydmmdsfd8] {
    color: var(--muted-clr);
    font-size: 0.8rem;
    margin: 0 0 0.6rem 0;
}

.tag-edit-dialog__error[b-7ydmmdsfd8] {
    color: var(--delete-clr);
    font-size: 0.85rem;
    margin: 0 0 0.6rem 0;
}

.tag-edit-dialog__testread[b-7ydmmdsfd8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.tag-edit-dialog__test-ok[b-7ydmmdsfd8] {
    color: var(--resolved-clr);
}

.tag-edit-dialog__test-fail[b-7ydmmdsfd8] {
    color: var(--delete-clr);
}
/* /Pages/Dialogs/TagLimitEditDialog.razor.rz.scp.css */
.taglimit-edit__warning[b-f0pvswglei] {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    margin: 0 0 0.8rem 0;
    font-size: 0.85rem;
    color: var(--warning-clr);
}

.taglimit-edit__row[b-f0pvswglei] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.taglimit-edit__row label[b-f0pvswglei] {
    flex: 0 0 auto;
    min-width: 9rem;
}

.taglimit-edit__row--checkbox label[b-f0pvswglei] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.taglimit-edit__row--stacked[b-f0pvswglei] {
    flex-direction: column;
    align-items: stretch;
}

.taglimit-edit__row--stacked label[b-f0pvswglei] {
    min-width: 0;
    margin-bottom: 0.3rem;
}

.taglimit-edit__row select[b-f0pvswglei],
.taglimit-edit__row input[type="text"][b-f0pvswglei],
.taglimit-edit__row input[type="number"][b-f0pvswglei],
.taglimit-edit__row textarea[b-f0pvswglei] {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

.taglimit-edit__row textarea[b-f0pvswglei] {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.8rem;
    resize: vertical;
}

.taglimit-edit__grid[b-f0pvswglei] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.taglimit-edit__field[b-f0pvswglei] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.taglimit-edit__field label[b-f0pvswglei] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.taglimit-edit__field input[b-f0pvswglei],
.taglimit-edit__field select[b-f0pvswglei] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.taglimit-edit__checks[b-f0pvswglei] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.taglimit-edit__checks label[b-f0pvswglei] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.taglimit-edit__details[b-f0pvswglei] {
    margin-bottom: 0.6rem;
}

.taglimit-edit__details summary[b-f0pvswglei] {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--muted-clr);
    margin-bottom: 0.5rem;
}
/* /Pages/Dialogs/TagMembershipDialog.razor.rz.scp.css */
.tag-membership-dialog__hint[b-56pj9fga6d] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin: 0 0 0.6rem 0;
}

.tag-membership-dialog__list[b-56pj9fga6d] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 320px;
    overflow-y: auto;
    min-width: 0;
}

.tag-membership-dialog__row[b-56pj9fga6d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    cursor: pointer;
}

.tag-membership-dialog__row span[b-56pj9fga6d] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Dialogs/TemplateInstantiateDialog.razor.rz.scp.css */
/* WP11-A (wp11-industrial.md §1.3): the dry-run preview of a template instantiation. */

.template-instantiate[b-e8sgk10okk] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

.template-instantiate__hint[b-e8sgk10okk] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin: 0;
}

.template-instantiate__form[b-e8sgk10okk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.6rem;
    min-width: 0;
}

.template-instantiate__field[b-e8sgk10okk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.template-instantiate__field > span[b-e8sgk10okk] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.template-instantiate__field input[b-e8sgk10okk],
.template-instantiate__field select[b-e8sgk10okk] {
    font: inherit;
    min-width: 0;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
}

.template-instantiate__summary[b-e8sgk10okk] {
    font-size: 0.85rem;
    margin: 0;
}

.template-instantiate__warning[b-e8sgk10okk] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--warning-clr);
    font-size: 0.85rem;
    margin: 0;
}

.template-instantiate__error[b-e8sgk10okk] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--delete-clr);
    font-size: 0.85rem;
    margin: 0;
}

/* The table scrolls on its own, so the dialog body never scrolls sideways on a phone. */
.template-instantiate__table-scroll[b-e8sgk10okk] {
    overflow-x: auto;
    max-height: 22rem;
    overflow-y: auto;
    min-width: 0;
}

.template-instantiate__table[b-e8sgk10okk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.template-instantiate__table th[b-e8sgk10okk],
.template-instantiate__table td[b-e8sgk10okk] {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: var(--border-thin);
    white-space: nowrap;
}

.template-instantiate__table th[b-e8sgk10okk] {
    position: sticky;
    top: 0;
    background-color: var(--c-surface-elevated);
    color: var(--muted-clr);
    font-weight: 600;
}
/* /Pages/Dialogs/TemplatePushDialog.razor.rz.scp.css */
/* WP11-A (wp11-industrial.md §1.5): the push diff table. The five actions are marked with an icon
   AND a word - colour is a third, redundant channel, never the only one. */

.template-push[b-vmkxokhtns] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

.template-push__hint[b-vmkxokhtns] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin: 0;
}

.template-push__scope[b-vmkxokhtns] {
    font-size: 0.85rem;
    margin: 0;
}

.template-push__warning[b-vmkxokhtns] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--warning-clr);
    font-size: 0.85rem;
    margin: 0;
}

.template-push__error[b-vmkxokhtns] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--delete-clr);
    font-size: 0.85rem;
    margin: 0;
}

.template-push__empty[b-vmkxokhtns] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    margin: 0;
}

.template-push__force[b-vmkxokhtns] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.85rem;
    color: var(--delete-clr);
}

.template-push__device[b-vmkxokhtns] {
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.5rem;
    min-width: 0;
}

.template-push__device-title[b-vmkxokhtns] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
    margin: 0 0 0.4rem 0;
}

.template-push__version[b-vmkxokhtns] {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.template-push__version-held[b-vmkxokhtns] {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--warning-clr);
}

.template-push__table-scroll[b-vmkxokhtns] {
    overflow-x: auto;
    max-height: 20rem;
    overflow-y: auto;
    min-width: 0;
}

.template-push__table[b-vmkxokhtns] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.template-push__table th[b-vmkxokhtns],
.template-push__table td[b-vmkxokhtns] {
    text-align: left;
    vertical-align: top;
    padding: 0.25rem 0.5rem;
    border-bottom: var(--border-thin);
}

.template-push__table th[b-vmkxokhtns] {
    position: sticky;
    top: 0;
    background-color: var(--c-surface-elevated);
    color: var(--muted-clr);
    font-weight: 600;
    white-space: nowrap;
}

.template-push__table td:first-child[b-vmkxokhtns] {
    display: table-cell;
    white-space: nowrap;
}

.template-push__row--conflict[b-vmkxokhtns] {
    border-left: 3px solid var(--delete-clr);
}

.template-push__row--ambiguous[b-vmkxokhtns] {
    border-left: 3px solid var(--warning-clr);
}

/* Info blue, not muted grey: a muted 3px bar next to a white or near-black row is invisible, and a
   row with NO marker beside two marked siblings reads as "nothing to see here" - the opposite of
   what Orphan means (a row the template dropped that is deliberately never deleted). It matches the
   Info icon the same row renders, so marker and icon say the same thing. */
.template-push__row--orphan[b-vmkxokhtns] {
    border-left: 3px solid var(--info-clr);
}

.template-push__level[b-vmkxokhtns] {
    color: var(--muted-clr);
    margin-left: 0.3em;
}

.template-push__change[b-vmkxokhtns] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3em;
}

.template-push__field[b-vmkxokhtns] {
    color: var(--muted-clr);
}

.template-push__before[b-vmkxokhtns] {
    text-decoration: line-through;
    color: var(--muted-clr);
}

.template-push__arrow[b-vmkxokhtns] {
    color: var(--muted-clr);
}

.template-push__detail[b-vmkxokhtns] {
    color: var(--muted-clr);
    font-style: italic;
}
/* /Pages/Dialogs/VirtualTagEditDialog.razor.rz.scp.css */
.virtual-tag-dialog__title[b-4nfyru8jn0] {
    margin: 0 0 0.6rem 0;
    font-weight: 600;
}

.virtual-tag-dialog__badge[b-4nfyru8jn0] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin: 0 0 0.4rem 0;
    font-size: 0.85rem;
    color: var(--primary-clr);
}

.virtual-tag-dialog__badge--edge[b-4nfyru8jn0] {
    color: var(--muted-clr);
}

.virtual-tag-dialog__warning[b-4nfyru8jn0] {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    margin: 0 0 0.8rem 0;
    font-size: 0.85rem;
    color: var(--warning-clr);
}

.virtual-tag-dialog__hint[b-4nfyru8jn0] {
    margin: 0 0 0.8rem 0;
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.virtual-tag-dialog__row[b-4nfyru8jn0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.virtual-tag-dialog__row label[b-4nfyru8jn0] {
    flex: 0 0 auto;
    min-width: 9rem;
}

.virtual-tag-dialog__row--stacked[b-4nfyru8jn0] {
    flex-direction: column;
    align-items: stretch;
}

.virtual-tag-dialog__row--stacked label[b-4nfyru8jn0] {
    min-width: 0;
    margin-bottom: 0.3rem;
}

.virtual-tag-dialog__row select[b-4nfyru8jn0],
.virtual-tag-dialog__row textarea[b-4nfyru8jn0] {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

.virtual-tag-dialog__row textarea[b-4nfyru8jn0] {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.8rem;
    resize: vertical;
}

.virtual-tag-dialog__inputs[b-4nfyru8jn0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.virtual-tag-dialog__chip[b-4nfyru8jn0] {
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.8rem;
}

.virtual-tag-dialog__error[b-4nfyru8jn0] {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    margin: 0.4rem 0 0 0;
    font-size: 0.85rem;
    color: var(--delete-clr);
}

.virtual-tag-dialog__preview[b-4nfyru8jn0] {
    margin: 0.4rem 0 0 0;
    font-size: 0.8rem;
    color: var(--muted-clr);
}
/* /Pages/FleetCameras.razor.rz.scp.css */
/* Nincs extra bal-padding: a .nautech-page 20px gutterje adja a behúzást — egy vonalban a fleet
   switches / notifications oldalakkal (konzisztens bal-él, nincs tab-váltáskori ugrálás). */
.fleet-cameras-page[b-6jqqqrxper] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.fleet-cameras__loading[b-6jqqqrxper] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.fleet-cameras__empty[b-6jqqqrxper] {
    text-align: center;
    padding: 3rem;
    color: var(--muted-clr);
    font-size: 0.875rem;
}

/* ── Core section ──────────────────────────────────────────── */

.fleet-cameras__core-section[b-6jqqqrxper] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.fleet-cameras__core-header[b-6jqqqrxper] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: var(--border-thin);
    padding-bottom: 0.5rem;
}

.fleet-cameras__core-title[b-6jqqqrxper] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--primary-clr);
}

.fleet-cameras__camera-count[b-6jqqqrxper] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-clr);
    font-weight: 500;
}

/* ── Camera grid ─────────────────────────────────────────────── */

.fleet-cameras__grid[b-6jqqqrxper] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
}

@media (min-width: 1400px) {
    .fleet-cameras__grid[b-6jqqqrxper] {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
}

/* ── Camera card ─────────────────────────────────────────────── */

.camera-card[b-6jqqqrxper] {
    background: var(--c-media-surface);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px var(--c-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
}

.camera-card:hover[b-6jqqqrxper] {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--c-shadow-md);
}

.camera-card__media[b-6jqqqrxper] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--c-media-surface);
}

/* ── Placeholder (click to play) ─────────────────────────────── */

.camera-card__placeholder[b-6jqqqrxper] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: linear-gradient(135deg, var(--c-media-surface-raised) 0%, var(--c-media-surface) 100%);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.camera-card__placeholder:hover[b-6jqqqrxper] {
    background: linear-gradient(135deg, var(--c-media-surface-hover) 0%, var(--c-media-surface-raised) 100%);
}

.camera-card__placeholder:focus-visible[b-6jqqqrxper] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}

.camera-card__placeholder > :first-child[b-6jqqqrxper] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform: scale(2.5);
}

.camera-card__play-circle[b-6jqqqrxper] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-clr);
    display: grid;
    place-items: center;
    box-shadow: 0 2px 12px var(--c-shadow-lg);
    transition: transform 0.15s ease;
}

.camera-card__placeholder:hover .camera-card__play-circle[b-6jqqqrxper] {
    transform: scale(1.08);
}

/* ── Stop button overlay ─────────────────────────────────────── */

.camera-card__stop-btn[b-6jqqqrxper] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--c-scrim-medium);
    color: white;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 5;
    transition: background 0.15s ease;
}

.camera-card__stop-btn:hover[b-6jqqqrxper] {
    background: rgba(var(--nt-red-600-rgb), 0.9);
}

.camera-card__stop-btn:focus-visible[b-6jqqqrxper] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}

/* ── Footer ──────────────────────────────────────────────────── */

.camera-card__footer[b-6jqqqrxper] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    background: var(--c-media-surface-raised);
    color: white;
    gap: 0.5rem;
}

.camera-card__name[b-6jqqqrxper] {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.camera-card__live[b-6jqqqrxper] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rec-clr);
}

.camera-card__live-dot[b-6jqqqrxper] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rec-clr);
    animation: live-pulse-b-6jqqqrxper 1.6s ease-in-out infinite;
}

@keyframes live-pulse-b-6jqqqrxper {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
/* /Pages/FleetMap.razor.rz.scp.css */
.fleet-map-page[b-t833kakksx] {
    position: relative;
    width: 100%;
    height: calc(100dvh - 7rem);
    min-height: 400px;
    border-radius: 10px;
    overflow: hidden;
}

/* A térkép ne tapadjon a sidebarhoz: 20px bal gutter ≥900px-en (mint a .nautech-page-es oldalakon).
   A térkép position:absolute, ezért padding nem húzná be — margin-left + szűkített width kell. */
@media (min-width: 900px) {
    .fleet-map-page[b-t833kakksx] {
        margin-left: 20px;
        width: calc(100% - 20px);
    }
}

.fleet-map-loading[b-t833kakksx] {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 10px;
}

.map-hidden-elements[b-t833kakksx] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.fleet-map-page:hover .map-hidden-elements[b-t833kakksx] {
    opacity: 1;
    visibility: visible;
}

.fleet-map-page:not(:hover) .map-hidden-elements[b-t833kakksx] {
    opacity: 0;
    visibility: hidden;
}
/* /Pages/FleetOverview.razor.rz.scp.css */
/* ── Layout ─────────────────────────────────────────────────────── */

.fleet-overview[b-xt5qqlyfk0] {
    --offline-clr: var(--critical-clr);
    --online-clr: var(--c-success);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    height: calc(100dvh - 7rem);
    min-height: 420px;
}

/* 20px bal gutter ≥900px — a térkép-rács ne tapadjon a sidebarhoz (auto-width grid, margin elég). */
@media (min-width: 900px) {
    .fleet-overview[b-xt5qqlyfk0] {
        margin-left: 20px;
    }
}

/* ── Map ─────────────────────────────────────────────────────────── */

.fleet-overview__map-container[b-xt5qqlyfk0] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.fleet-overview__map-loading[b-xt5qqlyfk0] {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 10px;
}

/* ── Right panel ────────────────────────────────────────────────── */

.fleet-overview__panel[b-xt5qqlyfk0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    overflow: hidden;
}

/* ── Section shared ─────────────────────────────────────────────── */

.fleet-overview__cores[b-xt5qqlyfk0],
.fleet-overview__notifications[b-xt5qqlyfk0] {
    background: var(--list-bg);
    border-radius: 10px;
    padding: 0.9rem 0.9rem 0.75rem;
    overflow-y: auto;
}

.fleet-overview__cores[b-xt5qqlyfk0] {
    flex-shrink: 0;
    max-height: 38%;
    min-height: 100px;
}

.fleet-overview__notifications[b-xt5qqlyfk0] {
    flex: 1;
    min-height: 0;
}

.fleet-overview__section-header[b-xt5qqlyfk0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.fleet-overview__section-title[b-xt5qqlyfk0] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted-clr);
}

.fleet-overview__core-summary[b-xt5qqlyfk0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-clr);
    font-weight: 500;
}

.core-summary__dot[b-xt5qqlyfk0] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.core-summary__dot.online[b-xt5qqlyfk0] {
    background-color: var(--online-clr);
}

.core-summary__dot.offline[b-xt5qqlyfk0] {
    background-color: var(--muted-clr);
}

.fleet-overview__spinner[b-xt5qqlyfk0] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.fleet-overview__empty[b-xt5qqlyfk0] {
    font-size: 0.82rem;
    color: var(--muted-clr);
    text-align: center;
    padding: 1rem 0;
}

/* ── Core status grid ─────────────────────────────────────────── */

.core-status-grid[b-xt5qqlyfk0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 0.35rem;
}

.core-card[b-xt5qqlyfk0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.2rem 0.4rem;
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}

.core-card:hover[b-xt5qqlyfk0] {
    background: color-mix(in srgb, var(--primary-clr) 8%, transparent);
}

.core-card:focus-visible[b-xt5qqlyfk0] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}

.core-card.offline[b-xt5qqlyfk0] {
    opacity: 0.45;
    filter: grayscale(0.4);
}

.core-card__avatar[b-xt5qqlyfk0] {
    position: relative;
    width: 42px;
    height: 42px;
}

.core-card__img[b-xt5qqlyfk0] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid transparent;
}

.core-card.online .core-card__img[b-xt5qqlyfk0] {
    border-color: var(--primary-clr);
}

.core-card__img--placeholder[b-xt5qqlyfk0] {
    background: var(--extra-muted-clr);
}

.core-card__dot[b-xt5qqlyfk0] {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--list-bg);
    background-color: var(--muted-clr);
}

.core-card.online .core-card__dot[b-xt5qqlyfk0] {
    background-color: var(--online-clr);
}

.core-card__name[b-xt5qqlyfk0] {
    font-size: 0.66rem;
    text-align: center;
    line-height: 1.2;
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-clr);
}

/* ── Notification entries ───────────────────────────────────────── */

.overview-notif-entry[b-xt5qqlyfk0] {
    display: flex;
    gap: 0.55rem;
    padding: 0.55rem 0;
    border-bottom: var(--border-thin);
}

.overview-notif-entry:last-child[b-xt5qqlyfk0] {
    border-bottom: none;
}

.overview-notif__bar[b-xt5qqlyfk0] {
    width: 3px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 1rem;
}

.overview-notif__bar.level-info[b-xt5qqlyfk0] {
    background-color: var(--info-clr);
}

.overview-notif__bar.level-warning[b-xt5qqlyfk0] {
    background-color: var(--warning-clr);
}

.overview-notif__bar.level-critical[b-xt5qqlyfk0] {
    background-color: var(--critical-clr);
}

.overview-notif__content[b-xt5qqlyfk0] {
    flex: 1;
    min-width: 0;
}

.overview-notif__top[b-xt5qqlyfk0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
}

.overview-notif__core[b-xt5qqlyfk0] {
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-notif__message[b-xt5qqlyfk0] {
    font-size: 0.78rem;
    line-height: 1.35;
    margin-bottom: 0.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.overview-notif__meta[b-xt5qqlyfk0] {
    font-size: 0.67rem;
    color: var(--muted-clr);
}

.notif-ongoing[b-xt5qqlyfk0] {
    color: var(--c-notif-ongoing);
    font-weight: 600;
}

.notif-resolved[b-xt5qqlyfk0] {
    color: var(--resolved-clr);
    font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .fleet-overview[b-xt5qqlyfk0] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .fleet-overview__map-container[b-xt5qqlyfk0] {
        height: 50dvh;
        min-height: 280px;
    }

    .fleet-overview__panel[b-xt5qqlyfk0] {
        height: auto;
    }

    .fleet-overview__cores[b-xt5qqlyfk0] {
        max-height: none;
    }

    .fleet-overview__notifications[b-xt5qqlyfk0] {
        max-height: 420px;
    }
}
/* /Pages/FleetSwitches.razor.rz.scp.css */
/* Nincs extra bal-padding: a .nautech-page (20px gutter ≥900px) adja a behúzást, így a tartalom
   ugyanott kezdődik, mint a fleet-notifications lista (x=300) — a user szerint az „pont jó". */
.fleet-switches-page[b-t9rfvnivas] {
    padding: 0;
}

.fleet-switches__loading[b-t9rfvnivas] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.fleet-switches__empty[b-t9rfvnivas] {
    text-align: center;
    padding: 3rem;
    color: var(--muted-clr);
    font-size: 0.875rem;
}

.fleet-switches__core-error[b-t9rfvnivas] {
    font-size: 0.78rem;
    color: var(--critical-clr);
    padding: 0.4rem 0;
    text-align: center;
}

/* K-3b-2 (wp14-fable-review-3b.md): a Cores/GetAll frissítés hibája (429/hálózat) - a rács ALATT
   marad látható a legutóbb ismert állapottal (részleges állapot), ez a sáv csak jelzi a problémát,
   nem takarja el semmi mást. */
.fleet-switches__ratelimit-banner[b-t9rfvnivas] {
    font-size: 0.78rem;
    color: var(--warning-clr);
    background: color-mix(in srgb, var(--warning-clr) 10%, transparent);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.75rem;
}

/* ── Core grid ─────────────────────────────────────────────── */

.fleet-switches__grid[b-t9rfvnivas] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
}

.fleet-switches__core-card[b-t9rfvnivas] {
    background: var(--list-bg);
    border-radius: 10px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* ── Core card header ──────────────────────────────────────── */

.fleet-switches__core-header[b-t9rfvnivas] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--border-thin);
}

.fleet-switches__core-name[b-t9rfvnivas] {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-switches__active-count[b-t9rfvnivas] {
    font-size: 0.7rem;
    color: var(--muted-clr);
    white-space: nowrap;
    margin-left: 0.5rem;
}

/* ── Group label ─────────────────────────────────────────────── */

.fleet-switches__group-label[b-t9rfvnivas] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-clr);
    margin-top: 0.4rem;
    margin-bottom: 0.1rem;
}

/* ── Switch rows ─────────────────────────────────────────────── */

.fleet-switches__no-active[b-t9rfvnivas] {
    font-size: 0.78rem;
    color: var(--muted-clr);
    padding: 0.4rem 0;
    text-align: center;
}

.fleet-switches__switch-row[b-t9rfvnivas] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    font-size: 0.82rem;
    transition: background 0.1s;
}

    .fleet-switches__switch-row.on[b-t9rfvnivas] {
        background: color-mix(in srgb, var(--c-success) 8%, transparent);
    }

.fleet-switches__switch-row.off[b-t9rfvnivas] {
    opacity: 0.55;
}

/* Review-javítás (K1): nem-Good minőségű tag - LÁTSZIK, de nem "aktív"-ként. */
.fleet-switches__switch-row.unknown[b-t9rfvnivas] {
    background: color-mix(in srgb, var(--warning-clr) 8%, transparent);
}

.fleet-switches__switch-name[b-t9rfvnivas] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    margin-right: 0.5rem;
}

/* ── Badges ──────────────────────────────────────────────────── */

.fleet-switches__switch-badge[b-t9rfvnivas] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15em 0.55em;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-on[b-t9rfvnivas] {
    background-color: var(--c-success);
    color: white;
}

.badge-off[b-t9rfvnivas] {
    background-color: var(--muted-clr);
    color: white;
}

.badge-active[b-t9rfvnivas] {
    background-color: var(--warning-clr);
    color: white;
}

.badge-unknown[b-t9rfvnivas] {
    background-color: var(--warning-clr);
    color: white;
}
/* /Pages/FootageComponent.razor.rz.scp.css */
.back-btn[b-bofdevj651] {
    width: fit-content;
    color: white;
    background: var(--primary-clr);
}

.footage-meta[b-bofdevj651] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.footage-meta__name[b-bofdevj651] {
    font-weight: 600;
    color: var(--text-clr);
}

.footage-meta__date[b-bofdevj651],
.footage-meta__duration[b-bofdevj651] {
    font-size: 0.85rem;
    color: var(--muted-clr);
}

.footage-meta__comment[b-bofdevj651] {
    font-size: 0.85rem;
    color: var(--muted-clr);
    font-style: italic;
}

.nautech-page[b-bofdevj651] {
    gap: 0.75rem;
}

.footage-meta-box[b-bofdevj651] {
    background: var(--list-bg);
    border-radius: var(--list-border-radius);
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    align-items: center;
}

.footage-meta-row[b-bofdevj651] {
    display: flex;
    gap: 0.4rem;
    font-size: 0.875rem;
    align-items: center;
    padding: 0 1rem;
}

.footage-meta-row + .footage-meta-row[b-bofdevj651] {
    border-left: var(--border-thin);
}

.footage-meta-label[b-bofdevj651] {
    font-weight: 600;
    color: var(--muted-clr);
    flex-shrink: 0;
}

.footage-meta-value[b-bofdevj651] {
    color: var(--text-clr);
    word-wrap: anywhere;
}

.video-wrapper[b-bofdevj651] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    transform: translateZ(0);
    background: var(--c-media-bg);
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100dvh - 220px);
}

    .video-wrapper video[b-bofdevj651] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.controls[b-bofdevj651] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: var(--c-scrim-medium);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .controls button[b-bofdevj651],
    .controls input[b-bofdevj651] {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
    }

.seek-bar[b-bofdevj651] {
    height: 15px;
}

.time-display[b-bofdevj651] {
    display: block;
    color: white;
    font-size: 0.85rem;
}
/* /Pages/LanguagePage.razor.rz.scp.css */
/* User settings oldal elrendezése. A szekció-fejlécek (.simple-header / .section-title) és a
   kártya-look (.base-list) a globális lists.css-ből jönnek; itt csak a lap rácsát és a
   Nyelv+Dátumformátum sort igazítjuk. */
.user-settings[b-ppmi1m5x5v] {
    max-width: 900px;
    display: grid;
    gap: 2rem;
}

/* Nyelv + dátumformátum egy sorban, kis képernyőn egymás alá. */
.settings-row[b-ppmi1m5x5v] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

/* A két választó külön komponens (gyökerük .base-list-component), ezért ::deep kell.
   Egyenlően osztoznak a soron, és 260px alá törnek külön sorba. */
.settings-row[b-ppmi1m5x5v]  .base-list-component {
    flex: 1 1 260px;
    min-width: 0;
}
/* /Pages/MapComponent.razor.rz.scp.css */
.map-date-picker[b-hvf7jhlvti] {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    background-color: var(--list-bg);
    padding: 5px;
}

.map-main-div[b-hvf7jhlvti] {
    position: relative;
    width: 100%;
    height: 100%;
}



.map-hidden-elements[b-hvf7jhlvti] {
    opacity: 0; /* Fully transparent by default */
    visibility: hidden; /* Hide from layout by default */
    transition: opacity 0.2s ease, visibility 0.2s ease; /* Add transition for smooth fade effect */
}

.map-main-div:hover .map-hidden-elements[b-hvf7jhlvti] {
    opacity: 1; /* Fully visible when hovering */
    visibility: visible; /* Make visible in layout */
}

.map-main-div:not(:hover) .map-hidden-elements[b-hvf7jhlvti] {
    opacity: 0; /* Fully transparent when not hovering */
    visibility: hidden; /* Hide from layout when not hovering */
}

/* Egyetlen lekerekített, surface-hátterű vezérlőcsoport (token-alapú) a három különálló
   zöld/piros/szürke gomb helyett — automatikusan témázódik light/dark/night alatt.
   Nyugalmi állapotban halványan látszik (felfedezhetőség), hoverre teljesen előjön. */
.map-controls[b-hvf7jhlvti] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: 0 2px 8px var(--c-shadow-md);
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.map-main-div:hover .map-controls[b-hvf7jhlvti] {
    opacity: 1;
}

/* A vektoros térképnél a jobb felső sarok a MapLibre-é: nagyítás, iránytű, réteg-panel. A saját
   csoportunk pontosan azok ALATT/FÖLÖTT ült (mindkettő top:10px; right:10px), ezért itt átmegy a
   bal oldalra. A raszteres visszaesésnél marad a jobb sarokban, mert ott a Leaflet nagyítója
   foglalja a bal felsőt. */
.map-controls--vector[b-hvf7jhlvti] {
    right: auto;
    left: 10px;
}

/* A .map-icon-btn gombok mostantól AppButton-ök (natív <button>), a stílusuk a GLOBÁLIS
   wwwroot/css/fleet-map.css `.app-btn.map-icon-btn` szabályaiban van (a scoped másolat itt már nem
   érné el az AppButton belső <button>-ját, mert az az AppButton scope-attribútumát viseli). */
/* /Pages/NodePage.razor.rz.scp.css */
.node-page[b-gsqse6tznm] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    width: 100%;
}

.node-page__empty[b-gsqse6tznm],
.node-page__loading[b-gsqse6tznm] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
    color: var(--muted-clr);
}

.node-page__breadcrumb[b-gsqse6tznm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted-clr);
    min-width: 0;
}

.node-page__breadcrumb a[b-gsqse6tznm] {
    color: var(--muted-clr);
    text-decoration: none;
}

.node-page__breadcrumb a:hover[b-gsqse6tznm] {
    color: var(--primary-clr);
    text-decoration: underline;
}

.node-page__breadcrumb-sep:last-child[b-gsqse6tznm] {
    display: none;
}

.node-page__title-row[b-gsqse6tznm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.node-page__title[b-gsqse6tznm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-clr);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.node-page__section-title[b-gsqse6tznm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-clr);
    margin: 0 0 0.6rem 0;
}

/* ── Core-kártya ────────────────────────────────────────────────────────── */

.node-core-card[b-gsqse6tznm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    background-color: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    min-width: 0;
}

.node-core-card__online[b-gsqse6tznm] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}

.node-core-card__online.is-online[b-gsqse6tznm] {
    color: var(--c-success);
}

.node-core-card__online.is-offline[b-gsqse6tznm] {
    color: var(--critical-clr);
}

.node-core-card__field[b-gsqse6tznm] {
    color: var(--muted-clr);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.node-core-card__field--warn[b-gsqse6tznm] {
    color: var(--warning-clr);
}

.node-core-card__field--device[b-gsqse6tznm] {
    background-color: var(--body-bg);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
}

.node-core-card__field--link[b-gsqse6tznm] {
    color: var(--primary-clr);
    text-decoration: none;
    margin-left: auto;
}

.node-core-card__field--link:hover[b-gsqse6tznm] {
    text-decoration: underline;
}

/* ── Nézet-kapcsoló (5 nézet) ───────────────────────────────────────────── */

.node-page__view-switcher[b-gsqse6tznm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    border-bottom: 1px solid var(--c-divider);
    min-width: 0;
}

.node-view-tab[b-gsqse6tznm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    color: var(--muted-clr);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.5rem 0.7rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.node-view-tab:hover[b-gsqse6tznm] {
    color: var(--text-clr);
}

.node-view-tab.is-active[b-gsqse6tznm] {
    color: var(--primary-clr);
    border-bottom-color: var(--primary-clr);
}

/* ── Gyerek-csomópontok ─────────────────────────────────────────────────── */

.node-page__children-grid[b-gsqse6tznm] {
    display: grid;
    /* auto-fit, not auto-fill: with fewer cards than fit-able columns, auto-fill would still
       reserve the extra empty tracks (verified visually, wp6 screenshot pass) - the real cards stay
       pinned at the 200px floor with dead space to their right, and a longer child name (e.g.
       "Sensors" next to the "No active alarm" chip) over-truncates for no reason. auto-fit collapses
       the empty tracks so the existing cards actually claim the freed width. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem;
    min-width: 0;
}

.node-child-card[b-gsqse6tznm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    background-color: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    color: var(--text-clr);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.node-child-card:hover[b-gsqse6tznm] {
    background-color: var(--surface-hover, color-mix(in srgb, var(--primary-clr) 8%, var(--list-bg)));
}

.node-child-card__head[b-gsqse6tznm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.node-child-card__name[b-gsqse6tznm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-child-card__pinned[b-gsqse6tznm] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.node-child-card__pin[b-gsqse6tznm] {
    font-size: 0.78rem;
    color: var(--muted-clr);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-child-card__count[b-gsqse6tznm] {
    font-size: 0.75rem;
    color: var(--muted-clr);
}

/* ── Tag-kártyák ────────────────────────────────────────────────────────── */

.node-page__tag-grid[b-gsqse6tznm] {
    display: grid;
    /* auto-fit - see .node-page__children-grid comment above (same fix, same reason). */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

/* ── Kezelőszervek ──────────────────────────────────────────────────────── */

.node-page__controls-grid[b-gsqse6tznm] {
    display: grid;
    /* auto-fit - see .node-page__children-grid comment above (same fix, same reason). */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

@media (max-width: 600px) {
    .node-page__children-grid[b-gsqse6tznm],
    .node-page__tag-grid[b-gsqse6tznm],
    .node-page__controls-grid[b-gsqse6tznm] {
        grid-template-columns: 1fr;
    }
}

/* ── HMI-panelek (WP6h/D34) ─────────────────────────────────────────────── */

.node-page__hmipanels-grid[b-gsqse6tznm] {
    display: grid;
    /* auto-fit - see .node-page__children-grid comment above (same fix, same reason). */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem;
    min-width: 0;
}

.node-hmipanel-card[b-gsqse6tznm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    background-color: var(--list-bg);
    border: 1px solid var(--c-divider);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    color: var(--text-clr);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.node-hmipanel-card:hover[b-gsqse6tznm] {
    background-color: var(--surface-hover, color-mix(in srgb, var(--primary-clr) 8%, var(--list-bg)));
}

.node-hmipanel-card__name[b-gsqse6tznm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .node-page__hmipanels-grid[b-gsqse6tznm] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Notifications.razor.rz.scp.css */
/* =============================================================================
   Notifications — állapot-vezérelt nézet: állapotsáv + aktív blokk + egy-sínű
   idővonal "állomásokkal", az alarmok kiváltva/megoldva külön pontként.
   Felület/keret/árnyék: app kártya-tokenek (--list-bg / --border-thin /
   --list-border-radius / --elev-rest). Súlyosság: --c-notif-*. Light/dark/night.
   ========================================================================== */

.noti-view[b-iw980jmaqz] {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto;
    padding: 0.25rem 0 2.5rem;
}

/* ───────── Állapotsáv ───────── */
.noti-status[b-iw980jmaqz] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.15rem;
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: var(--elev-rest);
    background-color: var(--list-bg);
    overflow: hidden;
    margin-bottom: 1.6rem;
}

.noti-status[b-iw980jmaqz]::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background-color: var(--c-notif-critical);
}

.noti-status.is-warning[b-iw980jmaqz]::before { background-color: var(--c-notif-warning); }
/* Betöltő skeleton: semleges bal sáv (a default kritikus-piros súlyosságot sugallna). */
.noti-status--skeleton[b-iw980jmaqz]::before { background-color: color-mix(in srgb, var(--muted-clr) 30%, transparent); }
.noti-status.is-clear[b-iw980jmaqz]::before { background-color: var(--c-success); }
.noti-status.is-critical[b-iw980jmaqz] { background-color: color-mix(in srgb, var(--c-notif-critical) 6%, var(--list-bg)); }
.noti-status.is-warning[b-iw980jmaqz] { background-color: color-mix(in srgb, var(--c-notif-warning) 8%, var(--list-bg)); }

.noti-status__text[b-iw980jmaqz] { display: flex; flex-direction: column; gap: 0.1rem; }
.noti-status__title[b-iw980jmaqz] { font-weight: 600; color: var(--c-text-primary); }
.is-clear .noti-status__title[b-iw980jmaqz] { color: var(--c-success); }
.noti-status__sub[b-iw980jmaqz] { display: flex; gap: 0.85rem; font-size: 0.82rem; color: var(--muted-clr); }

.noti-status__dot[b-iw980jmaqz] { width: 11px; height: 11px; border-radius: 50%; background-color: var(--c-success); flex: none; margin-left: 0.15rem; }
.noti-status__pulse[b-iw980jmaqz] { position: relative; width: 12px; height: 12px; border-radius: 50%; background-color: var(--c-notif-ongoing); flex: none; margin-left: 0.15rem; }
.noti-status__pulse[b-iw980jmaqz]::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--c-notif-ongoing); animation: noti-pulse-b-iw980jmaqz 1.9s ease-out infinite;
}
@keyframes noti-pulse-b-iw980jmaqz { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }

/* ───────── Szekció-címke ───────── */
/* A szín --extra-muted-clr (= --c-text-faint) volt: uppercase 0.72rem-en túl halványnak olvasódott.
   Az elsődleges szöveg-token ad tiszta kontrasztot; a hierarchiát a kis méret + ritkított,
   nagybetűs szedés tartja (nem a halvány szín). */
.noti-section-label[b-iw980jmaqz] {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--c-text-primary); margin: 0 0 0.6rem 0.35rem;
}

/* ───────── Aktív kártya ───────── */
.noti-active[b-iw980jmaqz] { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.7rem; }

.noti-card[b-iw980jmaqz] {
    --noti-accent: var(--c-notif-ongoing);
    position: relative;
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    background-color: var(--list-bg);
    box-shadow: var(--elev-rest);
    overflow: hidden;
}
.noti-card[b-iw980jmaqz]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: var(--noti-accent); }
.noti-card--critical[b-iw980jmaqz] { --noti-accent: var(--c-notif-ongoing-critical); }
.noti-card--warning[b-iw980jmaqz] { --noti-accent: var(--c-notif-ongoing-warning); }
.noti-card--info[b-iw980jmaqz] { --noti-accent: var(--c-notif-ongoing-info); }

.noti-card__head[b-iw980jmaqz] { padding: 0.95rem 1.15rem; }
.noti-card__head.is-clickable[b-iw980jmaqz] { cursor: pointer; }
.noti-card__head.is-clickable:hover[b-iw980jmaqz] { background-color: color-mix(in srgb, var(--primary-clr) 5%, var(--list-bg)); }
.noti-card__top[b-iw980jmaqz] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
.noti-card__dur[b-iw980jmaqz] { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--noti-accent); font-variant-numeric: tabular-nums; }
.noti-card__title[b-iw980jmaqz] { font-size: 1.02rem; font-weight: 600; color: var(--c-text-primary); margin-bottom: 0.25rem; line-height: 1.35; }
.noti-card__meta[b-iw980jmaqz] { font-size: 0.82rem; color: var(--muted-clr); }

/* ───────── Szűrő ───────── */
.noti-filter[b-iw980jmaqz] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.noti-chip[b-iw980jmaqz] {
    font-size: 0.85rem; padding: 0.4rem 1rem; border-radius: 999px;
    border: var(--border-thin); background-color: var(--list-bg); color: var(--muted-clr);
    cursor: pointer; box-shadow: var(--elev-rest);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.noti-chip:hover[b-iw980jmaqz] { border-color: var(--muted-clr); }
.noti-chip.is-on[b-iw980jmaqz] { background-color: var(--primary-clr); color: var(--c-on-primary); border-color: var(--primary-clr); }

/* Darabszám a chip-feliratban. Opacity, NEM színtoken: a primary-kitöltött aktív chipen egy
   szürke token elvész, az opacity viszont a currentColor-t követi mindhárom témában. */
.noti-chip__n[b-iw980jmaqz] { margin-left: 0.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; }

/* ───────── Idővonal panel ───────── */
.noti-timeline[b-iw980jmaqz] {
    /* Az idővonal geometriája EGY helyen. A sorok CSS-gridje ezekből számol:
       [ idő-sáv | sín+pötty | tartalom ]. 1.5rem = 24px = 16px pötty + 2×4px maszk-glória. */
    --noti-pad-x: 1.15rem;
    --noti-time-w: 3rem;
    --noti-rail-w: 1.5rem;
    --noti-node-top: 0.66rem; /* a pötty a címke első sorának közepén */
    --noti-time-top: 0.68rem; /* az idő alapvonala a címke alapvonalán */

    position: relative;
    /* Saját stacking-context: a kinyitott részletben lévő chart-kártya-gombok (cards.css z-index:5)
       különben a ragadó nap-fejléc FÖLÉ festenének. NEM overflow:hidden — az megölné a stickyt. */
    isolation: isolate;
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: var(--elev-rest);
    /* A felső padding marad: így a teljes szélességű nap-sáv nem takarja a panel lekerekített sarkait. */
    padding: 0.4rem var(--noti-pad-x) 1rem;
}

/* ───────── Nap-elválasztó: ──── ( MA ) ──── , ragadó fejlécként ─────────
   A .noti-group wrapper adja a csoportok közti levegőt, ez szakítja meg a (soronkénti) sínt, és ez
   határolja a stickyt — nélküle minden nap-fejléc a panel aljáig ragadva egymás mögé gyűlne. */
.noti-group + .noti-group[b-iw980jmaqz] { margin-top: 1.5rem; }

.noti-day[b-iw980jmaqz] {
    position: sticky;
    top: 0; /* nincs fix felső sáv az appban — a TopBarSection normál folyamban van */
    z-index: 6; /* > .noti-node (1) és a kártya-belső 2/5; az isolation a panelbe zárja */
    display: flex; align-items: center; justify-content: center;
    gap: 0.6rem; /* a hézag miatt a vonal nem ér hozzá a pillhez */
    margin-inline: calc(var(--noti-pad-x) * -1);
    padding: 0.9rem var(--noti-pad-x) 0.55rem;
    background-color: var(--list-bg); /* a stickyhez kell; nem-ragadva láthatatlan */
}

/* Hajszálvonal a pill két oldalán. A --border-thin itt túl halvány lenne
   (dark: rgba(255,255,255,.08)), ezért a sín saját idiómáját használjuk. */
.noti-day[b-iw980jmaqz]::before,
.noti-day[b-iw980jmaqz]::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background-color: color-mix(in srgb, var(--muted-clr) 28%, transparent);
}

.noti-day span[b-iw980jmaqz] {
    flex: none; /* a pill sosem zsugorodik — a két hajszálvonal nyúlik helyette */
    background-color: var(--c-surface-elevated); border: var(--border-thin); border-radius: 999px;
    padding: 3px 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--c-text-primary); white-space: nowrap;
}

/* ───────── Esemény sor: 3 hasábos grid ─────────
   align-items: start (NEM baseline): a skeletonban a szöveg nélküli .noti-item__body szintetizált
   alapvonala az alsó éle lenne, ami lelökné az időt. Az igazítást a --noti-*-top konstansok adják. */
.noti-item[b-iw980jmaqz] {
    position: relative;
    display: grid;
    grid-template-columns: var(--noti-time-w) var(--noti-rail-w) minmax(0, 1fr);
    align-items: start;
}

/* A sín SORONKÉNT (nem panel-szélességben): így a nap-csoportok közti rés magától megszakítja. */
.noti-item[b-iw980jmaqz]::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
    left: calc(var(--noti-time-w) + var(--noti-rail-w) / 2 - 1px);
    background-color: color-mix(in srgb, var(--muted-clr) 26%, transparent);
}
/* A csoport első pöttyénél kezdődik és az utolsónál végződik (nem lóg ki a szélekre). */
.noti-day + .noti-item[b-iw980jmaqz]::before { top: calc(var(--noti-node-top) + 8px); }
.noti-group > .noti-item:last-child[b-iw980jmaqz]::before { bottom: auto; height: calc(var(--noti-node-top) + 8px); }
/* Egyetlen esemény a napon: nincs mit összekötni. */
.noti-day + .noti-item:last-child[b-iw980jmaqz]::before { display: none; }

.noti-node[b-iw980jmaqz] {
    grid-column: 2;
    justify-self: center;
    align-self: start;
    margin-top: var(--noti-node-top);
    /* Pozicionált KELL, hogy maradjon: statikus elemként a szülő abszolút ::before sínje FÖLÉ
       festene, és a 4px-es --list-bg glória (sín-maszk) hatástalan lenne. */
    position: relative; z-index: 1;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--c-notif-info); background-color: var(--list-bg);
    box-shadow: 0 0 0 4px var(--list-bg);
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}
.noti-node--critical[b-iw980jmaqz] { border-color: var(--c-notif-critical); background-color: var(--c-notif-critical); }
.noti-node--warning[b-iw980jmaqz] { border-color: var(--c-notif-warning); background-color: var(--c-notif-warning); }
.noti-node--info[b-iw980jmaqz] { border-color: var(--c-notif-info); }
.noti-node--resolved[b-iw980jmaqz] { border-color: var(--c-success); background-color: var(--list-bg); }
.noti-node--resolved svg[b-iw980jmaqz] { width: 10px; height: 10px; color: var(--c-success); }
/* Automatizálás: UGYANAZ az átmérő, mint a többi pötty — a „halkabb" olvasat üres gyűrű + apró belső pont. */
.noti-node--auto[b-iw980jmaqz] { border-color: var(--muted-clr); background-color: var(--list-bg); }
.noti-node--auto[b-iw980jmaqz]::after {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: var(--muted-clr);
}
/* Betöltő skeleton: semleges pont a sínen (nincs súlyosság-szín, ami félrevezető lenne). */
.noti-node--skeleton[b-iw980jmaqz] { border-color: color-mix(in srgb, var(--muted-clr) 35%, transparent); }

.noti-item__body[b-iw980jmaqz] { grid-column: 3; min-width: 0; }

.noti-item__click[b-iw980jmaqz] { padding: 0.5rem 0.6rem; border-radius: 10px; }
.noti-item__click.is-clickable[b-iw980jmaqz] { cursor: pointer; }
.noti-item__click.is-clickable:hover[b-iw980jmaqz] { background-color: color-mix(in srgb, var(--primary-clr) 6%, var(--list-bg)); }

/* Csak az automatizálás-sor CÍMKÉje halkul (halkabb "done" olvasat); az időpont szándékosan NEM.
   A megoldott riasztás (.is-resolved) sora ELSŐDLEGES színnel marad: egy sor = egy incidens, amely
   most megoldott — a RESOLVED jelvény hordozza az állapotot, nem a halványított cím. */
.noti-item.is-auto .noti-item__title[b-iw980jmaqz] { color: var(--muted-clr); font-weight: 400; }

.noti-item__head[b-iw980jmaqz] { display: flex; align-items: baseline; gap: 0.6rem; }
.noti-item__title[b-iw980jmaqz] { color: var(--c-text-primary); overflow-wrap: anywhere; line-height: 1.35; }
/* A chevron veszi át a fejléc jobb szélét (az idő balra költözött). A fejléc baseline-igazítású,
   ezért a képet külön középre kell tenni. */
.noti-item__head .noti-chevron[b-iw980jmaqz] { margin-left: auto; flex: none; align-self: center; }

/* Bal oldali idő-sáv: erősebb szedés (--muted-clr a leghalványabb token helyett) + tabular-nums,
   így az időpontok egy vonalban, „ugrálás" nélkül pásztázhatók. */
.noti-item__time[b-iw980jmaqz] {
    grid-column: 1;
    padding-top: var(--noti-time-top);
    padding-right: 0.35rem;
    font-size: 0.8rem; font-weight: 600; line-height: 1.35;
    color: var(--muted-clr); font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em; white-space: nowrap;
}
.noti-item__sub[b-iw980jmaqz] { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.35rem; font-size: 0.82rem; color: var(--muted-clr); }
.noti-item__dur[b-iw980jmaqz] { color: var(--muted-clr); }

.noti-count[b-iw980jmaqz] {
    font-size: 0.72rem; font-weight: 700; color: var(--c-text-secondary);
    background-color: color-mix(in srgb, var(--muted-clr) 16%, var(--list-bg));
    border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.4rem;
}

/* Lenyitott csoport-események. Nincs bal oldali függőleges vonal: a fő sín már jelzi az idővonalat,
   egy második vonal csak duplikálná. A hierarchiát az idő-hasáb ritmusa adja. */
.noti-group__children[b-iw980jmaqz] {
    margin: 0.5rem 0 0.3rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
/* Az idő BALRA, saját hasábban — ugyanaz az olvasási rend, mint a fő idővonalon. */
.noti-child[b-iw980jmaqz] {
    display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.5rem;
    font-size: 0.8rem; color: var(--muted-clr);
}
.noti-child__t[b-iw980jmaqz] { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted-clr); }

.noti-chevron[b-iw980jmaqz] { width: 14px; height: auto; opacity: 0.55; transition: transform 0.2s ease; }
.is-open .noti-chevron[b-iw980jmaqz] { transform: rotate(180deg); }

/* ───────── Kinyitott részlet ───────── */
/* A tartalom-hasábon belül van (a grid igazítja), ezért nem kell külön bal behúzás. */
.noti-detail[b-iw980jmaqz] {
    margin: 0.1rem 0.6rem 0.55rem;
    border-top: var(--border-thin); padding-top: 0.7rem;
}
.noti-fallback[b-iw980jmaqz] { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.5rem; align-items: baseline; }
/* A mező-címkék (Forrás / Feltétel / Szint / Aktiválva …) a leghalványabb tokent használták
   (--extra-muted-clr = --c-text-faint), ami alig látszott → a jól olvasható másodlagos szövegszín. */
.noti-fallback__key[b-iw980jmaqz] { color: var(--muted-clr); font-size: 0.82rem; }
.noti-fallback__val[b-iw980jmaqz] { overflow-wrap: anywhere; color: var(--c-text-primary); font-size: 0.9rem; }

.noti-empty[b-iw980jmaqz] {
    text-align: center; color: var(--muted-clr); font-style: italic;
    border: var(--border-thin); border-radius: var(--list-border-radius);
    background-color: var(--list-bg); box-shadow: var(--elev-rest); padding: 2rem 1rem;
}

/* ───────── „Több betöltése" ─────────
   Az idővonal alatti, teljes szélességű másodlagos gomb: a panel felülete (--list-bg + hajszálkeret +
   --elev-rest), NEM primary kitöltés — a lapon a primary a kiválasztott szűrő-pirulát jelöli, ezt nem
   szabad elvinni. A hover ugyanaz a halvány primary-keverés, mint a .noti-chip / .noti-card__head-en. */
.noti-more[b-iw980jmaqz] {
    display: block; width: 100%; margin-top: 0.9rem;
    font-size: 0.9rem; font-weight: 600; padding: 0.7rem 1rem;
    border: var(--border-thin); border-radius: var(--list-border-radius);
    background-color: var(--list-bg); color: var(--c-text-primary);
    cursor: pointer; box-shadow: var(--elev-rest);
    transition: background-color .15s ease, border-color .15s ease;
}
.noti-more:hover[b-iw980jmaqz] {
    border-color: var(--muted-clr);
    background-color: color-mix(in srgb, var(--primary-clr) 5%, var(--list-bg));
}

/* ───────── Reszponzív ───────── */
@media (max-width: 560px) {
    .noti-status[b-iw980jmaqz] { padding: 0.8rem 0.95rem; }
    .noti-card__head[b-iw980jmaqz] { padding: 0.8rem 0.95rem; }
    .noti-card__title[b-iw980jmaqz] { font-size: 0.98rem; }
    /* Csak a panel vízszintes paddingja szűkül — a hasáb-szélességek (idő/sín) maradnak,
       így az idő mérete és a --noti-time-top igazítás sem változik. */
    .noti-timeline[b-iw980jmaqz] { --noti-pad-x: 0.75rem; padding: 0.4rem var(--noti-pad-x) 0.9rem; }
    .noti-item__click[b-iw980jmaqz] { padding-inline: 0.4rem; }
    .noti-detail[b-iw980jmaqz] { margin-inline: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .noti-status__pulse[b-iw980jmaqz]::after { animation: none; }
    .noti-chevron[b-iw980jmaqz] { transition: none; }
}
/* /Pages/OperatingModesPage.razor.rz.scp.css */
.operating-modes[b-mtyn3dvv1f] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.operating-modes__toolbar[b-mtyn3dvv1f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.operating-modes__title[b-mtyn3dvv1f] {
    margin: 0;
    font-size: 1.3rem;
}

.operating-modes__activation[b-mtyn3dvv1f] {
    border: 1px solid var(--resolved-clr);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.operating-modes__activation-summary[b-mtyn3dvv1f] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
}

.operating-modes__activation-details[b-mtyn3dvv1f] {
    font-size: 0.85rem;
    color: var(--muted-clr);
}

/* pattern_nautech_page_grid_minwidth_trap: min-width:0 on both grid children. */
.operating-modes__layout[b-mtyn3dvv1f] {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 1rem;
    min-width: 0;
    align-items: start;
}

@media (max-width: 768px) {
    .operating-modes__layout[b-mtyn3dvv1f] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.operating-modes__list[b-mtyn3dvv1f] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.operating-modes__list-item[b-mtyn3dvv1f] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
}

.operating-modes__list-item.is-selected[b-mtyn3dvv1f] {
    border-color: var(--primary-clr);
    background-color: color-mix(in srgb, var(--primary-clr) 10%, var(--list-bg));
}

.operating-modes__list-item-main[b-mtyn3dvv1f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background: none;
    border: none;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    text-align: left;
}

.operating-modes__dot[b-mtyn3dvv1f] {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.operating-modes__dot--on[b-mtyn3dvv1f] { background-color: var(--resolved-clr); }
.operating-modes__dot--off[b-mtyn3dvv1f] { background-color: var(--extra-muted-clr); }

.operating-modes__list-name[b-mtyn3dvv1f] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operating-modes__list-badge[b-mtyn3dvv1f] {
    flex: 0 0 auto;
    color: var(--warning-clr);
    font-size: 0.75rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

.operating-modes__list-count[b-mtyn3dvv1f] {
    flex: 0 0 auto;
    color: var(--muted-clr);
    font-size: 0.8rem;
}

.operating-modes__form[b-mtyn3dvv1f] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

.operating-modes__hint[b-mtyn3dvv1f] {
    color: var(--muted-clr);
}

.operating-modes__field[b-mtyn3dvv1f] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.operating-modes__field--checkbox[b-mtyn3dvv1f] {
    flex-direction: row;
    align-items: center;
}

.operating-modes__field label[b-mtyn3dvv1f] {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.operating-modes__field input[b-mtyn3dvv1f],
.operating-modes__field select[b-mtyn3dvv1f] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.operating-modes__row[b-mtyn3dvv1f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    min-width: 0;
}

.operating-modes__section[b-mtyn3dvv1f] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.operating-modes__section-head[b-mtyn3dvv1f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.operating-modes__section-head h3[b-mtyn3dvv1f] {
    margin: 0;
    font-size: 0.95rem;
}

.operating-modes__table[b-mtyn3dvv1f] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.operating-modes__table th[b-mtyn3dvv1f],
.operating-modes__table td[b-mtyn3dvv1f] {
    text-align: left;
    vertical-align: middle;
    padding: 0.25rem 0.4rem;
    border-bottom: var(--border-thin);
}

.operating-modes__table th[b-mtyn3dvv1f] {
    color: var(--muted-clr);
    font-weight: 600;
}

.operating-modes__table input[b-mtyn3dvv1f],
.operating-modes__table select[b-mtyn3dvv1f] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 4px;
    padding: 0.2rem 0.35rem;
}

.operating-modes__toggle[b-mtyn3dvv1f] {
    display: flex;
    align-items: center;
}

.operating-modes__error[b-mtyn3dvv1f] {
    color: var(--delete-clr);
    margin: 0;
}

.operating-modes__actions[b-mtyn3dvv1f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.operating-modes__confirm[b-mtyn3dvv1f] {
    border: 1px solid var(--delete-clr);
    border-radius: 8px;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.operating-modes__confirm-actions[b-mtyn3dvv1f] {
    display: flex;
    gap: 0.5rem;
}
/* /Pages/OwnerTagBrowserPage.razor.rz.scp.css */
.owner-tags[b-jbpzra4kko] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.owner-tags__title[b-jbpzra4kko] {
    margin: 0;
}

.owner-tags__toolbar[b-jbpzra4kko] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.owner-tags__search[b-jbpzra4kko] {
    min-width: 0;
    flex: 1 1 16rem;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.owner-tags__empty[b-jbpzra4kko] {
    color: var(--muted-clr);
    padding: 1rem 0;
}

.owner-tags__count[b-jbpzra4kko] {
    color: var(--muted-clr);
    font-size: 0.8rem;
}

.owner-tags__table[b-jbpzra4kko] {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--c-divider);
    border-radius: 8px;
}

.owner-tags__row[b-jbpzra4kko] {
    display: grid;
    grid-template-columns: minmax(140px, 1.6fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) 5rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--c-divider);
    min-width: 560px;
}

.owner-tags__row:last-child[b-jbpzra4kko] {
    border-bottom: none;
}

.owner-tags__row--head[b-jbpzra4kko] {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted-clr);
    background-color: var(--body-bg);
}

.owner-tags__row--data[b-jbpzra4kko] {
    cursor: pointer;
}

.owner-tags__row--data:hover[b-jbpzra4kko] {
    background-color: var(--c-surface-hover);
}

.owner-tags__cell[b-jbpzra4kko] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-tags__cell--name[b-jbpzra4kko] {
    font-weight: 500;
}

.owner-tags__pager[b-jbpzra4kko] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.owner-tags__page-label[b-jbpzra4kko] {
    color: var(--muted-clr);
    font-size: 0.85rem;
    white-space: nowrap;
}
/* /Pages/PhotoComponent.razor.rz.scp.css */
/* A hajó-fotó ugyanolyan "kártyában" ül, mint a lap többi szekciója / a hajó-csempék képe:
   lista-felület + finom keret + azonos sarok-lekerekítés, és overflow:hidden, hogy a kép
   maga is a kártya sarkait vegye fel (nem szögletes kép a lekerekített kereten belül). */
.photo-container[b-vto9sdynbf] {
    display: flex;
    width: min(20rem, 100%);
    aspect-ratio: 1;
    padding: 0.5rem;
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: var(--elev-rest);
    overflow: hidden;
}

/* A kép a kártya paddingján BELÜL ül, ezért saját (kisebb) lekerekítést kap — a kártya
   sarok-rádiusza mínusz a padding, hogy a két ív koncentrikus legyen. */
img[b-vto9sdynbf] {
    width: 100%;
    border-radius: calc(var(--list-border-radius) - 0.5rem);
    object-fit: cover;
    cursor: pointer
}

/* A kártya overflow:hidden-je levágná a korábbi negatív (-7px) pozíciót → BELÜLRE kerül. */
.dismiss-icon[b-vto9sdynbf] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
    background: var(--background-clr);
    padding: 0.125em;
    border-radius: 5px;
}
/* /Pages/SettingsPage.razor.rz.scp.css */
.settings-tiles[b-0gu4vtmxvx] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem;
    max-width: 760px;
}

    /* Egyforma, FIX méretű csempék (nem nyúlnak a hely kitöltésére, ezért nem lesz óriási a lone tile).
       Csak kis képernyőn — amikor egy oszlopba rendeződnek — töltik ki a szélességet (media query lent). */
    .settings-tile[b-0gu4vtmxvx] {
        flex: 0 0 200px;
    }

@media (max-width: 480px) {
    .settings-tile[b-0gu4vtmxvx] {
        flex: 1 1 100%;
    }
}

.settings-tile[b-0gu4vtmxvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 2.25rem 1rem;
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    text-decoration: none;
    color: var(--text-clr);
    box-shadow: 0 2px 5px var(--c-shadow-sm);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

    .settings-tile:hover[b-0gu4vtmxvx] {
        border-color: var(--primary-clr);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px var(--c-shadow-sm);
    }

    .settings-tile span[b-0gu4vtmxvx] {
        font-weight: 600;
        font-size: 1rem;
        text-align: center;
    }

:root[data-theme="dark"] .settings-tile[b-0gu4vtmxvx],
:root[data-theme="night"] .settings-tile[b-0gu4vtmxvx] {
    box-shadow: 0 2px 5px var(--c-shadow-sm);
}
/* /Pages/SwitchHistory.razor.rz.scp.css */
.back-btn[b-sadjrc7hj1] {
    width: fit-content;
    color: white;
    background: var(--primary-clr);
}
/* /Pages/TagBrowserPage.razor.rz.scp.css */
.tag-browser[b-e1tt7iykse] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.tag-browser__empty[b-e1tt7iykse] {
    color: var(--muted-clr);
    padding: 1rem 0;
}

.tag-browser__toolbar[b-e1tt7iykse] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.tag-browser__search[b-e1tt7iykse],
.tag-browser__filter[b-e1tt7iykse] {
    min-width: 0;
    font: inherit;
    color: var(--text-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}

.tag-browser__checkbox[b-e1tt7iykse] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--muted-clr);
    white-space: nowrap;
}

.tag-browser__spacer[b-e1tt7iykse] {
    flex: 1 1 auto;
}

.tag-browser__file-input[b-e1tt7iykse] {
    display: none;
}

.tag-browser__batchbar[b-e1tt7iykse] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    background-color: color-mix(in srgb, var(--primary-clr) 10%, var(--list-bg));
    border: 1px solid var(--primary-clr);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    min-width: 0;
}

.tag-browser__count[b-e1tt7iykse] {
    color: var(--muted-clr);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* K3 (review-javítás): duplikátum-/átfedés-előszűrés összesítője (terv v1.1 §9.4). */
.tag-browser__count-warning[b-e1tt7iykse] {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--warning-clr);
    font-weight: 600;
}

.tag-browser__table[b-e1tt7iykse] {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--c-divider);
    border-radius: 8px;
}

.tag-browser__row[b-e1tt7iykse] {
    display: grid;
    grid-template-columns: 2rem minmax(140px, 1.6fr) minmax(120px, 1fr) 6rem 8rem 4rem 7rem 5rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--c-divider);
    min-width: 640px;
}

.tag-browser__row:last-child[b-e1tt7iykse] {
    border-bottom: none;
}

/* K3 (review-javítás): sárga jelzés a duplikátum-/átfedő címzésű soron. */
.tag-browser__row--duplicate[b-e1tt7iykse] {
    background-color: color-mix(in srgb, var(--warning-clr) 10%, transparent);
}

.tag-browser__row--head[b-e1tt7iykse] {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted-clr);
    background-color: var(--body-bg);
}

.tag-browser__cell[b-e1tt7iykse] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tag-browser__cell--check[b-e1tt7iykse] {
    justify-content: center;
}

.tag-browser__cell--name[b-e1tt7iykse] {
    font-weight: 500;
}

.tag-browser__cell--actions[b-e1tt7iykse] {
    justify-content: flex-end;
    gap: 0.1rem;
}
/* /Pages/TreeEditorBranch.razor.rz.scp.css */
.tree-editor-branch[b-2oeop0bh2f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tree-editor-branch__row[b-2oeop0bh2f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.3rem 0.3rem calc(var(--tree-editor-depth, 0) * 1.25rem);
    min-width: 640px;
    border-radius: 6px;
}

.tree-editor-branch__row.is-dragover[b-2oeop0bh2f] {
    background-color: color-mix(in srgb, var(--primary-clr) 16%, transparent);
    outline: 1px dashed var(--primary-clr);
}

.tree-editor-branch__toggle[b-2oeop0bh2f],
.tree-editor-branch__toggle-spacer[b-2oeop0bh2f] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border: none;
    background: transparent;
    color: var(--muted-clr);
    cursor: pointer;
    padding: 0;
}

.tree-editor-branch__name[b-2oeop0bh2f],
.tree-editor-branch__name-input[b-2oeop0bh2f] {
    flex: 1 1 auto;
    min-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-clr);
    font-weight: 500;
}

.tree-editor-branch__name[b-2oeop0bh2f] {
    cursor: text;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
}

.tree-editor-branch__name:hover[b-2oeop0bh2f] {
    background-color: color-mix(in srgb, var(--primary-clr) 8%, transparent);
}

.tree-editor-branch__name-input[b-2oeop0bh2f] {
    font: inherit;
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 4px;
    padding: 0.15rem 0.3rem;
}

.tree-editor-branch__typekey[b-2oeop0bh2f] {
    flex: none;
    width: 7rem;
    font: inherit;
    font-size: 0.8rem;
    color: var(--muted-clr);
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: 4px;
    padding: 0.2rem 0.3rem;
}

.tree-editor-branch__sidebar[b-2oeop0bh2f] {
    flex: none;
    display: inline-flex;
    align-items: center;
}

.tree-editor-branch__spacer[b-2oeop0bh2f] {
    flex: 1 1 0;
}

.tree-editor-branch__children[b-2oeop0bh2f] {
    display: flex;
    flex-direction: column;
}
/* /Pages/TreeEditorPage.razor.rz.scp.css */
.tree-editor[b-10ufns0dx4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.tree-editor__toolbar[b-10ufns0dx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
}

.tree-editor__title[b-10ufns0dx4] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-clr);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tree-editor__list[b-10ufns0dx4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--c-divider);
    border-radius: 8px;
    padding: 0.4rem;
    overflow-x: auto;
}
/* /Pages/Vsettings.razor.rz.scp.css */
.coresettings-row[b-xidkegegg6] {
    display: flex;
    width: 100%;
    row-gap: 2rem;
    column-gap: 1rem;
}

.coresettings-column-left[b-xidkegegg6] {
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.coresettings-column-right[b-xidkegegg6] {
    flex-grow: 1;
    flex-basis: 70%;
}

.coresettings-row:first-child[b-xidkegegg6] {
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .coresettings-column-left[b-xidkegegg6], .coresettings-column-right[b-xidkegegg6] {
        flex: 0 0 100%;
    }
}