/*
    RaktárAD Hibabejelentő – központi stíluslap.

    A projektben NEM használunk komponensenkénti scoped CSS-t (*.razor.css).
    Minden stílus ebben az állományban él, szekciókra bontva.

    Tartalom:
      1. Téma tokenek
      2. Alap elemek
      3. Elrendezés (layout, sidebar, topbar)
      4. Navigáció
      5. Állapotjelzők (badge, SLA)
      6. Űrlapok és validáció
      7. Adattáblák és listák
      8. Töltésjelző (loader)
      9. Újracsatlakozási felület
     10. Segédosztályok
     11. Reszponzív töréspontok
     12. Nyomtatás és mozgáscsökkentés
*/

/* ============================================================
   1. Téma tokenek
   ============================================================ */

:root {
    /* Márkaszínek – a raktarad.hu ipari, mélykék + borostyán arculatához igazítva. */
    --rad-color-primary: #0d4d8c;
    --rad-color-primary-hover: #0a3d70;
    --rad-color-primary-subtle: #e7f0f9;
    --rad-color-navy: #071f38;
    --rad-color-navy-soft: #0b3159;
    --rad-color-accent: #f5a623;
    --rad-color-accent-strong: #d98a06;
    --rad-color-accent-subtle: #fdf1dc;
    --rad-color-surface: #ffffff;
    --rad-color-surface-alt: #ffffff;
    --rad-color-surface-sunken: #f2f5f9;
    --rad-color-border: #d7dee7;
    --rad-color-border-strong: #b9c5d4;
    --rad-color-text: #1f2933;
    --rad-color-text-muted: #5b6b7c;
    --rad-color-inverse: #ffffff;
    --rad-color-success: #1e7e46;
    --rad-color-warning: #b26a00;
    --rad-color-danger: #b32020;
    --rad-color-info: #0b6c86;
    /* Forma és mélység */
    --rad-radius-sm: 0.375rem;
    --rad-radius-md: 0.75rem;
    --rad-radius-lg: 1.125rem;
    --rad-radius-pill: 999px;
    --rad-shadow-sm: 0 1px 3px rgba(7, 31, 56, 0.08), 0 1px 2px rgba(7, 31, 56, 0.06);
    --rad-shadow-md: 0 10px 24px -10px rgba(7, 31, 56, 0.28);
    --rad-shadow-lg: 0 24px 48px -24px rgba(7, 31, 56, 0.42);
    /* Navbar */
    --rad-navbar-height: 5.25rem;
    /* Térköz-skála (4px alap) */
    --rad-space-xs: 0.25rem;
    --rad-space-sm: 0.5rem;
    --rad-space-md: 1rem;
    --rad-space-lg: 1.5rem;
    --rad-space-xl: 2.5rem;
    --rad-space-2xl: 4rem;
    /* Tipográfia-skála */
    --rad-font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --rad-font-display: var(--rad-font-body);
    --rad-text-xs: 0.75rem;
    --rad-text-sm: 0.875rem;
    --rad-text-md: 1rem;
    --rad-text-lg: 1.125rem;
    --rad-text-xl: 1.375rem;
    --rad-text-2xl: 1.75rem;
    --rad-text-3xl: 2.25rem;
    --rad-tracking-caps: 0.08em;
    /* Elrendezés */
    --rad-sidebar-width: 16.5rem;
    --rad-topbar-height: 4rem;
    --rad-content-max: 82rem;
    --rad-touch-target: 2.75rem;
    /* A jegy részletein a görgethető panelek (e-mail értesítések, előzmények)
       közös maximális magassága. Nagyjából három sor fér el benne, a többi
       tartalom görgetéssel érhető el. */
    --rad-scroll-panel-max: 14rem;
    /* Mozgás */
    --rad-ease: cubic-bezier(0.2, 0.6, 0.25, 1);
    --rad-duration: 180ms;
    /* Ipari rácsminta – saját készítésű SVG textúra (nem külső eszköz). */
    --rad-pattern-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M0 .5h48M0 24.5h48M.5 0v48M24.5 0v48'/%3E%3C/g%3E%3C/svg%3E");
}

/* Bootstrap változók összehangolása a téma tokenekkel. */
:root {
    --bs-primary: var(--rad-color-primary);
    --bs-primary-rgb: 13, 77, 140;
    --bs-body-color: var(--rad-color-text);
    --bs-body-bg: var(--rad-color-surface-alt);
    --bs-border-color: var(--rad-color-border);
    --bs-body-font-family: var(--rad-font-body);
    --bs-border-radius: var(--rad-radius-sm);
    --bs-link-color: var(--rad-color-primary);
    --bs-link-hover-color: var(--rad-color-primary-hover);
}

/* ============================================================
   2. Alap elemek
   ============================================================ */

/* A dokumentum magasságát nem kötjük meg: a görgetést kizárólag a böngésző
   végzi. Ha a `html` vagy a `body` fix magasságot kapna, a legalább teljes
   magasságú belső burkoló túlcsordulna rajta, és a böngésző sávja mellett egy
   második, belső görgetősáv is megjelenne. */
body {
    font-family: var(--rad-font-body);
    color: var(--rad-color-text);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--rad-color-navy);
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--rad-text-3xl);
    line-height: 1.15;
}

h2 {
    font-size: var(--rad-text-xl);
    line-height: 1.25;
}

h3 {
    font-size: var(--rad-text-lg);
}

@media (max-width: 575.98px) {
    h1 {
        font-size: var(--rad-text-2xl);
    }
}

/* Kisbetűs, ritkított "eyebrow" felirat a szekciók fölé. */
.rad-eyebrow {
    display: block;
    font-size: var(--rad-text-xs);
    font-weight: 700;
    letter-spacing: var(--rad-tracking-caps);
    text-transform: uppercase;
    color: var(--rad-color-primary);
}

a {
    color: var(--rad-color-primary);
    text-decoration: none;
}


/* Érintőképernyőn is kényelmesen használható vezérlők. */
.btn,
.form-control,
.form-select {
    min-height: var(--rad-touch-target);
    border-radius: var(--rad-radius-sm);
}

/* A `min-height` önmagában csak megnöveli a gomb dobozt, a Bootstrap alapértelmezett
   `inline-block` megjelenítése mellett a felirat a padding miatt felülre csúszik.
   Flex elrendezéssel a szöveg (és az esetleges ikon) függőlegesen középre kerül. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.15rem;
    transition: transform var(--rad-duration) var(--rad-ease), box-shadow var(--rad-duration) var(--rad-ease), background-color var(--rad-duration) var(--rad-ease);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    --bs-btn-bg: var(--rad-color-primary);
    --bs-btn-border-color: var(--rad-color-primary);
    --bs-btn-hover-bg: var(--rad-color-primary-hover);
    --bs-btn-hover-border-color: var(--rad-color-primary-hover);
    box-shadow: var(--rad-shadow-sm);
}

/* Elsődleges, figyelemfelkeltő művelet (pl. új hibabejelentés). */
.btn-accent,
.btn-warning {
    --bs-btn-color: var(--rad-color-navy);
    --bs-btn-bg: var(--rad-color-accent);
    --bs-btn-border-color: var(--rad-color-accent);
    --bs-btn-hover-color: var(--rad-color-navy);
    --bs-btn-hover-bg: var(--rad-color-accent-strong);
    --bs-btn-hover-border-color: var(--rad-color-accent-strong);
    --bs-btn-active-bg: var(--rad-color-accent-strong);
    --bs-btn-font-weight: 700;
    box-shadow: var(--rad-shadow-sm);
}

.btn-outline-secondary {
    --bs-btn-color: var(--rad-color-navy);
    --bs-btn-border-color: var(--rad-color-border-strong);
    --bs-btn-hover-color: var(--rad-color-inverse);
    --bs-btn-hover-bg: var(--rad-color-primary);
    --bs-btn-hover-border-color: var(--rad-color-primary);
}

.form-control,
.form-select {
    border-color: var(--rad-color-border-strong);
    background-color: var(--rad-color-surface);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--rad-color-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 77, 140, 0.15);
}

.form-label {
    font-weight: 600;
    font-size: var(--rad-text-sm);
    color: var(--rad-color-navy);
}

/* Kötelező mezők jelölése: csillag a címke mellett. */
.rad-required-mark {
    margin-left: 0.25rem;
    color: var(--bs-danger, #b3261e);
    font-weight: 700;
}

/* Opcionális mezők halvány jelölése, hogy a kötelezők kiemelkedjenek. */
.rad-optional-mark {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rad-color-muted, #6c757d);
}

/* Az űrlap tetején megjelenő magyarázó sáv. */
.rad-required-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--bs-danger, #b3261e);
    border-radius: var(--rad-radius-sm, 0.375rem);
    background-color: rgba(179, 38, 30, 0.06);
    font-size: var(--rad-text-sm);
    color: var(--rad-color-navy);
}

/* Csak képernyőolvasónak szánt tartalom. */
.rad-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ugrás a fő tartalomra billentyűzettel. */
.rad-skip-link {
    position: absolute;
    top: -3rem;
    left: var(--rad-space-md);
    z-index: 1100;
    padding: var(--rad-space-sm) var(--rad-space-md);
    background-color: var(--rad-color-primary);
    color: var(--rad-color-inverse);
    border-radius: var(--rad-radius-sm);
    transition: top 0.15s ease-in-out;
}

.rad-skip-link:focus {
    top: var(--rad-space-md);
}

/* ============================================================
   3. Elrendezés
   ============================================================ */

/* A burkoló legalább a nézetablak magasságát kitölti, hogy rövid tartalomnál
   se maradjon üres sáv az oldal alján. A `body` magassága kötetlen, így ez
   nem okoz túlcsordulást, és nem jelenik meg második görgetősáv. A `dvh`
   egység a mobil böngészők eltűnő címsávját is helyesen kezeli. */
.rad-page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: #ffffff;
}

/* ------------------------------------------------------------
   Felső navigációs sáv (raktarad.hu stílusú, legördülő almenükkel)
   ------------------------------------------------------------ */

.rad-navbar {
    z-index: 1030;
    padding: 0;
    background-color: #ffffff;
    border-bottom: 1px solid var(--rad-color-border);
    box-shadow: var(--rad-shadow-sm);
}

.rad-navbar__inner {
    display: flex;
    align-items: center;
    gap: var(--rad-space-lg);
    max-width: var(--rad-content-max);
    min-height: var(--rad-navbar-height);
    margin: 0 auto;
    padding: var(--rad-space-sm) var(--rad-space-lg);
}

.rad-navbar__brand {
    display: flex;
    align-items: center;
    gap: var(--rad-space-md);
    padding: 0;
    margin: 0;
}

/* A logó a raktarad.hu-hoz hasonlóan nagy, jól látható elem a menü elején. */
.rad-navbar__logo {
    height: 3.5rem;
    width: auto;
    object-fit: contain;
}

.rad-navbar__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.rad-navbar__brand-sub {
    font-size: var(--rad-text-xs);
    font-weight: 700;
    letter-spacing: var(--rad-tracking-caps);
    color: var(--rad-color-primary);
}

.rad-navbar__brand-title {
    font-size: var(--rad-text-md);
    font-weight: 700;
    color: var(--rad-color-navy);
}

.rad-navbar__toggler {
    border: 1px solid var(--rad-color-border-strong);
    padding: 0.45rem 0.6rem;
}

.rad-navbar__toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 77, 140, 0.2);
}

.rad-navbar__actions {
    margin-left: var(--rad-space-md);
}

/* A mobilmenü tetején megjelenő felhasználónév-fejléc. */
.rad-navbar__user-header {
    display: flex;
    align-items: center;
    gap: var(--rad-space-sm);
    padding: var(--rad-space-sm) var(--rad-space-sm) var(--rad-space-md);
    margin-bottom: var(--rad-space-sm);
    border-bottom: 2px solid var(--rad-color-border-strong);
    font-weight: 700;
    color: var(--rad-color-navy);
}

/* A kijelentkezés űrlapgombja menüpontként viselkedik a mobilmenüben. */
.rad-navbar__link--button {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rad-color-border);
}

/* A Blazor Bootstrap stíluslapja a csupasz `main` szelektorra `height: 100vh`
   és `overflow-x: hidden` értéket ad. Ettől a főtartalom a nézetablak
   magasságára szorulna, és a hosszabb oldalak saját, belső görgetősávot
   kapnának a böngészőé mellett. Itt visszaállítjuk a természetes
   magasságot, így az oldalt kizárólag a böngésző görgeti. */
.rad-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--rad-content-max);
    height: auto;
    overflow: visible;
    margin: 0 auto;
    padding: var(--rad-space-xl) var(--rad-space-lg) var(--rad-space-2xl);
}

.rad-card {
    position: relative;
    background-color: var(--rad-color-surface);
    border: 1px solid var(--rad-color-border-strong);
    border-radius: var(--rad-radius-md);
    box-shadow: var(--rad-shadow-md);
    padding: var(--rad-space-lg);
}

/* Egymás utáni kártyák egységes ritmusa. */
.rad-card + .rad-card,
.rad-card + .rad-kpi-grid,
.rad-kpi-grid + .rad-card {
    margin-top: var(--rad-space-lg);
}

.rad-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rad-space-sm);
    margin-bottom: var(--rad-space-md);
    padding-bottom: var(--rad-space-sm);
    border-bottom: 1px solid var(--rad-color-border);
}

.rad-card__header h2,
.rad-card__header h3 {
    margin: 0;
}

/* Aréna: bevezető panel valódi csarnok-fotókkal, a raktarad.hu nyitóképéhez hasonlóan.
   A háttérben 4 banner kép váltakozik 5 másodpercenként (lásd js/hero-banner.js). */
.rad-hero {
    position: relative;
    overflow: hidden;
    padding: var(--rad-space-xl);
    margin-bottom: var(--rad-space-lg);
    color: var(--rad-color-inverse);
    border-radius: var(--rad-radius-lg);
    background: var(--rad-color-navy);
    border: 1px solid var(--rad-color-border-strong);
    box-shadow: var(--rad-shadow-lg);
}

/* Váltakozó banner rétegek: mindegyik teljes méretben fedi a panelt, de csak az "active" látszik. */
.rad-hero__slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.rad-hero__slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.rad-hero__slide--active {
    opacity: 1;
}

/* Enyhe sötétítő réteg a fotók fölött, csak a bal oldalon erősebb, hogy a szöveg olvasható
   maradjon, de a banner fotó ne tűnjön el egy tömör kék rétegben. */
.rad-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(7, 31, 56, 0.72) 0%, rgba(7, 31, 56, 0.5) 45%, rgba(7, 31, 56, 0.18) 100%);
}

.rad-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--rad-space-xl);
    flex-wrap: wrap;
}

.rad-hero__left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rad-space-sm);
}

.rad-hero__brand {
    display: flex;
    align-items: center;
    gap: var(--rad-space-md);
}

.rad-hero__logo {
    height: 2.75rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.rad-hero__title {
    display: inline-block;
    margin: 0;
    color: var(--rad-color-inverse);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* Blazor a lapváltás után automatikusan fókuszba helyezi az oldal első címsorát
   (`FocusOnNavigate`, akadálymentességi célból), amihez `tabindex="-1"` attribútumot
   tesz az elemre. Ez a böngésző alapértelmezett fókuszkeretét is kiváltja minden
   oldalon. Mivel ez nem billentyűzetes navigáció, a keretet globálisan elrejtjük;
   a valódi interaktív elemek (gombok, linkek, mezők) fókuszjelzése érintetlen marad. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
.rad-hero__title:focus,
.rad-hero__title:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Üres, léptéket adó sor a márkasor és a gombok között. */
.rad-hero__spacer {
    height: var(--rad-text-3xl);
}

.rad-hero__lead {
    flex: 1 1 320px;
    display: inline-block;
    max-width: 46ch;
    margin-bottom: 0;
    padding: var(--rad-space-sm) var(--rad-space-md);
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--rad-text-lg);
    background: rgba(7, 31, 56, 0.45);
    border-radius: var(--rad-radius-md);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.rad-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rad-space-sm);
}

.rad-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--rad-space-md);
    margin-bottom: var(--rad-space-lg);
}

.rad-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--rad-space-xs);
    overflow: hidden;
    background-color: var(--rad-color-surface);
    border: 1px solid var(--rad-color-border-strong);
    border-radius: var(--rad-radius-md);
    padding: var(--rad-space-md) var(--rad-space-md) var(--rad-space-md) var(--rad-space-lg);
    box-shadow: var(--rad-shadow-sm);
    transition: transform var(--rad-duration) var(--rad-ease), box-shadow var(--rad-duration) var(--rad-ease);
}

/* Bal oldali állapotcsík adja a KPI-k vizuális ritmusát. */
.rad-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background-color: var(--rad-color-primary);
}

.rad-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--rad-shadow-md);
}

.rad-kpi--warning::before {
    background-color: var(--rad-color-accent);
}

.rad-kpi--danger::before {
    background-color: var(--rad-color-danger);
}

.rad-kpi--success::before {
    background-color: var(--rad-color-success);
}

.rad-kpi__label {
    font-size: var(--rad-text-xs);
    font-weight: 700;
    letter-spacing: var(--rad-tracking-caps);
    text-transform: uppercase;
    color: var(--rad-color-text-muted);
}

.rad-kpi__value {
    font-size: var(--rad-text-3xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--rad-color-navy);
    font-variant-numeric: tabular-nums;
}

.rad-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rad-space-md);
    margin-bottom: var(--rad-space-lg);
}

.rad-page-header h1 {
    margin-bottom: 0;
}

/* Díszes elválasztó a cím alatt. */
.rad-page-header__titles {
    min-width: 0;
}

.rad-page-header h1::after {
    content: "";
    display: block;
    width: 30rem;
    height: 3px;
    margin-top: var(--rad-space-sm);
    border-radius: var(--rad-radius-pill);
    background: linear-gradient(90deg, var(--rad-color-accent), var(--rad-color-primary));
}

/* ============================================================
   4. Navigáció
   ============================================================ */

.rad-navbar__nav {
    gap: 0.15rem;
}

.rad-navbar__link {
    display: flex;
    align-items: center;
    gap: var(--rad-space-xs);
    padding: 0.6rem 0.85rem !important;
    font-weight: 600;
    font-size: var(--rad-text-sm);
    color: var(--rad-color-navy) !important;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color var(--rad-duration) var(--rad-ease), border-color var(--rad-duration) var(--rad-ease);
}

.rad-navbar__link:hover,
.rad-navbar__link:focus-visible {
    color: var(--rad-color-primary) !important;
    border-bottom-color: var(--rad-color-border-strong);
}

.rad-navbar__link.active {
    color: var(--rad-color-primary) !important;
    border-bottom-color: var(--rad-color-accent);
}

/* Legördülő nyíl finomítása. */
.rad-navbar__link.dropdown-toggle::after {
    margin-left: 0.4rem;
    vertical-align: 0.1em;
}

.rad-navbar__menu {
    margin-top: 0.35rem;
    padding: var(--rad-space-xs);
    border: 1px solid var(--rad-color-border-strong);
    border-radius: var(--rad-radius-md);
    box-shadow: var(--rad-shadow-md);
}

.rad-navbar__menu--wide {
    min-width: 16rem;
}

.rad-navbar__menu-item {
    display: flex;
    align-items: center;
    gap: var(--rad-space-sm);
    padding: 0.55rem 0.75rem;
    font-size: var(--rad-text-sm);
    font-weight: 500;
    color: var(--rad-color-text);
    border-radius: var(--rad-radius-sm);
}

.rad-navbar__menu-item:hover,
.rad-navbar__menu-item:focus-visible {
    background-color: var(--rad-color-primary-subtle);
    color: var(--rad-color-primary-hover);
}

.rad-navbar__menu-item.active {
    background-color: var(--rad-color-primary-subtle);
    color: var(--rad-color-primary);
    font-weight: 700;
}

/* Folyamatonként eltérő ikonszín, hogy a menüpontok gyorsan azonosíthatók legyenek.
   A Bootstrap Icons betűtípus-alapú glyphok itt kapnak méretet és igazítást. */
.rad-nav__icon {
    flex: 0 0 auto;
    display: inline-block;
    width: 1.15rem;
    font-size: 1.05rem;
    line-height: 1;
    text-align: center;
    vertical-align: -0.1em;
}

.rad-icon--navy {
    color: var(--rad-color-navy);
}

.rad-icon--accent {
    color: var(--rad-color-accent-strong);
}

.rad-icon--info {
    color: var(--rad-color-info);
}

.rad-icon--success {
    color: var(--rad-color-success);
}

/* ============================================================
   5. Állapotjelzők
   ============================================================ */

.rad-badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: var(--rad-radius-pill);
    border: 1px solid transparent;
    font-size: var(--rad-text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

.rad-badge--neutral {
    background-color: var(--rad-color-surface-sunken);
    border-color: var(--rad-color-border);
    color: var(--rad-color-text-muted);
}

.rad-badge--info {
    background-color: #e2f2f6;
    border-color: #bfe0e9;
    color: var(--rad-color-info);
}

.rad-badge--success {
    background-color: #e4f4ea;
    border-color: #bfe3cd;
    color: var(--rad-color-success);
}

.rad-badge--warning {
    background-color: var(--rad-color-accent-subtle);
    border-color: #f0d5a4;
    color: var(--rad-color-warning);
}

.rad-badge--danger {
    background-color: #fbe6e6;
    border-color: #f0c4c4;
    color: var(--rad-color-danger);
}

/* Előzetesen létrehozott, még be nem lépett felhasználó jelölése. */
.rad-badge--pending {
    background-color: #eef1f5;
    border-color: #ccd5e0;
    color: #4a5b70;
}

/* A státuszjelző szöveg önmagában egyértelmű, itt nem kell pontjelző. */
.rad-badge--pending::before {
    display: none;
}

/* Kivitelezői címkék listája a táblázatban. */
.badge-info {
    background-color: #e2f2f6;
    border: 1px solid #bfe0e9;
    color: var(--rad-color-info);
    font-weight: 600;
    border-radius: var(--rad-radius-pill);
}

/* Profilkép-feltöltő (Cropper.js) */
.rad-image-uploader {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.rad-image-uploader__preview {
    width: 220px;
    max-width: 100%;
}

    .rad-image-uploader__preview img {
        display: block;
        max-width: 100%;
    }

.rad-image-uploader__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    border: 1px dashed #ccd5e0;
    border-radius: 0.5rem;
    background-color: #f8fafc;
    color: #90a0b5;
    font-size: 2.5rem;
}

.rad-image-uploader__controls {
    flex: 1 1 240px;
    min-width: 240px;
}

.rad-image-uploader__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Nézet mód: a feltöltött kép, sarkában a művelet-ikonokkal. */
.rad-image-uploader__view {
    position: relative;
    width: 220px;
    max-width: 100%;
}

.rad-image-uploader__image {
    display: block;
    width: 220px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid #ccd5e0;
    border-radius: 0.5rem;
}

.rad-image-uploader__actions {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: flex;
    gap: 0.375rem;
}

.rad-image-uploader__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #ccd5e0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    color: #1f3a5f;
    line-height: 1;
    cursor: pointer;
}

    .rad-image-uploader__action:hover:not(:disabled) {
        background-color: #ffffff;
        border-color: #90a0b5;
    }

    .rad-image-uploader__action:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.rad-image-uploader__action--danger {
    color: #b02a37;
}

.rad-image-uploader__confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-basis: 100%;
}

/* Profilkép megjelenítése listákban és adatlapokon. */
.rad-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background-color: #eef1f5;
    color: #7b8ca3;
    width: 40px;
    height: 40px;
}

    .rad-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.rad-avatar--lg {
    width: 96px;
    height: 96px;
    font-size: 2rem;
}

/* Címke (flag) bevitel és megjelenítés. */
.rad-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.rad-upload-row .form-control {
    flex: 1 1 18rem;
}

.rad-document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.rad-document-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background-color: var(--bs-body-bg, #fff);
}

.rad-document-card__icon {
    font-size: 1.5rem;
    color: var(--bs-primary, #0d6efd);
}

.rad-document-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rad-document-card__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* A felhasználónév és a hozzá tartozó értesítés-jelvény konténere. */
.rad-user-name {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-right: 0.35rem;
}

/* GDPR hozzájárulás jelvény: apró piros értesítés-pötty a név jobb felső sarkában. */
.rad-consent-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 1px solid #fff;
    background-color: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 0.5rem;
    line-height: 1;
    text-decoration: none;
}

.rad-consent-badge:hover,
.rad-consent-badge:focus-visible {
    background-color: #b02a37;
    color: #fff;
}

/* Fehér felkiáltójel a jelvény közepén. */
.rad-consent-badge__mark {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

/* A jelvény szövege buborékként jelenik meg egérrel vagy billentyűzet-fókusszal. */
.rad-consent-badge__text {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 1080;
    max-width: 18rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.375rem;
    background-color: #1f2933;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out;
}

.rad-consent-badge:hover .rad-consent-badge__text,
.rad-consent-badge:focus-visible .rad-consent-badge__text {
    opacity: 1;
    visibility: visible;
}

/* E-mail sablon szerkesztő */
.rad-template-editor__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .rad-template-editor__layout {
        grid-template-columns: 1fr;
    }
}

.rad-template-editor__source {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.875rem;
}

.rad-template-editor__tokens-title {
    font-size: 1rem;
    font-weight: 600;
}

.rad-token-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.rad-token {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    padding: 0.15rem 0.6rem;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.8125rem;
    cursor: pointer;
}

.rad-token:hover {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.rad-template-preview {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.rad-template-preview__subject {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.rad-template-preview__body {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.375rem;
}

/* Az e-mail sablonok táblázatai inline stílus nélkül érkezhetnek, ezért az
   előnézetben alapértelmezett elrendezést adunk nekik. */
.rad-template-preview__body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.rad-template-preview__body td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    vertical-align: top;
}

.rad-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background-color: var(--bs-body-bg, #fff);
}

.rad-tag-input:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.rad-tag-input__field {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: 0;
    outline: 0;
    padding: 0.125rem 0;
    background: transparent;
}

.rad-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    font-size: 0.875rem;
    line-height: 1.3;
}

.rad-tag__remove {
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.rad-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Ingatlan adatlap fejléc és kártyarács. */
.rad-property-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.rad-property-hero__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 240px;
    flex: 1 1 320px;
}

.rad-property-hero__title {
    margin: 0;
}

.rad-property-hero__address {
    margin: 0;
    color: #6c757d;
}

.rad-property-hero__action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rad-property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

/* Az ingatlan adatlap keretei között legyen látható térköz. */
.rad-property-hero {
    margin-bottom: 1rem;
}

/* Művelet gombsor a szűrősáv alatt. */
.rad-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rad-action-bar .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Csatolmány-kártyarács és lightbox. */
.rad-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 180px);
    justify-content: start;
    gap: 0.75rem;
}

.rad-attachment-card {
    max-width: 180px;
    width: 100%;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #fff;
}

.rad-attachment-card__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #6c757d;
    font-size: 2.5rem;
    cursor: pointer;
}

.rad-attachment-card__preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Összecsukható műveleti panel. */
.rad-collapsible {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    background-color: #fff;
    overflow: hidden;
}

.rad-collapsible__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0;
    background-color: #f8f9fa;
    text-align: left;
    font-weight: 600;
}

.rad-collapsible__header:hover,
.rad-collapsible__header:focus-visible {
    background-color: #eef1f4;
}

.rad-collapsible__icon {
    flex: 0 0 auto;
    color: #6c757d;
}

.rad-collapsible__content {
    padding: 1rem;
}

.rad-attachment-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem;
    font-size: 0.85rem;
}

.rad-attachment-card__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.rad-lightbox {
    background-color: rgba(0, 0, 0, 0.35);
}

.rad-lightbox__image {
    max-width: 100%;
    max-height: 70vh;
}

/*
    Az SLA állapotot nem csak szín, hanem szöveg és ikon is jelöli,
    hogy színtévesztők számára is egyértelmű legyen.
*/
.rad-sla {
    display: inline-flex;
    align-items: center;
    gap: var(--rad-space-xs);
    font-weight: 600;
}

.rad-sla--within {
    color: var(--rad-color-success);
}

.rad-sla--due-soon {
    color: var(--rad-color-warning);
}

.rad-sla--overdue {
    color: var(--rad-color-danger);
}

/* ============================================================
   6. Űrlapok és validáció
   ============================================================ */

.rad-form-section {
    margin-bottom: var(--rad-space-lg);
}

.rad-form-section__title {
    margin-bottom: var(--rad-space-sm);
    font-size: 1.05rem;
    font-weight: 600;
}

.rad-form-hint {
    display: block;
    margin-top: var(--rad-space-xs);
    color: var(--rad-color-text-muted);
    font-size: 0.875rem;
}

.rad-required::after {
    content: " *";
    color: var(--rad-color-danger);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--rad-color-success);
}

.invalid {
    outline: 1px solid var(--rad-color-danger);
}

.validation-message {
    color: var(--rad-color-danger);
    font-size: 0.875rem;
}

.rad-validation-summary {
    padding: var(--rad-space-md);
    margin-bottom: var(--rad-space-md);
    background-color: #fbe6e6;
    border: 1px solid var(--rad-color-danger);
    border-radius: var(--rad-radius-sm);
    color: var(--rad-color-danger);
}

/* Fájlfeltöltés előnézete. */
.rad-upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rad-space-sm);
    margin-top: var(--rad-space-md);
}

.rad-upload-preview__item {
    position: relative;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    border: 1px solid var(--rad-color-border);
    border-radius: var(--rad-radius-sm);
}

.rad-upload-preview__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   7. Adattáblák és listák
   ============================================================ */

.rad-table {
    width: 100%;
    background-color: var(--rad-color-surface);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--rad-text-sm);
}

.rad-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--rad-color-surface-alt);
    font-size: var(--rad-text-xs);
    font-weight: 700;
    letter-spacing: var(--rad-tracking-caps);
    text-transform: uppercase;
    color: var(--rad-color-text-muted);
    text-align: left;
    white-space: nowrap;
}

.rad-table th,
.rad-table td {
    padding: 0.7rem var(--rad-space-md);
    border-bottom: 1px solid var(--rad-color-border);
    vertical-align: middle;
}

/* Rendezhető oszlopfejléc gomb a jegylistában. */
.rad-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.rad-sort:hover,
.rad-sort:focus-visible {
    color: var(--rad-color-primary);
    text-decoration: underline;
}

.rad-table tbody tr {
    transition: background-color var(--rad-duration) var(--rad-ease);
}

.rad-table tbody tr:hover {
    background-color: var(--rad-color-primary-subtle);
}

.rad-table tbody tr:last-child td {
    border-bottom: 0;
}

/* A teljes sor hivatkozásként viselkedik, ezért kézkurzort kap. */
.rad-table__row--clickable {
    cursor: pointer;
}

/* Inaktivált sorok tompítva jelennek meg, hogy jól elkülönüljenek az aktívaktól. */
.rad-table__row--muted {
    background-color: var(--rad-color-surface-sunken);
    color: var(--rad-color-text-muted);
}

.rad-table__row--muted:hover {
    background-color: var(--rad-color-surface-sunken);
}

/* Táblázat kártyán belül: vízszintes görgetés hosszú tartalomnál. */
.rad-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rad-color-border);
    border-radius: var(--rad-radius-md);
}

/* Fix magasságú, függőlegesen görgethető táblázat. A fejléc ragadós marad,
   így görgetés közben is olvashatók az oszlopnevek. A max-height miatt
   kevés sornál nem marad üres hely. */
.rad-table-wrap--scroll {
    max-height: var(--rad-scroll-panel-max);
    overflow-y: auto;
}

.rad-empty-state {
    padding: var(--rad-space-xl) var(--rad-space-md);
    text-align: center;
    color: var(--rad-color-text-muted);
    background-color: var(--rad-color-surface-alt);
    border: 1px dashed var(--rad-color-border-strong);
    border-radius: var(--rad-radius-md);
}

/* Saját készítésű doboz-ikon az üres állapotokhoz. */
.rad-empty-state::before {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--rad-space-md);
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%235b6b7c' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 16l18-8 18 8v16l-18 8-18-8z'/%3E%3Cpath d='M6 16l18 8 18-8M24 24v16'/%3E%3C/svg%3E");
    opacity: 0.7;
}

/* Idővonal a jegy előzményeihez. */
.rad-timeline {
    position: relative;
    padding-left: var(--rad-space-lg);
    list-style: none;
}

/* Fix magasságú, görgethető idővonal. Ugyanazt a korlátot használja, mint az
   értesítések táblázata, így a két panel egységes magasságú marad. A jobb
   oldali belső margó megakadályozza, hogy a görgetősáv a szövegre csússzon. */
.rad-timeline--scroll {
    max-height: var(--rad-scroll-panel-max);
    overflow-y: auto;
    padding-right: var(--rad-space-sm);
}

.rad-timeline__item {
    position: relative;
    padding-bottom: var(--rad-space-md);
    border-left: 2px solid var(--rad-color-border);
    padding-left: var(--rad-space-md);
}

.rad-timeline__item::before {
    content: "";
    position: absolute;
    left: -0.4rem;
    top: 0.35rem;
    width: 0.7rem;
    height: 0.7rem;
    background-color: var(--rad-color-primary);
    border-radius: 50%;
}

/* ============================================================
   8. Töltésjelző
   ============================================================ */

.rad-loader {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rad-space-md);
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
}

.rad-loader__spinner {
    width: 3rem;
    height: 3rem;
    border: 0.3rem solid var(--rad-color-primary-subtle);
    border-top-color: var(--rad-color-primary);
    border-radius: 50%;
    animation: rad-spin 0.9s linear infinite;
}

.rad-loader__text {
    font-weight: 600;
    color: var(--rad-color-primary);
}

@keyframes rad-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Beágyazott, gombon belüli töltésjelző. */
.rad-inline-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: var(--rad-space-xs);
    border: 0.15rem solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: rad-spin 0.9s linear infinite;
}

/* ============================================================
   9. Újracsatlakozási felület
   ============================================================ */

#components-reconnect-modal {
    display: none;
}

.components-reconnect-show #components-reconnect-modal,
.components-reconnect-failed #components-reconnect-modal,
.components-reconnect-rejected #components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(31, 41, 51, 0.55);
}

.rad-reconnect__dialog {
    max-width: 26rem;
    padding: var(--rad-space-lg);
    background-color: var(--rad-color-surface);
    border-radius: var(--rad-radius-md);
    box-shadow: var(--rad-shadow-md);
    text-align: center;
}

.components-reconnect-show .rad-reconnect__failed,
.components-reconnect-show .rad-reconnect__rejected,
.components-reconnect-failed .rad-reconnect__show,
.components-reconnect-failed .rad-reconnect__rejected,
.components-reconnect-rejected .rad-reconnect__show,
.components-reconnect-rejected .rad-reconnect__failed {
    display: none;
}

/* ============================================================
   9.x Hozzáférés engedélyezésére váró oldal
   ============================================================ */

.rad-access-approval__identity,
.rad-access-approval__error-id {
    margin-bottom: var(--rad-space-sm);
}

.rad-access-approval__support {
    margin: var(--rad-space-md) 0;
    padding: var(--rad-space-md);
    border-left: 3px solid var(--rad-color-primary);
    background-color: var(--rad-color-surface-muted, #f5f7fa);
}

.rad-access-approval__support-title {
    margin-bottom: var(--rad-space-sm);
    font-size: 1rem;
}

.rad-access-approval__support p {
    margin-bottom: var(--rad-space-xs);
}

.rad-access-approval__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rad-space-sm);
    margin-top: var(--rad-space-md);
}

/* Az adatkezelési tájékoztató hivatkozása a profil oldalon. */
.rad-policy-link {
    display: inline-flex;
    align-items: center;
    gap: var(--rad-space-xs);
}

.rad-policy-link .bi {
    font-size: 1.1rem;
    line-height: 1;
}

/* ============================================================
   10. Segédosztályok
   ============================================================ */

.rad-text-muted {
    color: var(--rad-color-text-muted);
}

.rad-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rad-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rad-space-md);
}

.rad-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rad-space-sm);
}

/* Hibasáv. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    padding: var(--rad-space-sm) var(--rad-space-lg);
    background-color: #fbf0dd;
    border-top: 1px solid var(--rad-color-warning);
    color: var(--rad-color-text);
    box-shadow: var(--rad-shadow-md);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    font-size: 1.25rem;
    line-height: 1;
}

/* ============================================================
   11. Reszponzív töréspontok
   ============================================================ */

@media (max-width: 991.98px) {
    /* Mobilon a fejléc egyetlen sor: bal oldalon a logó, jobb oldalon a hamburger gomb. */
    .rad-navbar__inner {
        flex-wrap: nowrap;
        gap: var(--rad-space-sm);
        min-height: 0;
        padding: var(--rad-space-sm) var(--rad-space-md);
    }

    .rad-navbar__brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .rad-navbar__brand-text {
        min-width: 0;
    }

    .rad-navbar__brand-title,
    .rad-navbar__brand-sub {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rad-navbar__toggler {
        flex: 0 0 auto;
    }

    /* A legördülő menü a fejléc alatt, görgethetően jelenik meg. */
    .rad-navbar .navbar-collapse {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }

    .rad-navbar__logo {
        height: 2.75rem;
    }

    .rad-navbar__menu {
        border: 0;
        box-shadow: none;
        padding-left: var(--rad-space-md);
    }

    .rad-navbar__link {
        padding: 0.75rem var(--rad-space-sm) !important;
        border-bottom: 1px solid var(--rad-color-border);
    }

    .rad-hero {
        padding: var(--rad-space-lg);
    }

    .rad-hero__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .rad-hero__logo {
        height: 2.25rem;
    }

    .rad-content {
        padding: var(--rad-space-lg) var(--rad-space-md) var(--rad-space-xl);
    }

    /* Mobilon a táblázat kártyaszerű elrendezésre vált. */
    .rad-table thead {
        display: none;
    }

    .rad-table,
    .rad-table tbody,
    .rad-table tr,
    .rad-table td {
        display: block;
        width: 100%;
    }

    .rad-table tr {
        margin-bottom: var(--rad-space-md);
        background-color: var(--rad-color-surface);
        border: 1px solid var(--rad-color-border);
        border-radius: var(--rad-radius-md);
    }

    .rad-table td {
        display: flex;
        justify-content: space-between;
        gap: var(--rad-space-md);
        border-bottom: 1px solid var(--rad-color-border);
    }

    .rad-table td:last-child {
        border-bottom: 0;
    }

    /* A cellák elé a data-label attribútum kerül fejlécként. */
    .rad-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--rad-color-text-muted);
    }
}

/* ============================================================
   12. Nyomtatás és mozgáscsökkentés
   ============================================================ */

@media print {
    .rad-navbar,
    .rad-loader,
    #blazor-error-ui {
        display: none !important;
    }

    .rad-content {
        padding: 0;
    }

    .rad-card {
        border: 0;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Hibajegy lista és részletek */
.rad-page-header__meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.rad-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.rad-filter-bar__field {
    flex: 1 1 14rem;
    min-width: 12rem;
}

.rad-filter-bar__field--check {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 0 0 auto;
}

/* A szűrőkártyán belül a gombsor mindig új sorba kerül. */
.rad-filter-bar__actions {
    flex: 1 1 100%;
    margin-bottom: 0;
}

/* Több elemű jelölőnégyzet-csoport, például a szerepkör-szerkesztő. */
.rad-check-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}

/* Halvány magyarázó szöveg űrlapok és szerkesztők felett. */
.rad-hint {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.9rem;
}

/* Készre jelentés bekerített űrlapja a hozzárendelési táblázatban. */
.rad-completion-form {
    background-color: var(--rad-color-surface-sunken);
    border: 1px solid var(--rad-color-border);
    border-radius: var(--rad-radius-md, 0.5rem);
    padding: 1rem;
}

/* Kivitelező eltávolításának indoklást kérő űrlapja. */
.rad-removal-form {
    background-color: var(--rad-color-surface-sunken);
    border: 1px solid var(--rad-color-danger, #dc3545);
    border-radius: var(--rad-radius-md, 0.5rem);
    padding: 1rem;
}

.rad-removal-form__hint {
    color: var(--rad-color-danger, #dc3545);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.rad-alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.rad-alert--error {
    background-color: #fdecea;
    color: #8a1c13;
    border: 1px solid #f5c2bd;
}

.rad-link {
    color: var(--rad-color-primary, #0d6efd);
    text-decoration: underline;
}

.rad-pager {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
}

.rad-pager__info {
    font-size: 0.9rem;
}

.rad-list {
    margin: 0;
    padding-left: 1.25rem;
}

.rad-detail-list {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.rad-detail-list dt {
    font-weight: 600;
}

.rad-detail-list dd {
    margin: 0;
}

@media (max-width: 48rem) {
    .rad-detail-list {
        grid-template-columns: 1fr;
    }

    .rad-detail-list dd {
        margin-bottom: 0.75rem;
    }
}

/* Kivitelezői anonim csatolmányoldal */
.rad-contractor-access {
    max-width: 60rem;
    margin: 2rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.rad-contractor-access__greeting {
    margin: 0;
}

.rad-contractor-access__footer {
    margin: 0;
    font-size: 0.875rem;
}

/* Hibajegy felelős */
.rad-owner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rad-space-sm);
}

.rad-owner__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--rad-color-primary-subtle);
    color: var(--rad-color-primary);
    font-size: 1rem;
}

.rad-owner__name {
    font-weight: 600;
}

/* Felelős nélküli jegynél a szöveg halványabb, hogy a hiányzó érték látszódjon. */
.rad-owner__name--empty {
    font-weight: 400;
    font-style: italic;
    color: var(--rad-color-text-muted);
}

.rad-owner__action {
    margin-left: auto;
}

.rad-owner-editor {
    margin-top: var(--rad-space-md);
    padding: var(--rad-space-md);
    border: 1px solid var(--rad-color-border);
    border-radius: var(--rad-radius-md);
    background-color: var(--rad-color-surface-sunken);
}

.rad-owner-editor__header {
    display: flex;
    align-items: center;
    gap: var(--rad-space-sm);
    margin-bottom: var(--rad-space-md);
    font-weight: 600;
    color: var(--rad-color-primary);
}

.rad-owner-editor__body {
    margin-bottom: var(--rad-space-md);
}

.rad-owner-editor__actions {
    display: flex;
    gap: var(--rad-space-sm);
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    /* Mobilon a szerkesztő gombjai teljes szélességben, egymás alatt jelennek meg. */
    .rad-owner__action {
        margin-left: 0;
        width: 100%;
    }

    .rad-owner-editor__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Hibabejelentő űrlap */
.rad-inline-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.rad-form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin: 1rem 0 2rem;
}

.validation-message {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #8a1c13;
}

/* Visszajelzés sikeres műveletről */
.rad-alert--success {
    background-color: #e6f4ea;
    border-color: #9ad2ae;
    color: #145a32;
}

/* Munkafolyamat-műveletek */
.rad-action-block {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rad-action-block:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.rad-action-block h3 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

/* Hibajegy üzenetfolyam – összecsukható szerkesztő és idővonalas lista. */
.rad-thread__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rad-space-sm, 0.5rem);
    margin-bottom: var(--rad-space-md, 1rem);
}

.rad-thread__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--rad-text-xl, 1.375rem);
}

.rad-thread__title .bi {
    color: var(--rad-color-primary, #0d4d8c);
    font-size: 1.1rem;
}

.rad-thread__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0 0.5rem;
    font-size: var(--rad-text-sm, 0.875rem);
    font-weight: 600;
    line-height: 1.6rem;
    color: var(--rad-color-primary, #0d4d8c);
    background-color: var(--rad-color-primary-subtle, #e7f0f9);
    border-radius: var(--rad-radius-pill, 999px);
}

.rad-thread__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: var(--rad-radius-pill, 999px);
    padding-inline: 0.9rem;
}

/* Összecsukható szerkesztő */
.rad-composer {
    display: flex;
    flex-direction: column;
    gap: var(--rad-space-sm, 0.75rem);
    padding: var(--rad-space-md, 1rem);
    margin-bottom: var(--rad-space-md, 1rem);
    background-color: var(--rad-color-surface-sunken, #f2f5f9);
    border: 1px solid var(--rad-color-border, #d7dee7);
    border-radius: var(--rad-radius-md, 0.75rem);
}

.rad-composer__visibility {
    border: 0;
    margin: 0;
    padding: 0;
}

.rad-composer__legend {
    float: none;
    width: auto;
    margin-bottom: 0.35rem;
    font-size: var(--rad-text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: var(--rad-tracking-caps, 0.08em);
    text-transform: uppercase;
    color: var(--rad-color-text-muted, #5b6b7c);
}

.rad-composer__visibility .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Szegmentált láthatóság-választó – kompakt, magas kontraszttal. */
.rad-seg {
    border: 1px solid var(--rad-color-border-strong, #b9c5d4);
    border-radius: var(--rad-radius-pill, 999px);
    overflow: hidden;
    background-color: var(--rad-color-surface, #fff);
}

.rad-seg__btn {
    padding: 0.05rem 0.65rem;
    font-size: var(--rad-text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.25;
    min-height: 1.5rem;
    color: var(--rad-color-text-muted, #5b6b7c);
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.rad-seg__btn .bi {
    font-size: 0.75rem;
}

.rad-seg__btn:hover {
    color: var(--rad-color-text, #1f2933);
    background-color: var(--rad-color-surface-sunken, #f2f5f9);
}

.btn-check:focus-visible + .rad-seg__btn {
    outline: 2px solid var(--rad-color-primary, #0d4d8c);
    outline-offset: -2px;
}

.btn-check:checked + .rad-seg__btn--public {
    color: var(--rad-color-inverse, #fff);
    background-color: var(--rad-color-primary, #0d4d8c);
}

.btn-check:checked + .rad-seg__btn--internal {
    color: var(--rad-color-inverse, #fff);
    background-color: var(--rad-color-accent-strong, #d98a06);
}

.rad-composer__hint {
    margin: 0.4rem 0 0;
    font-size: var(--rad-text-sm, 0.875rem);
    color: var(--rad-color-text-muted, #5b6b7c);
}

.rad-composer__input {
    border-radius: var(--rad-radius-sm, 0.375rem);
    resize: vertical;
}

.rad-composer__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rad-space-sm, 0.5rem);
}

.rad-composer__actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Üres állapot */
.rad-thread__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: var(--rad-space-lg, 1.5rem);
    text-align: center;
    border: 1px dashed var(--rad-color-border, #d7dee7);
    border-radius: var(--rad-radius-md, 0.75rem);
    background-color: var(--rad-color-surface-sunken, #f2f5f9);
}

.rad-thread__empty .bi {
    font-size: 1.75rem;
    color: var(--rad-color-border-strong, #b9c5d4);
}

/* Üzenetlista */
.rad-message-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rad-space-sm, 0.75rem);
}

.rad-message {
    display: flex;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rad-color-border, #d7dee7);
    border-radius: var(--rad-radius-md, 0.75rem);
    background-color: var(--rad-color-surface, #fff);
    transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.rad-message:hover {
    border-color: var(--rad-color-border-strong, #b9c5d4);
    box-shadow: var(--rad-shadow-sm);
}

.rad-message__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--rad-text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--rad-color-primary, #0d4d8c);
    background-color: var(--rad-color-primary-subtle, #e7f0f9);
    border-radius: var(--rad-radius-pill, 999px);
}

.rad-message__content {
    flex: 1 1 auto;
    min-width: 0;
}

.rad-message--internal {
    border-color: #ecd3a4;
    background-color: var(--rad-color-accent-subtle, #fdf1dc);
    background-image: repeating-linear-gradient(135deg, rgba(217, 138, 6, 0.07) 0 6px, transparent 6px 12px);
}

.rad-message--internal .rad-message__avatar {
    color: var(--rad-color-accent-strong, #d98a06);
    background-color: #f8e2bd;
}

.rad-message__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.rad-message__author {
    font-weight: 600;
    color: var(--rad-color-text, #1f2933);
}

.rad-message__time {
    font-size: var(--rad-text-sm, 0.875rem);
    color: var(--rad-color-text-muted, #5b6b7c);
}

.rad-message__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    font-size: var(--rad-text-xs, 0.75rem);
    font-weight: 600;
    color: var(--rad-color-accent-strong, #d98a06);
    background-color: #fff;
    border: 1px solid #eccb92;
    border-radius: var(--rad-radius-pill, 999px);
}

.rad-message__body {
    white-space: pre-wrap;
    word-break: break-word;
}

.rad-message__footer {
    margin-top: 0.5rem;
}

.rad-message__action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    font-size: var(--rad-text-sm, 0.875rem);
    color: var(--rad-color-text-muted, #5b6b7c);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--rad-radius-pill, 999px);
}

.rad-message__action:hover:not(:disabled) {
    color: var(--rad-color-danger, #b32020);
    border-color: rgba(179, 32, 32, 0.35);
    background-color: rgba(179, 32, 32, 0.06);
}

@media (max-width: 575.98px) {
    .rad-thread__toggle {
        width: 100%;
        justify-content: center;
    }

    .rad-composer__actions {
        justify-content: stretch;
    }

    .rad-composer__actions .btn {
        flex: 1 1 0;
    }
}

/* ============================================================
   13. Mozgáscsökkentés az új interakciókhoz
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .rad-kpi,
    .rad-message,
    .rad-nav__link,
    .rad-table tbody tr {
        transition: none;
    }

    .btn:hover,
    .rad-kpi:hover {
        transform: none;
    }
}

/* ============================================================
   14. Bejelentkezési csatornaválasztó oldal
   ============================================================ */

.rad-login {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--rad-space-xl) var(--rad-space-md);
}

.rad-login__card {
    width: 100%;
    max-width: 26rem;
    background: var(--rad-color-surface);
    border: 1px solid var(--rad-color-border);
    border-radius: var(--rad-radius-md);
    box-shadow: var(--rad-shadow-md);
    padding: var(--rad-space-xl);
}

.rad-login__brand {
    margin: 0 0 var(--rad-space-sm);
    font-size: var(--rad-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rad-color-text-muted);
}

.rad-login__title {
    margin: 0 0 var(--rad-space-xs);
    font-family: var(--rad-font-display);
}

.rad-login__lead {
    margin: 0 0 var(--rad-space-lg);
    color: var(--rad-color-text-muted);
    font-size: var(--rad-text-sm);
}

.rad-login__empty {
    margin: 0;
    padding: var(--rad-space-md);
    border-radius: var(--rad-radius-sm);
    background: var(--rad-color-surface-sunken);
    color: var(--rad-color-danger);
    font-size: var(--rad-text-sm);
}

.rad-login__section-title {
    margin: 0 0 var(--rad-space-xs);
    font-size: var(--rad-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rad-color-text);
}

.rad-login__section-hint {
    margin: 0 0 var(--rad-space-md);
    font-size: var(--rad-text-sm);
    color: var(--rad-color-text-muted);
}

/* A gombok teljes szélességűek és egymás alatt helyezkednek el. */
.rad-login__button {
    display: flex;
    align-items: center;
    gap: var(--rad-space-md);
    width: 100%;
    padding: 0.75rem var(--rad-space-md);
    border: 1px solid var(--rad-color-border-strong);
    border-radius: var(--rad-radius-sm);
    background: var(--rad-color-surface);
    color: var(--rad-color-text);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rad-login__button + .rad-login__button {
    margin-top: var(--rad-space-sm);
}

.rad-login__button:hover,
.rad-login__button:focus-visible {
    background: var(--rad-color-surface-sunken);
    border-color: var(--rad-color-primary);
    color: var(--rad-color-text);
}

.rad-login__logo {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

.rad-login__logo--mail {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--rad-color-text-muted);
}

.rad-login__divider {
    margin: var(--rad-space-lg) 0;
    border: 0;
    border-top: 1px solid var(--rad-color-border);
}

@media (prefers-reduced-motion: reduce) {
    .rad-login__button {
        transition: none;
    }
}

/* ============================================================
   Toast értesítések (Blazor.Bootstrap)
   ============================================================ */

/* A toast a fejléc alatt, de a hibasáv (#blazor-error-ui, z-index: 1100) felett jelenik meg. */
.rad-toast-container {
    z-index: 1150;
    padding: var(--rad-space-md);
    max-width: min(24rem, calc(100vw - 2 * var(--rad-space-md)));
}

.rad-toast-container .toast {
    width: 100%;
    box-shadow: var(--rad-shadow-md);
    word-break: break-word;
}

/* Mobilon a toast teljes szélességben, felül jelenik meg, hogy ne takarja a tartalmat
   és a hüvelykujjal elérhető alsó műveleti gombokat. */
@media (max-width: 575.98px) {
    .rad-toast-container {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        max-width: 100%;
        padding: var(--rad-space-sm);
    }

    .rad-toast-container .toast {
        max-width: 100%;
    }
}