/* ============================================================
   MANAGER-SYSTEM · organism styles
   Manager-specifikus organism-réteg. KIZÁRÓLAG --u-* tokeneket
   fogyaszt; egyetlen magic-number sem. Class-prefix: mgr-*.

   Egy fájlban tartjuk, mert kezelhető (~42 organism a 8. lépés
   végén); a load-cost minimális. Ha valaha sokká válna,
   organism/<name>.css-re bontjuk.

   ~4936 sor, ~547 unique .mgr-* osztály, 51 logikai szekció.
   AUDIT.md (2026.05.22) cleanup-meneti utáni állapot —
   a korábbi 4 duplikált blokk (mgr-user-chip, mgr-settings-section,
   mgr-data-table, mgr-filter-pill-bar) eltávolítva. Minor
   pszeudoosztály-duplikációk az AUDIT-2.md (2026.05.24) 4.2-ben.

   Tartalomjegyzék — tier-rendben, minden fő-szekciót külön
   blokk-komment vezet be (nézd a fájlt görgetve a tier-fejléceket).
   A Tier-mátrix kanonikus forrása: ORGANISMS.md §1–5.

     TIER 0  (3 organism · cross-cutting chrome)
       APP SHELL · LEFT NAV · TOP BAR · PAGE HEADER · EMPTY STATE
     TIER 1  (4 organism · cross-cutting molecule)
       USER CHIP · SETTINGS SECTION · SETTINGS SUB-NAV* ·
       CONFIRM DIALOG (+ MERGE/REJECTION/REOPEN BODIES)
       (*) D-14 nyomán a screen-mockok nem fogyasztják, de a fájl
           és a tier-1.html katalógus megőrzi
     TIER 2  (3 organism · lista-screen család · D-2)
       DATA TABLE (D-13 contract-bővítés: sortable, controlled
         sort, onRowClick, rowClassName, loading-overlay) ·
       FILTER PILL BAR · TAB FILTER
     TIER 3  (14 organism · ág-specifikus / többször használt)
       — RIPORT-ÁG (A4/A5):
         KPI CARD · STATUS TRACK · WEEKLY REPORT CARD ·
         RECIPIENT LIST
       — TARTALOM-ÁG (A10/A11/A12, D-13 nyomán kiemelt):
         CONTENT EDITOR · PUBLISH STATE CHIP · RICH TEXT EDITOR ·
         COVER IMAGE UPLOADER · PHOTO GALLERY · PHOTO UPLOADER ·
         DATE-TIME RANGE PICKER · LINK VALIDATOR
       — BEJELENTÉS-ÁG (Tier-3.5 cross-cutting):
         MAP WIDGET (LocationPicker függés)
     TIER 4  (17 organism · screen-specifikus)
       — BEJELENTÉS-ÁG (A1/A2/A3):
         TICKET META BAR · TRIAGE BAR · REJECTION BANNER ·
         ACTIVITY TIMELINE · INTERNAL NOTES PANEL · ACTION BAR ·
         SIMILAR TICKETS BOX · LOCATION PICKER ·
         TICKET CREATE FORM
       — RIPORT-ÁG (A4):
         TEAM PERFORMANCE TABLE · DASHBOARD PAGE-HELPER
       — BEÁLLÍTÁS-ÁG (A6/A7/A8/A9):
         CATEGORY TREE EDITOR · ICON PICKER ·
         CATEGORY IMPORT DIALOG · ROLE EDITOR ·
         USER DETAIL PAGE-HELPER · GROUP MEMBER LIST ·
         USER PICKER · GROUP DETAIL HEADER · UNDO TOAST ·
         TENANT INFO FORM · LOGO UPLOADER

   (Új organism új blokkba kerül, a megfelelő tier-szekcióba.
   A blokk-komment ASCII-bannert követ: lásd lent.)
   ============================================================ */


/* ============================================================
   APP SHELL — manager fullscreen layout (sidebar + top-bar + main)
   ============================================================ */

.mgr-app-shell {
  display: flex;
  height: 100%;
  width: 100%;
  background: var(--u-bg);
  color: var(--u-fg-1);
  font-family: var(--u-font-sans);
  font-size: var(--u-text-base);
  overflow: hidden;
}

.mgr-app-shell__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.mgr-app-shell__main {
  flex: 1;
  overflow: auto;
}


/* ============================================================
   LEFT NAV — manager sidebar (sticky)
   ============================================================ */

.mgr-left-nav {
  width: var(--u-sidebar-w);            /* 240 */
  flex-shrink: 0;
  background: var(--u-surface);
  border-right: 1px solid var(--u-border);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mgr-left-nav--collapsed {
  width: var(--u-sidebar-w-collapsed);   /* 64 */
}

.mgr-left-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  height: 56px;
  padding: 0 var(--u-space-4);
  border-bottom: 1px solid var(--u-border);
}
.mgr-left-nav__brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--u-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mgr-left-nav__brand-mark svg { fill: white; }
.mgr-left-nav__brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mgr-left-nav__brand-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--u-fg-1);
}
.mgr-left-nav__brand-dot { color: var(--u-slate-1000); }
.mgr-left-nav__brand-tenant {
  font-size: 11px;
  color: var(--u-fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgr-left-nav__items {
  flex: 1;
  padding: var(--u-space-2);
  overflow-y: auto;
}

.mgr-left-nav__section-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--u-fg-4);
  padding: var(--u-space-4) var(--u-space-3) var(--u-space-2);
}

.mgr-left-nav__item {
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
  height: 36px;
  padding: 0 var(--u-space-3);
  border-radius: 8px;
  cursor: pointer;
  color: var(--u-fg-1);
  font-size: 13.5px;
  font-weight: 500;
  background: transparent;
  border: 0;
  font-family: inherit;
  width: 100%;
  text-align: left;
  position: relative;
}
.mgr-left-nav__item:hover {
  background: var(--u-surface-alt);
}
.mgr-left-nav__item--active {
  background: var(--u-primary-soft);
  color: var(--u-blue-700);
  font-weight: 600;
}
.mgr-left-nav__item--active:hover { background: var(--u-primary-soft); }
.mgr-left-nav__item-icon {
  flex-shrink: 0;
  color: var(--u-fg-2);
}
.mgr-left-nav__item--active .mgr-left-nav__item-icon {
  color: var(--u-blue-600);
}
.mgr-left-nav__item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mgr-left-nav__item-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--u-surface-alt);
  color: var(--u-fg-3);
  border: 1px solid var(--u-border);
  border-radius: 999px;
  padding: 1px var(--u-space-2);
  line-height: 1.4;
  font-feature-settings: "tnum";
}
.mgr-left-nav__item--active .mgr-left-nav__item-count {
  background: white;
  color: var(--u-blue-700);
}

.mgr-left-nav__footer {
  border-top: 1px solid var(--u-border);
  padding: var(--u-space-3);
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
}
.mgr-left-nav__footer-info {
  flex: 1;
  min-width: 0;
}
.mgr-left-nav__footer-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mgr-left-nav__footer-role {
  font-size: 11px;
  color: var(--u-fg-3);
}
.mgr-left-nav__logout {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--u-fg-2);
  cursor: pointer;
}
.mgr-left-nav__logout:hover {
  background: var(--u-surface-alt);
  color: var(--u-fg-1);
}


/* ============================================================
   TOP BAR — sticky, breadcrumb + search + bell + CTA-slot
   ============================================================ */

.mgr-top-bar {
  height: 56px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--u-border);
  display: flex;
  align-items: center;
  padding: 0 var(--u-space-6);
  gap: var(--u-space-4);
}

.mgr-top-bar__crumbs {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  flex: 1;
  min-width: 0;
}
.mgr-top-bar__crumb {
  font-size: 13px;
  line-height: 1.4;
  color: var(--u-fg-3);
  font-weight: 500;
  white-space: nowrap;
}
.mgr-top-bar__crumb--current {
  color: var(--u-fg-1);
  font-weight: 600;
}
.mgr-top-bar__crumb-sep {
  color: var(--u-fg-4);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.mgr-top-bar__search {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  height: 32px;
  padding: 0 var(--u-space-3);
  background: var(--u-surface-alt);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  width: 280px;
  color: var(--u-fg-3);
  font-size: 13px;
}
.mgr-top-bar__search-icon { color: var(--u-fg-3); flex-shrink: 0; }
.mgr-top-bar__search-text { flex: 1; }
.mgr-top-bar__kbd {
  font-family: var(--u-font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  color: var(--u-fg-3);
  box-shadow: 0 1px 0 var(--u-border);
  line-height: 1;
}

.mgr-top-bar__icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--u-fg-2);
  cursor: pointer;
  position: relative;
  font-family: inherit;
}
.mgr-top-bar__icon-btn:hover {
  background: var(--u-surface-alt);
  color: var(--u-fg-1);
}
.mgr-top-bar__icon-btn-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--u-red-500);
  border: 1.5px solid white;
}


/* ============================================================
   PAGE HEADER — eyebrow + title + description + actions
   First child of every screen's content; sits inside .u-page.
   ============================================================ */

.mgr-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--u-space-2);
  margin-bottom: var(--u-section-gap);     /* 24 */
}
.mgr-page-header--with-back .mgr-page-header__back-row { margin-bottom: var(--u-space-2); }

.mgr-page-header__back-row {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  flex-wrap: wrap;
}

.mgr-page-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--u-fg-2);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.mgr-page-header__back:hover { color: var(--u-primary); }

.mgr-page-header__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-fg-3);
}

.mgr-page-header__title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--u-space-4);
  flex-wrap: wrap;
}
.mgr-page-header__title-block { flex: 1; min-width: 0; }

.mgr-page-header__title {
  font-family: var(--u-font-display);
  font-size: var(--u-h2-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--u-fg-1);
  text-wrap: balance;
}

.mgr-page-header__description {
  font-size: 14px;
  color: var(--u-fg-2);
  margin-top: var(--u-space-2);
  line-height: 1.55;
  max-width: 64ch;
  text-wrap: pretty;
}

.mgr-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  flex-shrink: 0;
}


/* ============================================================
   EMPTY STATE — "still nothing here" / no-permission / error
   Lives inside a card / section; horizontally centered.
   docs/spacing.md §5.7 — 32 outer padding, 12 internal stack.
   ============================================================ */

.mgr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--u-space-8) var(--u-space-6);             /* 32 / 24 */
  gap: var(--u-space-3);                                  /* 12 */
}
.mgr-empty-state--page {
  padding: var(--u-space-12) var(--u-space-8);            /* 48 / 32 — full-page variant */
}

.mgr-empty-state__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--u-surface-alt);
  color: var(--u-fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--u-space-1);
}
.mgr-empty-state--error .mgr-empty-state__icon {
  background: var(--u-red-100);
  color: var(--u-red-700);
}
.mgr-empty-state--no-permission .mgr-empty-state__icon {
  background: var(--u-amber-100);
  color: var(--u-amber-700);
}

.mgr-empty-state__title {
  font-family: var(--u-font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--u-fg-1);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.mgr-empty-state__description {
  font-size: 13.5px;
  color: var(--u-fg-2);
  max-width: 44ch;
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0;
}

.mgr-empty-state__action {
  margin-top: var(--u-space-3);
}


/* ============================================================
   USER CHIP — avatar + name + optional role/email
   Used inside table cells, lists, activity log, team rosters.
   Three sizes (sm = inline, md = list-row, lg = adatlap-header).
   ============================================================ */

.mgr-user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-2);          /* 8 — see docs/spacing.md §6.4 */
  min-width: 0;
  font-family: var(--u-font-sans);
}
.mgr-user-chip__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.mgr-user-chip__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-fg-1);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgr-user-chip__meta {
  font-size: 11.5px;
  color: var(--u-fg-3);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Size: small — inline use in a sentence or table-cell, single line */
.mgr-user-chip--sm .mgr-user-chip__name { font-size: 12.5px; font-weight: 500; }
.mgr-user-chip--sm .mgr-user-chip__meta { display: none; }

/* Size: large — header / detail summary */
.mgr-user-chip--lg .mgr-user-chip__name { font-size: 15px; }
.mgr-user-chip--lg .mgr-user-chip__meta { font-size: 12.5px; }

/* Inactive / disabled state — for letiltott Users */
.mgr-user-chip--disabled .mgr-user-chip__name { color: var(--u-fg-3); }
.mgr-user-chip--disabled .u-avatar { opacity: 0.55; filter: grayscale(0.35); }


/* ============================================================
   SETTINGS SECTION — header + description + content + actions
   Two-column header: title-block left, optional actions right.
   docs/spacing.md §5.1 — uses .u-card padding-lg recipe.
   ============================================================ */

.mgr-settings-section {
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  box-shadow: var(--u-shadow-xs);
  padding: var(--u-card-padding-lg);   /* 20 */
}
.mgr-settings-section + .mgr-settings-section {
  margin-top: var(--u-space-5);        /* 20 — between stacked sections inside form page */
}

.mgr-settings-section__header {
  display: flex;
  align-items: flex-start;
  gap: var(--u-space-4);
  margin-bottom: var(--u-space-5);
  padding-bottom: var(--u-space-4);
  border-bottom: 1px solid var(--u-divider);
}
.mgr-settings-section__header--bare {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--u-space-4);
}
.mgr-settings-section__title-block {
  flex: 1;
  min-width: 0;
}
.mgr-settings-section__title {
  font-family: var(--u-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--u-fg-1);
  margin: 0;
  line-height: 1.3;
}
.mgr-settings-section__description {
  font-size: 13px;
  color: var(--u-fg-2);
  margin: var(--u-space-1) 0 0;
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 64ch;
}
.mgr-settings-section__actions {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  flex-shrink: 0;
}
.mgr-settings-section__body {
  min-width: 0;
}


/* ============================================================
   SETTINGS SUB-NAV — top-tabs for /beallitasok/*
   Fogyasztja a DS .u-tabs default (underline) variánsát.
   Csak egy szűkebb wrapper, ami sticky-vé és page-szélesre tervezi.
   ============================================================ */

.mgr-settings-sub-nav {
  margin-bottom: var(--u-space-5);
}


/* ============================================================
   DATA TABLE — composer around the DS .u-table primitive
   Wraps the table in a card-shaped container, adds an optional
   header bar (count + actions), pagination footer, loading
   skeleton, empty-state slot. The actual table is the DS one.
   ============================================================ */

.mgr-data-table {
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  box-shadow: var(--u-shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Optional header bar — count, bulk-actions slot */
.mgr-data-table__bar {
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
  padding: var(--u-space-3) var(--u-space-4);
  border-bottom: 1px solid var(--u-border);
  background: var(--u-surface);
  min-height: 48px;
}
.mgr-data-table__count {
  font-size: 13px;
  color: var(--u-fg-2);
  font-variant-numeric: tabular-nums;
}
.mgr-data-table__count strong {
  color: var(--u-fg-1);
  font-weight: 600;
}
.mgr-data-table__bar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
}

/* Scrollable wrapper around the table (for horizontal scroll if needed) */
.mgr-data-table__scroll {
  overflow-x: auto;
}

/* Title cell — bold + secondary meta below */
.mgr-data-table__title {
  font-weight: 600;
  color: var(--u-fg-1);
  line-height: 1.3;
  white-space: normal;
  max-width: 380px;
  text-wrap: balance;
}
.mgr-data-table__title-meta {
  font-size: 11.5px;
  color: var(--u-fg-3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mgr-data-table__title-meta strong { color: var(--u-fg-2); font-weight: 500; }

/* Overdue indicator on dueDate column */
.mgr-data-table__due--overdue {
  color: var(--u-red-700);
  font-weight: 600;
}

/* Action cell hover */
.mgr-data-table tr:hover .u-table__action {
  color: var(--u-fg-2);
}

/* Skeleton loader — 6 rows by default */
.mgr-data-table__skeleton {
  padding: var(--u-space-3);
}
.mgr-data-table__skeleton-row {
  height: 48px;
  border-bottom: 1px solid var(--u-divider);
  background: linear-gradient(
    90deg,
    var(--u-surface-sunk) 0%,
    var(--u-surface-alt) 40%,
    var(--u-surface-sunk) 80%
  );
  background-size: 200% 100%;
  animation: mgr-table-shimmer 1.6s ease-in-out infinite;
}
@keyframes mgr-table-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ----------- Sort affordancia (T-4) ------------ */
/* Fejléc-cella sortable módban: kattintható, hoveren háttér, mellette ⇅/▲/▼ ikon. */
.mgr-data-table__th--sortable {
  cursor: pointer;
  user-select: none;
}
.mgr-data-table__th--sortable:hover {
  background: var(--u-surface-alt);
}
.mgr-data-table__th--sortable .u-table__th-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mgr-data-table__sort-icon {
  display: inline-flex;
  align-items: center;
  color: var(--u-fg-3);
  flex-shrink: 0;
}
.mgr-data-table__th--sortable.is-sorted .u-table__th-inner {
  color: var(--u-fg-1);
  font-weight: 600;
}
.mgr-data-table__th--sortable.is-sorted .mgr-data-table__sort-icon {
  color: var(--u-primary);
}

/* ----------- Per-row class hook (T-7) ------------ */
/* A screen `rowClassName(row) → 'mgr-data-table__row--dim'`-mel halványíthat. */
.mgr-data-table__row--dim {
  opacity: 0.55;
  transition: opacity 120ms;
}
.mgr-data-table__row--dim:hover {
  opacity: 0.85;
}

/* ----------- Loading dim-overlay (T-9) ------------ */
/* Meglévő adat fölött új fetch → halvány overlay + spinner. Kezdő (üres) loadingnál
   a komponens a skeleton-rows verzióra vált — itt az „is-dimmed" csak akkor lép. */
.mgr-data-table__scroll {
  position: relative;
}
.mgr-data-table__scroll.is-dimmed > table {
  opacity: 0.45;
  pointer-events: none;
  filter: blur(0.3px);
  transition: opacity 120ms;
}
.mgr-data-table__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(1px);
  pointer-events: none;
  z-index: 2;
}
.mgr-data-table__overlay-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--u-blue-200);
  border-top-color: var(--u-primary);
  animation: mgr-dt-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.mgr-data-table__overlay-text {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--u-fg-2);
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: var(--u-shadow-xs);
}
@keyframes mgr-dt-spin {
  to { transform: rotate(360deg); }
}

/* ----------- Clickable row (D-3) ------------ */
.mgr-data-table tr.is-clickable {
  cursor: pointer;
}
.mgr-data-table tr.is-clickable:hover {
  background: var(--u-surface-alt);
}


/* ============================================================
   FILTER PILL BAR — search + filter chips + clear
   docs/spacing.md §5.5 — toolbar above a data region.
   Fogyasztja a DS .u-chip--filter atomot.
   ============================================================ */

.mgr-filter-pill-bar {
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
  padding: var(--u-space-3) var(--u-space-4);
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  margin-bottom: var(--u-space-3);
  flex-wrap: wrap;
}

.mgr-filter-pill-bar__search {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  height: 32px;
  padding: 0 var(--u-space-3);
  background: var(--u-surface-alt);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  width: 260px;
  color: var(--u-fg-3);
  font-size: 13px;
  flex-shrink: 0;
}
.mgr-filter-pill-bar__search-icon { color: var(--u-fg-3); flex-shrink: 0; display: inline-flex; }
.mgr-filter-pill-bar__search-input {
  border: 0;
  background: transparent;
  outline: 0;
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  color: var(--u-fg-1);
  min-width: 0;
}
.mgr-filter-pill-bar__search-input::placeholder { color: var(--u-fg-3); }

/* Chips cluster — picks up DS .u-chip--filter atom */
.mgr-filter-pill-bar__chips {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.mgr-filter-pill-bar__clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--u-fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
}
.mgr-filter-pill-bar__clear:hover { color: var(--u-fg-1); background: var(--u-surface-alt); }
.mgr-filter-pill-bar__clear[disabled] { color: var(--u-fg-4); cursor: default; pointer-events: none; }


/* ============================================================
   TAB FILTER — count-badge tabs above DataTable (Új, Mind, …)
   This is the Bejelentés-lista feature-spec tab strip.
   Fogyasztja a DS .u-tabs default variánsát.
   ============================================================ */

.mgr-tab-filter {
  margin-bottom: var(--u-space-3);
}
.mgr-tab-filter .u-tabs__list { gap: var(--u-space-2); }
.mgr-tab-filter .u-tabs__tab { gap: 6px; }
.mgr-tab-filter .u-tabs__tab[data-tone="overdue"] {
  position: relative;
}
.mgr-tab-filter .u-tabs__tab[data-tone="overdue"]::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--u-red-500);
  margin-left: 4px;
}


/* ============================================================
   DIALOG BUTTONS — specimen-only.
   The DS button.css molecule will replace these in real screens;
   for the specimen-canvas we keep the inline-style minimal.
   ============================================================ */

.demo-dialog-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-2);
  height: 36px;
  padding: 0 var(--u-space-4);
  border-radius: 8px;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.demo-dialog-btn--primary { background: var(--u-primary); color: white; }
.demo-dialog-btn--ghost   { background: transparent; color: var(--u-fg-1); border: 1px solid var(--u-border); }
.demo-dialog-btn--danger  { background: var(--u-red-500); color: white; }
.demo-dialog-btn--danger-text {
  background: transparent;
  color: var(--u-red-700);
  font-weight: 500;
  border: 1px solid transparent;
  padding: 0 var(--u-space-2);
}
.demo-dialog-btn--danger-text:hover { background: var(--u-red-50, var(--u-surface-alt)); }



/* ============================================================
   SKELETON HELPER — cross-cutting (used by loading-state previews)
   Provides .mgr-skel pulse animation for inline placeholders.
   ============================================================ */

.mgr-skel {
  display: inline-block;
  background: var(--u-surface-sunk);
  border-radius: 3px;
  animation: mgr-skel-pulse 1.4s ease-in-out infinite;
}
.mgr-skel--line  { height: 10px; width: 60%; }
.mgr-skel--check { width: 14px; height: 14px; border-radius: 3px; }
@keyframes mgr-skel-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}


/* ============================================================
   CONFIRM DIALOG — wrapper around .u-dialog (Tier 1)
   ============================================================ */

/* Tone-icon to the left of the title */
.mgr-confirm__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: var(--u-space-3);
}
.mgr-confirm__icon[data-kind="warning"] {
  background: var(--u-amber-100);
  color: var(--u-amber-700);
}
.mgr-confirm__icon[data-kind="danger"] {
  background: var(--u-red-100);
  color: var(--u-red-700);
}
.u-dialog__title-block {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* Overlay variant — only when withOverlay=true (specimen review).
   Real app uses portaled overlay component. */
.mgr-confirm__overlay {
  background: var(--u-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--u-overlay-py) var(--u-overlay-px);
}

/* Destructive ghost button — used in dialog footer (e.g. "Törlés") */
.mgr-confirm__destructive {
  color: var(--u-red-700) !important;
}
.mgr-confirm__destructive:hover {
  background: var(--u-red-50, #FEF2F2) !important;
  color: var(--u-red-700) !important;
}


/* ============================================================
   TICKET META BAR — A1 adatlap-fej (cím + status + meta-sor)
   "Cím + cím-sor meta (helyszín · bejelentő · beérkezve · azonosító)"
   Forrás: ORGANISMS.md Tier-4, spec 10 4.3.
   ============================================================ */

.mgr-ticket-meta-bar {
  display: flex;
  flex-direction: column;
  gap: var(--u-space-3);                 /* 12 */
  margin-bottom: var(--u-space-5);       /* 20 — before TriageBar */
}

.mgr-ticket-meta-bar__row {
  display: flex;
  align-items: flex-start;
  gap: var(--u-space-4);
}

.mgr-ticket-meta-bar__title-block {
  flex: 1;
  min-width: 0;
}

.mgr-ticket-meta-bar__title {
  font-family: var(--u-font-display);
  font-size: var(--u-h2-size);           /* ~24 */
  font-weight: 700;
  color: var(--u-fg-1);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

.mgr-ticket-meta-bar__status {
  flex-shrink: 0;
  padding-top: 4px;                       /* nudges to baseline-align with title cap-height */
}

.mgr-ticket-meta-bar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--u-space-3);                /* 12 between items horizontally */
  font-size: 13px;
  color: var(--u-fg-3);
  line-height: 1.5;
}

.mgr-ticket-meta-bar__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mgr-ticket-meta-bar__meta-id {
  font-family: var(--u-font-mono);
  font-weight: 600;
  color: var(--u-fg-2);
  font-size: 12.5px;
  background: var(--u-surface-alt);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--u-border);
}

.mgr-ticket-meta-bar__meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--u-fg-4);
  display: inline-block;
}

.mgr-ticket-meta-bar__meta-icon {
  color: var(--u-fg-4);
  flex-shrink: 0;
  display: inline-flex;
}

.mgr-ticket-meta-bar__meta-text {
  color: var(--u-fg-2);
}


/* ============================================================
   TRIAGE BAR — 4 inline-szerkeszthető mező (Kategória · Prioritás
   · Határidő · Felelős). Spec: 10 4.3, K-026, SD-31, SD-26.
   UX-döntések: T-1B label-value, T-2B always-chevron,
                T-3B pre-fill tag, T-4B subtle "kötelező" eyebrow.
   ============================================================ */

.mgr-triage-bar {
  display: flex;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 10px;
  overflow: hidden;
}

.mgr-triage-bar__field {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--u-surface);
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms var(--u-ease-out);
  position: relative;
}

.mgr-triage-bar__field + .mgr-triage-bar__field {
  border-left: 1px solid var(--u-border);
}

.mgr-triage-bar__field:hover {
  background: var(--u-surface-sunk);
}

.mgr-triage-bar__field:focus-visible {
  outline: 0;
  background: var(--u-primary-soft);
  box-shadow: inset 0 0 0 2px var(--u-primary);
  z-index: 1;
}

.mgr-triage-bar__field.is-open {
  background: var(--u-primary-soft);
  z-index: 1;
}

/* End-state lock — Resolved / Rejected (SD-26) */
.mgr-triage-bar--locked .mgr-triage-bar__field {
  cursor: not-allowed;
  background: var(--u-surface-alt);
}
.mgr-triage-bar--locked .mgr-triage-bar__field:hover {
  background: var(--u-surface-alt);
}
.mgr-triage-bar--locked .mgr-triage-bar__chev { display: none; }

.mgr-triage-bar__eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u-fg-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.mgr-triage-bar__req {
  color: var(--u-fg-4);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.mgr-triage-bar__value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--u-fg-1);
  min-width: 0;
}

.mgr-triage-bar__value--empty {
  color: var(--u-fg-4);
  font-style: italic;
  font-weight: 500;
}

.mgr-triage-bar__value-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mgr-triage-bar__chev {
  margin-left: auto;
  color: var(--u-fg-4);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
}

.mgr-triage-bar__field:hover .mgr-triage-bar__chev,
.mgr-triage-bar__field:focus-visible .mgr-triage-bar__chev {
  color: var(--u-fg-2);
}

/* Suggested-tag (T-3B) — pre-fill polgári javaslat */
.mgr-triage-bar__tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.mgr-triage-bar__tag--suggested {
  background: var(--u-amber-100);
  color: var(--u-amber-700);
}

/* Suggested value tone — polgár javasolta, még nem megerősített */
.mgr-triage-bar__value--suggested {
  color: var(--u-fg-2);
  font-style: normal;
  font-weight: 500;
}

/* Priority dots */
.mgr-triage-bar__prio-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.mgr-triage-bar__prio-dot--low    { background: var(--u-slate-300); }
.mgr-triage-bar__prio-dot--normal { background: var(--u-blue-500); }
.mgr-triage-bar__prio-dot--high   { background: var(--u-amber-500); }

/* Overdue (lejárt) — Határidő piros */
.mgr-triage-bar__value--overdue {
  color: var(--u-red-700);
}
.mgr-triage-bar__overdue-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--u-red-500);
  display: inline-block;
  flex-shrink: 0;
}

/* Felelős avatar (mini) */
.mgr-triage-bar__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--u-blue-100);
  color: var(--u-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.mgr-triage-bar__avatar--group {
  background: var(--u-violet-100);
  color: var(--u-violet-700);
}

/* Saving / spinner state — optimistic-update közben */
.mgr-triage-bar__spinner {
  width: 12px; height: 12px;
  border: 1.5px solid var(--u-blue-300);
  border-top-color: var(--u-primary);
  border-radius: 50%;
  display: inline-block;
  animation: mgr-tb-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes mgr-tb-spin {
  to { transform: rotate(360deg); }
}

/* Open-picker popover (visual demo only) */
.mgr-triage-bar__popover {
  position: absolute;
  top: calc(100% + 4px);
  left: -1px;
  min-width: 100%;
  background: var(--u-popover-bg);
  border: 1px solid var(--u-popover-border);
  border-radius: var(--u-popover-radius);
  box-shadow: var(--u-popover-shadow);
  padding: var(--u-popover-menu-py) 0;
  z-index: 10;
  text-align: left;
  cursor: default;
  font-weight: normal;
}
.mgr-triage-bar__popover-search {
  margin: 0 var(--u-space-2) var(--u-space-2);
  padding: 6px 10px;
  border: 1px solid var(--u-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--u-fg-3);
  background: var(--u-surface);
}
.mgr-triage-bar__popover-group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u-fg-3);
  padding: 6px 14px 4px;
}
.mgr-triage-bar__popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--u-fg-1);
  cursor: pointer;
}
.mgr-triage-bar__popover-item:hover {
  background: var(--u-surface-alt);
}
.mgr-triage-bar__popover-item.is-current {
  background: var(--u-primary-soft);
  color: var(--u-blue-700);
}
.mgr-triage-bar__popover-item-check {
  margin-left: auto;
  color: var(--u-primary);
}
.mgr-triage-bar__popover-divider {
  height: 1px;
  background: var(--u-divider);
  margin: 4px 0;
}


/* ============================================================
   REJECTION BANNER — alternatíva a StatusTrack-nak, ha Rejected
   Spec: 10 4.3 "Rejected ügyön a csík helyett önálló 'Elutasítva'
   jelző, az rejectionReasonCode/Text megjelenítésével."
   ============================================================ */

.mgr-rejection-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--u-space-3);
  padding: var(--u-space-3) var(--u-space-4);
  background: var(--u-status-elutasitva-bg);
  border: 1px solid rgba(0,0,0,0.04);
  border-left: 3px solid var(--u-status-elutasitva-dot);
  border-radius: 10px;
  margin-bottom: var(--u-space-5);
}
.mgr-rejection-banner__icon {
  color: var(--u-status-elutasitva-fg);
  flex-shrink: 0;
  margin-top: 1px;
}
.mgr-rejection-banner__body {
  flex: 1;
  min-width: 0;
}
.mgr-rejection-banner__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-status-elutasitva-fg);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.mgr-rejection-banner__reason {
  font-size: 13px;
  color: var(--u-fg-2);
  line-height: 1.5;
  text-wrap: pretty;
}
.mgr-rejection-banner__reason strong {
  color: var(--u-fg-1);
  font-weight: 600;
}


/* ============================================================
   ACTIVITY TIMELINE — adatlap-sidebar napló
   Spec: 00_domain_model 1.4, 10_admin 4.3 + 4.6 sablonok.
   UX (Iter 2): AT-1C hibrid időbélyeg (relatív + tooltip absz.),
                AT-2B event-type ikon halvány színes háttéren.
   ============================================================ */

.mgr-timeline {
  display: flex;
  flex-direction: column;
}

.mgr-timeline__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 var(--u-space-3);
  margin-bottom: var(--u-space-2);
  border-bottom: 1px solid var(--u-divider);
}
.mgr-timeline__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-fg-1);
  letter-spacing: -0.005em;
}
.mgr-timeline__count {
  font-size: 11.5px;
  color: var(--u-fg-3);
  font-family: var(--u-font-mono);
}

.mgr-timeline__list {
  display: flex;
  flex-direction: column;
  /* Egy közös belső padding a sorokon, nem container-en — így a hover-affordance
     a teljes sorra kiterjedhet, ha kell. */
}

.mgr-timeline__item {
  display: flex;
  gap: 10px;
  padding: var(--u-space-3) 0;
  position: relative;
}
.mgr-timeline__item + .mgr-timeline__item {
  border-top: 1px solid var(--u-divider);
}

/* Event-type ikon — AT-2B */
.mgr-timeline__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mgr-timeline__icon svg { display: block; }

/* Per event-type — háttérszín + szöveg-szín pár */
.mgr-timeline__icon--Created       { background: var(--u-slate-200);  color: var(--u-slate-700); }
.mgr-timeline__icon--StatusChanged { background: var(--u-blue-100);   color: var(--u-blue-700); }
.mgr-timeline__icon--Assigned      { background: var(--u-blue-100);   color: var(--u-blue-700); }
.mgr-timeline__icon--Reassigned    { background: var(--u-amber-100);  color: var(--u-amber-700); }
.mgr-timeline__icon--Rejected      { background: var(--u-red-100);    color: var(--u-red-700); }
.mgr-timeline__icon--Reopened      { background: var(--u-amber-100);  color: var(--u-amber-700); }
.mgr-timeline__icon--Merged        { background: var(--u-violet-100); color: var(--u-violet-700); }

.mgr-timeline__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.mgr-timeline__text {
  font-size: 13px;
  color: var(--u-fg-1);
  line-height: 1.5;
  text-wrap: pretty;
}
.mgr-timeline__text strong {
  font-weight: 600;
  color: var(--u-fg-1);
}
.mgr-timeline__text-meta {
  color: var(--u-fg-3);
  font-weight: 400;
}

/* AT-1C: hibrid időbélyeg — relatív főszöveg, dotted underline +
   title-attribute jelzi az abszolút értéket. */
.mgr-timeline__time {
  display: inline-block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--u-fg-3);
  border-bottom: 1px dotted var(--u-fg-4);
  cursor: help;
  font-family: var(--u-font-sans);
}

/* Rendszer-esemény (actorId null) — semleges avatar a typed-icon mellett már a
   szín differenciál; de a "rendszer-aktor" szövegét halványan jelöljük. */
.mgr-timeline__text--system strong { color: var(--u-fg-2); font-weight: 500; font-style: italic; }

/* Empty state — egyetlen "Created" sor mellett még üzenet */
.mgr-timeline__empty {
  padding: var(--u-space-4) 0;
  color: var(--u-fg-3);
  font-size: 12.5px;
  text-align: center;
  line-height: 1.55;
}


/* ============================================================
   INTERNAL NOTES PANEL — TicketNote chat-szerű
   Spec: 00_domain_model 1.5, 10_admin 4.3, SD-17.
   UX (Iter 2): N-1B add-form alul, N-2A régi→új kronológia.
   ============================================================ */

.mgr-notes {
  display: flex;
  flex-direction: column;
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  box-shadow: var(--u-shadow-xs);
  overflow: hidden;
}

.mgr-notes__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--u-card-header-py) var(--u-card-header-px);
  border-bottom: 1px solid var(--u-divider);
}
.mgr-notes__title {
  font-size: var(--u-card-header-title-size);
  font-weight: 600;
  color: var(--u-fg-1);
  letter-spacing: -0.005em;
}
.mgr-notes__count {
  font-size: 11.5px;
  color: var(--u-fg-3);
  font-family: var(--u-font-mono);
}

.mgr-notes__list {
  padding: 0 var(--u-card-padding) var(--u-space-2);
  display: flex;
  flex-direction: column;
}
.mgr-notes__list--scrollable {
  max-height: 360px;
  overflow-y: auto;
}

.mgr-notes__item {
  display: flex;
  gap: 10px;
  padding: var(--u-space-3) 0;
}
.mgr-notes__item + .mgr-notes__item {
  border-top: 1px solid var(--u-divider);
}

.mgr-notes__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--u-blue-100);
  color: var(--u-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.mgr-notes__item-body {
  flex: 1;
  min-width: 0;
}
.mgr-notes__item-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.mgr-notes__item-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-fg-1);
}
.mgr-notes__item-role {
  font-size: 11.5px;
  color: var(--u-fg-3);
}
.mgr-notes__item-time {
  font-size: 11.5px;
  color: var(--u-fg-3);
  margin-left: auto;
  border-bottom: 1px dotted var(--u-fg-4);
  cursor: help;
}
.mgr-notes__item-text {
  font-size: 13px;
  color: var(--u-fg-2);
  line-height: 1.55;
  text-wrap: pretty;
  white-space: pre-wrap;
}

/* Empty list — placeholder a form felett */
.mgr-notes__empty {
  padding: var(--u-space-8) var(--u-card-padding);
  color: var(--u-fg-3);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}
.mgr-notes__empty strong { color: var(--u-fg-1); font-weight: 600; display: block; margin-bottom: 4px; }

/* Composer — N-1B: alul */
.mgr-notes__composer {
  padding: var(--u-space-3) var(--u-card-padding);
  background: var(--u-surface-alt);
  border-top: 1px solid var(--u-border);
  display: flex;
  gap: 10px;
}
.mgr-notes__composer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mgr-notes__composer-textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--u-fg-1);
  line-height: 1.5;
  resize: vertical;
  outline: 0;
}
.mgr-notes__composer-textarea:focus { border-color: var(--u-primary); box-shadow: var(--u-focus-ring); }
.mgr-notes__composer-textarea::placeholder { color: var(--u-fg-4); font-style: italic; }

.mgr-notes__composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mgr-notes__composer-hint {
  font-size: 11.5px;
  color: var(--u-fg-3);
}
.mgr-notes__composer-submit {
  height: 30px;
  padding: 0 14px;
  background: var(--u-primary);
  color: #fff;
  border: 0;
  border-radius: 7px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.mgr-notes__composer-submit:hover { background: var(--u-primary-hover); }
.mgr-notes__composer-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Read-only mode — field_worker (csak olvas, spec 4.3 elemtérkép) */
.mgr-notes--readonly .mgr-notes__composer { display: none; }


/* ============================================================
   ACTION BAR — állapot-függő akció-cluster a adatlap alján
   Spec: 02_globalis_allapotgep 7. mátrix, 10_admin 4.3, SD-41.
   UX (Iter 2): AB-1A sticky alsó sáv, AB-2A egy primer + secondary.
   ============================================================ */

.mgr-action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: var(--u-space-3) var(--u-page-px);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--u-border);
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04);
  margin-top: var(--u-space-6);
}

.mgr-action-bar__inner {
  max-width: var(--u-page-max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  justify-content: flex-end;
}

/* Bal-igazított hint a sáv elején — opcionális, pl. "minden frissítés mentve" */
.mgr-action-bar__hint {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--u-fg-3);
}
.mgr-action-bar__hint-time {
  border-bottom: 1px dotted var(--u-fg-4);
  cursor: help;
}

/* End-state — Elutasítva: zárolt, csak megjegyzés mutató */
.mgr-action-bar--locked .mgr-action-bar__inner {
  justify-content: flex-start;
}
.mgr-action-bar__locked-note {
  font-size: 13px;
  color: var(--u-fg-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Button hierarchy — fogyasztja a DS .u-btn osztályait, de a "tooltip-mellette"
   pattern saját. */
.mgr-action-bar__btn-wrap {
  position: relative;
  display: inline-flex;
}
.mgr-action-bar__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--u-slate-800);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--u-shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms var(--u-ease-out), transform 120ms var(--u-ease-out);
}
.mgr-action-bar__btn-wrap:hover .mgr-action-bar__tooltip,
.mgr-action-bar__btn-wrap:focus-within .mgr-action-bar__tooltip {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   SIMILAR TICKETS BOX — adatlap-sidebar duplikáció-doboz
   Spec: 20_duplikacio_es_osszevonas 4.2.
   UX (Iter 3): SB-1A csendes empty / SB-2A bélyegkép balra /
                SB-3A akciók mindig jobbra / SB-4A amber-tinted
                findings-fejléc + alert-ikon + count-badge.
   ============================================================ */

.mgr-similar {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  overflow: hidden;
}

.mgr-similar--findings {
  border-left: 3px solid var(--u-amber-500);
}

.mgr-similar__header {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--u-divider);
}
.mgr-similar--findings .mgr-similar__header {
  background: var(--u-amber-100);
  border-bottom-color: rgba(0,0,0,0.04);
}

.mgr-similar__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--u-fg-1);
  letter-spacing: -0.005em;
}
.mgr-similar--findings .mgr-similar__title {
  color: var(--u-amber-700);
}

.mgr-similar__alert {
  display: inline-flex;
  color: var(--u-amber-700);
}

.mgr-similar__badge {
  margin-left: auto;
  background: var(--u-amber-500);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--u-font-mono);
  letter-spacing: 0.02em;
}

.mgr-similar__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mgr-similar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 120ms var(--u-ease-out);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.mgr-similar__item + .mgr-similar__item {
  border-top: 1px solid var(--u-divider);
}
.mgr-similar__item:hover {
  background: var(--u-surface-alt);
}
.mgr-similar__item:focus-visible {
  outline: 0;
  background: var(--u-primary-soft);
  box-shadow: inset 0 0 0 2px var(--u-primary);
}

.mgr-similar__thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--u-slate-200) 0%, var(--u-slate-300) 100%);
  position: relative;
  overflow: hidden;
}
.mgr-similar__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mgr-similar__thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--u-slate-500);
}
.mgr-similar__thumb-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  font-family: var(--u-font-mono);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.mgr-similar__body {
  flex: 1;
  min-width: 0;
}

.mgr-similar__title-row {
  font-size: 13px;
  color: var(--u-fg-1);
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgr-similar__display-id {
  font-family: var(--u-font-mono);
  font-size: 11.5px;
  color: var(--u-fg-3);
  margin-right: 6px;
  font-weight: 600;
}

.mgr-similar__signals {
  font-size: 11.5px;
  color: var(--u-fg-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mgr-similar__signals-sep {
  color: var(--u-fg-4);
}
.mgr-similar__signal-distance {
  color: var(--u-red-700);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.mgr-similar__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mgr-similar__chev {
  display: inline-flex;
  color: var(--u-fg-4);
}

/* Empty / loading / error states */
.mgr-similar__empty,
.mgr-similar__error {
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--u-fg-3);
  line-height: 1.55;
}
.mgr-similar__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mgr-similar__error-retry {
  background: transparent;
  border: 0;
  color: var(--u-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.mgr-similar__error-retry:hover {
  background: var(--u-primary-soft);
}

.mgr-similar__loading {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mgr-similar__skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mgr-similar__skeleton-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--u-surface-sunk);
  flex-shrink: 0;
  animation: mgr-sim-pulse 1.4s ease-in-out infinite;
}
.mgr-similar__skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mgr-similar__skeleton-line {
  height: 10px;
  background: var(--u-surface-sunk);
  border-radius: 3px;
  animation: mgr-sim-pulse 1.4s ease-in-out infinite;
}
@keyframes mgr-sim-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Show-more link, when >3-4 findings */
.mgr-similar__more {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--u-divider);
  color: var(--u-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}
.mgr-similar__more:hover {
  background: var(--u-surface-alt);
}


/* ============================================================
   MERGE BODY — kártya-radio (MD-1A) a ConfirmDialog body-jában
   Spec: 20_duplikacio_es_osszevonas 4.3.
   ============================================================ */

.mgr-merge-intro {
  font-size: 13px;
  color: var(--u-fg-2);
  line-height: 1.55;
  text-wrap: pretty;
  margin-bottom: var(--u-space-3);
}
.mgr-merge-intro strong { color: var(--u-fg-1); font-weight: 600; }

.mgr-merge-question {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--u-fg-2);
  margin-bottom: 10px;
}

.mgr-merge-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mgr-merge-card {
  position: relative;
  display: block;
  padding: 14px;
  background: var(--u-surface);
  border: 1.5px solid var(--u-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms var(--u-ease-out), background 120ms var(--u-ease-out);
}
.mgr-merge-card:hover {
  border-color: var(--u-border-strong);
}
.mgr-merge-card.is-selected {
  border-color: var(--u-primary);
  background: var(--u-primary-soft);
}

.mgr-merge-card__radio {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--u-border-strong);
  color: #fff;
  transition: background 120ms, border-color 120ms;
}
.mgr-merge-card.is-selected .mgr-merge-card__radio {
  background: var(--u-primary);
  border-color: var(--u-primary);
}

.mgr-merge-card__role {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.mgr-merge-card__role--keep {
  background: var(--u-green-100);
  color: var(--u-green-700);
}
.mgr-merge-card__role--drop {
  background: var(--u-surface-sunk);
  color: var(--u-fg-3);
}

.mgr-merge-card__id-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.mgr-merge-card__id {
  font-family: var(--u-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--u-fg-2);
}
.mgr-merge-card__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--u-fg-1);
  line-height: 1.35;
  margin-bottom: 8px;
}

.mgr-merge-card__meta {
  font-size: 11.5px;
  color: var(--u-fg-3);
  line-height: 1.55;
}
.mgr-merge-card__meta strong {
  color: var(--u-fg-2);
  font-weight: 600;
}

.mgr-merge-hint {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--u-fg-3);
  line-height: 1.5;
  text-align: center;
}


/* ============================================================
   MAP WIDGET — Leaflet-based, view/picker modes (Tier 3.5).
   Aspect-ratio container; pin variants by ticket-status.
   ============================================================ */

.mgr-map {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mgr-map__container {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--u-border);
  background: var(--u-surface-sunk);
}
.mgr-map__container--sm   { aspect-ratio: 16 / 10; }
.mgr-map__container--tall { aspect-ratio: 3 / 4; }
.mgr-map__container--flex { aspect-ratio: auto; min-height: 240px; flex: 1; }
.mgr-map__container--form { aspect-ratio: auto; height: 260px; }

/* Cluster bubble overrides */
.marker-cluster {
  background: rgba(46, 99, 235, 0.25);
  border-radius: 50%;
}
.marker-cluster div {
  background: var(--u-primary);
  color: white;
  border: 3px solid white;
  box-shadow: 0 0 0 1px var(--u-primary), 0 2px 8px rgba(0,0,0,0.25);
  font-family: var(--u-font-mono);
  font-weight: 700;
  font-size: 12px;
}
.marker-cluster-small div { font-size: 11px; }
.marker-cluster-large div { font-size: 13px; }

.leaflet-container {
  font-family: var(--u-font-sans);
  background: #e8f0d8;
}
.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: var(--u-shadow-md);
}
.leaflet-popup-content {
  font-family: var(--u-font-sans);
  font-size: 13px;
  margin: 10px 14px;
  line-height: 1.4;
}

/* Pin */
.mgr-map__pin {
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--u-primary);
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.mgr-map__pin--uj          { background: var(--u-status-uj-fg); }
.mgr-map__pin--folyamatban { background: var(--u-status-folyamatban-fg); }
.mgr-map__pin--megoldva    { background: var(--u-status-megoldva-fg); }
.mgr-map__pin--elutasitva  { background: var(--u-status-elutasitva-fg); }

.mgr-map__legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--u-fg-3);
  padding: 0 2px;
}
.mgr-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mgr-map__legend-dot {
  width: 10px; height: 10px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 1.5px solid white;
  box-shadow: 0 0 0 1px var(--u-border);
}


/* ============================================================
   LOCATION PICKER — manager-system organism (A2/A11)
   UX (Iter 4): L-1A map-first, L-2C click+drag, L-3A auto-geocode.
   ============================================================ */

.mgr-loc-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mgr-loc-picker__map {
  /* Inherits .mgr-map__container layout via the MapWidget. */
}

.mgr-loc-picker__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--u-fg-3);
  padding: 4px 2px;
}
.mgr-loc-picker__hint-icon { color: var(--u-fg-4); flex-shrink: 0; display: inline-flex; }

.mgr-loc-picker__address {
  position: relative;
}
.mgr-loc-picker__address-input {
  width: 100%;
  padding: 9px 36px 9px 12px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--u-fg-1);
  outline: 0;
}
.mgr-loc-picker__address-input:focus {
  border-color: var(--u-primary);
  box-shadow: var(--u-focus-ring);
}
.mgr-loc-picker__address-input::placeholder {
  color: var(--u-fg-4);
}

.mgr-loc-picker__address-status {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  pointer-events: none;
}
.mgr-loc-picker__address-status--ok {
  color: var(--u-green-500);
}
.mgr-loc-picker__address-status--loading {
  color: var(--u-fg-4);
}
.mgr-loc-picker__address-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--u-slate-300);
  border-top-color: var(--u-primary);
  border-radius: 50%;
  display: inline-block;
  animation: mgr-tb-spin 0.7s linear infinite;
}

.mgr-loc-picker__coords {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--u-fg-3);
  font-family: var(--u-font-mono);
  padding: 4px 2px;
}

.mgr-loc-picker__gps-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--u-border);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--u-fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mgr-loc-picker__gps-btn:hover {
  background: var(--u-surface-alt);
  color: var(--u-fg-1);
}


/* ============================================================
   TICKET CREATE FORM — A2 új-bejelentés-flow
   UX (Iter 4): F-1A külön oldal, F-2A két submit-gomb,
                F-3A 1-oszlopos szekciókkal.
   ============================================================ */

.mgr-tcf {
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.mgr-tcf__section + .mgr-tcf__section {
  margin-top: var(--u-space-5);
}

.mgr-tcf__section-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u-fg-3);
  margin-bottom: var(--u-space-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--u-divider);
}

.mgr-tcf__field {
  margin-bottom: var(--u-space-3);
}
.mgr-tcf__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--u-fg-2);
  margin-bottom: 4px;
}
.mgr-tcf__req {
  color: var(--u-red-500);
}
.mgr-tcf__hint {
  font-size: 11px;
  color: var(--u-fg-4);
  margin-top: 4px;
}
.mgr-tcf__input,
.mgr-tcf__textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--u-fg-1);
  outline: 0;
}
.mgr-tcf__input:focus,
.mgr-tcf__textarea:focus {
  border-color: var(--u-primary);
  box-shadow: var(--u-focus-ring);
}
.mgr-tcf__textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.mgr-tcf__field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--u-space-3);
}
.mgr-tcf__field-grid > .mgr-tcf__field { margin-bottom: 0; }

/* Photo placeholder grid */
.mgr-tcf__photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mgr-tcf__photo-slot {
  width: 84px;
  height: 64px;
  border: 1.5px dashed var(--u-border);
  border-radius: 6px;
  background: var(--u-surface-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--u-fg-4);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}
.mgr-tcf__photo-slot:hover {
  border-color: var(--u-primary);
  color: var(--u-primary);
  background: var(--u-primary-soft);
}

/* The triage section reuses TriageBar in "draft" mode — no special chrome */

/* Footer (action bar) override — uses .mgr-action-bar but with three buttons */
.mgr-tcf__hint-row {
  margin-top: var(--u-space-3);
  font-size: 11.5px;
  color: var(--u-fg-3);
  line-height: 1.5;
  text-align: right;
}

/* Field-error state — spec 01_kozos_mintak 5.5 + 6.3 (fieldErrors-minta).
   A backend 400-as válaszból érkező mező-szintű hibák.
   Konvenció a tier-3.5-validation-ből: piros border + halvány piros háttér
   + inline error-message a mező alatt, aria-invalid az inputon. */
.mgr-tcf__field--error .mgr-tcf__input,
.mgr-tcf__field--error .mgr-tcf__textarea {
  border-color: var(--u-red-500);
  background: var(--u-red-50, #fef2f2);
}
.mgr-tcf__field--error .mgr-tcf__input:focus,
.mgr-tcf__field--error .mgr-tcf__textarea:focus {
  border-color: var(--u-red-500);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
.mgr-tcf__field--error .mgr-tcf__label {
  color: var(--u-red-700);
}
.mgr-tcf__error {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--u-red-700);
  font-weight: 500;
  line-height: 1.45;
}
.mgr-tcf__error-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--u-red-500);
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
}


/* ============================================================
   CATEGORY TREE EDITOR — A6 /beallitasok/kategoriak
   UX (Iter 5): C-1A drag-drop reorder · C-2A inline icon-popover
                C-3B preview-kártyás default-import · C-4A always-visible
                sor-akciók.
   Spec: 30_beallitasok 4.2, SD-62 (default-import), SD-63 (delete-guard),
   SD-64 (reorder szülő-hatókörben), K-008 (új gyökér csak default-ból).
   ============================================================ */

.mgr-cat {
  display: flex;
  flex-direction: column;
}

.mgr-cat__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--u-divider);
  margin-bottom: var(--u-space-3);
}
.mgr-cat__toolbar-title {
  font-family: var(--u-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--u-fg-1);
  margin: 0;
}
.mgr-cat__toolbar-stats {
  font-size: 12px;
  color: var(--u-fg-3);
  margin-top: 2px;
}
.mgr-cat__toolbar-spacer { flex: 1; }
.mgr-cat__toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--u-fg-2);
  cursor: pointer;
}

.mgr-cat__group {
  margin-bottom: var(--u-space-5);
}

.mgr-cat__root {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--u-fg-1);
  border-bottom: 1px solid var(--u-divider);
  margin-bottom: var(--u-space-2);
}
.mgr-cat__root--inactive {
  color: var(--u-fg-3);
  opacity: 0.6;
}
.mgr-cat__root-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--u-surface-alt);
  font-size: 14px;
  flex-shrink: 0;
}
.mgr-cat__root-name {
  flex: 1;
  min-width: 0;
}
.mgr-cat__root-name input {
  font-family: var(--u-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--u-fg-1);
  border: 1px solid var(--u-primary);
  background: var(--u-surface);
  padding: 4px 8px;
  border-radius: 6px;
  outline: 0;
  width: 100%;
}
.mgr-cat__root-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--u-blue-50);
  color: var(--u-blue-700);
  flex-shrink: 0;
}
.mgr-cat__root-count {
  font-size: 11px;
  color: var(--u-fg-3);
  font-family: var(--u-font-mono);
  font-weight: 500;
}
.mgr-cat__root-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mgr-cat__children {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mgr-cat__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  background: var(--u-surface);
  border: 1px solid var(--u-divider);
  border-radius: 6px;
  position: relative;
  transition: background 120ms, border-color 120ms, opacity 120ms;
}
.mgr-cat__row:hover {
  background: var(--u-surface-alt);
}
.mgr-cat__row--inactive {
  opacity: 0.55;
}
.mgr-cat__row.is-dragging {
  background: var(--u-primary-soft);
  border-color: var(--u-primary);
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.18);
  z-index: 5;
}
.mgr-cat__row.is-drop-target {
  border-top-color: var(--u-primary);
  border-top-width: 2px;
}

.mgr-cat__grip {
  color: var(--u-fg-4);
  cursor: grab;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.mgr-cat__grip:active { cursor: grabbing; }

.mgr-cat__icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--u-surface-alt);
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}
.mgr-cat__icon:hover {
  border-color: var(--u-border);
}
.mgr-cat__icon.is-active {
  background: var(--u-primary-soft);
  border-color: var(--u-primary);
}

.mgr-cat__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--u-fg-1);
  cursor: text;
  padding: 2px 0;
}
.mgr-cat__name-input {
  flex: 1;
  font-family: var(--u-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--u-fg-1);
  background: var(--u-surface);
  border: 1px solid var(--u-primary);
  border-radius: 4px;
  padding: 2px 8px;
  outline: 0;
}

.mgr-cat__count {
  font-size: 11px;
  color: var(--u-fg-3);
  font-family: var(--u-font-mono);
  flex-shrink: 0;
}

.mgr-cat__inactive-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--u-surface-sunk);
  color: var(--u-fg-3);
  flex-shrink: 0;
}

.mgr-cat__row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Toggle (isActive) */
.mgr-cat__toggle {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--u-slate-300);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  border: 0;
  padding: 0;
}
.mgr-cat__toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
  transition: left 120ms ease;
}
.mgr-cat__toggle.is-on {
  background: var(--u-green-500);
}
.mgr-cat__toggle.is-on::after {
  left: 14px;
}

/* Empty placeholder beneath a root with no children */
.mgr-cat__empty {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--u-fg-3);
  font-style: italic;
}

/* "+ Új alkategória" inline-add row */
.mgr-cat__add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 1px dashed var(--u-border);
  border-radius: 6px;
  color: var(--u-fg-3);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  width: 100%;
  text-align: left;
}
.mgr-cat__add-row:hover {
  border-color: var(--u-primary);
  color: var(--u-primary);
  background: var(--u-primary-soft);
}


/* ============================================================
   ICON PICKER — pop-over paletta (C-2A)
   ============================================================ */

.mgr-icon-picker {
  position: absolute;
  z-index: 10;
  background: var(--u-popover-bg, #fff);
  border: 1px solid var(--u-popover-border, var(--u-border));
  border-radius: 10px;
  box-shadow: var(--u-popover-shadow, 0 8px 24px rgba(15, 23, 42, 0.15));
  padding: 12px;
  width: 280px;
}
.mgr-icon-picker__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u-fg-3);
  margin-bottom: 8px;
}
.mgr-icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.mgr-icon-picker__cell {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--u-surface);
  border: 1.5px solid var(--u-border);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.mgr-icon-picker__cell:hover {
  border-color: var(--u-border-strong);
}
.mgr-icon-picker__cell.is-selected {
  background: var(--u-primary-soft);
  border-color: var(--u-primary);
}


/* ============================================================
   CATEGORY IMPORT DIALOG — preview-kártyák (C-3B)
   ============================================================ */

.mgr-cat-import {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mgr-cat-import__intro {
  font-size: 13px;
  color: var(--u-fg-2);
  line-height: 1.55;
  margin: 0 0 8px;
}

.mgr-cat-import__card {
  position: relative;
  display: block;
  padding: 14px;
  background: var(--u-surface);
  border: 1.5px solid var(--u-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.mgr-cat-import__card:hover {
  border-color: var(--u-border-strong);
}
.mgr-cat-import__card.is-selected {
  background: var(--u-primary-soft);
  border-color: var(--u-primary);
}

.mgr-cat-import__radio {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--u-border-strong);
  color: #fff;
}
.mgr-cat-import__card.is-selected .mgr-cat-import__radio {
  background: var(--u-primary);
  border-color: var(--u-primary);
}

.mgr-cat-import__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mgr-cat-import__head-icon {
  font-size: 22px;
}
.mgr-cat-import__head-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--u-fg-1);
}

.mgr-cat-import__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mgr-cat-import__chip {
  font-size: 11px;
  color: var(--u-fg-3);
  background: var(--u-surface-sunk);
  padding: 2px 7px;
  border-radius: 4px;
}
.mgr-cat-import__chip--empty {
  font-style: italic;
  color: var(--u-fg-4);
  background: transparent;
}


/* ============================================================
   ROLE EDITOR — A8 /beallitasok/felhasznalok
   UX (Iter 6): UD-2A role-rows with description + UD-4A
                disabled-checkbox + tooltip az invariánsokra.
   ============================================================ */

.mgr-role-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mgr-role-editor__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background 120ms, border-color 120ms;
}
.mgr-role-editor__row:hover {
  background: var(--u-surface-alt);
}
.mgr-role-editor__row.is-selected {
  background: var(--u-primary-soft);
  border-color: var(--u-primary);
}
.mgr-role-editor__row.is-locked {
  cursor: not-allowed;
  opacity: 0.78;
}
.mgr-role-editor__row.is-locked:hover {
  background: var(--u-primary-soft);
}

.mgr-role-editor__checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--u-primary);
  width: 16px;
  height: 16px;
}

.mgr-role-editor__body {
  flex: 1;
  min-width: 0;
}

.mgr-role-editor__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--u-fg-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mgr-role-editor__row.is-selected .mgr-role-editor__name {
  font-weight: 600;
}

.mgr-role-editor__desc {
  font-size: 11.5px;
  color: var(--u-fg-3);
  margin-top: 2px;
  line-height: 1.5;
  text-wrap: pretty;
}

.mgr-role-editor__locked-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--u-amber-100);
  color: var(--u-amber-700);
  padding: 1px 6px;
  border-radius: 3px;
}

.mgr-role-editor__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 12px;
  background: var(--u-slate-800);
  color: #fff;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--u-shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
  z-index: 5;
}
.mgr-role-editor__row.is-locked:hover .mgr-role-editor__tooltip,
.mgr-role-editor__row.is-locked:focus-within .mgr-role-editor__tooltip {
  opacity: 1;
}

.mgr-role-editor__hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--u-fg-4);
  line-height: 1.5;
}

/* Read-only variant — adatlap megjelenítéshez chip-formában */
.mgr-role-editor--readonly {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.mgr-role-editor__chip {
  display: inline-flex;
  align-items: center;
  background: var(--u-primary-soft);
  color: var(--u-blue-700);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}


/* ============================================================
   USER DETAIL PAGE — A8 /beallitasok/felhasznalok/details/<id>
   UX (Iter 6): UD-3A inline-section editing (TriageBar-mintára),
                a fejléc avatar + név + status-chip.
   ============================================================ */

.mgr-user-detail__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--u-divider);
  margin-bottom: var(--u-space-4);
}

.mgr-user-detail__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--u-blue-100);
  color: var(--u-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.mgr-user-detail__avatar--invited {
  background: var(--u-amber-100);
  color: var(--u-amber-700);
}
.mgr-user-detail__avatar--disabled {
  background: var(--u-surface-sunk);
  color: var(--u-fg-3);
  filter: grayscale(0.4);
}

.mgr-user-detail__head-body {
  flex: 1;
  min-width: 0;
}
.mgr-user-detail__name {
  font-family: var(--u-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--u-fg-1);
  margin: 0;
  line-height: 1.25;
}
.mgr-user-detail__email {
  font-size: 13px;
  color: var(--u-fg-3);
  margin-top: 2px;
  font-family: var(--u-font-mono);
}

.mgr-user-detail__status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.mgr-user-detail__status-chip--active   { background: var(--u-green-100); color: var(--u-green-700); }
.mgr-user-detail__status-chip--invited  { background: var(--u-amber-100); color: var(--u-amber-700); }
.mgr-user-detail__status-chip--disabled { background: var(--u-surface-sunk); color: var(--u-fg-3); }
.mgr-user-detail__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.mgr-user-detail__status-chip--active   .mgr-user-detail__status-dot { background: var(--u-green-500); }
.mgr-user-detail__status-chip--invited  .mgr-user-detail__status-dot { background: var(--u-amber-500); }
.mgr-user-detail__status-chip--disabled .mgr-user-detail__status-dot { background: var(--u-fg-4); }

/* Section cards — reused for Alapadatok, Szerepkörök, Csoporttagság */

.mgr-user-detail__section {
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  box-shadow: var(--u-shadow-xs);
  margin-bottom: var(--u-space-3);
  overflow: hidden;
}

.mgr-user-detail__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--u-card-header-py) var(--u-card-header-px);
  border-bottom: 1px solid var(--u-divider);
}
.mgr-user-detail__section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--u-fg-2);
}

.mgr-user-detail__section-body {
  padding: var(--u-space-4) var(--u-card-header-px);
}
.mgr-user-detail__section-body--editing {
  background: var(--u-primary-soft);
  border-bottom: 1px solid var(--u-divider);
}

.mgr-user-detail__field-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 10px;
  column-gap: 12px;
  font-size: 13px;
}
.mgr-user-detail__field-label {
  color: var(--u-fg-3);
}
.mgr-user-detail__field-value {
  color: var(--u-fg-1);
}
.mgr-user-detail__field-value--locked {
  color: var(--u-fg-3);
  font-family: var(--u-font-mono);
  font-size: 12.5px;
}

.mgr-user-detail__edit-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: var(--u-space-3);
  margin-top: var(--u-space-3);
  border-top: 1px solid var(--u-divider);
}

/* Account actions row — at the bottom (resend invite / deactivate / reactivate) */
.mgr-user-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--u-space-4);
  padding: var(--u-space-4);
  background: var(--u-surface-alt);
  border: 1px solid var(--u-border);
  border-radius: 10px;
}
.mgr-user-detail__actions-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--u-fg-3);
  width: 100%;
  margin-bottom: 4px;
}


/* ============================================================
   GROUP MEMBER LIST — A7 csoport-adatlap Tagok szekciója.
   UX (Iter 7): G-2A row-list (avatar + név + szerepkör + remove-X)
                G-4A direkt remove + undo-toast (a host kezeli)
   ============================================================ */

.mgr-member-list {
  display: flex;
  flex-direction: column;
}

.mgr-member-list__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--u-surface);
  border: 1px solid var(--u-divider);
  border-radius: 6px;
  margin-bottom: 4px;
  transition: background 120ms, opacity 200ms;
}
.mgr-member-list__row:hover {
  background: var(--u-surface-alt);
}
.mgr-member-list__row.is-removing {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
}

.mgr-member-list__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--u-blue-100);
  color: var(--u-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.mgr-member-list__body {
  flex: 1;
  min-width: 0;
}

.mgr-member-list__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--u-fg-1);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgr-member-list__role {
  font-size: 11.5px;
  color: var(--u-fg-3);
}

.mgr-member-list__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--u-fg-4);
  cursor: pointer;
}
.mgr-member-list__remove:hover {
  background: var(--u-red-100);
  color: var(--u-red-700);
}

.mgr-member-list__empty {
  padding: 16px 12px;
  font-size: 13px;
  color: var(--u-fg-3);
  font-style: italic;
  text-align: center;
  background: var(--u-surface-alt);
  border-radius: 6px;
}


/* ============================================================
   USER PICKER — inline autocomplete + dropdown
   UX (Iter 7): G-3A inline picker a tag-szerkesztő-üzemben.
   Spec: GET /v1/lookup/tenant-users?status=Active.
   ============================================================ */

.mgr-user-picker {
  background: var(--u-primary-soft);
  border-radius: 8px;
  padding: 10px;
  position: relative;
}

.mgr-user-picker__input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 6px;
}
.mgr-user-picker__input-wrap:focus-within {
  border-color: var(--u-primary);
  box-shadow: var(--u-focus-ring);
}
.mgr-user-picker__input-icon {
  color: var(--u-fg-3);
  display: inline-flex;
  flex-shrink: 0;
}
.mgr-user-picker__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--u-fg-1);
  outline: 0;
}
.mgr-user-picker__input::placeholder {
  color: var(--u-fg-4);
}

.mgr-user-picker__dropdown {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  margin-top: 8px;
  box-shadow: var(--u-shadow-sm);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.mgr-user-picker__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 120ms;
}
.mgr-user-picker__option:hover {
  background: var(--u-primary-soft);
}
.mgr-user-picker__option-name {
  flex: 1;
  font-size: 13px;
  color: var(--u-fg-1);
  font-weight: 500;
}
.mgr-user-picker__option-role {
  font-size: 11px;
  color: var(--u-fg-3);
}
.mgr-user-picker__option-add {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 6px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--u-fg-1);
  cursor: pointer;
  flex-shrink: 0;
}
.mgr-user-picker__option-add:hover {
  background: var(--u-primary);
  color: #fff;
  border-color: var(--u-primary);
}

.mgr-user-picker__footer {
  padding: 7px 12px;
  font-size: 11px;
  color: var(--u-fg-3);
  border-top: 1px solid var(--u-divider);
  background: var(--u-surface-alt);
  line-height: 1.45;
}
.mgr-user-picker__footer strong {
  color: var(--u-fg-2);
}

.mgr-user-picker__empty {
  padding: 14px 12px;
  font-size: 12.5px;
  color: var(--u-fg-3);
  text-align: center;
  font-style: italic;
}


/* ============================================================
   GROUP DETAIL HEADER — A7 csoport-adatlap fej (avatar + név + status)
   Az A8 user-detail-pattern alapján; közös vizuál (.mgr-user-detail__*-t
   újrahasználjuk a szekciókhoz). Egyetlen csoport-specifikus elem: violet
   avatar (a TriageBar group-modifier mintájára).
   ============================================================ */

.mgr-group-detail__avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--u-violet-100);
  color: var(--u-violet-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.mgr-group-detail__avatar--inactive {
  background: var(--u-surface-sunk);
  color: var(--u-fg-3);
  filter: grayscale(0.4);
}


/* ============================================================
   UNDO TOAST — direkt remove + visszavonás (G-4A)
   ============================================================ */

.mgr-undo-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--u-slate-800);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
  max-width: 360px;
  z-index: 100;
  animation: mgr-undo-toast-in 200ms var(--u-ease-out);
}
.mgr-undo-toast--inplace {
  position: absolute;
}
.mgr-undo-toast__msg strong {
  color: #fff;
  font-weight: 600;
}
.mgr-undo-toast__btn {
  background: transparent;
  border: 0;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-size: 12.5px;
  padding: 4px 6px;
}
@keyframes mgr-undo-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   RECIPIENT LIST — A5 / A9 közös organism
   Spec: 30_beallitasok 2.2 (WeeklyReportRecipient), 4.4.5, SD-59.
   A9 (Beállítások / Általános) szerkesztés-mód, A5 (riport-adatlap) read-only.
   Iter 8 R-1A: az üres állapot az informatív card-pattern-t használja
   (lásd a TenantGeneralPage-ben — a Recipient empty-állapotot a host adja).
   ============================================================ */

.mgr-rec {
  display: flex;
  flex-direction: column;
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  box-shadow: var(--u-shadow-xs);
  overflow: hidden;
}

.mgr-rec__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--u-divider);
}
.mgr-rec__item:last-child { border-bottom: 0; }

.mgr-rec__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--u-blue-100);
  color: var(--u-blue-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}

.mgr-rec__info { flex: 1; min-width: 0; }
.mgr-rec__name {
  font-size: 13.5px; font-weight: 600;
  color: var(--u-fg-1);
  line-height: 1.3;
}
.mgr-rec__email {
  font-size: 12px;
  color: var(--u-fg-3);
  font-family: var(--u-font-mono);
}

.mgr-rec__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.mgr-rec__switch {
  width: 36px; height: 20px; border-radius: 999px;
  background: var(--u-slate-300);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.mgr-rec__switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 0.15s;
}
.mgr-rec__switch.is-on { background: var(--u-green-500); }
.mgr-rec__switch.is-on::after { left: 18px; }
.mgr-rec__switch-lbl {
  font-size: 11.5px; color: var(--u-fg-3);
  min-width: 50px;
  white-space: nowrap;
}

.mgr-rec__actions {
  display: flex; gap: 4px;
  margin-left: 8px;
  flex-shrink: 0;
}
.mgr-rec__btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--u-fg-3); cursor: pointer;
  font-family: inherit; font-size: 13px;
}
.mgr-rec__btn:hover {
  background: var(--u-surface-alt);
  color: var(--u-fg-1);
  border-color: var(--u-border);
}
.mgr-rec__btn--danger:hover {
  background: var(--u-red-100);
  color: var(--u-red-700);
  border-color: var(--u-red-100);
}
.mgr-rec__item.is-inactive .mgr-rec__name,
.mgr-rec__item.is-inactive .mgr-rec__email,
.mgr-rec__item.is-inactive .mgr-rec__avatar { opacity: 0.55; }

.mgr-rec__item.is-editing {
  background: var(--u-primary-soft);
}
.mgr-rec__edit-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}
.mgr-rec__edit-input {
  padding: 6px 10px;
  background: var(--u-surface);
  border: 1px solid var(--u-blue-300);
  border-radius: 6px;
  font-family: inherit; font-size: 13px;
  color: var(--u-fg-1);
  outline: 0;
}
.mgr-rec__edit-input:focus { border-color: var(--u-primary); }
.mgr-rec__edit-actions { display: flex; gap: 6px; }
.mgr-rec__edit-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--u-border);
  background: var(--u-surface); color: var(--u-fg-1);
}
.mgr-rec__edit-btn--primary {
  background: var(--u-primary); color: white; border-color: var(--u-primary);
}

.mgr-rec__empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--u-fg-3);
  font-size: 13px;
  line-height: 1.55;
}
.mgr-rec__empty strong { color: var(--u-fg-1); font-weight: 600; }
.mgr-rec__empty-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  background: var(--u-primary); color: white;
  border: 0; padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}

.mgr-rec__add {
  padding: 10px 16px;
  background: var(--u-surface-alt);
  border-top: 1px solid var(--u-border);
  display: flex; align-items: center; gap: 10px;
}
.mgr-rec__add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px dashed var(--u-border);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: inherit; font-size: 12.5px; color: var(--u-fg-3);
  cursor: pointer;
  width: 100%;
  justify-content: center;
}
.mgr-rec__add-btn:hover {
  background: var(--u-surface);
  border-color: var(--u-primary);
  color: var(--u-primary);
}


/* ============================================================
   TENANT INFO FORM — A9 /beallitasok/altalanos Tenant alapadatok
   Iter 8 / T-1A: locked input + info-tooltip a rendszer-mezőkre
   ============================================================ */

.mgr-tif {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mgr-tif__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mgr-tif__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--u-fg-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mgr-tif__label-req { color: var(--u-red-500); }

.mgr-tif__locked-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--u-fg-4);
  font-size: 10.5px;
  font-weight: 500;
}

.mgr-tif__input {
  padding: 8px 12px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--u-fg-1);
  outline: 0;
}
.mgr-tif__input:focus {
  border-color: var(--u-primary);
  box-shadow: var(--u-focus-ring);
}
.mgr-tif__input[disabled] {
  background: var(--u-surface-alt);
  color: var(--u-fg-3);
  cursor: not-allowed;
}

.mgr-tif__hint {
  font-size: 11px;
  color: var(--u-fg-4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}


/* ============================================================
   LOGO UPLOADER — A9 /beallitasok/altalanos Logó szekció
   Iter 8 / L-1A drop-zone + tallózás · L-2A preview + akciók
   Spec: 30_beallitasok 3.3.2 (multipart POST/DELETE /v1/tenant-settings/logo)
   ============================================================ */

.mgr-logo {
  display: flex;
  flex-direction: column;
}

.mgr-logo__dropzone {
  border: 2px dashed var(--u-border);
  border-radius: 10px;
  padding: 28px 20px;
  background: var(--u-surface-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.mgr-logo__dropzone:hover,
.mgr-logo__dropzone.is-dragover {
  background: var(--u-primary-soft);
  border-color: var(--u-primary);
}
.mgr-logo__dropzone-icon {
  color: var(--u-fg-3);
  display: inline-flex;
}
.mgr-logo__dropzone-text {
  font-size: 13.5px;
  color: var(--u-fg-2);
  line-height: 1.5;
}
.mgr-logo__dropzone-text-link {
  background: transparent;
  border: 0;
  color: var(--u-primary);
  padding: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.mgr-logo__dropzone-meta {
  font-size: 11.5px;
  color: var(--u-fg-3);
}

.mgr-logo__preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px;
}

.mgr-logo__preview-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: var(--u-surface-sunk);
  object-fit: contain;
  display: block;
  box-shadow: var(--u-shadow-sm);
  flex-shrink: 0;
}
.mgr-logo__preview-fallback {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--u-primary) 0%, var(--u-blue-700) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--u-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--u-shadow-sm);
  flex-shrink: 0;
}

.mgr-logo__preview-info {
  flex: 1;
  min-width: 0;
}
.mgr-logo__preview-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgr-logo__preview-meta {
  font-size: 11.5px;
  color: var(--u-fg-3);
  margin-top: 2px;
}

.mgr-logo__preview-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.mgr-logo__hint {
  font-size: 12px;
  color: var(--u-fg-3);
  margin-top: 10px;
  line-height: 1.5;
}


/* ============================================================
   KPI CARD — A4 Dashboard "Ez a hét" sor (Tier-3-ból kiemelve)
   Spec: 40_riport 3.2, 4.1. A kártya egész kattintható → /bejelentesek
   listára előszűrve (Wow #2 lefúrás).
   ============================================================ */

.mgr-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 16px;
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: 12px;
  box-shadow: var(--u-shadow-xs);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
  min-height: 130px;
}
.mgr-kpi:hover {
  border-color: var(--u-border-strong);
  box-shadow: var(--u-shadow-sm);
}
.mgr-kpi:focus-visible {
  outline: 0;
  border-color: var(--u-primary);
  box-shadow: var(--u-focus-ring);
}

.mgr-kpi--danger { border-left: 3px solid var(--u-red-500); }

.mgr-kpi__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mgr-kpi__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--u-fg-2);
  letter-spacing: 0.005em;
}
.mgr-kpi__chev {
  color: var(--u-fg-4);
  display: inline-flex;
}
.mgr-kpi:hover .mgr-kpi__chev { color: var(--u-fg-2); }

.mgr-kpi__value {
  font-family: var(--u-font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--u-fg-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mgr-kpi--danger .mgr-kpi__value { color: var(--u-red-700); }

.mgr-kpi__hint {
  font-size: 11.5px;
  color: var(--u-fg-3);
  line-height: 1.4;
}

.mgr-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--u-fg-3);
  margin-top: 2px;
}
.mgr-kpi__delta--up   { color: var(--u-red-700); }
.mgr-kpi__delta--down { color: var(--u-green-700); }
.mgr-kpi__delta--flat { color: var(--u-fg-3); }


/* ============================================================
   TEAM PERFORMANCE TABLE — A4 csapat-teljesítmény tábla
   Spec: 40_riport 3.2.2 (TenantUser × Lezárt × Folyamatban × Átl. lezárási idő).
   A név-cella link a /bejelentesek listára (Wow #2).
   ============================================================ */

.mgr-tpt {
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: 12px;
  box-shadow: var(--u-shadow-xs);
  overflow: hidden;
}

.mgr-tpt__head {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 130px 130px 160px;
  gap: 8px;
  padding: 10px 16px;
  background: var(--u-surface-alt);
  border-bottom: 1px solid var(--u-divider);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u-fg-3);
}
.mgr-tpt__head-cell--num { text-align: right; }

.mgr-tpt__row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 130px 130px 160px;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--u-divider);
  align-items: center;
  transition: background 120ms;
}
.mgr-tpt__row:last-child { border-bottom: 0; }
.mgr-tpt__row:hover { background: var(--u-surface-alt); }

.mgr-tpt__name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mgr-tpt__name-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--u-fg-1);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgr-tpt__name-link:hover { color: var(--u-primary); text-decoration: underline; }
.mgr-tpt__name-meta {
  font-size: 11.5px;
  color: var(--u-fg-3);
  margin-top: 1px;
}

.mgr-tpt__num {
  font-family: var(--u-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--u-fg-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.mgr-tpt__num--muted { color: var(--u-fg-3); font-weight: 500; font-size: 13.5px; font-family: var(--u-font-sans); letter-spacing: 0; }
.mgr-tpt__num-link {
  text-decoration: none;
  color: inherit;
}
.mgr-tpt__num-link:hover .mgr-tpt__num { color: var(--u-primary); }

.mgr-tpt__empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--u-fg-3);
  font-size: 13px;
  line-height: 1.55;
}
.mgr-tpt__empty strong { color: var(--u-fg-1); font-weight: 600; }


/* ============================================================
   DASHBOARD PAGE — A4 /fooldal layout helpers
   ============================================================ */

.mgr-dash__section {
  margin-bottom: var(--u-space-5);
}
.mgr-dash__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--u-space-3);
}
.mgr-dash__section-title {
  font-family: var(--u-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--u-fg-1);
}
.mgr-dash__section-meta {
  font-size: 12px;
  color: var(--u-fg-3);
}

.mgr-dash__kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 960px) {
  .mgr-dash__kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .mgr-tpt__head, .mgr-tpt__row {
    grid-template-columns: minmax(160px, 2fr) 90px 90px 120px;
  }
}


/* ============================================================
   STATUS TRACK — 4-step állapot-csík az A1 adatlap-fejen
   Tier-3-ból kiemelve (eredetileg inline a tier-3.html-ben).
   Spec: 02_globalis_allapotgep + 10 4.3.
   Variánsok:
     - normál (folyamatban / done lépésekkel)
     - branched (Elutasítva — banner + halvány főág)
   ============================================================ */

.mgr-st {
  display: flex;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  box-shadow: var(--u-shadow-xs);
  position: relative;
  list-style: none;
  margin: 0;
}
.mgr-st__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  position: relative;
}
.mgr-st__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--u-surface);
  border: 2px solid var(--u-slate-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--u-slate-500);
  z-index: 1;
  font-variant-numeric: tabular-nums;
}
.mgr-st__step--done .mgr-st__dot {
  background: var(--u-green-500);
  border-color: var(--u-green-500);
  color: white;
}
.mgr-st__step--current .mgr-st__dot {
  background: var(--u-status-folyamatban-bg);
  border-color: var(--u-status-folyamatban-fg);
  color: var(--u-status-folyamatban-fg);
  box-shadow: 0 0 0 5px var(--u-status-folyamatban-bg);
}
.mgr-st__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--u-fg-2);
  text-align: center;
  white-space: nowrap;
}
.mgr-st__step--current .mgr-st__label {
  color: var(--u-fg-1);
  font-weight: 600;
}
.mgr-st__step--done .mgr-st__label { color: var(--u-fg-2); }
.mgr-st__date {
  font-size: 11.5px;
  color: var(--u-fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Connector */
.mgr-st__step + .mgr-st__step::before {
  content: '';
  position: absolute;
  top: 14px;
  right: calc(50% + 18px);
  left: calc(-50% + 18px);
  height: 2px;
  background: var(--u-slate-300);
}
.mgr-st__step--done + .mgr-st__step::before,
.mgr-st__step--current + .mgr-st__step::before {
  background: var(--u-green-500);
}

/* Branched — Elutasítva mellékág banner + halvány főág */
.mgr-st-branch {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mgr-st-branch__banner {
  background: var(--u-status-elutasitva-bg);
  border: 1px solid var(--u-red-100);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mgr-st-branch__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--u-red-500);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
}
.mgr-st-branch__title {
  font-family: var(--u-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--u-red-700);
}
.mgr-st-branch__reason {
  font-size: 13px;
  color: var(--u-fg-2);
  margin-top: 2px;
  line-height: 1.5;
}
.mgr-st-branch__actor {
  font-size: 11.5px;
  color: var(--u-fg-3);
  margin-top: 4px;
}
.mgr-st-branch .mgr-st { opacity: 0.5; }


/* ============================================================
   WEEKLY REPORT CARD — A4 dashboard + A5 archívum / adatlap
   Tier-3-ból kiemelve (eredetileg inline a tier-3.html-ben).
   Spec: 40_riport 4. (heti PDF-riport letöltő + meta + delivery state).
   Variánsok: full (dashboard sticky) vagy compact (archívum-soron).
   ============================================================ */

.mgr-wrc {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  box-shadow: var(--u-shadow-xs);
}
.mgr-wrc__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--u-blue-50);
  color: var(--u-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mgr-wrc__body { flex: 1; min-width: 0; }
.mgr-wrc__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--u-fg-1);
  line-height: 1.3;
}
.mgr-wrc__meta {
  font-size: 12.5px;
  color: var(--u-fg-3);
  margin-top: 4px;
  line-height: 1.4;
}
.mgr-wrc__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  background: var(--u-green-100);
  color: var(--u-green-700);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mgr-wrc__status--partial { background: var(--u-amber-100); color: var(--u-amber-700); }
.mgr-wrc__status--failed  { background: var(--u-red-100);   color: var(--u-red-700); }
.mgr-wrc__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mgr-wrc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--u-border);
  background: var(--u-surface);
  color: var(--u-fg-1);
  white-space: nowrap;
  text-decoration: none;
}
.mgr-wrc-btn:hover { background: var(--u-surface-alt); }
.mgr-wrc-btn--primary {
  border: 0;
  background: var(--u-primary);
  color: white;
}
.mgr-wrc-btn--primary:hover { background: var(--u-blue-700); }

/* Compact (archívum-soron) */
.mgr-wrc--compact {
  padding: 12px 16px;
  gap: 14px;
}
.mgr-wrc--compact .mgr-wrc__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.mgr-wrc--compact .mgr-wrc__title { font-size: 13.5px; }
.mgr-wrc--compact .mgr-wrc__meta { font-size: 11.5px; }
.mgr-wrc--compact .mgr-wrc-btn {
  height: 28px;
  padding: 0 12px;
  font-size: 11.5px;
}


/* ============================================================
   CONTENT EDITOR — A10 Hír, A11 Programok, A12 Városi infó
   Tier-3 tartalom-ág organism-családja. Korábban a
   tier-3-content.html-ben inline élt — S11-ben kiemelve.
   Komponensek (önálló organism-fájlok):
     - publish-state-chip.jsx       (.mgr-pub-chip)
     - photo-gallery.jsx            (.mgr-gallery)
     - photo-uploader.jsx           (.mgr-uploader + .mgr-photo-uploader)
     - rich-text-editor.jsx         (.mgr-rte)
     - cover-image-uploader.jsx     (.mgr-cover-uploader)
     - content-editor.jsx           (.mgr-editor + .mgr-ce-field)
   ============================================================ */

/* PublishStateChip */
.mgr-pub-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mgr-pub-chip__dot { width: 6px; height: 6px; border-radius: 50%; }
.mgr-pub-chip--draft {
  background: var(--u-surface-sunk); color: var(--u-fg-2);
}
.mgr-pub-chip--draft .mgr-pub-chip__dot { background: var(--u-slate-400); }
.mgr-pub-chip--published {
  background: var(--u-green-100); color: var(--u-green-700);
}
.mgr-pub-chip--published .mgr-pub-chip__dot { background: var(--u-green-500); }
.mgr-pub-chip--archived {
  background: var(--u-slate-100); color: var(--u-slate-700);
}
.mgr-pub-chip--archived .mgr-pub-chip__dot { background: var(--u-slate-500); }

/* ============================================================
   Self-aware identity chip — "Te" jelölés cross-screen pattern.
   Kanonikus class az A8 lista + A7 csoport-tagok + A11 felelős-cella
   self-row jelölésére (D-19, 2026.05.26).
   ============================================================ */
.u-self-chip {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  background: var(--u-blue-50);
  color: var(--u-blue-700);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--u-blue-200);
  margin-left: 6px;
  line-height: 1.4;
}


/* PhotoGallery — 3-col grid */
.mgr-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--u-space-3);
}
.mgr-gallery__cell {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--u-amber-100), var(--u-slate-300));
  color: var(--u-amber-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 0;
  font-family: inherit;
}
.mgr-gallery__cell--more {
  background: var(--u-surface-sunk);
  color: var(--u-fg-2);
  font-size: 18px;
  font-weight: 700;
  cursor: default;
}
.mgr-gallery__cap {
  position: absolute;
  left: 8px; bottom: 8px;
  background: rgba(0,0,0,0.55); color: white;
  padding: 1px 7px; border-radius: 4px;
  font-size: 10.5px; font-weight: 500;
}


/* PhotoUploader */
.mgr-photo-uploader { display: flex; flex-direction: column; }
.mgr-uploader {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  background: var(--u-surface-sunk);
  border: 2px dashed var(--u-border-strong);
  border-radius: var(--u-card-radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mgr-uploader:hover {
  border-color: var(--u-primary);
  background: var(--u-blue-50);
}
.mgr-uploader--disabled { opacity: 0.5; pointer-events: none; }
.mgr-uploader__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--u-primary-soft);
  color: var(--u-blue-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.mgr-uploader__text {
  font-size: 13.5px;
  color: var(--u-fg-1);
  text-align: center;
}
.mgr-uploader__hint {
  font-size: 11.5px;
  color: var(--u-fg-3);
}
.mgr-uploader__preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.mgr-uploader__thumb {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--u-amber-100), var(--u-slate-300));
  color: var(--u-amber-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  position: relative;
  overflow: hidden;
}
.mgr-uploader__thumb-remove {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6); color: white;
  border: 0; cursor: pointer;
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
}


/* RichTextEditor */
.mgr-rte {
  border: 1px solid var(--u-border);
  border-radius: 8px;
  background: var(--u-surface);
  overflow: hidden;
}
.mgr-rte__toolbar {
  display: flex; gap: 1px;
  padding: 4px 6px;
  background: var(--u-surface-alt);
  border-bottom: 1px solid var(--u-border);
}
.mgr-rte__btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  border-radius: 5px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--u-fg-2); cursor: pointer;
}
.mgr-rte__btn:hover { background: var(--u-surface); color: var(--u-fg-1); }
.mgr-rte__btn--active { background: var(--u-primary-soft); color: var(--u-blue-700); }
.mgr-rte__sep {
  width: 1px;
  background: var(--u-border);
  margin: 4px 4px;
}
.mgr-rte__body {
  min-height: 140px;
  padding: 14px;
  font-size: 14px; line-height: 1.6;
  color: var(--u-fg-1);
  outline: 0;
}
.mgr-rte__body strong { font-weight: 700; }
.mgr-rte__body em { font-style: italic; }
.mgr-rte__body a { color: var(--u-primary); text-decoration: underline; }
.mgr-rte__body ul, .mgr-rte__body ol { padding-left: 22px; margin: 8px 0; }
.mgr-rte__body ul li, .mgr-rte__body ol li { margin-bottom: 4px; }


/* CoverImageUploader */
.mgr-cover-uploader { width: 100%; }
.mgr-cover-uploader__dropzone {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 9;
  background: var(--u-surface-sunk);
  border: 2px dashed var(--u-border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mgr-cover-uploader__dropzone:hover {
  border-color: var(--u-primary);
  background: var(--u-blue-50);
}
.mgr-cover-uploader__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--u-primary-soft);
  color: var(--u-blue-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.mgr-cover-uploader__text { font-size: 14px; color: var(--u-fg-1); }
.mgr-cover-uploader__hint { font-size: 11.5px; color: var(--u-fg-3); }
.mgr-cover-uploader__preview {
  position: relative;
}
.mgr-cover-uploader__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.mgr-cover-uploader__fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--u-amber-100), var(--u-blue-100));
  color: var(--u-amber-700);
  font-size: 36px;
}
.mgr-cover-uploader__actions {
  position: absolute;
  bottom: 10px; right: 10px;
  display: flex; gap: 6px;
}
.mgr-cover-uploader__btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.65); color: white;
  border: 0;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.mgr-cover-uploader__btn:hover { background: rgba(0,0,0,0.8); }
.mgr-cover-uploader__btn--danger { color: #ffd1d1; }
.mgr-cover-uploader__meta {
  margin-top: 8px;
  font-size: 12px; color: var(--u-fg-3);
  font-family: var(--u-font-mono);
}
.mgr-cover-uploader__meta strong { color: var(--u-fg-2); font-weight: 600; }
.mgr-cover-uploader__error {
  margin-top: 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--u-red-500) 8%, white);
  border: 1px solid var(--u-red-500);
  border-radius: 6px;
  font-size: 12px; color: var(--u-red-700);
}


/* ContentEditor — split-view layout */
.mgr-editor {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--u-space-5);
}
.mgr-editor--single {
  grid-template-columns: 1fr;
  max-width: 760px;
}
@media (max-width: 980px) {
  .mgr-editor { grid-template-columns: 1fr; }
}
.mgr-editor__col {
  background: var(--u-card-bg);
  border: 1px solid var(--u-border);
  border-radius: var(--u-card-radius);
  box-shadow: var(--u-shadow-xs);
  padding: var(--u-space-5);
  display: flex; flex-direction: column;
  gap: var(--u-space-4);
}
.mgr-editor__col--preview {
  background: var(--u-bg);
  padding: 0;
  overflow: hidden;
}
.mgr-editor__col-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: var(--u-space-3);
  border-bottom: 1px solid var(--u-divider);
}
.mgr-editor__col--preview .mgr-editor__col-header {
  padding: var(--u-space-4) var(--u-space-5);
  border-bottom: 1px solid var(--u-border);
  margin: 0;
}
.mgr-editor__col-title {
  font-family: var(--u-font-display);
  font-size: 14px; font-weight: 700;
  color: var(--u-fg-1);
  letter-spacing: -0.01em;
}
.mgr-editor__col-meta {
  font-size: 11.5px;
  color: var(--u-fg-3);
  margin-left: auto;
}
.mgr-editor__preview {
  flex: 1;
  padding: var(--u-space-4);
  overflow: auto;
}

/* Form-fields inside ContentEditor — namespaced as mgr-ce-field */
.mgr-ce-field { display: flex; flex-direction: column; gap: 4px; }
.mgr-ce-field__label {
  font-size: 12.5px; font-weight: 500;
  color: var(--u-fg-2);
  display: flex; align-items: center; gap: 4px;
}
.mgr-ce-field__label-req { color: var(--u-red-500); }
.mgr-ce-field__input,
.mgr-ce-field__textarea {
  padding: 10px 12px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  font-family: inherit; font-size: 14px;
  color: var(--u-fg-1);
  outline: 0;
  width: 100%;
}
.mgr-ce-field__input:focus,
.mgr-ce-field__textarea:focus {
  border-color: var(--u-primary);
  box-shadow: 0 0 0 3px var(--u-primary-soft);
}
.mgr-ce-field__textarea { min-height: 80px; line-height: 1.55; resize: vertical; }
.mgr-ce-field__hint { font-size: 11.5px; color: var(--u-fg-3); margin-top: 1px; }
.mgr-ce-field--error .mgr-ce-field__input,
.mgr-ce-field--error .mgr-ce-field__textarea {
  border-color: var(--u-red-500);
  background: color-mix(in srgb, var(--u-red-500) 4%, white);
}
.mgr-ce-field__error {
  display: inline-flex; gap: 5px;
  font-size: 12px;
  color: var(--u-red-700);
  font-weight: 500;
  margin-top: 2px;
}

/* Publish-bar inside ContentEditor */
.mgr-editor__pub-bar {
  display: flex; align-items: center; gap: 10px;
  padding: var(--u-space-3) var(--u-space-4);
  background: var(--u-surface-sunk);
  border: 1px solid var(--u-border);
  border-radius: 10px;
  margin-top: var(--u-space-2);
}
.mgr-editor__pub-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--u-border);
  background: var(--u-surface); color: var(--u-fg-1);
}
.mgr-editor__pub-btn:hover { background: var(--u-surface-alt); }
.mgr-editor__pub-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.mgr-editor__pub-btn--primary {
  background: var(--u-primary); color: white; border-color: var(--u-primary);
}
.mgr-editor__pub-btn--primary:hover { background: var(--u-blue-700); }
.mgr-editor__pub-btn--danger {
  border-color: transparent;
  background: transparent;
  color: var(--u-red-700);
}
.mgr-editor__pub-btn--danger:hover { background: color-mix(in srgb, var(--u-red-500) 8%, white); }


/* ============================================================
   DateTimeRangePicker — A11 Programok kötelező időtartam
   S13 UX-döntés (2026.05.24): A · KÉT KÜLÖN INPUT
   ============================================================ */

.mgr-dtp { display: flex; flex-direction: column; gap: 6px; }
.mgr-dtp__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: end;
}
.mgr-dtp__arrow {
  color: var(--u-fg-3);
  font-size: 18px;
  padding-bottom: 14px;
}
.mgr-dtp__field {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mgr-dtp__field-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--u-fg-3);
  letter-spacing: 0.02em;
}
.mgr-dtp__field-control {
  position: relative;
  display: flex; align-items: center;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 8px;
}
.mgr-dtp__field-control:focus-within {
  border-color: var(--u-primary);
  box-shadow: 0 0 0 3px var(--u-primary-soft);
}
.mgr-dtp__field-icon { color: var(--u-fg-3); flex-shrink: 0; font-size: 14px; }
.mgr-dtp__field-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  font-family: var(--u-font-mono);
  font-size: 13px;
  color: var(--u-fg-1);
  min-width: 0;
  padding: 0;
}
.mgr-dtp__field-display {
  position: absolute;
  left: 36px; right: 36px;
  background: var(--u-surface);
  font-family: var(--u-font-sans);
  font-size: 13px;
  color: var(--u-fg-1);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgr-dtp__field-control:focus-within .mgr-dtp__field-display,
.mgr-dtp__field-control:hover .mgr-dtp__field-display {
  display: none;
}
.mgr-dtp__field--error .mgr-dtp__field-control {
  border-color: var(--u-red-500);
  background: color-mix(in srgb, var(--u-red-500) 4%, white);
}
.mgr-dtp__field-error {
  font-size: 11.5px;
  color: var(--u-red-700);
  font-weight: 500;
  margin-top: 2px;
}
.mgr-dtp__same-day-hint {
  font-size: 12px;
  color: var(--u-fg-2);
  padding: 6px 10px;
  background: var(--u-primary-soft);
  border-radius: 6px;
  margin-top: 4px;
}
.mgr-dtp__same-day-hint strong {
  color: var(--u-blue-700);
  font-family: var(--u-font-mono);
}
.mgr-dtp--error .mgr-dtp__field-control {
  border-color: var(--u-red-500);
}
.mgr-dtp__error {
  display: inline-flex; gap: 5px;
  font-size: 12px;
  color: var(--u-red-700);
  font-weight: 500;
  margin-top: 2px;
}


/* ============================================================
   LinkValidator — A12 cityinfo URL-mező
   S15 UX-döntés: on-blur validáció + state indikátor + favicon.
   ============================================================ */

.mgr-lv { display: flex; flex-direction: column; gap: 6px; }
.mgr-lv__row {
  display: flex; align-items: center;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 10px;
}
.mgr-lv__row:focus-within {
  border-color: var(--u-primary);
  box-shadow: 0 0 0 3px var(--u-primary-soft);
}
.mgr-lv__icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--u-fg-3);
  font-size: 14px;
  flex-shrink: 0;
}
.mgr-lv__favicon { width: 16px; height: 16px; border-radius: 2px; }
.mgr-lv__spin { display: inline-block; animation: lv-spin 1s linear infinite; color: var(--u-amber-700); }
@keyframes lv-spin { to { transform: rotate(360deg); } }
.mgr-lv__input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  font-family: var(--u-font-mono);
  font-size: 13px;
  color: var(--u-fg-1);
}
.mgr-lv__retry {
  background: transparent;
  border: 0;
  width: 24px; height: 24px;
  border-radius: 5px;
  color: var(--u-fg-3);
  cursor: pointer;
  font-family: inherit;
}
.mgr-lv__retry:hover { background: var(--u-surface-alt); color: var(--u-fg-1); }
.mgr-lv__status {
  font-size: 12px;
  padding: 0 4px;
}
.mgr-lv--valid .mgr-lv__status { color: var(--u-green-700); }
.mgr-lv--valid .mgr-lv__icon { color: var(--u-green-700); }
.mgr-lv--invalid .mgr-lv__row,
.mgr-lv--unreachable .mgr-lv__row {
  border-color: var(--u-red-500);
  background: color-mix(in srgb, var(--u-red-500) 4%, white);
}
.mgr-lv--invalid .mgr-lv__icon,
.mgr-lv--unreachable .mgr-lv__icon { color: var(--u-red-700); }
.mgr-lv--invalid .mgr-lv__status,
.mgr-lv--unreachable .mgr-lv__status { color: var(--u-red-700); }
.mgr-lv--loading .mgr-lv__status { color: var(--u-amber-700); }
.mgr-lv__status-meta { color: var(--u-fg-3); }
.mgr-lv__error {
  display: inline-flex; gap: 5px;
  font-size: 12px;
  color: var(--u-red-700);
  font-weight: 500;
  margin-top: 2px;
}


/* ============================================================
   A12 ReorderableList — drag-handle pattern a cityinfo-listához
   ============================================================ */

.a12-list {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 10px;
  overflow: hidden;
}
.a12-row {
  display: grid;
  grid-template-columns: 36px 1fr 200px 100px 130px 16px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--u-divider);
  background: var(--u-surface);
}
.a12-row:last-child { border-bottom: 0; }
.a12-row:hover { background: var(--u-surface-alt); }
.a12-row__grip {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--u-fg-4);
  cursor: grab;
  border-radius: 4px;
}
.a12-row__grip:hover { background: var(--u-surface-sunk); color: var(--u-fg-2); }
.a12-row__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a12-row__title-main { font-weight: 500; color: var(--u-fg-1); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a12-row__title-desc { font-size: 11.5px; color: var(--u-fg-3); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.a12-row__url {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--u-font-mono);
  font-size: 11.5px;
  color: var(--u-fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a12-row__url-favicon { width: 14px; height: 14px; flex-shrink: 0; border-radius: 2px; background: var(--u-surface-sunk); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: var(--u-fg-3); }
.a12-row__url-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a12-row__date { font-family: var(--u-font-mono); font-size: 11.5px; color: var(--u-fg-3); }
.a12-row__chev { color: var(--u-fg-4); }