/* ============================================================
   DistriX — közös design-rendszer (tokenek + komponensek)
   Forrás: .planning/prompts/00-KOZOS-design-rendszer.md
   Minden admin-képernyő EZT tölti be — képernyő-specifikus stílus
   csak az adott nézetben lehet, token-értéket felülírni tilos.
   ============================================================ */

/* ---------- 1. Design-tokenek ---------- */
:root {
  color-scheme: light dark;

  /* Térköz — 4px alapú skála */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Tipográfia */
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
  --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;
  --lh-tight: 1.25; --lh-base: 1.5;

  /* Sugár, keret */
  --radius: 5px; --radius-lg: 8px;
  --border: 1px solid var(--c-line);

  /* Semleges skála (világos) */
  --c-bg: #fff; --c-bg-sunken: #f6f7f9; --c-bg-raised: #fff;
  --c-line: #e2e5ea; --c-line-strong: #c7ccd4;
  --c-text: #14181f; --c-text-muted: #667085; --c-text-faint: #98a2b3;

  /* Akcent és szemantika */
  --c-accent: #1a56db;  --c-accent-bg: #eef3fe;
  --c-ok: #067647;      --c-ok-bg: #e9f6ef;
  --c-warn: #b54708;    --c-warn-bg: #fef5e7;
  --c-danger: #b42318;  --c-danger-bg: #fdecea;
  --c-info: #175cd3;    --c-info-bg: #eff6ff;

  /* Domain-színek — JELENTÉSHORDOZÓK, ne írd felül */
  --c-cold: #0e7490;      /* hűtött (chilled) */
  --c-frozen: #1e40af;    /* fagyasztott (frozen) */
  --c-adr: #c2410c;       /* veszélyes áru */
  --c-cod: #7c3aed;       /* utánvét */
  --c-pickup: #0f766e;    /* felvételi megálló */

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --focus: 0 0 0 2px var(--c-bg-raised), 0 0 0 4px var(--c-accent);

  /* App-váz */
  --nav-w: 240px;
  --insp-w: 600px;
  --tree-w: 280px;
  /* Sűrűség: kompakt az alap; a "Kényelmes" váltó írja felül (localStorage). */
  --row-pad: 7px;
  --row-h: 32px;
}
:root[data-density="comfortable"] { --row-pad: 12px; --row-h: 40px; }

/* Sötét téma — automatikus (rendszer szerint), CSAK ha nincs kézi felülbírálás.
   A raktárban/autóban sötét, az irodában világos kell. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #14171c; --c-bg-sunken: #0f1115; --c-bg-raised: #1b1f26;
    --c-line: #2a3039; --c-line-strong: #3d4552;
    --c-text: #e8eaed; --c-text-muted: #9aa3b0; --c-text-faint: #6b7480;
    --c-accent: #6395f5; --c-accent-bg: #1a2337;
    --c-ok: #4ade80; --c-ok-bg: #12251b;
    --c-warn: #fbbf24; --c-warn-bg: #2a1f0d;
    --c-danger: #f87171; --c-danger-bg: #2b1414;
    --c-info: #60a5fa; --c-info-bg: #10243d;
  }
}
/* Sötét téma — kézi váltó. Felülírja a rendszer-beállítást. */
:root[data-theme="dark"] {
  --c-bg: #14171c; --c-bg-sunken: #0f1115; --c-bg-raised: #1b1f26;
  --c-line: #2a3039; --c-line-strong: #3d4552;
  --c-text: #e8eaed; --c-text-muted: #9aa3b0; --c-text-faint: #6b7480;
  --c-accent: #6395f5; --c-accent-bg: #1a2337;
  --c-ok: #4ade80; --c-ok-bg: #12251b;
  --c-warn: #fbbf24; --c-warn-bg: #2a1f0d;
  --c-danger: #f87171; --c-danger-bg: #2b1414;
  --c-info: #60a5fa; --c-info-bg: #10243d;
}

/* ---------- 2. Alap ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg-sunken);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* a body sosem görög vízszintesen */
}
svg { display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); }

/* :focus-visible mindenütt — hozzáférhetőségi szabály (00. dok. 8.) */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }

/* ---------- 3. Színpad + kártya (belépés-jellegű, központozott képernyők) ---------- */
.stage { flex: 1; display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.card-region { display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); }
.card {
  width: 100%; max-width: 404px;
  background: var(--c-bg-raised);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  /* Nincs nagy árnyék, nincs gradiens — csendes műszer, nem landing page. */
}

.brand {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em;
  color: var(--c-text);
}
.brand svg { width: 24px; height: 24px; color: var(--c-accent); }

.state-icon {
  margin: var(--sp-5) auto var(--sp-4);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--c-accent);
  background: var(--c-accent-bg);
  border-radius: 50%;
}
.state-icon svg { width: 24px; height: 24px; }
.state-icon.tone-danger { color: var(--c-danger); background: var(--c-danger-bg); }
.state-icon.tone-warn   { color: var(--c-warn);   background: var(--c-warn-bg); }
.state-icon.tone-ok     { color: var(--c-ok);     background: var(--c-ok-bg); }
.state-icon.tone-muted  { color: var(--c-text-muted); background: var(--c-bg-sunken); }

.card h1 { font-size: var(--fs-lg); font-weight: 600; text-align: center; margin: 0 0 var(--sp-2); line-height: var(--lh-tight); }
.card .sub { font-size: var(--fs-md); color: var(--c-text-muted); text-align: center; margin: 0 0 var(--sp-5); line-height: var(--lh-base); }
.card .sub.tight { margin-bottom: var(--sp-4); }

/* ---------- 4. Űrlapmezők ---------- */
.field { margin-bottom: var(--sp-4); }
.field > label, .field .field-row label { display: block; font-size: var(--fs-sm); font-weight: 550; margin-bottom: var(--sp-1); color: var(--c-text); }
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.control { position: relative; }
.control input {
  width: 100%; font: inherit; font-size: var(--fs-base);
  color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  padding: 9px var(--sp-3); height: 38px;
}
.control.has-affix input { padding-right: 40px; }
.control input::placeholder { color: var(--c-text-faint); }
.control input:hover { border-color: var(--c-line-strong); }
.control input:focus-visible { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-bg); outline: none; }
.control input[aria-invalid="true"] { border-color: var(--c-danger); }
.affix {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius);
  color: var(--c-text-faint); cursor: pointer;
}
.affix:hover { color: var(--c-text-muted); }
.affix svg { width: 18px; height: 18px; }
.field-hint { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 5px; }
.field-hint.error { color: var(--c-danger); }

.remember-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); color: var(--c-text-muted); cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--c-accent); margin: 0; }

/* ---------- 5. Gombok / linkek ----------
   Alap: kompakt eszköztár-gomb (32px). Az auth-kártyában (.card) teljes
   szélességű, 40px-es változat — egy komponens, két kontextus. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 var(--sp-3);
  font-size: var(--fs-md); font-weight: 550;
  border-radius: var(--radius); border: var(--border); cursor: pointer;
  background: var(--c-bg); color: var(--c-text);
  text-decoration: none;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover { background: var(--c-bg-sunken); border-color: var(--c-line-strong); }
.btn svg { width: 15px; height: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.btn-primary:hover { background: var(--c-accent); filter: brightness(.94); }
.btn-primary:disabled { opacity: .6; filter: none; }
.btn-ghost { background: var(--c-bg); color: var(--c-text); border-color: var(--c-line-strong); }
.btn-ghost:hover { background: var(--c-bg-sunken); }
.btn.pending { pointer-events: none; }
.card .btn { width: 100%; height: 40px; font-size: var(--fs-base); font-weight: 600; gap: var(--sp-2); }

.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-accent); font-size: var(--fs-md); font-weight: 550; text-decoration: none;
}
.link:hover { text-decoration: underline; }
.link.muted { color: var(--c-text-muted); font-weight: 500; }
.link[aria-disabled="true"] { color: var(--c-text-faint); cursor: default; pointer-events: none; text-decoration: none; }
.back-link { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--sp-4); }
.back-link svg { width: 15px; height: 15px; }
.center-actions { text-align: center; margin-top: var(--sp-4); }

/* elválasztó „vagy" */
.divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; color: var(--c-text-faint); font-size: var(--fs-sm); }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--c-line); flex: 1; }

/* inaktív helyfoglaló gomb (pl. „Belépés biztonsági kulccsal — Hamarosan") */
.btn-passkey {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 40px; border-radius: var(--radius);
  border: 1px dashed var(--c-line-strong); background: var(--c-bg);
  color: var(--c-text-faint); font-size: var(--fs-md); font-weight: 550;
  cursor: not-allowed;
}
.btn-passkey svg { width: 16px; height: 16px; }
.soon { font-size: var(--fs-xs); font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--c-bg-sunken); color: var(--c-text-muted); border: 1px solid var(--c-line); }

/* ---------- 6. Figyelmeztető sávok ---------- */
.banner {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-md); line-height: var(--lh-base);
  padding: var(--sp-3); border-radius: var(--radius);
  border: 1px solid; margin-bottom: var(--sp-4);
}
.banner svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.banner-danger { background: var(--c-danger-bg); border-color: var(--c-danger); color: var(--c-danger); }
.banner-warn { background: var(--c-warn-bg); border-color: var(--c-warn); color: var(--c-warn); }
.banner-info { background: var(--c-info-bg); border-color: var(--c-info); color: var(--c-info); }
.banner-ok { background: var(--c-ok-bg); border-color: var(--c-ok); color: var(--c-ok); }

/* kiemelt elérhetőség (support e-mail) */
.contact { display: block; text-align: center; font-family: var(--font-mono); font-size: var(--fs-md); color: var(--c-accent); margin-top: var(--sp-4); }

/* ---------- 7. Spinner (kizárólag folyamatban lévő beküldés gombjában) ---------- */
.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 8. Lábléc (belépés-jellegű képernyők alja: téma-váltó) ---------- */
.page-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  font-size: var(--fs-xs); color: var(--c-text-faint);
}
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--c-line); border-radius: 999px;
  padding: 3px 10px; color: var(--c-text-muted); cursor: pointer; font-size: var(--fs-xs);
}
.theme-toggle:hover { border-color: var(--c-line-strong); color: var(--c-text); }
.theme-toggle svg { width: 13px; height: 13px; }
.page-footer .help { color: var(--c-text-faint); pointer-events: none; }

/* ---------- 9. Toast ---------- */
.toast-wrap { position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 50; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 320px; }
.toast {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--c-bg-raised); border: var(--border); border-left: 3px solid var(--c-ok);
  border-radius: var(--radius); padding: var(--sp-3);
  font-size: var(--fs-md); color: var(--c-text);
  animation: toast-in .18s ease-out;
}
.toast svg { width: 16px; height: 16px; color: var(--c-ok); flex: none; }
.toast.tone-danger { border-left-color: var(--c-danger); }
.toast.tone-danger svg { color: var(--c-danger); }
.toast .close { margin-left: auto; background: none; border: 0; color: var(--c-text-faint); cursor: pointer; padding: 2px; }
.toast .close svg { width: 14px; height: 14px; color: currentColor; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   11. APP-VÁZ — fejléc + bal navigáció + munkaterület
   (minden bejelentkezett képernyő ugyanezt használja, 00. dok. 3.)
   ============================================================ */
body.app-body { height: 100dvh; overflow: hidden; }
.app {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-rows: 52px 1fr;
  grid-template-areas: "hd hd" "nav main";
}

/* Fejléc */
.hd { grid-area: hd; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3);
  background: var(--c-bg-raised); border-bottom: var(--border); z-index: 20; }
.hd .brand { font-size: var(--fs-lg); justify-content: flex-start; }
.hd .brand svg { width: 22px; height: 22px; }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius);
  color: var(--c-text-muted); position: relative; background: none; border: 0; cursor: pointer; }
.iconbtn:hover { background: var(--c-bg-sunken); color: var(--c-text); }
.iconbtn svg { width: 19px; height: 19px; }
.hd-sep { width: 1px; height: 24px; background: var(--c-line); }
.hd-spacer { flex: 1; }
.switch {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 34px; padding: 0 var(--sp-2) 0 var(--sp-3);
  border: var(--border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text);
  font-size: var(--fs-md); max-width: 210px; cursor: pointer;
}
.switch svg { width: 15px; height: 15px; color: var(--c-text-faint); flex: none; }
.switch .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch:hover { background: var(--c-bg-sunken); }
.badge-count {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--c-danger); color: #fff; font-size: 9px; font-weight: 700; line-height: 15px;
  text-align: center; border-radius: 999px;
}
.badge-count[data-zero="true"] { display: none; }

/* Bal navigáció */
.nav { grid-area: nav; background: var(--c-bg-raised); border-right: var(--border); overflow-y: auto; overflow-x: hidden; }
.nav-inner { padding: var(--sp-2) 0 var(--sp-6); }
.nav-group-h { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-faint); padding: var(--sp-3) var(--sp-4) var(--sp-1); }
.nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-4); margin: 1px var(--sp-2);
  border-radius: var(--radius); color: var(--c-text-muted); font-size: var(--fs-md); white-space: nowrap; cursor: pointer; }
.nav-item:hover { background: var(--c-bg-sunken); color: var(--c-text); }
.nav-item.active { background: var(--c-accent-bg); color: var(--c-accent); font-weight: 600; }
.nav-item .ico { width: 18px; height: 18px; flex: none; }
.nav-item .ico svg { width: 18px; height: 18px; }
.nav-item.lead { font-weight: 600; color: var(--c-text); }
.nav-item.lead.active { color: var(--c-accent); }
/* még nem elkészült képernyő: látszik (a jog megvan), de nem vezet sehova
   (az "inactive" név szándékos: a .soon a "Hamarosan"-badge osztálya) */
.nav-item.inactive { color: var(--c-text-faint); cursor: default; }
.nav-item.inactive:hover { background: none; color: var(--c-text-faint); }
/* Összecsukott állapot — csak ikon (desktop) */
body[data-nav="collapsed"] { --nav-w: 56px; }
body[data-nav="collapsed"] .nav-group-h { text-align: center; padding: var(--sp-3) 0 var(--sp-1); font-size: 0; }
body[data-nav="collapsed"] .nav-group-h::after { content: "•"; font-size: 12px; }
body[data-nav="collapsed"] .nav-item { justify-content: center; padding: 8px 0; }
body[data-nav="collapsed"] .nav-item .lbl { display: none; }

/* Túragenerátor (fejlesztői/teszt eszköz) a sidebar alján. */
.nav-tool { margin: var(--sp-4) var(--sp-2) 0; padding-top: var(--sp-3); border-top: var(--border); }
.nav-tool-h { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 6px var(--sp-3);
  background: none; border: 0; cursor: pointer; color: var(--c-text-muted); font: inherit; border-radius: var(--radius); }
.nav-tool-h:hover { background: var(--c-bg-sunken); color: var(--c-text); }
.nav-tool-h .ico { width: 18px; height: 18px; flex: none; }
.nav-tool-h .ico svg { width: 18px; height: 18px; }
.nav-tool-h .lbl { flex: 1; text-align: left; }
.nav-tool-h .tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-warn); background: var(--c-warn-bg); padding: 1px 5px; border-radius: 999px; }
.nav-tool-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.nav-tool-body label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--c-text-muted); }
.nav-tool-body input { padding: 4px 6px; border: var(--border); border-radius: var(--radius);
  background: var(--c-bg); color: var(--c-text); font: inherit; font-size: var(--fs-sm); }
.nav-tool-note { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-text-faint); line-height: 1.4; }
/* Összecsukott sidebarban a generátor elrejtve (nincs értelme ikon-csíkban). */
body[data-nav="collapsed"] .nav-tool { display: none; }

/* Munkaterület */
.main { grid-area: main; overflow-y: auto; overflow-x: hidden; padding: var(--sp-4) var(--sp-5) var(--sp-7); }
.greet { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.greet h1 { font-size: var(--fs-xl); font-weight: 600; margin: 0; }
.greet .date { color: var(--c-text-muted); font-size: var(--fs-md); }
.greet .role-pill { font-size: var(--fs-sm); color: var(--c-text-muted); border: var(--border); border-radius: 999px; padding: 2px 10px; }

/* ============================================================
   12. ÁTTEKINTÉS-KOMPONENSEK — csík, csempék, panelek
   ============================================================ */
.timeline-wrap { background: var(--c-bg-raised); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.timeline-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); gap: var(--sp-3); flex-wrap: wrap; }
.timeline-head .t { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.timeline-legend { display: flex; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--c-text-faint); flex-wrap: wrap; }
.timeline-legend span { display: inline-flex; align-items: center; gap: 5px; }
.timeline-scroll { overflow-x: auto; } /* széles tartalom SAJÁT konténerben görög, sosem a body */
.timeline-empty { text-align: center; color: var(--c-text-faint); font-size: var(--fs-md); padding: var(--sp-4) 0; }

/* túra-sor a csíkban: színkód (= a board térképén is), előrehaladás, állapot */
.tour-strip { display: flex; flex-direction: column; gap: 6px; min-width: 560px; }
.tour-row { display: grid; grid-template-columns: 64px 1fr 88px auto; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.tour-row .tid { font-family: var(--font-mono); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--c-text); }
.tour-row .tid i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.tour-row .stops { text-align: right; font-variant-numeric: tabular-nums; color: var(--c-text-muted); white-space: nowrap; }
.tour-row .who { color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* Csempe-grid */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.tile { background: var(--c-bg-raised); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 132px;
  color: inherit; text-decoration: none; transition: border-color .12s; }
a.tile { cursor: pointer; }
a.tile:hover { border-color: var(--c-line-strong); }
.tile .t-title { font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 550; }
.tile .t-big { font-size: var(--fs-2xl); font-weight: 680; line-height: 1; letter-spacing: -.02em; }
.tile .t-big.warn { color: var(--c-warn); }
.tile .t-big.danger { color: var(--c-danger); }
.tile .t-big.ok { color: var(--c-ok); }
.tile .t-sub { font-size: var(--fs-sm); color: var(--c-text-muted); }
.tile .t-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tile .t-link { font-size: var(--fs-sm); color: var(--c-accent); font-weight: 550; display: inline-flex; align-items: center; gap: 3px; }
.tile .t-link svg { width: 13px; height: 13px; }
.tile.span2 { grid-column: span 2; }
.tile-empty, .tile-error { justify-content: center; }
.tile-empty .ic, .tile-error .ic { width: 22px; height: 22px; color: var(--c-text-faint); }
.tile-error .ic { color: var(--c-warn); }
.tile-empty p, .tile-error p { margin: 0; font-size: var(--fs-md); color: var(--c-text-muted); }
.err-code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-faint); }

/* Státusz-pill: pont + szöveg — a szín SOSEM az egyetlen jelzés (00. dok. 4.) */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 550;
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
  color: var(--c-text-muted); background: var(--c-bg-sunken); border: var(--border); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill-ok     { color: var(--c-ok);     background: var(--c-ok-bg);     border-color: transparent; }
.pill-warn   { color: var(--c-warn);   background: var(--c-warn-bg);   border-color: transparent; }
.pill-danger { color: var(--c-danger); background: var(--c-danger-bg); border-color: transparent; }
.pill-info   { color: var(--c-info);   background: var(--c-info-bg);   border-color: transparent; }
.pill-accent { color: var(--c-accent); background: var(--c-accent-bg); border-color: transparent; }

/* Csempe belső elemek */
.kv-list { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.kv-list .row { display: flex; align-items: center; gap: var(--sp-2); }
.kv-list .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kv-list .k { color: var(--c-text-muted); flex: 1; }
.kv-list .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--c-bg-sunken); border: var(--border);
  border-radius: 999px; padding: 1px 8px; color: var(--c-text-muted); }
.dot-row { display: flex; gap: 4px; align-items: center; }
.dot-row i { width: 11px; height: 11px; border-radius: 50%; }
.dot-row i.on { background: var(--c-ok); }
.dot-row i.off { border: 1.5px solid var(--c-line-strong); }
.hbars { display: flex; flex-direction: column; gap: 5px; }
.hbar { display: grid; grid-template-columns: 66px 1fr 34px; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.hbar .lbl { color: var(--c-text-muted); }
.hbar .track { height: 8px; background: var(--c-bg-sunken); border-radius: 999px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 999px; background: var(--c-accent); }
.hbar .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.prog { height: 7px; background: var(--c-bg-sunken); border-radius: 999px; overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: 999px; }
.list-lines { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.list-lines .li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.list-lines .li .a { color: var(--c-text); }
.list-lines .li .b { font-variant-numeric: tabular-nums; color: var(--c-text-muted); }

/* Alsó panelek: riasztások + gyors műveletek */
.bottom { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-3); }
.panel { background: var(--c-bg-raised); border: var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.panel-h { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: .04em; }
.alert-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--row-pad) var(--sp-4); border-bottom: var(--border); }
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover, .alert-row.kbd { background: var(--c-bg-sunken); }
.alert-row .sev { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.alert-row .sev svg { width: 18px; height: 18px; }
.sev-crit { color: var(--c-danger); } .sev-warn { color: var(--c-warn); }
.alert-row .msg { flex: 1; min-width: 0; }
.alert-row .msg .m1 { font-size: var(--fs-md); display: block; }
.alert-row .msg .m2 { font-size: var(--fs-sm); color: var(--c-text-muted); display: block; }
.alert-row .msg .ent { color: var(--c-accent); }
.alert-row .time { font-size: var(--fs-sm); color: var(--c-text-faint); white-space: nowrap; }
.panel-empty { padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--c-text-faint); font-size: var(--fs-md); }
.qa { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.qa a, .qa button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 9px var(--sp-3);
  border: var(--border); border-radius: var(--radius); background: var(--c-bg); font-size: var(--fs-md);
  font-weight: 550; text-align: left; color: inherit; text-decoration: none; cursor: pointer; }
.qa a:hover, .qa button:hover:not(:disabled) { background: var(--c-bg-sunken); border-color: var(--c-line-strong); }
.qa .ico { width: 18px; height: 18px; color: var(--c-accent); flex: none; }
.qa .ico svg { width: 18px; height: 18px; }

/* Popover / menü (fejléc-harang, felhasználó-menü, raktár-váltó) */
.pop { position: absolute; top: 46px; right: var(--sp-3); width: 340px; max-height: 70vh; overflow: auto;
  background: var(--c-bg-raised); border: var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 40; }
.pop.menu { width: 248px; }
.pop[hidden] { display: none; }
.menu-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 9px var(--sp-4); font-size: var(--fs-md); }
.menu-line.hd-line { border-bottom: var(--border); }
.menu-line.hd-line .n { font-weight: 600; }
.menu-line.hd-line .r { font-size: var(--fs-sm); color: var(--c-text-muted); }
.menu-line.act { cursor: pointer; color: inherit; text-decoration: none; }
.menu-line.act:hover { background: var(--c-bg-sunken); }
.menu-line .seg { display: inline-flex; border: var(--border); border-radius: var(--radius); overflow: hidden; }
.menu-line .seg button { padding: 3px 9px; font-size: var(--fs-sm); color: var(--c-text-muted); background: none; border: 0; cursor: pointer; }
.menu-line .seg button[aria-pressed="true"] { background: var(--c-accent); color: #fff; }
.menu-line svg { width: 15px; height: 15px; color: var(--c-text-faint); flex: none; }
/* Kilépés: űrlap-gomb (POST + CSRF), de a menüsorral azonos megjelenéssel —
   a biztonsági megoldás nem látszhat meg a felületen. */
form.menu-line { padding: 0; }
form.menu-line > button { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); width: 100%; padding: 9px var(--sp-4); font: inherit; font-size: var(--fs-md);
  color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.menu-sep { height: 1px; background: var(--c-line); }

/* Tooltip */
.tt { position: fixed; z-index: 60; background: var(--c-text); color: var(--c-bg); font-size: var(--fs-sm);
  padding: 6px 9px; border-radius: var(--radius); pointer-events: none; max-width: 240px; line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); opacity: 0; transition: opacity .1s; }
.tt .mono { font-family: var(--font-mono); }

/* Skeleton (lista-betöltéshez, 00. dok. 4.) */
.sk { background: linear-gradient(90deg, var(--c-bg-sunken), var(--c-line), var(--c-bg-sunken));
  background-size: 200% 100%; animation: sk 1.2s ease-in-out infinite; border-radius: var(--radius); }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Tablet/mobil szekció-fülek — desktopon rejtve */
.tabs { display: none; }
.scrim { display: none; }

/* ============================================================
   12.5 LISTA-KÉPERNYŐ — eszköztár, szűrők, adattábla, Inspector
   (03. Termékek vezette be; minden táblás képernyő ezt használja)
   ============================================================ */

/* Munkaterület kettéosztva: lista + Inspector */
.split-main { grid-area: main; min-height: 0; display: grid; grid-template-columns: 1fr var(--insp-w); grid-template-rows: 1fr; overflow: hidden; }
.split-main[data-insp="closed"] { grid-template-columns: 1fr 0; }
.list-pane { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--c-bg); }

/* Eszköztár */
.toolbar { flex: none; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
  border-bottom: var(--border); background: var(--c-bg-raised); flex-wrap: wrap; }
.toolbar-spacer { flex: 1; }
.toolbar-search { position: relative; }
.toolbar-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--c-text-faint); }
.toolbar-search input { width: 240px; height: 32px; padding: 0 var(--sp-3) 0 30px; font: inherit; font-size: var(--fs-md);
  background: var(--c-bg); color: var(--c-text); border: var(--border); border-radius: var(--radius); }
.toolbar-search input:focus-visible { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-bg); }

/* Szűrő-chipek (00. dok. 4. — egykattintásos, aktívak számmal) */
.filters { flex: none; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
  border-bottom: var(--border); background: var(--c-bg); flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 var(--sp-3);
  border: var(--border); border-radius: 999px; background: var(--c-bg); color: var(--c-text-muted);
  font-size: var(--fs-sm); position: relative; cursor: pointer; }
.fchip:hover { border-color: var(--c-line-strong); color: var(--c-text); }
.fchip.on { background: var(--c-accent-bg); border-color: var(--c-accent); color: var(--c-accent); font-weight: 600; }
.fchip .cnt { background: var(--c-accent); color: #fff; border-radius: 999px; font-size: 10px; padding: 0 5px; line-height: 15px; }
.fchip svg { width: 13px; height: 13px; }
.fchip-clear { font-size: var(--fs-sm); color: var(--c-accent); font-weight: 550; margin-left: auto; background: none; border: 0; cursor: pointer; }
.fchip-menu { position: absolute; top: 34px; left: 0; z-index: 30; min-width: 170px; background: var(--c-bg-raised);
  border: var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: var(--sp-1); }
.fchip-menu .opt { display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border-radius: var(--radius); font-size: var(--fs-md); cursor: pointer; color: var(--c-text); }
.fchip-menu .opt:hover { background: var(--c-bg-sunken); }
.fchip-menu .opt .box { width: 15px; height: 15px; border: 1.5px solid var(--c-line-strong); border-radius: 3px; display: grid; place-items: center; flex: none; }
.fchip-menu .opt.sel .box { background: var(--c-accent); border-color: var(--c-accent); }
.fchip-menu .opt .box svg { width: 11px; height: 11px; color: #fff; }

/* Lista al-fejléce (pl. ABC-eloszlás) + oszlop-választó */
.list-subhead { flex: none; display: flex; align-items: center; gap: var(--sp-4); padding: 5px var(--sp-4);
  border-bottom: var(--border); background: var(--c-bg-sunken); font-size: var(--fs-sm); color: var(--c-text-muted); }
.abc-bar { display: flex; align-items: center; gap: var(--sp-2); }
.abc-track { width: 150px; height: 8px; border-radius: 999px; overflow: hidden; display: flex; }
.abc-track i { height: 100%; }
.abc-leg { display: flex; gap: var(--sp-3); }
.abc-leg span { display: inline-flex; align-items: center; gap: 4px; }
.abc-leg i { width: 8px; height: 8px; border-radius: 2px; }
.subhead-spacer { flex: 1; }
.colbtn { color: var(--c-text-muted); display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font-size: var(--fs-sm); }
.colbtn svg { width: 15px; height: 15px; }
.colchooser { position: absolute; z-index: 40; background: var(--c-bg-raised); border: var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: var(--sp-1); min-width: 190px; }
.colchooser .opt { display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border-radius: var(--radius); font-size: var(--fs-md); cursor: pointer; }
.colchooser .opt:hover { background: var(--c-bg-sunken); }

/* Adattábla (00. dok. 4. — sűrű, ragadós fejléc, rendezés, multi-select) */
.table-scroll { flex: 1; overflow: auto; }
.table-scroll table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-md); }
.table-scroll thead th { position: sticky; top: 0; z-index: 5; background: var(--c-bg-raised); text-align: left;
  font-weight: 600; color: var(--c-text-muted); padding: 0 var(--sp-3); height: 34px;
  border-bottom: 1px solid var(--c-line-strong); white-space: nowrap; user-select: none; }
.table-scroll thead th.sortable { cursor: pointer; }
.table-scroll thead th .sh { display: inline-flex; align-items: center; gap: 4px; }
.table-scroll thead th .sh svg { width: 12px; height: 12px; opacity: 0; }
.table-scroll thead th[aria-sort] .sh svg { opacity: 1; color: var(--c-accent); }
.table-scroll thead th[aria-sort="descending"] .sh svg { transform: rotate(180deg); }
.table-scroll tbody td { padding: 0 var(--sp-3); height: var(--row-h); border-bottom: var(--border); white-space: nowrap; }
.table-scroll tbody tr { cursor: pointer; }
.table-scroll tbody tr:hover { background: var(--c-bg-sunken); }
.table-scroll tbody tr.sel { background: var(--c-accent-bg); }
.table-scroll tbody tr.active-row { box-shadow: inset 3px 0 0 var(--c-accent); }
.table-scroll tbody tr.kbd td { background: var(--c-bg-sunken); }
.c-sku { font-family: var(--font-mono); font-size: var(--fs-sm); }
.c-name { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.c-num { text-align: right; font-variant-numeric: tabular-nums; }
.cb { width: 16px; height: 16px; border: 1.5px solid var(--c-line-strong); border-radius: 3px;
  display: inline-grid; place-items: center; vertical-align: middle; }
.cb.on { background: var(--c-accent); border-color: var(--c-accent); }
.cb svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.cb.on svg { opacity: 1; }
.dom { display: inline-flex; align-items: center; gap: 3px; }
.dom svg { width: 15px; height: 15px; }
.ic-cold { color: var(--c-cold); } .ic-frozen { color: var(--c-frozen); } .ic-adr { color: var(--c-adr); }
.adr-tag { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--c-adr); }
.abc-A { color: var(--c-accent); border-color: var(--c-accent); }
.abc-B { color: var(--c-info); }
.abc-C { color: var(--c-text-muted); }
.dash { color: var(--c-text-faint); }

/* Lista-lábléc */
.list-foot { flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-4);
  border-top: var(--border); background: var(--c-bg-raised); font-size: var(--fs-sm); color: var(--c-text-muted); }
.foot-spacer { flex: 1; }
.sel-note { color: var(--c-accent); font-weight: 600; }
.seg { display: inline-flex; border: var(--border); border-radius: var(--radius); overflow: hidden; }
.seg button { padding: 3px 9px; font-size: var(--fs-sm); color: var(--c-text-muted); background: none; border: 0; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--c-accent); color: #fff; }

/* Állapot-doboz (üres / hiba / nincs találat) */
.state-box { flex: 1; display: grid; place-items: center; padding: var(--sp-7); text-align: center; }
.state-box .ic { width: 40px; height: 40px; color: var(--c-text-faint); margin: 0 auto var(--sp-3); }
.state-box .ic svg { width: 40px; height: 40px; }
.state-box h2 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 var(--sp-2); }
.state-box p { color: var(--c-text-muted); margin: 0 0 var(--sp-4); max-width: 360px; }
.state-box .row { display: flex; gap: var(--sp-2); justify-content: center; }

/* Inspector-panel (00. dok. 4.) */
.insp { border-left: var(--border); background: var(--c-bg-raised); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.split-main[data-insp="closed"] .insp { display: none; }
.insp-collapsed { display: grid; place-items: center; padding: var(--sp-5) var(--sp-3); text-align: center; color: var(--c-text-faint); height: 100%; }
.insp-collapsed .ic { width: 30px; height: 30px; margin: 0 auto var(--sp-3); }
.insp-collapsed .ic svg { width: 30px; height: 30px; }
.insp-head { flex: none; padding: var(--sp-3) var(--sp-4); border-bottom: var(--border); display: flex; align-items: flex-start; gap: var(--sp-2); }
.insp-head .titles { flex: 1; min-width: 0; }
.insp-head .sku { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text-muted); }
.insp-head .nm { font-size: var(--fs-lg); font-weight: 600; }
.insp-head .x { color: var(--c-text-faint); }
.insp-head .x svg { width: 18px; height: 18px; }
.mode-badge { font-size: var(--fs-xs); font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--c-warn-bg); color: var(--c-warn); }
.insp-tabs { flex: none; display: flex; gap: 2px; padding: 0 var(--sp-3); border-bottom: var(--border); overflow-x: auto; }
.insp-tabs .tab { padding: 9px var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-muted);
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.insp-tabs .tab[aria-selected="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); font-weight: 600; }
.insp-tabs .tab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-danger); }
.insp-tabs .tab.warn-dot .dot { background: var(--c-warn); }
.insp-body { flex: 1; overflow-y: auto; padding: var(--sp-4); }
.insp-foot { flex: none; padding: var(--sp-3) var(--sp-4); border-top: var(--border); display: flex; align-items: center; gap: var(--sp-2); }
.insp-foot .hint { font-size: var(--fs-sm); color: var(--c-text-muted); flex: 1; }

/* Űrlap az Inspectorban — sűrűbb, mint az auth-kártya mezői */
.insp .field { margin-bottom: var(--sp-3); }
.insp .field > label { font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-muted); margin-bottom: 3px; }
.insp .field .req { color: var(--c-danger); }
.insp .field input, .insp .field select { width: 100%; height: 32px; padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-md);
  border: var(--border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); }
.insp .field input:disabled, .insp .field select:disabled { background: var(--c-bg-sunken); color: var(--c-text-muted); }
.insp .field input:focus-visible, .insp .field select:focus-visible { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-bg); outline: none; }
.insp .field.err input, .insp .field.err select { border-color: var(--c-danger); }
.insp .field .msg { font-size: var(--fs-xs); color: var(--c-danger); margin-top: 3px; }
.insp .field .hint { font-size: var(--fs-xs); color: var(--c-text-faint); margin-top: 3px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mono-in input { font-family: var(--font-mono); }
.tgl { width: 34px; height: 19px; border-radius: 999px; background: var(--c-line-strong); position: relative; display: inline-block; cursor: pointer; transition: background .12s; }
.tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; background: #fff; border-radius: 50%; transition: left .12s; }
.tgl.on { background: var(--c-ok); } .tgl.on::after { left: 17px; }
.tgl.dis { opacity: .5; cursor: default; }
.tgl-field { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 8px 0; border-bottom: var(--border); }
.tgl-field:last-child { border-bottom: 0; }
.tgl-field .tx { flex: 1; }
.tgl-field .tx .t { font-size: var(--fs-md); }
.tgl-field .tx .d { font-size: var(--fs-xs); color: var(--c-text-faint); }
.tgl-field .tgl { flex: none; margin-top: 2px; }
.badge { font-size: var(--fs-xs); font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--c-bg-sunken); border: var(--border); color: var(--c-text-muted); }
.section-h { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-faint); margin: var(--sp-4) 0 var(--sp-2); }
.section-h:first-child { margin-top: 0; }
.disabled-tab-note { display: grid; place-items: center; text-align: center; color: var(--c-text-faint); padding: var(--sp-6) var(--sp-4); gap: var(--sp-2); }
.disabled-tab-note svg { width: 28px; height: 28px; margin: 0 auto; }

/* Mini táblák az Inspectorban */
.mini-table { width: 100%; font-size: var(--fs-sm); border: var(--border); border-radius: var(--radius); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.mini-table th { background: var(--c-bg-sunken); text-align: left; padding: 5px var(--sp-2); font-weight: 600; color: var(--c-text-muted); font-size: var(--fs-xs); }
.mini-table td { padding: 5px var(--sp-2); border-top: var(--border); }
.mini-table .mono { font-size: var(--fs-xs); }

/* Dialógus (00. dok. 4. — fókusz-csapda, Esc zár, elsődleges gomb jobbra) */
.modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; display: grid; place-items: center; }
.modal-scrim.hidden { display: none; }
.modal { width: min(560px, 92vw); max-height: 86vh; background: var(--c-bg-raised); border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; }
.modal-h { padding: var(--sp-4); border-bottom: var(--border); font-size: var(--fs-lg); font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.modal-b { padding: var(--sp-4); overflow-y: auto; }
.modal-f { padding: var(--sp-3) var(--sp-4); border-top: var(--border); display: flex; justify-content: flex-end; gap: var(--sp-2); }
.modal .field { margin-bottom: var(--sp-3); }
.modal .field > label { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: 3px; }
.modal .field input, .modal .field select { width: 100%; height: 32px; padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-md);
  border: var(--border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); }
.val-summary { display: flex; gap: var(--sp-4); margin: var(--sp-3) 0; }
.val-summary .n { font-size: var(--fs-xl); font-weight: 700; }
.val-summary .n.ok { color: var(--c-ok); }
.val-summary .n.bad { color: var(--c-danger); }
.val-summary .l { font-size: var(--fs-xs); color: var(--c-text-muted); }
.bulk-list { max-height: 180px; overflow-y: auto; border: var(--border); border-radius: var(--radius); padding: var(--sp-2); margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.bulk-list div { padding: 2px 0; }
.bulk-wrap { position: relative; }
.bulk-wrap.hidden { display: none; }
.bulk-menu { position: absolute; top: 36px; right: 0; z-index: 40; min-width: 230px; background: var(--c-bg-raised);
  border: var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: var(--sp-1); }
.bulk-menu button { display: block; width: 100%; text-align: left; padding: 7px var(--sp-3); border-radius: var(--radius);
  font-size: var(--fs-md); background: none; border: 0; cursor: pointer; color: var(--c-text); }
.bulk-menu button:hover { background: var(--c-bg-sunken); }

/* Skeleton táblázat-sorok */
.sk-row { height: var(--row-h); border-bottom: var(--border); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4); }
.sk-cell { height: 11px; }

/* Általános eloszlás-sáv a lista al-fejlécében (ABC, prioritás…) */
.dist-bar { display: flex; align-items: center; gap: var(--sp-2); }
.dist-track { width: 150px; height: 8px; border-radius: 999px; overflow: hidden; display: flex; }
.dist-track i { height: 100%; }
.dist-leg { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.dist-leg span { display: inline-flex; align-items: center; gap: 4px; }
.dist-leg i { width: 8px; height: 8px; border-radius: 2px; }

/* Partner-komponensek (04. képernyő) */
.rolebadges { display: inline-flex; gap: 3px; }
.rb { width: 20px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700;
  border: 1.5px solid var(--c-line-strong); color: var(--c-text-muted); background: var(--c-bg); }
.rb.c { color: var(--c-accent); border-color: var(--c-accent); }
.rb.s { color: var(--c-pickup); border-color: var(--c-pickup); }
.rb.f { color: var(--c-cod); border-color: var(--c-cod); }
.pill svg { width: 12px; height: 12px; }
.pill.p-vip { color: var(--c-accent); border-color: var(--c-accent); font-weight: 600; }
.pill.p-high { color: var(--c-info); border-color: var(--c-info); }
.pill.p-low { color: var(--c-text-faint); }
.pill.q-always { color: #fff; background: var(--c-danger); border-color: var(--c-danger); font-weight: 600; }
.pill.q-prob { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn); }
.pill.no-dot::before { display: none; }
.keybadges { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: 3px; }

/* Csillag-alapú prioritás-választó */
.stars { display: inline-flex; align-items: center; gap: 4px; }
.stars .st { width: 22px; height: 22px; display: grid; place-items: center; color: var(--c-line-strong); border-radius: 4px; }
.stars .st svg { width: 17px; height: 17px; }
.stars .st.fill { color: var(--c-accent); }
.stars.editable .st { cursor: pointer; }
.stars.editable .st:hover { background: var(--c-bg-sunken); }
.stars .plabel { font-size: var(--fs-sm); margin-left: 4px; color: var(--c-text-muted); font-weight: 600; }

/* Cím-kártyák az Inspectorban */
.addr-card { border: var(--border); border-radius: var(--radius-lg); padding: var(--sp-3); margin-bottom: var(--sp-2); cursor: pointer; background: var(--c-bg); }
.addr-card:hover { border-color: var(--c-line-strong); }
.addr-card.sel { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent-bg); }
.addr-card .top { display: flex; align-items: center; gap: var(--sp-2); }
.addr-card .addr { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr-card .sub { font-size: var(--fs-xs); color: var(--c-text-faint); margin-top: 2px; display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.badge.g-ok { color: var(--c-ok); border-color: var(--c-ok); }
.badge.g-failed { color: var(--c-danger); border-color: var(--c-danger); }
.badge.g-pending { color: var(--c-text-muted); }
.badge.g-manual { color: var(--c-info); border-color: var(--c-info); }
.badge.outside { color: var(--c-warn); border-color: var(--c-warn); background: var(--c-warn-bg); }
.addr-editor { border-top: var(--border); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.add-row { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-accent); font-weight: 550;
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; }
.add-row svg { width: 14px; height: 14px; }

/* Textarea az űrlapokban */
.insp .field textarea, .modal .field textarea { width: 100%; height: auto; min-height: 56px; padding: var(--sp-2);
  font: inherit; font-size: var(--fs-md); border: var(--border); border-radius: var(--radius);
  background: var(--c-bg); color: var(--c-text); resize: vertical; }
.insp .field textarea:disabled { background: var(--c-bg-sunken); color: var(--c-text-muted); }
.insp .field textarea:focus-visible { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-bg); outline: none; }
.note-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.note-chips button { font-size: var(--fs-xs); border: var(--border); background: var(--c-bg-sunken);
  color: var(--c-text-muted); border-radius: 999px; padding: 2px 8px; cursor: pointer; }
.note-chips button:hover { border-color: var(--c-line-strong); color: var(--c-text); }

/* Sematikus térkép-doboz (cím-előnézet) */
.map-box { border: var(--border); border-radius: var(--radius); overflow: hidden; background: var(--c-bg-sunken); margin-bottom: var(--sp-3); }
.map-box svg { width: 100%; height: auto; display: block; }
.map-cap { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 4px var(--sp-2);
  font-size: var(--fs-xs); color: var(--c-text-faint); border-top: var(--border); }

/* ============================================================
   12.7 FA-KÉPERNYŐ — lokáció-fa + középső panel + Inspector (05.)
   ============================================================ */
.tri-main { grid-area: main; min-height: 0; display: grid;
  grid-template-columns: var(--tree-w) 1fr var(--insp-w); overflow: hidden; }
.tri-main[data-insp="closed"] { grid-template-columns: var(--tree-w) 1fr 0; }
.tri-main[data-insp="closed"] .insp { display: none; }

.tree-pane { border-right: var(--border); background: var(--c-bg-raised); display: flex; flex-direction: column; min-width: 0; }
.tree-top { flex: none; padding: var(--sp-3); border-bottom: var(--border); display: flex; flex-direction: column; gap: var(--sp-2); }
.tree-search { position: relative; }
.tree-search svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--c-text-faint); }
.tree-search input { width: 100%; height: 30px; padding: 0 var(--sp-2) 0 28px; font: inherit; font-size: var(--fs-sm);
  background: var(--c-bg); color: var(--c-text); border: var(--border); border-radius: var(--radius); }
.tree-body { flex: 1; overflow: auto; padding: var(--sp-2) 0; }
.tnode { display: flex; align-items: center; gap: 5px; padding: 3px var(--sp-2); margin: 0 var(--sp-2); border-radius: var(--radius);
  font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; color: var(--c-text-muted); user-select: none; }
.tnode:hover { background: var(--c-bg-sunken); color: var(--c-text); }
.tnode.sel { background: var(--c-accent-bg); color: var(--c-accent); font-weight: 600; }
.tnode.pending { opacity: .5; }
.tnode .caret { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--c-text-faint); }
.tnode .caret svg { width: 12px; height: 12px; transition: transform .1s; }
.tnode.open .caret svg { transform: rotate(90deg); }
.tnode .tico { width: 15px; height: 15px; flex: none; }
.tnode .tico svg { width: 15px; height: 15px; }
.tnode .code { font-family: var(--font-mono); }
.tnode .tb { font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 3px; border: 1px solid currentColor; }
.tnode .tb.adr { color: var(--c-adr); }
.tnode .tb.role { color: var(--c-cod); }
.tnode .tb.def { color: var(--c-accent); }
.tree-foot { flex: none; padding: var(--sp-2) var(--sp-3); border-top: var(--border); font-size: var(--fs-xs);
  color: var(--c-text-muted); display: flex; align-items: center; gap: var(--sp-2); }
.tree-foot .sp { flex: 1; }
.linkbtn { color: var(--c-accent); font-weight: 600; font-size: var(--fs-sm); display: inline-flex;
  align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; }
.linkbtn svg { width: 13px; height: 13px; }

.mid { min-width: 0; display: flex; flex-direction: column; background: var(--c-bg); overflow: hidden; }
.mid-top { flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4);
  border-bottom: var(--border); background: var(--c-bg-raised); flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--c-text-muted); flex-wrap: wrap; min-width: 0; }
.crumbs a { color: var(--c-accent); cursor: pointer; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--c-text-faint); }
.mid-spacer { flex: 1; }
.mid-body { flex: 1; overflow: auto; display: flex; flex-direction: column; }

.capbar { display: inline-flex; align-items: center; gap: 6px; }
.capbar .tr { width: 64px; height: 7px; border-radius: 999px; background: var(--c-bg-sunken); border: var(--border); overflow: hidden; }
.capbar .tr i { display: block; height: 100%; }
.capbar .pc { font-size: var(--fs-sm); min-width: 32px; }
.pill.t-chilled { color: var(--c-cold); border-color: var(--c-cold); }
.pill.t-frozen { color: var(--c-frozen); border-color: var(--c-frozen); }
.pill.adr { color: var(--c-adr); border-color: var(--c-adr); }
.pill.role { color: var(--c-cod); border-color: var(--c-cod); }
.btn.sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.insp .field .warnmsg { font-size: var(--fs-xs); color: var(--c-warn); margin-top: 3px; }

/* Raktár-alaprajz (sematikus, generált) */
.map-wrap { padding: var(--sp-4); }
.map-tools { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); }
.map-frame { border: var(--border); border-radius: var(--radius-lg); background: var(--c-bg-sunken); padding: var(--sp-3); }
.map-frame svg { width: 100%; height: auto; max-height: 62vh; }
.map-frame svg .zone { cursor: pointer; }
.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--c-line-strong); }

/* ADR-osztály választó chipek */
.adr-chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.adr-chips button { border: var(--border); border-radius: 999px; padding: 2px 9px; font-size: var(--fs-sm);
  color: var(--c-text-muted); background: none; cursor: pointer; }
.adr-chips button.on { background: var(--c-adr); border-color: var(--c-adr); color: #fff; font-weight: 600; }
.adr-chips button:disabled { opacity: .6; cursor: default; }

/* Állvány-metszet */
.rack-cut { border: var(--border); border-radius: var(--radius); background: var(--c-bg-sunken); padding: var(--sp-2); margin-bottom: var(--sp-3); }
.rack-cut svg { width: 100%; height: auto; }

/* Kapacitás-kártyák (jármű: payload / térfogat / raklap — három független korlát) */
.cap3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.capcard { border: var(--border); border-radius: var(--radius); padding: 10px; text-align: center; background: var(--c-bg); }
.capcard .v { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.capcard .v input { width: 100%; height: 28px; text-align: center; font: inherit; border: var(--border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); }
.capcard .l { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 3px; }
.capcard.err { border-color: var(--c-danger); }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }

/* Jármű-oldalnézet (tengelyek + zónák) */
.side-view { border: var(--border); border-radius: var(--radius); background: var(--c-bg-sunken); padding: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
.side-view svg { width: 100%; height: auto; }
.note-bar { font-size: var(--fs-xs); color: var(--c-text-faint); border-left: 3px solid var(--c-line-strong); padding: 4px var(--sp-2); margin-top: var(--sp-2); }
.mini-table input, .mini-table select { width: 100%; height: 26px; padding: 0 4px; font: inherit; font-size: var(--fs-sm);
  border: var(--border); border-radius: 3px; background: var(--c-bg); color: var(--c-text); }
.mini-table input:disabled, .mini-table select:disabled { background: transparent; border-color: transparent; color: var(--c-text); }
.mini-table .rowx button { background: none; border: 0; color: var(--c-text-faint); cursor: pointer; padding: 2px; }
.mini-table .rowx button:hover { color: var(--c-danger); }
.mini-table .rowx button svg { width: 13px; height: 13px; }

/* Rétegzett munkaterület: lista+Inspector felül, összecsukható csík alul (07.) */
.stack-main { grid-area: main; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.work { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr var(--insp-w); overflow: hidden; }
.work[data-insp="closed"] { grid-template-columns: 1fr 0; }
.work[data-insp="closed"] .insp { display: none; }
@media (max-width: 1280px) {
  .work { position: relative; grid-template-columns: 1fr 0; }
  .work[data-insp="open"] .insp { display: flex; position: absolute; right: 0; top: 0; bottom: 0;
    width: min(600px, 92%); z-index: 25; box-shadow: -8px 0 24px rgba(0,0,0,.18); }
}
@media (max-width: 768px) {
  .work[data-insp="open"] .insp { position: fixed; inset: 52px 0 0 0; width: auto; z-index: 40; }
}

/* Lejárat-idővonal csík (összecsukható) */
.tl-strip { flex: none; border-top: var(--border); background: var(--c-bg-raised); }
.tl-head { display: flex; align-items: center; gap: var(--sp-3); padding: 5px var(--sp-4); font-size: var(--fs-sm);
  color: var(--c-text-muted); cursor: pointer; user-select: none; }
.tl-head .caret svg { width: 14px; height: 14px; transition: transform .12s; }
.tl-strip[data-open="false"] .tl-head .caret svg { transform: rotate(-90deg); }
.tl-head b { color: var(--c-text); font-weight: 600; }
.tl-head .sp { flex: 1; }
.tl-body { overflow-x: auto; padding: 0 var(--sp-4) var(--sp-2); }
.tl-strip[data-open="false"] .tl-body { display: none; }
.tl-body svg { height: 96px; display: block; }
.tl-body .tl-mark { cursor: pointer; }

/* Lejárat-pillek + összegző jelvények + halvány sor */
.pill.exp { color: #fff; background: var(--c-danger); border-color: var(--c-danger); font-weight: 600; }
.pill.soon { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn); }
.sum-badges { display: inline-flex; gap: var(--sp-3); align-items: center; }
.sum-badges span { display: inline-flex; gap: 4px; align-items: center; }
.sum-badges i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.table-scroll tbody tr.dim td { opacity: .55; }

/* Doboz-katalógus: modul-család csík + seed-megjegyzés + típus-pillek */
.family { flex: none; display: flex; align-items: flex-end; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4);
  border-bottom: var(--border); background: var(--c-bg-sunken); overflow-x: auto; }
.family .fam-l { font-size: var(--fs-xs); color: var(--c-text-faint); text-transform: uppercase; letter-spacing: .04em; align-self: center; flex: none; }
.family svg { flex: none; }
.seed-note { flex: none; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--c-info);
  background: var(--c-info-bg); display: flex; gap: var(--sp-2); align-items: center; }
.seed-note svg { width: 15px; height: 15px; }
.seed-note.hidden { display: none; }
.pill.seed { color: var(--c-pickup); border-color: var(--c-pickup); }
.pill.own { color: var(--c-cod); border-color: var(--c-cod); }
.pill.box { color: var(--c-accent); border-color: var(--c-accent); }
.pill.pal { color: var(--c-warn); border-color: var(--c-warn); }

/* Jogosítvány-osztály választó chipek */
.lic-chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.lic-chips button { border: var(--border); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-sm);
  color: var(--c-text-muted); font-family: var(--font-mono); background: none; cursor: pointer; }
.lic-chips button.on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 600; }
.lic-chips button:disabled { cursor: default; opacity: .9; }

/* Kontextusmenü */
.ctx { position: fixed; z-index: 60; min-width: 200px; background: var(--c-bg-raised); border: var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: var(--sp-1); }
.ctx button { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 7px var(--sp-3);
  border-radius: var(--radius); font-size: var(--fs-md); background: none; border: 0; cursor: pointer; color: var(--c-text); }
.ctx button svg { width: 14px; height: 14px; }
.ctx button:hover:not(:disabled) { background: var(--c-bg-sunken); }
.ctx button:disabled { color: var(--c-text-faint); cursor: not-allowed; }
.ctx .why { font-size: var(--fs-xs); color: var(--c-text-faint); padding: 0 var(--sp-3) 5px; max-width: 240px; white-space: normal; }

/* Fa-képernyő reszponzív */
@media (max-width: 1600px) { :root { --tree-w: 250px; } }
@media (max-width: 1280px) {
  :root { --tree-w: 210px; }
  .tri-main { position: relative; grid-template-columns: var(--tree-w) 1fr 0; }
  .tri-main[data-insp="open"] .insp { display: flex; position: absolute; right: 0; top: 0; bottom: 0;
    width: min(400px, 92%); z-index: 25; box-shadow: -8px 0 24px rgba(0,0,0,.18); }
}
@media (max-width: 1024px) {
  .tri-main { grid-template-columns: 1fr 0 0; }
  .tree-pane { position: fixed; left: 0; top: 52px; bottom: 0; width: 280px; z-index: 30;
    transform: translateX(-100%); transition: transform .15s; box-shadow: 8px 0 24px rgba(0,0,0,.15); }
  .tri-main[data-tree="open"] .tree-pane { transform: translateX(0); }
}
@media (max-width: 768px) {
  .tri-main[data-insp="open"] .insp { position: fixed; inset: 52px 0 0 0; width: auto; z-index: 40; }
  .row2 { grid-template-columns: 1fr; }
}

/* Lista-képernyő reszponzív viselkedés */
@media (max-width: 1600px) { :root { --insp-w: 540px; } }
@media (max-width: 1280px) {
  /* 1024–1280: az Inspector átfedő panel */
  .split-main { position: relative; grid-template-columns: 1fr 0; }
  .split-main[data-insp="open"] .insp { display: flex; position: absolute; right: 0; top: 0; bottom: 0;
    width: min(630px, 90%); z-index: 25; box-shadow: -8px 0 24px rgba(0,0,0,.18); }
}
@media (max-width: 768px) {
  /* Kártyás nézet: a táblázat-sorok blokkokká állnak (00. dok. 3.3) */
  .table-scroll thead { display: none; }
  .table-scroll table, .table-scroll tbody, .table-scroll tr, .table-scroll td { display: block; width: 100%; }
  .table-scroll tbody tr { border: var(--border); border-radius: var(--radius-lg); margin: var(--sp-2) var(--sp-3); padding: var(--sp-2); }
  .table-scroll tbody td { height: auto; border: 0; padding: 2px var(--sp-2); white-space: normal; }
  .table-scroll tbody td.c-name { max-width: none; font-weight: 600; }
  .split-main[data-insp="open"] .insp { position: fixed; inset: 52px 0 0 0; width: auto; z-index: 40; }
  .toolbar-search input { width: 100%; }
}

/* ============================================================
   12/b. Dispatch-board (三 panel: pool / térkép / túrák)
   ============================================================ */
.board-grid { flex: 1; display: grid; grid-template-columns: 300px 1fr 360px; min-height: 0; }
.board-panel { min-width: 0; overflow-y: auto; padding: var(--sp-3) var(--sp-4); background: var(--c-bg); }
/* A középső oszlop két vízszintes sávra oszlik: fent a térkép (HOL), alatta az
   idővonal (MIKOR). Szándékosan EGY oszlopban: ugyanannak a napnak a két
   vetülete, és így az idővonal összecsukása nem veszi el a pool és a túra-panel
   magasságát. (Terv: .planning/board_timeline.md 1.) */
.board-map { min-width: 0; min-height: 0; border-left: var(--border); border-right: var(--border);
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  /* Az idővonal vásznának nincs felső szélessége. A `min-width: 0` láncot
     KELL végigvinni (oszlop → sáv → fejléc → görgő), különben a tartalom
     kifeszíti az oszlopot, és a sáv ráfut a jobb oldali panelre.
     A `minmax(0, 1fr)` az implicit oszlopra ugyanezt teszi.
     Az oszlopra NEM teszünk `overflow: hidden`-t: az a MapLibre buborékjait
     vágná el a térkép szélén. A biztosíték a `.tl`-en van, ahol elég. */ }
.board-map .map-wrap { position: relative; min-width: 0; min-height: 0; }
.board-map #map { position: absolute; inset: 0; }
.board-h { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-text-faint); margin: var(--sp-2) 0 var(--sp-2); }
.ship { display: flex; gap: var(--sp-2); align-items: baseline; padding: 5px 6px; border-radius: var(--radius);
  cursor: pointer; font-size: var(--fs-sm); }
.ship:hover { background: var(--c-bg-sunken); }
.ship.sel { background: var(--c-accent-bg); outline: 1px solid var(--c-accent); }
.ship .who { font-weight: 600; }
.ship .where { color: var(--c-text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ship .kg { color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.ship.blocked { opacity: .55; cursor: not-allowed; }
/* Kézzel kihagyott (a checkbox kivéve) — halvány + áthúzott, DE nem „tiltott":
   megkülönböztetendő a `.blocked`-tól (ami eleve nem tervezhető). */
.ship.excluded { opacity: .5; }
.ship.excluded .who { text-decoration: line-through; text-decoration-color: var(--c-text-faint); }
/* Pool-fejléc a „mind / egyik sem" gyorsválasztóval. */
.board-h-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.pool-tools { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-xs); }
.pool-sep { color: var(--c-text-faint); margin: 0 2px; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-xs); color: var(--c-accent); }
.linklike:hover { text-decoration: underline; }
/* Élő számláló: hány küldemény megy az optimalizálásba. */
.pool-count { font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; padding: 2px 0; }
.pool-count.none { color: var(--c-warn); font-weight: 600; }
.tour-card { border: var(--border); border-radius: var(--radius-lg); margin-bottom: var(--sp-3); background: var(--c-bg-raised);
  transition: opacity .12s ease; }
/* Hover-kiemelés: a NEM vizsgált túrák kártyája is halványul, a térképpel együtt. */
.tour-card.dimmed { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .tour-card { transition: none; } }
.tour-card .tour-head { padding: 7px 10px; display: flex; gap: var(--sp-2); align-items: center;
  border-bottom: var(--border); font-size: var(--fs-sm); }
.tour-card .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tour-card .tour-body { padding: 5px 4px; }
.tour-card .stop { display: flex; gap: 6px; align-items: baseline; padding: 3px 6px; border-radius: var(--radius);
  font-size: var(--fs-sm); cursor: pointer; }
.tour-card .stop:hover { background: var(--c-bg-sunken); }
.tour-card .stop.sel { background: var(--c-accent-bg); }
.tour-card .stop .n { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 10px;
  display: grid; place-items: center; flex: none; font-weight: 600; }
.tour-card .stop .addr { flex: 1; min-width: 0; }
.tour-card .stop .lock { background: none; border: 0; cursor: pointer; font-size: var(--fs-sm); padding: 0 3px; opacity: .45; }
.tour-card .stop .lock.on { opacity: 1; }
.tour-card .tour-foot { padding: 6px 10px; border-top: var(--border); display: flex; gap: 5px;
  flex-wrap: wrap; align-items: center; }
.tour-card .tour-foot select { height: 28px; font-size: var(--fs-sm); padding: 0 var(--sp-1);
  border: var(--border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); }
@media (max-width: 1280px) {
  /* Szűk nézetben a térkép enged: a pool és a túrák (a beavatkozás helye) marad. */
  .board-grid { grid-template-columns: 260px 1fr; }
  .board-map { display: none; }
}

/* ============================================================
   Túra-idővonal (Gantt) a térkép alatt — dispatch-board.
   Terv: .planning/board_timeline.md
   ============================================================ */
.tl {
  /* Sáv-geometria. Csak MÉRETEK — a színek a közös tokenekből jönnek, itt
     egyetlen paletta-értéket sem definiálunk felül (00. dok. 1.). */
  --tl-gutter: 190px;
  --tl-row: 30px;
  --tl-row-dual: 44px;
  --tl-chip-h: 18px;
  --tl-lane-h: 8px;
  --tl-head-h: 26px;

  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  overflow: hidden;   /* a sáv soha nem festhet ki a saját oszlopából */
  border-top: var(--border); background: var(--c-bg);
}
:root[data-density="comfortable"] .tl { --tl-row: 38px; --tl-row-dual: 54px; --tl-chip-h: 22px; }
.tl.folded { height: auto !important; }
.tl.folded .tl-scroll { display: none; }

/* Fogó: az idővonal magassága. Billentyűvel is (nyilak) — a húzás nem lehet az
   egyetlen út. */
.tl-grip { height: 7px; margin-top: -4px; cursor: row-resize; flex: none;
  background: transparent; touch-action: none; }
.tl-grip:hover, .tl-grip:focus-visible { background: var(--c-accent-bg); outline: none; }

.tl-head { flex: none; display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0; height: var(--tl-head-h); padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.tl-title { font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-text-faint); }
/* `min-width: 0` KELL: enélkül az összesítő nem zsugorodik a tartalma alá, a
   rugalmas kitöltő nulla helyet kap, és a jobb oldali gombok kicsúsznak a
   sávból. Szűk oszlopban pont a vezérlők tűnnének el. */
.tl-sum { flex: 0 1 auto; min-width: 0; color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-spacer { flex: 1 0 0; }
.tl-btn { flex: none; height: 20px; padding: 0 7px; border: var(--border); border-radius: var(--radius);
  background: var(--c-bg); color: var(--c-text-muted); font: inherit; font-size: var(--fs-xs);
  cursor: pointer; }
.tl-btn:hover:not(:disabled) { background: var(--c-bg-sunken); color: var(--c-text); }
.tl-btn:disabled { opacity: .4; cursor: not-allowed; }
.tl-btn[aria-pressed="true"] { background: var(--c-accent-bg); color: var(--c-accent);
  border-color: var(--c-accent); }
.tl-zoom { flex: none; display: flex; gap: 2px; }
.tl-title { flex: none; }
.tl-fold { border: 0; font-size: var(--fs-md); line-height: 1; }
.tl.folded .tl-fold { transform: rotate(180deg); }

/* EGY görgető konténer: a fej-tengely felül, a bal hasáb balra ragad benne.
   Két külön, szinkronizált görgetés elcsúszna — ez nem tud. */
.tl-scroll { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
/* `align-items: stretch` (alap): a sáv MINDIG kitölti a sor magasságát, akkor
   is, ha a bal hasáb szövege magasabb. Enélkül az óra-rács a sor aljáról
   hiányozna, és a rácsvonalak megszakadnának soronként. */
.tl-grid { position: relative; display: grid;
  grid-template-columns: var(--tl-gutter) var(--tl-w, 900px); }

.tl-corner { position: sticky; top: 0; left: 0; z-index: 4; height: 20px;
  background: var(--c-bg); border-bottom: var(--border); border-right: var(--border); }
.tl-axis { position: sticky; top: 0; z-index: 3; height: 20px;
  background: var(--c-bg); border-bottom: var(--border); }
.tl-ticks { position: absolute; inset: 0; }
.tl-tick { position: absolute; top: 0; padding-left: 3px; font-size: var(--fs-xs);
  color: var(--c-text-faint); border-left: 1px solid var(--c-line);
  height: 100%; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Az utolsó felirat befelé fordul — különben kilógna, és fölösleges
   vízszintes görgetést okozna. */
.tl-tick.end { padding-left: 0; padding-right: 3px; border-left: 0;
  border-right: 1px solid var(--c-line); transform: translateX(-100%); }

/* Bal hasáb: a túra azonossága. Ugyanaz a színcsík, mint a térképen. */
.tl-gut { position: sticky; left: 0; z-index: 2; background: var(--c-bg);
  border-right: var(--border); border-bottom: 1px solid var(--c-line);
  padding: 2px var(--sp-2); min-height: var(--tl-row); cursor: pointer;
  line-height: 1.25; transition: opacity .12s ease; }
.tl-gut:hover { background: var(--c-bg-sunken); }
.tl-gut-1, .tl-gut-2 { display: flex; align-items: center; gap: 5px;
  overflow: hidden; white-space: nowrap; }
.tl-gut-1 { font-size: var(--fs-sm); }
.tl-gut-2 { font-size: var(--fs-xs); color: var(--c-text-muted); }
.tl-gut-2 > span:first-child, .tl-plate { overflow: hidden; text-overflow: ellipsis; }
.tl-plate { font-size: var(--fs-xs); color: var(--c-text-muted); }
.tl-gut .missing { color: var(--c-warn); }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tl-pill { flex: none; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-text-faint); border: var(--border); border-radius: 999px; padding: 0 5px; }

.tl-row { position: relative; border-bottom: 1px solid var(--c-line);
  transition: opacity .12s ease; }
/* Hover-kiemelés: a NEM vizsgált túra halványul — a térképpel és a
   túra-kártyákkal együtt, ugyanazzal a mértékkel. */
.tl-row.dimmed, .tl-gut.dimmed { opacity: .35; }

/* A sáv háttere adja az óra-rácsot: fő vonal óránként, mellékosztás a
   nagyítás szerint (a JS állítja a --tl-hour / --tl-minor értéket). */
.tl-row { min-height: var(--tl-row); }
.tl.dual .tl-row { min-height: var(--tl-row-dual); }
.tl-lane { position: relative; height: 100%; min-height: var(--tl-row);
  background-image:
    repeating-linear-gradient(to right, var(--c-line) 0 1px, transparent 1px var(--tl-hour, 100px)),
    repeating-linear-gradient(to right, var(--c-line) 0 1px, transparent 1px var(--tl-minor, 50px));
}
.tl.dual .tl-lane { min-height: var(--tl-row-dual); }

/* Üzemidőn kívüli órák (00:00–06:00, 20:00–24:00). A tengely teljes napot
   mutat, aminek nagy része üres — enélkül a 24 óra egyenletes szalag, amin nem
   látszik, hol van a nap „belseje". Halvány, nem kiabál: tájékozódási pont,
   nem figyelmeztetés. */
.tl-night { position: absolute; top: 0; bottom: 0; background: var(--c-bg-sunken);
  opacity: .7; pointer-events: none; }

/* Nincs időadat: sávozott háttér + kimondott felirat. Órapozíciót NEM
   hazudunk — a chipek egyenletes elosztásban, szaggatott kerettel állnak. */
.tl-lane.untimed { background-image: repeating-linear-gradient(
    135deg, var(--c-bg-sunken) 0 6px, transparent 6px 12px); }
/* A felirat BALRA, nem jobbra: a vászon több ezer pixel széles lehet, a
   jobb széle sosem látszik — a magyarázat pedig pont akkor kell, amikor a
   diszpécser ránéz a sorra. */
.tl-untimed { position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-xs); color: var(--c-text-faint); font-style: italic;
  background: var(--c-bg); padding: 0 4px; z-index: 1; }

/* A nap időbeli kiterjedése — „meddig tart a műszak". */
.tl-band { position: absolute; top: 3px; height: calc(var(--tl-chip-h) + 4px);
  border-radius: var(--radius); opacity: .12; pointer-events: none; }
.tl-link { position: absolute; top: calc(3px + var(--tl-chip-h) / 2 - 1px); height: 2px;
  opacity: .45; pointer-events: none; }
.tl-end { position: absolute; top: 3px; width: 18px; margin-left: -9px;
  height: var(--tl-chip-h); display: grid; place-items: center;
  font-size: 10px; color: var(--c-text-muted);
  border: var(--border); border-radius: 50%; background: var(--c-bg); }

/* A megálló. `<button>`, tehát Tab-bal bejárható és felolvasható — a teljes
   információ az aria-label-ben szövegesen is ott van, nem csak a geometriában. */
.tl-chip { position: absolute; top: 3px; height: var(--tl-chip-h);
  display: flex; align-items: center; gap: 4px; overflow: hidden;
  padding: 0 3px; border: 0; border-radius: 3px; color: #fff;
  font: inherit; font-size: 10px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  /* NEM `grab`: a chip nem húzható (nincs `tour.reorder` op). Ne ígérjünk
     olyat, amit a felület nem tud. */
  cursor: pointer; }
.tl-chip .tl-t { font-weight: 400; opacity: .85; }
.tl-chip .tl-c { font-weight: 400; opacity: .7; overflow: hidden; text-overflow: ellipsis; }
.tl-chip:hover { filter: brightness(1.12); }
.tl-chip:focus-visible { outline: none; box-shadow: var(--focus); z-index: 3; }
.tl-chip.sel { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); z-index: 3; }

/* Állapotok. A szín SOHA nem egyedüli jelentéshordozó: a kész a pipától, a
   sikertelen a sávozástól, a rögzített a lakattól olvasható — színvakon is. */
.tl-chip.st-done { opacity: .55; }
.tl-chip.st-arrived { box-shadow: inset 0 0 0 2px #fff; }
.tl-chip.st-failed { background-image: repeating-linear-gradient(
    135deg, rgba(0,0,0,.35) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 2px var(--c-danger); }
.tl-chip.st-skipped { background: transparent !important; color: var(--c-text-faint);
  box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.tl-chip.no-service { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.tl-chip.guess { background: transparent !important; color: var(--c-text-muted);
  border: 1px dashed var(--c-line-strong); }

/* Rögzítés-jelzés (nem gomb — a feloldás a jobb oldali panelen történik).
   Kicsi fehér lakattest, sötét maggal: színvakon is látszik. */
.tl-lock { position: absolute; right: 1px; top: 1px; width: 8px; height: 8px;
  border-radius: 2px; background: #fff; opacity: .92; pointer-events: none; }
.tl-lock::after { content: ''; position: absolute; inset: 2px; border-radius: 1px;
  background: #14181f; }

/* Tény-sáv: a valóság a terv alatt. Semleges színnel, hogy ne versenyezzen a
   túra színével — a LÉNYEG az eltérés, nem a sáv. */
.tl-act { position: absolute; top: calc(3px + var(--tl-chip-h) + 4px);
  height: var(--tl-lane-h); border-radius: 2px; background: var(--c-text-muted);
  display: none; pointer-events: none; }
.tl.dual .tl-act { display: block; }
.tl-act.late { background: var(--c-danger); }
.tl-act.early { background: var(--c-info); }
.tl-act.open { background-image: repeating-linear-gradient(
    90deg, rgba(255,255,255,.6) 0 2px, transparent 2px 4px); }

/* „Most" — csak ha a mai nap látszik. Egy tegnapi túrán félrevezető volna. */
.tl-now { position: absolute; top: 1px; z-index: 4; transform: translateX(-50%);
  padding: 0 3px; border-radius: 2px; font-size: 9px; font-weight: 700;
  background: var(--c-danger); color: #fff; font-variant-numeric: tabular-nums; }
.tl.has-now .tl-grid::after { content: ''; position: absolute; top: 20px; bottom: 0;
  left: calc(var(--tl-gutter) + var(--tl-now-x, 0px)); width: 1px;
  background: var(--c-danger); opacity: .6; z-index: 1; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .tl-row, .tl-gut { transition: none; }
}
/* Globális kereső a fejlécben (00. dok. 3.2) */
.gsearch-wrap { position: relative; display: flex; align-items: center; gap: 6px;
  border: var(--border); border-radius: var(--radius); background: var(--c-bg);
  height: 32px; padding: 0 10px; width: min(360px, 30vw); }
.gsearch-wrap > svg { width: 15px; height: 15px; color: var(--c-text-faint); flex: none; }
.gsearch-wrap input { flex: 1; min-width: 0; border: 0; background: none; color: var(--c-text);
  font: inherit; font-size: var(--fs-sm); outline: none; }
.gsearch-wrap:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-bg); }
#gsearch-pop { position: absolute; top: 38px; left: 0; right: 0; max-height: 420px; overflow-y: auto;
  z-index: 60; padding: 4px; }
.gs-group { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-text-faint); padding: 8px 10px 3px; }
.gs-item { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: var(--radius);
  color: var(--c-text); }
.gs-item:hover, .gs-item.on { background: var(--c-accent-bg); }
.gs-item .l { font-weight: 600; white-space: nowrap; }
.gs-item .s { color: var(--c-text-muted); font-size: var(--fs-xs); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gs-empty { padding: 12px; color: var(--c-text-faint); font-size: var(--fs-sm); }
@media (max-width: 900px) { .gsearch-wrap { display: none; } }

/* Előzmény-dialógus (Ctrl+H) */
.hist-body { max-height: 60vh; }
.hist-bucket { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-text-faint); margin: 10px 0 4px; }
.hist-bucket:first-child { margin-top: 0; }
.hist-row { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.hist-row .t { font-family: var(--font-mono); color: var(--c-text-faint); flex: none; }
.hist-row .w { font-weight: 600; flex: none; }
.hist-row .a { color: var(--c-accent); flex: none; }
.hist-row .j { font-size: var(--fs-xs); color: var(--c-text-muted); background: var(--c-bg-sunken);
  border-radius: 3px; padding: 1px 5px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* A MapLibre-popup a témát követi: dark módban sötét doboz, világos betű. */
.maplibregl-popup-content { background: var(--c-bg-raised) !important; color: var(--c-text) !important;
  border: var(--border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0,0,0,.3);
  font: inherit; font-size: var(--fs-sm); padding: 8px 12px; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--c-bg-raised) !important; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--c-bg-raised) !important; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--c-bg-raised) !important; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--c-bg-raised) !important; }
.maplibregl-popup-close-button { color: var(--c-text-muted); font-size: 16px; }

/* ============================================================
   13. Reszponzív
   ============================================================ */
@media (max-width: 767px) {
  /* Mobilon a belépő-kártya teljes szélességű, közelebb a tetőhöz. */
  .card-region { align-items: start; padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .card { max-width: 100%; padding: var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--radius); }
  .brand { font-size: var(--fs-lg); }
  .toast-wrap { left: var(--sp-4); right: var(--sp-4); top: var(--sp-4); max-width: none; }
}

@media (max-width: 1280px) {
  /* 1024–1280: a navi ikon-sávra csukódik alapból, a kapcsoló kinyitja */
  body:not([data-nav="expanded"]) .app { --nav-w: 56px; }
  body:not([data-nav="expanded"]) .nav-group-h { text-align: center; font-size: 0; padding: var(--sp-3) 0 var(--sp-1); }
  body:not([data-nav="expanded"]) .nav-group-h::after { content: "•"; font-size: 12px; }
  body:not([data-nav="expanded"]) .nav-item { justify-content: center; padding: 8px 0; }
  body:not([data-nav="expanded"]) .nav-item .lbl { display: none; }
  .bottom { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (max-width: 1024px) {
  /* Tablet: a navi off-canvas fiók a hamburgerrel; szekció-fülek. */
  .app { grid-template-columns: 1fr; grid-template-areas: "hd" "main"; }
  .nav { position: fixed; top: 52px; left: 0; bottom: 0; width: 240px; --nav-w: 240px; z-index: 35;
    transform: translateX(-100%); transition: transform .16s; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  .nav .nav-group-h { text-align: left; font-size: 10px; padding: var(--sp-3) var(--sp-4) var(--sp-1); }
  .nav .nav-group-h::after { content: ""; }
  .nav .nav-item { justify-content: flex-start; padding: 6px var(--sp-4); }
  .nav .nav-item .lbl { display: inline; }
  .app[data-drawer="open"] .nav { transform: translateX(0); }
  .scrim { position: fixed; inset: 52px 0 0 0; background: rgba(0,0,0,.4); z-index: 34; }
  .app[data-drawer="open"] .scrim { display: block; }
  .tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); border-bottom: var(--border); }
  .tabs button { padding: 8px var(--sp-3); font-size: var(--fs-md); color: var(--c-text-muted);
    border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
  .tabs button[aria-selected="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); font-weight: 600; }
  .app[data-tab="alerts"] .sec-overview, .app[data-tab="alerts"] .sec-qa { display: none; }
  .app[data-tab="qa"] .sec-overview, .app[data-tab="qa"] .sec-alerts { display: none; }
  .app[data-tab="overview"] .sec-alerts, .app[data-tab="overview"] .sec-qa { display: none; }
}
@media (max-width: 768px) {
  .main { padding: var(--sp-3) var(--sp-3) var(--sp-8); }
  .tiles { grid-template-columns: 1fr; }
  .tile.span2 { grid-column: span 1; }
}

/* Mozgás-tisztelet */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}