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

/* /Layout/AlarmComponents/AlarmCheckComponent.razor.rz.scp.css */
.fluent-input-label[b-ty7dtajmhf] {
    display: flex;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: initial;
    font-variation-settings: var(--type-ramp-base-font-variations);
    margin-bottom: calc(var(--design-unit) * 1px);
    align-items: center;
}

.condition-data[b-ty7dtajmhf] {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    background: var(--c-surface-elevated);
}
/* /Layout/AlarmsComponent.razor.rz.scp.css */
/* Az oszlop-sablon a .base-list-en (a fantom #alarms 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 1fr/2fr 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-8l1wnzwr2w] {
    --gtc: 1fr 2fr minmax(9rem, auto);
}

    .base-list__header[b-8l1wnzwr2w],
    .base-list__row:not(.empty-row)[b-8l1wnzwr2w] {
        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-8l1wnzwr2w] {
    align-items: center;
}
/* /Layout/AutomationCheckComponent.razor.rz.scp.css */
.fluent-input-label[b-bxwx3rbe61] {
    display: flex;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: initial;
    font-variation-settings: var(--type-ramp-base-font-variations);
    margin-bottom: calc(var(--design-unit) * 1px);
    align-items: center;
}

.condition-data[b-bxwx3rbe61] {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    background: var(--c-surface-elevated);
}
/* /Layout/AutomationComponent.razor.rz.scp.css */
/* Az oszlop-sablon a .base-list-en (a fantom #automations 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` 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 "Cél" felirat nem ott
   kezdődne, ahol a cél-kártya. 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. */
.base-list[b-btug13gs2y] {
    --gtc: 2fr 1fr minmax(9rem, auto);
}

/* 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-btug13gs2y] {
    align-items: center;
}

    /* Oszlop-hézag: a cél-kártya (saját kerettel) különben egybeérne az akció-sávval.
       Fejléc + sor UGYANEZT kapja, így az oszlopok igazítása nem csúszik el. */
    .base-list__header[b-btug13gs2y],
    .base-list__row:not(.empty-row)[b-btug13gs2y] {
        grid-template-columns: var(--gtc);
        column-gap: 1.5rem;
    }

/* ── Switch-cél: mini kapcsoló-kártya ───────────────────────────────────────
   CSAK a switch-célokra (relé / NMEA) — a kamera-cél a korábbi egyszerű ikon+név
   megjelenítést tartja. A Digital switches kártyáinak (.dsw-card, switches.css)
   vizuális nyelvét követi kicsiben: 2px keret + állapot szerinti keret-tinta,
   lista-felület, finom árnyék. A név MINDIG egy sorban van (ellipsis + title
   tooltip), a toggle a jobb szélen — így a sorok magassága nem ugrál és a
   toggle-ok egymás alatt egy vonalban vannak. */
.target-chip[b-btug13gs2y] {
    /* A kártya a TARTALMÁHOZ zsugorodik (nem nyúlik ki az oszlop teljes szélességére) —
       így nagy képernyőn sem lesz aránytalanul nagy, és a kártya BAL SZÉLE pontosan a
       "Cél" fejléc-felirat kezdeténél van (az oszlop-kezdet mindkettőnél ugyanaz). */
    justify-self: start;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem;
    background: var(--list-bg);
    border: 2px solid var(--c-divider); /* mint a .dsw-card */
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--c-shadow-xs);
}

/* A név zsugorodik és ellipsis-szel rövidül; a min-width:0 kell, hogy a flex-item
   a tartalma alá mehessen (alapból min-width:auto → kitolná a kártyát). */
.target-chip__name[b-btug13gs2y] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A toggle sosem zsugorodik — mindig a név rövidül. */
.target-chip__state[b-btug13gs2y] {
    flex: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Sötét/night témában erősebb árnyék kell (ld. .dsw-card ugyanezen felülírása). */
:root[data-theme="dark"] .target-chip[b-btug13gs2y],
:root[data-theme="night"] .target-chip[b-btug13gs2y] {
    box-shadow: 0 2px 8px var(--c-shadow-sm);
}

.camera-icon-wrapper[b-btug13gs2y] {
    position: relative;
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
}

.recording-dot[b-btug13gs2y] {
    width: 12px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--critical-clr);
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 1;
}
/* /Layout/CardDashboardComponent.razor.rz.scp.css */
.card-dashboard[b-enlhoqzqr6] {
    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-enlhoqzqr6]  .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-enlhoqzqr6] {
    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-enlhoqzqr6] {
    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-enlhoqzqr6] {
    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-enlhoqzqr6] {
    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-enlhoqzqr6] {
        width: 100%;
    }

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

    .dashboard-editbar__hint[b-enlhoqzqr6] {
        display: none;
    }
}
/* /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-hlmomv68z5] {
    /* 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-hlmomv68z5] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

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

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

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

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

.dash-notif__empty[b-hlmomv68z5] {
    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-hlmomv68z5] {
    display: flex;
    gap: 0.55rem;
    padding: 0.55rem 0;
    border-bottom: var(--border-thin);
}

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

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

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

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

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

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

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

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

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

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

.notif-resolved[b-hlmomv68z5] {
    color: var(--resolved-clr);
    font-weight: 600;
}
/* /Layout/Elements/AlarmChip.razor.rz.scp.css */
.alarm-chip[b-5730ym3kgd] {
    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-5730ym3kgd] {
    flex: none;
}

/* Kompakt méret (dashboard / fleet-overview mini-lista) — a korábbi .chip--sm helyett. */
.alarm-chip.is-sm[b-5730ym3kgd] {
    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-5730ym3kgd] {
    color: var(--c-on-notif); /* light/dark: fehér; night: szürkés-pirosas */
}

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

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

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

/* ── ÁLLAPOT — outline chip, IKON NÉLKÜL ──────────────────────────────────── */
.is-outline[b-5730ym3kgd] {
    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-5730ym3kgd],
.alarm-chip--done[b-5730ym3kgd] {
    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-5730ym3kgd] {
    color: var(--alarm-lvl, var(--c-notif-ongoing));
    border-width: 2.5px;
    animation: alarm-chip-pulse-b-5730ym3kgd 1.5s ease-in-out infinite;
}

@keyframes alarm-chip-pulse-b-5730ym3kgd {
    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-5730ym3kgd] {
        animation: none;
    }
}
/* /Layout/Elements/AppButton.razor.rz.scp.css */
.app-btn[b-s2rv4a1826] {
    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-s2rv4a1826] {
        color: inherit;
    }

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

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

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

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

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

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

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

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

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

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

    .app-btn--primary:hover:not(:disabled)[b-s2rv4a1826] {
        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-s2rv4a1826] {
    color: var(--text-clr);
    border-color: currentColor;
}

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

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

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

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

    .app-btn--danger:hover:not(:disabled)[b-s2rv4a1826] {
        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-s2rv4a1826] {
    background: none;
    border-color: transparent;
}

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

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

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

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

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

    .app-btn.app-btn--plain.favorite:hover:not(:disabled)[b-s2rv4a1826] {
        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-s2rv4a1826] {
    justify-self: start;
}
/* /Layout/Elements/CustomToggleSwitch.razor.rz.scp.css */
.nt-switch[b-t6wi8h3rhl] {
    --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-t6wi8h3rhl] {
    --nt-w: 40px;
    --nt-h: 20px;
}

.nt-switch__thumb[b-t6wi8h3rhl] {
    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-t6wi8h3rhl] {
    background: var(--primary-clr);
}

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

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

.nt-switch:focus-visible[b-t6wi8h3rhl] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}
/* /Layout/Elements/DimmableSwitch.razor.rz.scp.css */
/* §11.8.5 dimmable switch csúszka — a nt-switch design-tokeneit követi (accent-on jelzés + fehér dot). */
.nt-dimmer[b-hmu66k8gzs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}

.nt-dimmer__dot[b-hmu66k8gzs] {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--extra-muted-clr);
    box-shadow: 0 1px 2px var(--c-shadow-lg);
    transition: background-color .2s ease;
}

.nt-dimmer--on .nt-dimmer__dot[b-hmu66k8gzs] {
    background: var(--primary-clr);
}

.nt-dimmer__slider[b-hmu66k8gzs] {
    flex: 1 1 auto;
    min-width: 70px;
}

.nt-dimmer__value[b-hmu66k8gzs] {
    flex: none;
    min-width: 3ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    color: var(--muted-clr);
}
/* /Layout/Elements/NightModeSwitch.razor.rz.scp.css */
.night-mode-switch[b-1a8pd8ps60] {
    --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-1a8pd8ps60] {
    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-1a8pd8ps60] {
    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-1a8pd8ps60] {
    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-1a8pd8ps60] {
    outline: 2px solid rgba(var(--c-primary-rgb), 0.6);
    outline-offset: 2px;
}

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

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

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

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

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

.night-mode-switch.is-dark .night-mode-switch__option--moon[b-1a8pd8ps60] {
    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-1a8pd8ps60] {
    color: #b22222;
    opacity: 0.55;
}

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

.night-mode-switch__thumb[b-1a8pd8ps60] {
    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-1a8pd8ps60] { transform: translateX(0); }
.night-mode-switch--mode-light .night-mode-switch__thumb[b-1a8pd8ps60] { transform: translateX(var(--step)); }
.night-mode-switch--mode-dark .night-mode-switch__thumb[b-1a8pd8ps60] { transform: translateX(calc(var(--step) * 2)); }
.night-mode-switch--mode-night .night-mode-switch__thumb[b-1a8pd8ps60] { transform: translateX(calc(var(--step) * 3)); }

.night-mode-switch.is-dark .night-mode-switch__thumb[b-1a8pd8ps60] {
    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-1a8pd8ps60],
.night-mode-switch__track:hover .night-mode-switch__thumb[b-1a8pd8ps60] {
    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-1a8pd8ps60] {
    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-1a8pd8ps60] {
    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-1a8pd8ps60] {
    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-1a8pd8ps60] {
    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-1a8pd8ps60] {
    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-1a8pd8ps60] {
    color: var(--muted-clr);
    opacity: 0.55;
    filter: none;
}
/* /Layout/Elements/PresetAlarmsSection.razor.rz.scp.css */
/* CSS-izoláció miatt a komponens saját másolatát tartja a base preset-item osztályoknak is
   (a PresetEditPage.razor.css nem stílusozza a gyerekkomponens elemeit) — a PresetSwitchesSection
   mintájára, hogy az alarm-szekció 1:1 úgy nézzen ki, mint a kapcsoló-kezelés. */
.section-label[b-2dj2f203mx] {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--muted-clr);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

.preset-items-list[b-2dj2f203mx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.preset-item[b-2dj2f203mx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: var(--list-border-radius);
    background-color: var(--neutral-layer-2, var(--list-bg));
}

.preset-item__info[b-2dj2f203mx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preset-item__name[b-2dj2f203mx] {
    font-size: 0.9rem;
}

.preset-item__name--orphan[b-2dj2f203mx] {
    color: var(--muted-clr);
    font-style: italic;
}

.preset-item__controls[b-2dj2f203mx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* Alarm szekció fejléce + "Add alarm" gomb. */
.preset-switches-header[b-2dj2f203mx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.preset-add-btn[b-2dj2f203mx] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-clr);
    font-size: 0.8rem;
    padding: 0.2rem 0.3rem;
}

.preset-remove-btn[b-2dj2f203mx] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Felvehető alarmok listája (görgethető, sok alarm esetén sem nő túl). */
.preset-picker[b-2dj2f203mx] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 220px;
    overflow-y: auto;
    margin: 0 0 0.5rem;
    padding: 0.3rem;
    border-radius: var(--list-border-radius);
    background-color: var(--neutral-layer-2, var(--list-bg));
}

.preset-picker__item[b-2dj2f203mx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
}

.preset-picker__item:hover[b-2dj2f203mx] {
    background-color: rgba(127, 127, 127, 0.15);
}

.preset-picker__empty[b-2dj2f203mx] {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--muted-clr);
    padding: 0.4rem;
}
/* /Layout/Elements/PresetAutomationsSection.razor.rz.scp.css */
/* CSS-izoláció miatt a komponens saját másolatát tartja a base preset-item osztályoknak is
   (a PresetEditPage.razor.css nem stílusozza a gyerekkomponens elemeit) — a PresetSwitchesSection
   mintájára, hogy az automation-szekció 1:1 úgy nézzen ki, mint a kapcsoló-kezelés. */
.section-label[b-z35l28qxf3] {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--muted-clr);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

.preset-items-list[b-z35l28qxf3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.preset-item[b-z35l28qxf3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: var(--list-border-radius);
    background-color: var(--neutral-layer-2, var(--list-bg));
}

.preset-item__info[b-z35l28qxf3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preset-item__name[b-z35l28qxf3] {
    font-size: 0.9rem;
}

.preset-item__name--orphan[b-z35l28qxf3] {
    color: var(--muted-clr);
    font-style: italic;
}

.preset-item__controls[b-z35l28qxf3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* Automation szekció fejléce + "Add automation" gomb. */
.preset-switches-header[b-z35l28qxf3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.preset-add-btn[b-z35l28qxf3] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-clr);
    font-size: 0.8rem;
    padding: 0.2rem 0.3rem;
}

.preset-remove-btn[b-z35l28qxf3] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Felvehető automationök listája (görgethető, sok automation esetén sem nő túl). */
.preset-picker[b-z35l28qxf3] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 220px;
    overflow-y: auto;
    margin: 0 0 0.5rem;
    padding: 0.3rem;
    border-radius: var(--list-border-radius);
    background-color: var(--neutral-layer-2, var(--list-bg));
}

.preset-picker__item[b-z35l28qxf3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
}

.preset-picker__item:hover[b-z35l28qxf3] {
    background-color: rgba(127, 127, 127, 0.15);
}

.preset-picker__empty[b-z35l28qxf3] {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--muted-clr);
    padding: 0.4rem;
}
/* /Layout/Elements/PresetSwitchesSection.razor.rz.scp.css */
/* CSS-izoláció miatt a komponens saját másolatát tartja a base preset-item osztályoknak is
   (a PresetEditPage.razor.css nem stílusozza a gyerekkomponens elemeit). */
.section-label[b-gygi4bti93] {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--muted-clr);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

.preset-items-list[b-gygi4bti93] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.preset-item[b-gygi4bti93] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: var(--list-border-radius);
    background-color: var(--neutral-layer-2, var(--list-bg));
}

.preset-item__info[b-gygi4bti93] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preset-item__name[b-gygi4bti93] {
    font-size: 0.9rem;
}

.preset-item__name--orphan[b-gygi4bti93] {
    color: var(--muted-clr);
    font-style: italic;
}

.preset-item__controls[b-gygi4bti93] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.preset-dim[b-gygi4bti93] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.preset-dim__slider[b-gygi4bti93] {
    width: 90px;
}

.preset-dim__value[b-gygi4bti93] {
    font-size: 0.8rem;
    color: var(--muted-clr);
    min-width: 2.5rem;
    text-align: right;
}

/* Digital switch szekció fejléce + "Add switch" gomb. */
.preset-switches-header[b-gygi4bti93] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.preset-add-btn[b-gygi4bti93] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-clr);
    font-size: 0.8rem;
    padding: 0.2rem 0.3rem;
}

.preset-remove-btn[b-gygi4bti93] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Felvehető kapcsolók listája (görgethető, sok NMEA-csatorna esetén sem nő túl). */
.preset-picker[b-gygi4bti93] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 220px;
    overflow-y: auto;
    margin: 0 0 0.5rem;
    padding: 0.3rem;
    border-radius: var(--list-border-radius);
    background-color: var(--neutral-layer-2, var(--list-bg));
}

.preset-picker__group[b-gygi4bti93] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-clr);
    padding: 0.35rem 0.4rem 0.15rem;
}

.preset-picker__item[b-gygi4bti93] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
}

.preset-picker__item:hover[b-gygi4bti93] {
    background-color: rgba(127, 127, 127, 0.15);
}

.preset-picker__empty[b-gygi4bti93] {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--muted-clr);
    padding: 0.4rem;
}
/* /Layout/EmptyChartPageComponent.razor.rz.scp.css */
.empty-page[b-ys2m144tqs] {
    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-ys2m144tqs] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

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

.empty-page p[b-ys2m144tqs] {
    margin-top: 1rem;
    font-style: italic;
    font-size: 1.25rem;
}
/* /Layout/FavSwitchesComponent.razor.rz.scp.css */
/* Flex-column (NEM grid + align-content:start) — különben a grid-sor a tartalomra zsugorodna
   és a height:100%-os .fav-switches-card csak a tartalom-magasságot venné fel (a cella alján üres
   hely maradna). Flex-szel a kártya kitölti a teljes cellát = a térkép magasságát (grid 1. sor). */
#switch-section[b-rmehmggqlh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    container-type: inline-size;
    container-name: switch-container;
}

    #switch-section .name[b-rmehmggqlh] {
        font-size: clamp(0.8rem, calc(3cqw + 0.5rem), 1rem);
    }

/* A fejléc (Switches felirat + csillag/edit) most a dobozon BELÜL van, mint a notif-doboznál. */
.switch-section__header[b-rmehmggqlh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: var(--border-thin);
}

.switch-section__header h3[b-rmehmggqlh] {
    margin: 0;
}

.switch-section__header a[b-rmehmggqlh] {
    position: relative;
    display: inline-flex;
}

/* Egyetlen körülvevő doboz a kapcsolóknak (mockup "Kedvenc kapcsolók"); a sorok belül
   border-bottom-mal elválasztva, NEM külön kártyák. */
.fav-switches-card[b-rmehmggqlh] {
    background-color: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: 0 2px 5px var(--c-shadow-sm);
    overflow: hidden;
    /* a térkép magasságát kitölti (grid 1. sor); a fejléc fix, csak a lista görget */
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Csak a kapcsoló-lista görget a dobozon belül; a "Switches" fejléc rögzítve marad. */
.fav-switches-scroll[b-rmehmggqlh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Mobilon a sáv egymás alatt van, ne legyen magasság-korlát / belső görgetés. */
@media (max-width: 768px) {
    #switch-section[b-rmehmggqlh],
    .fav-switches-card[b-rmehmggqlh] {
        height: auto;
    }

    .fav-switches-scroll[b-rmehmggqlh] {
        overflow-y: visible;
    }
}

:root[data-theme="dark"] .fav-switches-card[b-rmehmggqlh],
:root[data-theme="night"] .fav-switches-card[b-rmehmggqlh] {
    box-shadow: 0 2px 5px var(--c-shadow-sm);
}

.switch-card[b-rmehmggqlh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block: 0.6rem;
    padding-inline: 0.75rem;
    width: 100%;
}

    .switch-card + .switch-card[b-rmehmggqlh] {
        border-top: var(--border-thin);
    }

.fav-switches-empty[b-rmehmggqlh] {
    margin: 0;
    padding: 0.85rem;
}

/* Státusz-pötty a kapcsoló-slider mellett (zöld = on, szürke = off) — mint a digital cards-on. */
.fav-switch-dot[b-rmehmggqlh] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

    .fav-switch-dot.on[b-rmehmggqlh] {
        background: var(--c-success);
    }

    .fav-switch-dot.off[b-rmehmggqlh] {
        background: var(--extra-muted-clr);
    }

/* §11.11 unavailable: halott Modbus switch a kedvenc-kártyán — szürke, áthúzott „no data". */
.fav-switch-unavailable[b-rmehmggqlh] {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--muted-clr);
    text-decoration: line-through;
}

.edit-icon[b-rmehmggqlh] {
    position: absolute;
    bottom: -3px;
    right: -1px;
    background: var(--list-bg);
}
/* /Layout/FleetCameraPlayerComponent.razor.rz.scp.css */
.video-wrapper[b-4r2bsrc4pz] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-media-bg);
    transform: translateZ(0);
}

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

.controls[b-4r2bsrc4pz] {
    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-4r2bsrc4pz],
.controls input[b-4r2bsrc4pz] {
    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-4r2bsrc4pz],
.controls input:focus-visible[b-4r2bsrc4pz] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}

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

.live-indicator[b-4r2bsrc4pz] {
    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-4r2bsrc4pz] {
    background: transparent;
}

.unauthorized-camera[b-4r2bsrc4pz] {
    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-4r2bsrc4pz] {
    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-r32asxdjzq] {
    font-size: 0.85rem;
    color: var(--muted-clr);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

[b-r32asxdjzq] .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-r3yeuxnp71] {
    --gtc: 2fr 1fr minmax(9rem, auto);
}

    .base-list__header[b-r3yeuxnp71],
    .base-list__row:not(.empty-row)[b-r3yeuxnp71] {
        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-r3yeuxnp71] {
    align-items: center;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.sidebar[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    width: 100%;
}

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

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

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

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

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

.mode-toggle[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    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-5jtcezz5ke] {
    color: #000;
    font-weight: 700;
}

.mode-toggle-slider[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    transform: translateX(100%);
}

.sidebar a[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
        color: #000;
    }

.main-links a[b-5jtcezz5ke],
.bottom-links > a[b-5jtcezz5ke],
.selected[b-5jtcezz5ke] {
    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-5jtcezz5ke]::before,
    .bottom-links > a[b-5jtcezz5ke]::before,
    .selected[b-5jtcezz5ke]::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-5jtcezz5ke]::before,
    .bottom-links > a:hover[b-5jtcezz5ke]::before,
    a.selected[b-5jtcezz5ke]::before {
        left: 0;
    }

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

:root[data-theme="dark"] .sidebar a.selected[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    margin-top: 0.5rem;
}

.bottom-actions > a[b-5jtcezz5ke] {
    /* 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-5jtcezz5ke]::before {
        content: none;
    }

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

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

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

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

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

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

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

/* Számjegyes értesítés-badge a korábbi színes pötty helyett (mockup-stílus). */
.nav-badge[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    background-color: var(--warning-clr);
}

.nav-badge.crit[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    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-5jtcezz5ke] {
    background-color: var(--warning-clr);
}

.hamburger-badge.crit[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:root[data-theme="dark"] .mode-toggle[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    color: rgba(230, 238, 247, 0.5);
}

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

:root[data-theme="dark"] .mode-toggle-slider[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    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-5jtcezz5ke] {
    color: var(--muted-clr);
}

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

:root[data-theme="night"] .mode-toggle-slider[b-5jtcezz5ke] {
    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-5jtcezz5ke] {
    color: rgba(var(--c-primary-rgb), 0.85) !important;
}

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

    :root[data-theme="dark"] .hamburger div[b-5jtcezz5ke] {
        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-5jtcezz5ke] {
    background: var(--list-bg);
    color: var(--text-clr);
}

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

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

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

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

    :root[data-theme="night"] .hamburger div[b-5jtcezz5ke] {
        background-color: var(--primary-clr);
    }
}
/* /Layout/OwnerSelector.razor.rz.scp.css */
.owner-dropdown[b-29fgstg8ng] {
    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-29fgstg8ng] {
        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-29fgstg8ng] {
    box-shadow: 0px 4px 8px var(--c-shadow-sm);
}

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

.owner-dropdown-content[b-29fgstg8ng] {
    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-29fgstg8ng] {
    box-shadow: 0px 8px 16px 0px var(--c-shadow-lg);
}

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

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

.owner-dropdown-content a[b-29fgstg8ng] {
    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-29fgstg8ng] {
        background-color: var(--c-divider);
    }

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

    .owner-dropdown-content a:last-child[b-29fgstg8ng] {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
/* /Layout/PresetCardComponent.razor.rz.scp.css */
.preset-card-inner[b-8phdogkkgq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 8px;
}

/* A presetek 2-oszlopos gombrácsa. FIX sormagasság (36px) — a pillek NEM nyúlnak a cella-magassághoz,
   így minden oldalon (a részlegesen töltött utolsón is) EGYFORMÁK; a felül-igazítás (align-content:start)
   a rácsot fentre pakolja, a maradék hely alul marad, a lapozó a kártya alján. A PageSize (10 = 2×5) úgy
   van hangolva, hogy egy egész sornyi pill + a lapozó együtt kiadja a ~243px-es törzs-magasságot. */
.preset-card__grid[b-8phdogkkgq] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 36px;
    align-content: start;
    gap: 8px;
    min-height: 0;
}

.preset-card__empty[b-8phdogkkgq] {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
}

/* Mockup ".pill" stílus, de a kártya-rács cellájához igazítva: a gomb kitölti a celláját, nem önálló
   inline pill. (A régi PresetShortcutsComponent .preset-pill stílusa scoped, ide nem szivárog.) */
.preset-pill[b-8phdogkkgq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    /* A sormagasságot a grid adja (grid-auto-rows:36px); a pill height:100%-kal kitölti. min-height:0,
       hogy egy korábbi minimum ne feszítse a fix 36px fölé. */
    min-height: 0;
    border: var(--border-thin);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    color: var(--text-clr);
    background: var(--list-bg);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .preset-pill:hover:not(:disabled)[b-8phdogkkgq] {
        background: color-mix(in srgb, var(--primary-clr) 8%, var(--list-bg));
        border-color: color-mix(in srgb, var(--primary-clr) 35%, var(--c-divider));
        transform: translateY(-1px);
    }

    .preset-pill:focus-visible[b-8phdogkkgq] {
        outline: 2px solid var(--primary-clr);
        outline-offset: 2px;
    }

    .preset-pill:disabled[b-8phdogkkgq] {
        opacity: 0.6;
        cursor: default;
    }

    /* "Add preset" affordance (csak ha még nincs preset) — nem kell kitöltenie a teljes cellát. */
    .preset-pill--add[b-8phdogkkgq] {
        width: auto;
        height: auto;
        min-height: 0;
        border-radius: 18px;
        border-style: dashed;
        color: var(--primary-clr);
    }

.preset-pill__label[b-8phdogkkgq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preset-card__pager[b-8phdogkkgq] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.preset-card__pager-btn[b-8phdogkkgq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

    .preset-card__pager-btn:disabled[b-8phdogkkgq] {
        opacity: 0.35;
        cursor: default;
    }

    .preset-card__pager-btn:focus-visible[b-8phdogkkgq] {
        outline: 2px solid var(--primary-clr);
        outline-offset: 1px;
    }

.preset-card__pager-label[b-8phdogkkgq] {
    min-width: 36px;
    font-size: 12px;
    color: var(--muted-clr);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    *[b-8phdogkkgq] {
        transition-duration: .01ms !important;
    }
}
/* /Layout/PresetsMiniComponent.razor.rz.scp.css */
/* Mini-preset (1×1) — a PresetCardComponent kompakt változata: ugyanaz a 2×2 gomb-rács + lapozó, csak
   kisebb pill-ekkel/betűvel/pager-rel, hogy beférjen az 1×1 cellába. A magasság-kezelést (ne nyújtsa meg a
   rácsot) a cards.css .presets-mini-card abszolút-pozíciós mintája adja. Minden szín téma-token. */
.preset-mini[b-i1wjpeeepo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 5px;
}

/* Egyoszlopos, teljes szélességű pillek (nem a 2×2 rács): sok preset esetén az 1×1 cellában így
   olvasható marad a preset neve; a maradékot a pager lapozza. FIX 28px sormagasság (nem nyúlik a
   cellához) + felül-igazítás → minden oldal egyforma, a lapozó a kártya alján. PageSize=3 = 3 sor +
   lapozó ≈ a ~112px-es törzs. */
.preset-mini__grid[b-i1wjpeeepo] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 28px;
    align-content: start;
    gap: 5px;
    min-height: 0;
}

/* Egyoszlopos elrendezésnél a pill BAL-igazított (ikon + név), mint egy lista-sor — a névnek több hely
   jut, mint középre igazítva. */
.preset-mini__grid .preset-pill[b-i1wjpeeepo] {
    justify-content: flex-start;
}

.preset-mini__empty[b-i1wjpeeepo] {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
}

.preset-pill[b-i1wjpeeepo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    /* A sormagasságot a grid adja (grid-auto-rows:28px); min-height:0, hogy ne feszítse fölé. */
    min-height: 0;
    border: var(--border-thin);
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.15;
    color: var(--text-clr);
    background: var(--list-bg);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

    .preset-pill:hover:not(:disabled)[b-i1wjpeeepo] {
        background: color-mix(in srgb, var(--primary-clr) 8%, var(--list-bg));
        border-color: color-mix(in srgb, var(--primary-clr) 35%, var(--c-divider));
        transform: translateY(-1px);
    }

    .preset-pill:focus-visible[b-i1wjpeeepo] {
        outline: 2px solid var(--primary-clr);
        outline-offset: 1px;
    }

    .preset-pill:disabled[b-i1wjpeeepo] {
        opacity: 0.6;
        cursor: default;
    }

    /* "Add preset" affordance (csak ha még nincs preset) — nem tölti ki a teljes cellát. */
    .preset-pill--add[b-i1wjpeeepo] {
        width: auto;
        height: auto;
        min-height: 0;
        border-radius: 16px;
        border-style: dashed;
        color: var(--primary-clr);
    }

.preset-pill__label[b-i1wjpeeepo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preset-mini__pager[b-i1wjpeeepo] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.preset-mini__pager-btn[b-i1wjpeeepo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    .preset-mini__pager-btn:disabled[b-i1wjpeeepo] {
        opacity: 0.35;
        cursor: default;
    }

    .preset-mini__pager-btn:focus-visible[b-i1wjpeeepo] {
        outline: 2px solid var(--primary-clr);
        outline-offset: 1px;
    }

.preset-mini__pager-label[b-i1wjpeeepo] {
    min-width: 28px;
    font-size: 11px;
    color: var(--muted-clr);
    text-align: center;
}
/* /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-wvfjeeng28] {
    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-wvfjeeng28] {
    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-wvfjeeng28] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

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

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

.sampling__desc[b-wvfjeeng28],
.sampling__hint[b-wvfjeeng28] {
    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-wvfjeeng28] {
    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-wvfjeeng28] {
    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-wvfjeeng28] {
        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-wvfjeeng28] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-block: 0.5rem;
}

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

.sampling__toggle-label[b-wvfjeeng28] {
    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-wvfjeeng28] {
    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-wvfjeeng28]  { border-left-color: var(--c-border-subtle); }
.sampling__notice--warn[b-wvfjeeng28]  { border-left-color: var(--warning-clr); }
.sampling__notice--error[b-wvfjeeng28] { border-left-color: var(--critical-clr); }
/* /Layout/TopBarSection.razor.rz.scp.css */
.outer[b-3t4paewjb2] {
    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-3t4paewjb2] {
    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-3t4paewjb2] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    *[b-3t4paewjb2] {
        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 vessel/owner választótól balra.
   A felső sávban így csak a választó marad, jobbra igazítva (ms-auto). */
.left[b-3t4paewjb2] {
    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-zw8xdxg3zo] {
    margin-top: 1.5rem;
}

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

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

.chart-size-opt[b-zw8xdxg3zo] {
    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-zw8xdxg3zo] {
        border-left: var(--border-thin);
    }

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

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


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

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

.base-list__row:not(.empty-row)[b-zw8xdxg3zo] {
    grid-template-columns: var(--gtc);
}
/* /Layout/UpdateBanner.razor.rz.scp.css */
.update-banner[b-r096t77ai5] {
    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-r096t77ai5 320ms cubic-bezier(0.16, 1, 0.3, 1) both,
               update-banner-glow-b-r096t77ai5 2.4s ease-in-out 320ms infinite;
}

.update-icon[b-r096t77ai5] {
    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-r096t77ai5 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

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

.update-text[b-r096t77ai5] {
    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-r096t77ai5]  .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-r096t77ai5]  .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-r096t77ai5]  .update-action:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

@keyframes update-banner-in-b-r096t77ai5 {
    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-r096t77ai5 {
    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-r096t77ai5 {
    from {
        transform: rotate(0deg);
    }

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .update-banner[b-r096t77ai5],
    .update-icon[b-r096t77ai5] {
        animation: none;
    }
}
/* /Layout/VesselPresetsComponent.razor.rz.scp.css */
/* Az oszlop-sablon a .base-list-en (a fantom #presets id helyett, ami a LazySection wrapperre
   került). A Blazor CSS-izoláció ([b-xxx]) így is a komponensre szűkíti. */
.base-list[b-l48xqn4ufn] {
    --gtc: 1fr auto;
}

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

    .base-list__row:not(.empty-row)[b-l48xqn4ufn] {
        grid-template-columns: var(--gtc);
    }

.name-cell .base-list__cell-content[b-l48xqn4ufn] {
    font-weight: 500;
}
/* /Layout/VesselSelector.razor.rz.scp.css */
.dropdown[b-h6bsmsencv] {
    /* 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-h6bsmsencv] {
        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-h6bsmsencv] {
            box-shadow: 0 4px 16px var(--c-shadow-sm);
        }

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

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

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

    .dropdown.open button[b-h6bsmsencv] {
        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-h6bsmsencv] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: transparent;
}

.dropdown-content[b-h6bsmsencv] {
    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-h6bsmsencv],
:root[data-theme="night"] .dropdown-content[b-h6bsmsencv] {
    box-shadow: 0 8px 24px var(--c-shadow-lg);
}

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

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

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

.dropdown-content a[b-h6bsmsencv] {
    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-h6bsmsencv] {
        cursor: pointer;
    }

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

    .dropdown-content a:focus-visible[b-h6bsmsencv] {
        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-h6bsmsencv] {
        background-color: color-mix(in srgb, var(--primary-clr) 10%, transparent);
        border-radius: var(--list-border-radius);
    }

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

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

    .menu-item img[b-h6bsmsencv] {
        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-h6bsmsencv] {
        opacity: 0.45;
        filter: grayscale(0.4);
    }

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

#selectedOption img[b-h6bsmsencv] {
    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-h6bsmsencv] {
        border: 2px solid var(--online-clr);
    }

    /* Offline border */
    #selectedOption img.offline[b-h6bsmsencv] {
        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. */
.vessel-img-loading[b-h6bsmsencv] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

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

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

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

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

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


#selectedOption .vessel-chevron[b-h6bsmsencv] {
    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 .vessel-chevron[b-h6bsmsencv] {
    transform: rotate(180deg);
}

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

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

@media (prefers-reduced-motion: reduce) {
    *[b-h6bsmsencv] {
        transition-duration: .01ms !important;
    }
}
/* /Pages/Account/AccountSection.razor.rz.scp.css */
.account-section[b-nppdqa6d3q] {
    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-nppdqa6d3q] {
    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-nppdqa6d3q] {
    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-nppdqa6d3q] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.account-nav nav a[b-nppdqa6d3q] {
    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-nppdqa6d3q] {
    background-color: color-mix(in srgb, var(--primary-clr) 8%, transparent);
}

.account-nav nav a.active[b-nppdqa6d3q] {
    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-nppdqa6d3q] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}

.account-nav-group[b-nppdqa6d3q] {
    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-nppdqa6d3q] {
    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-nppdqa6d3q] {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    color: var(--text-clr);
}

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

.account-body[b-nppdqa6d3q]  .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-nppdqa6d3q]  .account-card h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.05rem;
    color: var(--text-clr);
}

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

.account-body[b-nppdqa6d3q]  .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-nppdqa6d3q]  .credential-row:first-of-type {
    border-top: none;
}

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

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

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

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

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

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

.account-body[b-nppdqa6d3q]  .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-nppdqa6d3q]  .device-row:first-of-type {
    border-top: none;
}

.account-body[b-nppdqa6d3q]  .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-nppdqa6d3q]  .device-row .device-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-clr);
}

.account-body[b-nppdqa6d3q]  .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-nppdqa6d3q]  .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-nppdqa6d3q]  .device-row .device-meta span:nth-child(2n+1) {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.7rem;
}

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

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

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

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

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

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

:root[data-theme="dark"] .account-body[b-nppdqa6d3q]  .device-row .device-icon {
    background: rgba(var(--c-primary-rgb), 0.15);
}
/* /Pages/CameraComponent.razor.rz.scp.css */
.video-wrapper[b-ccoj2iv4f1] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-media-bg);
    transform: translateZ(0);
}

.video-wrapper video[b-ccoj2iv4f1] {
    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-ccoj2iv4f1] {
    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-ccoj2iv4f1],
.video-wrapper:hover .controls[b-ccoj2iv4f1],
.video-wrapper:focus-visible .controls[b-ccoj2iv4f1] {
    opacity: 1;
    pointer-events: all;
}

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

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

.live-indicator[b-ccoj2iv4f1] {
    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-ccoj2iv4f1] {
    background: transparent;
}

.unauthorized-camera[b-ccoj2iv4f1] {
    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-ccoj2iv4f1] {
    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-ccoj2iv4f1] {
    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-ccoj2iv4f1]::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-ccoj2iv4f1 1.8s ease-in-out infinite;
}

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

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

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

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

.camera-loading__label[b-ccoj2iv4f1] {
    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-ccoj2iv4f1]::after,
    .camera-loading__icon[b-ccoj2iv4f1] {
        animation: none;
    }
}
/* /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-2602dppopt] {
    container-type: inline-size;
    width: 100%;
}

.dashboard-grid[b-2602dppopt] {
    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-2602dppopt] {
        /* a notif 2 oszlopán kívüli ÖSSZES oszlop */
        grid-column: 1 / -3;
        grid-row: 1;
        min-width: 0;
    }

    .dashboard-grid__cards[b-2602dppopt] {
        /* 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-2602dppopt] {
        /* 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-2602dppopt] {
    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-2602dppopt] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

        .dashboard-grid__map[b-2602dppopt],
        .dashboard-grid__cards[b-2602dppopt],
        .dashboard-grid__notif[b-2602dppopt] {
            grid-column: 1;
            grid-row: auto;
        }
}
/* /Pages/Dashboards/CamerasDash.razor.rz.scp.css */
.cameras-wrapper[b-c05e4wl650] {
    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-c05e4wl650] {
    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-c05e4wl650] {
        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-c05e4wl650] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0;
        padding: 0.6rem 0.75rem;
        font-size: 14px;
    }

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

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

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

.footage-card[b-c05e4wl650] {
    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-c05e4wl650] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px var(--c-shadow-lg);
    }

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

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

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

.footage-play-overlay[b-c05e4wl650] {
    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-c05e4wl650] {
    opacity: 1;
}

.footage-duration[b-c05e4wl650] {
    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-c05e4wl650] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.75rem;
}

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

.footage-comment[b-c05e4wl650] {
    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-c05e4wl650]  .video-wrapper,
.camera[b-c05e4wl650]  .unauthorized-camera {
    border-radius: 0;
}
/* /Pages/Dashboards/Details.razor.rz.scp.css */
.hrr-cap-banner[b-l9he4rzf4w] {
    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-l9he4rzf4w] {
    flex-grow: 1;
}

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

.hrr-status-badge[b-l9he4rzf4w] {
    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-l9he4rzf4w]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

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

.hrr-status-badge.paused[b-l9he4rzf4w] {
    background: var(--list-bg);
    color: var(--muted-clr);
}
/* /Pages/Dashboards/ElectricalDash.razor.rz.scp.css */
/* Toolbar: DateIntervalPicker + Category (ALL/AC/DC) + Group dropdown egy sorban */
.electrical-toolbar[b-79oc68x6t9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0 1rem 0;
}

.electrical-filter-category[b-79oc68x6t9],
.electrical-filter-group[b-79oc68x6t9] {
    flex: 0 1 auto;
    min-width: 0;
}

/* A chart-méret választó a DateIntervalPickerComponent-en belül renderelődik. A többi chartos
   oldalon a .dateintervalpicker space-between-je teszi a jobb szélre, itt viszont a date picker
   csak egy a három toolbar-elem közül, így a toggle középre csúszna. Feloldjuk a date picker
   wrappert (display:contents), így a .section és a .chart-size-toggle az .electrical-toolbar
   közvetlen flex-gyermeke lesz, a toggle-t pedig a sor végére, jobb szélre toljuk. */
.electrical-toolbar[b-79oc68x6t9]  .dateintervalpicker {
    display: contents;
}

.electrical-toolbar[b-79oc68x6t9]  .chart-size-toggle {
    order: 100;
    margin-left: auto;
}

/* Mobil viewport: a toolbar elemek egymás alá tördelődnek */
@media (max-width: 600px) {
    .electrical-toolbar[b-79oc68x6t9] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
}

[b-79oc68x6t9] .electrical-device-title {
    margin-top: 2rem;
}

[b-79oc68x6t9] section > .electrical-device-title:first-of-type {
    margin-top: 0.5rem;
}

.electrical-filter-empty[b-79oc68x6t9] {
    padding: 1rem;
    text-align: center;
    opacity: 0.7;
}
/* /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-rg51lgtewr] {
    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-rg51lgtewr] {
    display: inline-flex;
    border: var(--border-thin);
    border-radius: 8px;
    overflow: hidden;
    background: var(--list-bg);
    flex: none;
}

.chart-size-toggle__opt[b-rg51lgtewr] {
    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-rg51lgtewr] {
        border-left: var(--border-thin);
    }

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

    .chart-size-toggle__opt.active[b-rg51lgtewr] {
        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-rg51lgtewr] {
        display: none;
    }
}
/* /Pages/Dialogs/EditVesselDialog.razor.rz.scp.css */
.add-owner-btn[b-xnz6gv2diu] {
    border-radius: 5px;
    border: 2px solid var(--primary-clr);
    background: transparent;
}

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

.save-btn[b-xnz6gv2diu] {
    background: var(--primary-clr);
    color: white;
}
/* /Pages/EditPages/AlarmEditPage.razor.rz.scp.css */
.fluent-input-label[b-zfkr8ckehd] {
    display: flex;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: initial;
    font-variation-settings: var(--type-ramp-base-font-variations);
    margin-bottom: calc(var(--design-unit) * 1px);
    align-items: center;
}

/* Két oszlop: a mezők párban, egymáshoz igazítva (4 beep-mező → 2×2, üzenetek → 2, e-mail+mute → 2).
   Kis képernyőn egy oszlop (lásd media query). */
.target-data[b-zfkr8ckehd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0.5rem;
    align-items: start;
}

    .target-data fluent-text-field[b-zfkr8ckehd],
    .target-data fluent-number-field[b-zfkr8ckehd],
    .target-data fluent-select[b-zfkr8ckehd] {
        width: 100%;
    }

/* Egymezős sor (mute / email): teljes szélesség, egy oszlop. A mezőt a .razor-ban <div>-be
   csomagoljuk, így a FluentSelect label+mező EGY rács-elemben van → nincs köztük a rács 1rem gap-je
   (ez okozta a mute-nál a túl nagy label–mező hézagot). */
.target-data--single[b-zfkr8ckehd] {
    grid-template-columns: 1fr;
}

@media (max-width: 640px) {
    .target-data[b-zfkr8ckehd] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/EditPages/AutomationEditPage.razor.rz.scp.css */
.fluent-input-label[b-hy4awff2jn] {
    display: flex;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: initial;
    font-variation-settings: var(--type-ramp-base-font-variations);
    margin-bottom: calc(var(--design-unit) * 1px);
    align-items: center;
}

/* Két oszlop: target type | target egy sorban, target state | target command a következőben. */
.target-data[b-hy4awff2jn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0.5rem;
    align-items: start;
}

    .target-data fluent-text-field[b-hy4awff2jn],
    .target-data fluent-number-field[b-hy4awff2jn],
    .target-data fluent-select[b-hy4awff2jn] {
        width: 100%;
    }

@media (max-width: 640px) {
    .target-data[b-hy4awff2jn] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/EditPages/PresetEditPage.razor.rz.scp.css */
.section-label[b-cyupfrhrw1] {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--muted-clr);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

.preset-items-list[b-cyupfrhrw1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.preset-item[b-cyupfrhrw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: var(--list-border-radius);
    background-color: var(--neutral-layer-2, var(--list-bg));
}

.preset-item__info[b-cyupfrhrw1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preset-item__name[b-cyupfrhrw1] {
    font-size: 0.9rem;
}
/* /Pages/EditPages/TankEditPage.razor.rz.scp.css */
/* original fluent-input-label code */
.fluent-input-label[b-0p00g2p6xe] {
    display: flex;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: initial;
    font-variation-settings: var(--type-ramp-base-font-variations);
    margin-bottom: calc(var(--design-unit) * 1px);
    align-items: center;
}

.capacity-row[b-0p00g2p6xe] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.capacity-row[b-0p00g2p6xe]  fluent-number-field {
    flex: 1 1 8rem;
    min-width: 8rem;
}

.capacity-row[b-0p00g2p6xe]  fluent-select {
    flex: 1 1 10rem;
    min-width: 10rem;
}
/* /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-l5p2auizfn] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.fleet-cameras__loading[b-l5p2auizfn] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.fleet-cameras__empty[b-l5p2auizfn] {
    text-align: center;
    padding: 3rem;
    color: var(--muted-clr);
    font-size: 0.875rem;
}

/* ── Vessel section ──────────────────────────────────────────── */

.fleet-cameras__vessel-section[b-l5p2auizfn] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.fleet-cameras__vessel-header[b-l5p2auizfn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: var(--border-thin);
    padding-bottom: 0.5rem;
}

.fleet-cameras__vessel-title[b-l5p2auizfn] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--primary-clr);
}

.fleet-cameras__camera-count[b-l5p2auizfn] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-clr);
    font-weight: 500;
}

/* ── Camera grid ─────────────────────────────────────────────── */

.fleet-cameras__grid[b-l5p2auizfn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
}

@media (min-width: 1400px) {
    .fleet-cameras__grid[b-l5p2auizfn] {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
}

/* ── Camera card ─────────────────────────────────────────────── */

.camera-card[b-l5p2auizfn] {
    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-l5p2auizfn] {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--c-shadow-md);
}

.camera-card__media[b-l5p2auizfn] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--c-media-surface);
}

/* ── Placeholder (click to play) ─────────────────────────────── */

.camera-card__placeholder[b-l5p2auizfn] {
    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-l5p2auizfn] {
    background: linear-gradient(135deg, var(--c-media-surface-hover) 0%, var(--c-media-surface-raised) 100%);
}

.camera-card__placeholder:focus-visible[b-l5p2auizfn] {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}

.camera-card__placeholder > :first-child[b-l5p2auizfn] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform: scale(2.5);
}

.camera-card__play-circle[b-l5p2auizfn] {
    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-l5p2auizfn] {
    transform: scale(1.08);
}

/* ── Stop button overlay ─────────────────────────────────────── */

.camera-card__stop-btn[b-l5p2auizfn] {
    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-l5p2auizfn] {
    background: rgba(var(--nt-red-600-rgb), 0.9);
}

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

/* ── Footer ──────────────────────────────────────────────────── */

.camera-card__footer[b-l5p2auizfn] {
    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-l5p2auizfn] {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.camera-card__live[b-l5p2auizfn] {
    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-l5p2auizfn] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rec-clr);
    animation: live-pulse-b-l5p2auizfn 1.6s ease-in-out infinite;
}

@keyframes live-pulse-b-l5p2auizfn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
/* /Pages/FleetMap.razor.rz.scp.css */
.fleet-map-page[b-bt80ogqd7i] {
    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-bt80ogqd7i] {
        margin-left: 20px;
        width: calc(100% - 20px);
    }
}

.fleet-map-loading[b-bt80ogqd7i] {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 10px;
}

.map-hidden-elements[b-bt80ogqd7i] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.fleet-map-page:hover .map-hidden-elements[b-bt80ogqd7i] {
    opacity: 1;
    visibility: visible;
}

.fleet-map-page:not(:hover) .map-hidden-elements[b-bt80ogqd7i] {
    opacity: 0;
    visibility: hidden;
}
/* /Pages/FleetNotifications.razor.rz.scp.css */
/* Oszlop-szélességek: Idő | Állapot | Hajó | Esemény(1fr) | Szint.
   Az Állapot (FOLYAMATBAN) és a Szint (FIGYELMEZTETÉS) badge-ek a teljes 1rem-es betűmérettel is
   elférjenek a saját oszlopukban (ne lógjanak át) — ezért szélesebb Állapot + Szint. */
#notification-page[b-fvdhys6bnl] {
    --gtc: 10rem 10rem 9rem 1fr 11rem;
}

#notification-page .base-list__header[b-fvdhys6bnl],
#notification-page .base-list__row:not(.empty-row)[b-fvdhys6bnl] {
    grid-template-columns: var(--gtc);
    column-gap: 1.5rem;     /* térköz az oszlopok között (badge ↔ szomszéd szöveg) */
}

#notification-page .date[b-fvdhys6bnl] {
    color: var(--muted-clr);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}
/* /Pages/FleetOverview.razor.rz.scp.css */
/* ── Layout ─────────────────────────────────────────────────────── */

.fleet-overview[b-97fpytqou0] {
    --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-97fpytqou0] {
        margin-left: 20px;
    }
}

/* ── Map ─────────────────────────────────────────────────────────── */

.fleet-overview__map-container[b-97fpytqou0] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.fleet-overview__map-loading[b-97fpytqou0] {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 10px;
}

/* ── Right panel ────────────────────────────────────────────────── */

.fleet-overview__panel[b-97fpytqou0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    overflow: hidden;
}

/* ── Section shared ─────────────────────────────────────────────── */

.fleet-overview__vessels[b-97fpytqou0],
.fleet-overview__notifications[b-97fpytqou0] {
    background: var(--list-bg);
    border-radius: 10px;
    padding: 0.9rem 0.9rem 0.75rem;
    overflow-y: auto;
}

.fleet-overview__vessels[b-97fpytqou0] {
    flex-shrink: 0;
    max-height: 38%;
    min-height: 100px;
}

.fleet-overview__notifications[b-97fpytqou0] {
    flex: 1;
    min-height: 0;
}

.fleet-overview__section-header[b-97fpytqou0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.fleet-overview__section-title[b-97fpytqou0] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted-clr);
}

.fleet-overview__vessel-summary[b-97fpytqou0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-clr);
    font-weight: 500;
}

.vessel-summary__dot[b-97fpytqou0] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.vessel-summary__dot.online[b-97fpytqou0] {
    background-color: var(--online-clr);
}

.vessel-summary__dot.offline[b-97fpytqou0] {
    background-color: var(--muted-clr);
}

.fleet-overview__spinner[b-97fpytqou0] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.fleet-overview__empty[b-97fpytqou0] {
    font-size: 0.82rem;
    color: var(--muted-clr);
    text-align: center;
    padding: 1rem 0;
}

/* ── Vessel status grid ─────────────────────────────────────────── */

.vessel-status-grid[b-97fpytqou0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 0.35rem;
}

.vessel-card[b-97fpytqou0] {
    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;
}

.vessel-card:hover[b-97fpytqou0] {
    background: color-mix(in srgb, var(--primary-clr) 8%, transparent);
}

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

.vessel-card.offline[b-97fpytqou0] {
    opacity: 0.45;
    filter: grayscale(0.4);
}

.vessel-card__avatar[b-97fpytqou0] {
    position: relative;
    width: 42px;
    height: 42px;
}

.vessel-card__img[b-97fpytqou0] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid transparent;
}

.vessel-card.online .vessel-card__img[b-97fpytqou0] {
    border-color: var(--primary-clr);
}

.vessel-card__img--placeholder[b-97fpytqou0] {
    background: var(--extra-muted-clr);
}

.vessel-card__dot[b-97fpytqou0] {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--list-bg);
    background-color: var(--muted-clr);
}

.vessel-card.online .vessel-card__dot[b-97fpytqou0] {
    background-color: var(--online-clr);
}

.vessel-card__name[b-97fpytqou0] {
    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-97fpytqou0] {
    display: flex;
    gap: 0.55rem;
    padding: 0.55rem 0;
    border-bottom: var(--border-thin);
}

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

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

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

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

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

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

.overview-notif__top[b-97fpytqou0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
}

.overview-notif__vessel[b-97fpytqou0] {
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-notif__message[b-97fpytqou0] {
    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-97fpytqou0] {
    font-size: 0.67rem;
    color: var(--muted-clr);
}

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

.notif-resolved[b-97fpytqou0] {
    color: var(--resolved-clr);
    font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .fleet-overview[b-97fpytqou0] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .fleet-overview__map-container[b-97fpytqou0] {
        height: 50dvh;
        min-height: 280px;
    }

    .fleet-overview__panel[b-97fpytqou0] {
        height: auto;
    }

    .fleet-overview__vessels[b-97fpytqou0] {
        max-height: none;
    }

    .fleet-overview__notifications[b-97fpytqou0] {
        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-4g5y9mksoa] {
    padding: 0;
}

.fleet-switches__loading[b-4g5y9mksoa] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.fleet-switches__empty[b-4g5y9mksoa] {
    text-align: center;
    padding: 3rem;
    color: var(--muted-clr);
    font-size: 0.875rem;
}

/* ── Vessel grid ─────────────────────────────────────────────── */

.fleet-switches__grid[b-4g5y9mksoa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
}

.fleet-switches__vessel-card[b-4g5y9mksoa] {
    background: var(--list-bg);
    border-radius: 10px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* ── Vessel card header ──────────────────────────────────────── */

.fleet-switches__vessel-header[b-4g5y9mksoa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--border-thin);
}

.fleet-switches__vessel-name[b-4g5y9mksoa] {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-switches__active-count[b-4g5y9mksoa] {
    font-size: 0.7rem;
    color: var(--muted-clr);
    white-space: nowrap;
    margin-left: 0.5rem;
}

/* ── Group label ─────────────────────────────────────────────── */

.fleet-switches__group-label[b-4g5y9mksoa] {
    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-4g5y9mksoa] {
    font-size: 0.78rem;
    color: var(--muted-clr);
    padding: 0.4rem 0;
    text-align: center;
}

.fleet-switches__switch-row[b-4g5y9mksoa] {
    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-4g5y9mksoa] {
        background: color-mix(in srgb, var(--c-success) 8%, transparent);
    }

.fleet-switches__switch-row.off[b-4g5y9mksoa] {
    opacity: 0.55;
}

.fleet-switches__switch-name[b-4g5y9mksoa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    margin-right: 0.5rem;
}

/* ── Badges ──────────────────────────────────────────────────── */

.fleet-switches__switch-badge[b-4g5y9mksoa] {
    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-4g5y9mksoa] {
    background-color: var(--c-success);
    color: white;
}

.badge-off[b-4g5y9mksoa] {
    background-color: var(--muted-clr);
    color: white;
}

.badge-active[b-4g5y9mksoa] {
    background-color: var(--warning-clr);
    color: white;
}
/* /Pages/FleetWeather.razor.rz.scp.css */
.fleet-weather-page[b-aqgh2a8wwz] {
    position: relative;
    width: 100%;
    height: calc(100dvh - 7rem);
    min-height: 400px;
    border-radius: 10px;
    overflow: hidden;
}

/* 20px bal gutter ≥900px — a térkép ne tapadjon a sidebarhoz (margin+szűkített width, mert absolute). */
@media (min-width: 900px) {
    .fleet-weather-page[b-aqgh2a8wwz] {
        margin-left: 20px;
        width: calc(100% - 20px);
    }
}

.fleet-weather-loading[b-aqgh2a8wwz] {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 10px;
}

.map-hidden-elements[b-aqgh2a8wwz] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.fleet-weather-page:hover .map-hidden-elements[b-aqgh2a8wwz] {
    opacity: 1;
    visibility: visible;
}

.fleet-weather-page:not(:hover) .map-hidden-elements[b-aqgh2a8wwz] {
    opacity: 0;
    visibility: hidden;
}
/* /Pages/FootageComponent.razor.rz.scp.css */
.back-btn[b-4at3vsx0wx] {
    width: fit-content;
    color: white;
    background: var(--primary-clr);
}

.footage-meta[b-4at3vsx0wx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.footage-meta__name[b-4at3vsx0wx] {
    font-weight: 600;
    color: var(--text-clr);
}

.footage-meta__date[b-4at3vsx0wx],
.footage-meta__duration[b-4at3vsx0wx] {
    font-size: 0.85rem;
    color: var(--muted-clr);
}

.footage-meta__comment[b-4at3vsx0wx] {
    font-size: 0.85rem;
    color: var(--muted-clr);
    font-style: italic;
}

.nautech-page[b-4at3vsx0wx] {
    gap: 0.75rem;
}

.footage-meta-box[b-4at3vsx0wx] {
    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-4at3vsx0wx] {
    display: flex;
    gap: 0.4rem;
    font-size: 0.875rem;
    align-items: center;
    padding: 0 1rem;
}

.footage-meta-row + .footage-meta-row[b-4at3vsx0wx] {
    border-left: var(--border-thin);
}

.footage-meta-label[b-4at3vsx0wx] {
    font-weight: 600;
    color: var(--muted-clr);
    flex-shrink: 0;
}

.footage-meta-value[b-4at3vsx0wx] {
    color: var(--text-clr);
    word-wrap: anywhere;
}

.video-wrapper[b-4at3vsx0wx] {
    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-4at3vsx0wx] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.controls[b-4at3vsx0wx] {
    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-4at3vsx0wx],
    .controls input[b-4at3vsx0wx] {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
    }

.seek-bar[b-4at3vsx0wx] {
    height: 15px;
}

.time-display[b-4at3vsx0wx] {
    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-yfq75mpzde] {
    max-width: 900px;
    display: grid;
    gap: 2rem;
}

/* Nyelv + dátumformátum egy sorban, kis képernyőn egymás alá. */
.settings-row[b-yfq75mpzde] {
    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-yfq75mpzde]  .base-list-component {
    flex: 1 1 260px;
    min-width: 0;
}
/* /Pages/MapComponent.razor.rz.scp.css */
.map-date-picker[b-b7vaigwzq4] {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    background-color: var(--list-bg);
    padding: 5px;
}

.map-main-div[b-b7vaigwzq4] {
    position: relative;
    width: 100%;
    height: 100%;
}



.map-hidden-elements[b-b7vaigwzq4] {
    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-b7vaigwzq4] {
    opacity: 1; /* Fully visible when hovering */
    visibility: visible; /* Make visible in layout */
}

.map-main-div:not(:hover) .map-hidden-elements[b-b7vaigwzq4] {
    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-b7vaigwzq4] {
    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-b7vaigwzq4] {
    opacity: 1;
}

/* 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/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-xdesf73cdi] {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto;
    padding: 0.25rem 0 2.5rem;
}

/* ───────── Állapotsáv ───────── */
.noti-status[b-xdesf73cdi] {
    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-xdesf73cdi]::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background-color: var(--c-notif-critical);
}

.noti-status.is-warning[b-xdesf73cdi]::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-xdesf73cdi]::before { background-color: color-mix(in srgb, var(--muted-clr) 30%, transparent); }
.noti-status.is-clear[b-xdesf73cdi]::before { background-color: var(--c-success); }
.noti-status.is-critical[b-xdesf73cdi] { background-color: color-mix(in srgb, var(--c-notif-critical) 6%, var(--list-bg)); }
.noti-status.is-warning[b-xdesf73cdi] { background-color: color-mix(in srgb, var(--c-notif-warning) 8%, var(--list-bg)); }

.noti-status__text[b-xdesf73cdi] { display: flex; flex-direction: column; gap: 0.1rem; }
.noti-status__title[b-xdesf73cdi] { font-weight: 600; color: var(--c-text-primary); }
.is-clear .noti-status__title[b-xdesf73cdi] { color: var(--c-success); }
.noti-status__sub[b-xdesf73cdi] { display: flex; gap: 0.85rem; font-size: 0.82rem; color: var(--muted-clr); }

.noti-status__dot[b-xdesf73cdi] { width: 11px; height: 11px; border-radius: 50%; background-color: var(--c-success); flex: none; margin-left: 0.15rem; }
.noti-status__pulse[b-xdesf73cdi] { 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-xdesf73cdi]::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--c-notif-ongoing); animation: noti-pulse-b-xdesf73cdi 1.9s ease-out infinite;
}
@keyframes noti-pulse-b-xdesf73cdi { 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-xdesf73cdi] {
    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-xdesf73cdi] { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.7rem; }

.noti-card[b-xdesf73cdi] {
    --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-xdesf73cdi]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: var(--noti-accent); }
.noti-card--critical[b-xdesf73cdi] { --noti-accent: var(--c-notif-ongoing-critical); }
.noti-card--warning[b-xdesf73cdi] { --noti-accent: var(--c-notif-ongoing-warning); }
.noti-card--info[b-xdesf73cdi] { --noti-accent: var(--c-notif-ongoing-info); }

.noti-card__head[b-xdesf73cdi] { padding: 0.95rem 1.15rem; }
.noti-card__head.is-clickable[b-xdesf73cdi] { cursor: pointer; }
.noti-card__head.is-clickable:hover[b-xdesf73cdi] { background-color: color-mix(in srgb, var(--primary-clr) 5%, var(--list-bg)); }
.noti-card__top[b-xdesf73cdi] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
.noti-card__dur[b-xdesf73cdi] { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--noti-accent); font-variant-numeric: tabular-nums; }
.noti-card__title[b-xdesf73cdi] { font-size: 1.02rem; font-weight: 600; color: var(--c-text-primary); margin-bottom: 0.25rem; line-height: 1.35; }
.noti-card__meta[b-xdesf73cdi] { font-size: 0.82rem; color: var(--muted-clr); }

/* ───────── Szűrő ───────── */
.noti-filter[b-xdesf73cdi] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.noti-chip[b-xdesf73cdi] {
    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-xdesf73cdi] { border-color: var(--muted-clr); }
.noti-chip.is-on[b-xdesf73cdi] { 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-xdesf73cdi] { margin-left: 0.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; }

/* ───────── Idővonal panel ───────── */
.noti-timeline[b-xdesf73cdi] {
    /* 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-xdesf73cdi] { margin-top: 1.5rem; }

.noti-day[b-xdesf73cdi] {
    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-xdesf73cdi]::before,
.noti-day[b-xdesf73cdi]::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background-color: color-mix(in srgb, var(--muted-clr) 28%, transparent);
}

.noti-day span[b-xdesf73cdi] {
    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-xdesf73cdi] {
    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-xdesf73cdi]::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-xdesf73cdi]::before { top: calc(var(--noti-node-top) + 8px); }
.noti-group > .noti-item:last-child[b-xdesf73cdi]::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-xdesf73cdi]::before { display: none; }

.noti-node[b-xdesf73cdi] {
    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-xdesf73cdi] { border-color: var(--c-notif-critical); background-color: var(--c-notif-critical); }
.noti-node--warning[b-xdesf73cdi] { border-color: var(--c-notif-warning); background-color: var(--c-notif-warning); }
.noti-node--info[b-xdesf73cdi] { border-color: var(--c-notif-info); }
.noti-node--resolved[b-xdesf73cdi] { border-color: var(--c-success); background-color: var(--list-bg); }
.noti-node--resolved svg[b-xdesf73cdi] { 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-xdesf73cdi] { border-color: var(--muted-clr); background-color: var(--list-bg); }
.noti-node--auto[b-xdesf73cdi]::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-xdesf73cdi] { border-color: color-mix(in srgb, var(--muted-clr) 35%, transparent); }

.noti-item__body[b-xdesf73cdi] { grid-column: 3; min-width: 0; }

.noti-item__click[b-xdesf73cdi] { padding: 0.5rem 0.6rem; border-radius: 10px; }
.noti-item__click.is-clickable[b-xdesf73cdi] { cursor: pointer; }
.noti-item__click.is-clickable:hover[b-xdesf73cdi] { 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-xdesf73cdi] { color: var(--muted-clr); font-weight: 400; }

.noti-item__head[b-xdesf73cdi] { display: flex; align-items: baseline; gap: 0.6rem; }
.noti-item__title[b-xdesf73cdi] { 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-xdesf73cdi] { 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-xdesf73cdi] {
    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-xdesf73cdi] { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.35rem; font-size: 0.82rem; color: var(--muted-clr); }
.noti-item__dur[b-xdesf73cdi] { color: var(--muted-clr); }

.noti-count[b-xdesf73cdi] {
    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-xdesf73cdi] {
    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-xdesf73cdi] {
    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-xdesf73cdi] { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted-clr); }

.noti-chevron[b-xdesf73cdi] { width: 14px; height: auto; opacity: 0.55; transition: transform 0.2s ease; }
.is-open .noti-chevron[b-xdesf73cdi] { 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-xdesf73cdi] {
    margin: 0.1rem 0.6rem 0.55rem;
    border-top: var(--border-thin); padding-top: 0.7rem;
}
.noti-fallback[b-xdesf73cdi] { 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-xdesf73cdi] { color: var(--muted-clr); font-size: 0.82rem; }
.noti-fallback__val[b-xdesf73cdi] { overflow-wrap: anywhere; color: var(--c-text-primary); font-size: 0.9rem; }

.noti-empty[b-xdesf73cdi] {
    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-xdesf73cdi] {
    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-xdesf73cdi] {
    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-xdesf73cdi] { padding: 0.8rem 0.95rem; }
    .noti-card__head[b-xdesf73cdi] { padding: 0.8rem 0.95rem; }
    .noti-card__title[b-xdesf73cdi] { 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-xdesf73cdi] { --noti-pad-x: 0.75rem; padding: 0.4rem var(--noti-pad-x) 0.9rem; }
    .noti-item__click[b-xdesf73cdi] { padding-inline: 0.4rem; }
    .noti-detail[b-xdesf73cdi] { margin-inline: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .noti-status__pulse[b-xdesf73cdi]::after { animation: none; }
    .noti-chevron[b-xdesf73cdi] { transition: none; }
}
/* /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-0v8tkhecii] {
    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-0v8tkhecii] {
    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-0v8tkhecii] {
    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-swk4es9vb3] {
    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-swk4es9vb3] {
        flex: 0 0 200px;
    }

@media (max-width: 480px) {
    .settings-tile[b-swk4es9vb3] {
        flex: 1 1 100%;
    }
}

.settings-tile[b-swk4es9vb3] {
    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-swk4es9vb3] {
        border-color: var(--primary-clr);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px var(--c-shadow-sm);
    }

    .settings-tile span[b-swk4es9vb3] {
        font-weight: 600;
        font-size: 1rem;
        text-align: center;
    }

:root[data-theme="dark"] .settings-tile[b-swk4es9vb3],
:root[data-theme="night"] .settings-tile[b-swk4es9vb3] {
    box-shadow: 0 2px 5px var(--c-shadow-sm);
}
/* /Pages/SwitchHistory.razor.rz.scp.css */
.back-btn[b-k6yt770xg2] {
    width: fit-content;
    color: white;
    background: var(--primary-clr);
}
/* /Pages/Vsettings.razor.rz.scp.css */
.vesselsettings-row[b-t48z4ej7ng] {
    display: flex;
    width: 100%;
    row-gap: 2rem;
    column-gap: 1rem;
}

.vesselsettings-column-left[b-t48z4ej7ng] {
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vesselsettings-column-right[b-t48z4ej7ng] {
    flex-grow: 1;
    flex-basis: 70%;
}

.vesselsettings-row:first-child[b-t48z4ej7ng] {
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .vesselsettings-column-left[b-t48z4ej7ng], .vesselsettings-column-right[b-t48z4ej7ng] {
        flex: 0 0 100%;
    }
}