/* ============================================================
   Rendszermentor — Admin redesign
   Foundation v1 (Vercel-anchored, achromatic) + legacy class
   names preserved so the existing 19 screens render unchanged.
   Source-of-truth for the token spec: design-team/foundation.css.
   ============================================================ */

:root {
  /* ---------- Neutrals: achromatic, oklch chroma 0 ---------- */
  --n-0:   oklch(1 0 0);
  --n-50:  oklch(0.985 0 0);
  --n-100: oklch(0.96 0 0);
  --n-200: oklch(0.92 0 0);
  --n-300: oklch(0.86 0 0);
  --n-400: oklch(0.70 0 0);
  --n-500: oklch(0.58 0 0);
  --n-600: oklch(0.42 0 0);
  --n-700: oklch(0.30 0 0);
  --n-800: oklch(0.18 0 0);
  --n-900: oklch(0.10 0 0);

  /* ---------- Surface aliases ---------- */
  --c-bg:        var(--n-0);
  --c-surface:   var(--n-0);
  --c-surface-2: var(--n-50);
  --c-surface-3: var(--n-100);
  --c-line:      var(--n-300);
  --c-line-2:    var(--n-200);
  --c-line-strong: var(--n-400);
  --c-ink:       var(--n-800);
  --c-ink-2:     var(--n-600);
  --c-ink-3:     var(--n-500);
  --c-ink-4:     var(--n-400);

  /* ---------- Accent (default black) ---------- */
  --accent:      var(--n-900);
  --accent-ink:  var(--n-0);
  --accent-soft: var(--n-100);
  --accent-ring: oklch(0.50 0 0 / 0.20);

  /* ---------- Semantic colors (state-only) ---------- */
  --s-ok:      oklch(0.55 0.16 152);
  --s-ok-bg:   oklch(0.95 0.06 152);
  --s-warn:    oklch(0.68 0.16 75);
  --s-warn-bg: oklch(0.96 0.06 75);
  --s-err:     oklch(0.58 0.22 25);
  --s-err-bg:  oklch(0.96 0.05 25);
  --s-info:    oklch(0.58 0.15 235);
  --s-info-bg: oklch(0.95 0.05 235);
  /* --s-violet, --s-pink: deprecated 2026-05-17, removed entirely.
     If a real "category color" need re-emerges, use [data-accent] operator-pref. */

  /* ---------- Brand mark (achromatic) ---------- */
  --rsm-brand:     var(--n-900);
  --rsm-brand-ink: var(--n-0);

  /* ---------- Typography ---------- */
  --f-sans: "Geist", ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --f-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 32px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --lh-tight: 1.20;
  --lh-snug:  1.35;
  --lh-base:  1.45;
  --lh-loose: 1.60;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-loose:   0.04em;
  --ls-loose-2: 0.06em;

  /* ---------- Density (regular default) ---------- */
  --d-row-h: 36px;
  --d-pad-x: 12px;
  --d-pad-y: 8px;
  --d-fz:    13px;
  --d-fz-sm: 12px;
  --d-fz-xs: 11px;
  --d-fz-h1: 22px;
  --d-fz-h2: 16px;

  /* ---------- Spacing ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Radius (sharp, Vercel-konzisztens) ---------- */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 8px;
  --r-xl: 10px;

  /* ---------- Shadow / elevation ---------- */
  --sh-1: 0 1px 0 oklch(0 0 0 / 0.04);
  --sh-2: 0 1px 2px oklch(0 0 0 / 0.06), 0 1px 1px oklch(0 0 0 / 0.04);
  --sh-pop: 0 8px 24px -8px oklch(0 0 0 / 0.16), 0 2px 4px oklch(0 0 0 / 0.06);

  /* ---------- Focus ring ---------- */
  --focus-ring: 0 0 0 3px var(--accent-ring);

  /* ---------- Motion ---------- */
  --dur-fast: 100ms;
  --dur-base: 150ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Layout ---------- */
  --nav-w: 232px;
  --top-h: 52px;
}

/* ============================================================
   Dark mode — mirror neutral ramp
   ============================================================ */
:root[data-theme="dark"] {
  --n-0:   oklch(0.10 0 0);
  --n-50:  oklch(0.12 0 0);
  --n-100: oklch(0.16 0 0);
  --n-200: oklch(0.20 0 0);
  --n-300: oklch(0.26 0 0);
  --n-400: oklch(0.40 0 0);
  --n-500: oklch(0.55 0 0);
  --n-600: oklch(0.72 0 0);
  --n-700: oklch(0.85 0 0);
  --n-800: oklch(0.94 0 0);
  --n-900: oklch(0.985 0 0);

  /* WCAG AA fix: bump ink-3 in dark mode (light keeps n-500) */
  --c-ink-3: var(--n-600);

  --accent-ring: oklch(0.80 0 0 / 0.30);
  --accent-soft: var(--n-200);

  --s-ok:      oklch(0.78 0.16 152);
  --s-ok-bg:   oklch(0.22 0.10 152);
  --s-warn:    oklch(0.82 0.16 75);
  --s-warn-bg: oklch(0.25 0.10 75);
  --s-err:     oklch(0.75 0.22 25);
  --s-err-bg:  oklch(0.25 0.10 25);
  --s-info:    oklch(0.78 0.15 235);
  --s-info-bg: oklch(0.22 0.08 235);

  --sh-1: 0 1px 0 oklch(0 0 0 / 0.20);
  --sh-2: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 1px oklch(0 0 0 / 0.20);
  --sh-pop: 0 8px 24px -8px oklch(0 0 0 / 0.50), 0 2px 4px oklch(0 0 0 / 0.30);
}

/* ============================================================
   Density variants
   ============================================================ */
:root[data-density="compact"] {
  --d-row-h: 30px;
  --d-pad-x: 10px;
  --d-pad-y: 6px;
  --d-fz:    12px;
  --d-fz-h1: 18px;
}
:root[data-density="cozy"] {
  --d-row-h: 40px;
  --d-pad-x: 14px;
  --d-pad-y: 10px;
  --d-fz:    14px;
  --d-fz-h1: 26px;
}
:root[data-density="comfortable"] {
  --d-row-h: 48px;
  --d-pad-x: 16px;
  --d-pad-y: 12px;
  --d-fz:    15px;
  --d-fz-h1: 30px;
}

/* ============================================================
   Accent variants (operator preference) — fekete a default
   ============================================================ */
:root[data-accent="indigo"]  { --accent: oklch(0.50 0.20 268); --accent-ink: var(--n-0);   --accent-soft: oklch(0.95 0.04 268); --accent-ring: oklch(0.50 0.20 268 / 0.20); }
:root[data-accent="emerald"] { --accent: oklch(0.55 0.15 152); --accent-ink: var(--n-0);   --accent-soft: oklch(0.95 0.04 152); --accent-ring: oklch(0.55 0.15 152 / 0.20); }
:root[data-accent="amber"]   { --accent: oklch(0.72 0.16 75);  --accent-ink: var(--n-900); --accent-soft: oklch(0.96 0.04 75);  --accent-ring: oklch(0.72 0.16 75 / 0.30); }
:root[data-accent="violet"]  { --accent: oklch(0.55 0.18 295); --accent-ink: var(--n-0);   --accent-soft: oklch(0.95 0.04 295); --accent-ring: oklch(0.55 0.18 295 / 0.20); }
:root[data-accent="blue"]    { --accent: oklch(0.55 0.18 235); --accent-ink: var(--n-0);   --accent-soft: oklch(0.95 0.04 235); --accent-ring: oklch(0.55 0.18 235 / 0.20); }
:root[data-accent="rose"]    { --accent: oklch(0.60 0.20 0);   --accent-ink: var(--n-0);   --accent-soft: oklch(0.96 0.04 0);   --accent-ring: oklch(0.60 0.20 0 / 0.20); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--d-fz);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
code, kbd, .mono, .fmono { font-family: var(--f-mono); font-feature-settings: normal; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Layout — sidebar + topbar
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-rows: var(--top-h) 1fr;
  min-height: 100vh;
}
.sidebar {
  grid-row: 1 / 3;
  grid-column: 1;
  border-right: 1px solid var(--c-line);
  background: var(--c-surface);
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.topbar {
  grid-row: 1; grid-column: 2;
  border-bottom: 1px solid var(--c-line);
  background: color-mix(in oklch, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  display: flex; align-items: center;
  padding: 0 18px;
  gap: 12px;
  position: sticky; top: 0; z-index: 30;
  height: var(--top-h);
}
.main {
  grid-row: 2; grid-column: 2;
  padding: 22px 26px 60px;
  min-width: 0;
}

/* Brand (achromatic mark) */
.brand {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 14px 12px;
  font-weight: var(--fw-semibold); font-size: var(--fs-lg);
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
}
.brand .key {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--rsm-brand);
  color: var(--rsm-brand-ink);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}
.brand .key svg { display: block; }

/* Nav groups */
.nav-group { padding: 8px 8px; }
.nav-group + .nav-group { border-top: 1px solid var(--c-line-2); margin-top: 4px; padding-top: 10px; }
.nav-label {
  font-size: 10.5px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-loose-2);
  text-transform: uppercase; color: var(--c-ink-4);
  padding: 4px 8px 6px;
}
.nav-label.collapsible {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.nav-label.collapsible:hover { color: var(--c-ink-3); }

.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
}
.nav-item:hover { background: var(--c-surface-2); color: var(--c-ink); }
/* Vercel-style active: inset border, no fill */
.nav-item.active {
  color: var(--c-ink);
  background: var(--c-surface-2);
  box-shadow: inset 2px 0 0 var(--c-ink);
  border-radius: 0;
}
.nav-item .ico { width: 16px; height: 16px; display: grid; place-items: center; flex: 0 0 auto; color: currentColor; opacity: .9; }
.nav-item .ct {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs); color: var(--c-ink-4);
  background: var(--c-surface-2);
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--c-line-2);
}
.nav-item.active .ct { background: transparent; border-color: var(--c-line-2); color: var(--c-ink); }

.sidebar-footer {
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--c-line-2);
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--c-ink-3);
}
.avatar {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-ink); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  display: grid; place-items: center;
  flex: 0 0 auto;
}

/* Topbar */
.crumbs {
  display: flex; align-items: center; gap: 6px;
  color: var(--c-ink-3); font-size: var(--fs-sm);
  min-width: 0;
}
.crumbs .sep { color: var(--c-ink-4); }
.crumbs .cur { color: var(--c-ink); font-weight: var(--fw-medium); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.search {
  display: flex; align-items: center; gap: 6px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 5px 9px;
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  min-width: 240px;
}
.search input {
  border: 0; outline: 0; background: transparent;
  color: var(--c-ink); font: inherit; flex: 1;
}
.search kbd {
  font-family: var(--f-mono);
  font-size: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--c-ink-3);
}

/* ============================================================
   Topbar nav variant
   ============================================================ */
.app.app-top {
  grid-template-columns: 1fr;
  grid-template-rows: var(--top-h) auto 1fr;
}
.app.app-top .topbar  { grid-column: 1; grid-row: 1; }
.app.app-top .subcrumbs { grid-column: 1; grid-row: 2; }
.app.app-top .main    { grid-column: 1; grid-row: 3; }

.subcrumbs {
  padding: 8px 26px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.brand-top { padding: 0; margin-right: 20px; gap: 8px; }
.brand-top .key { width: 22px; height: 22px; font-size: 13px; }

.nav-top { display: flex; align-items: center; gap: 2px; height: 100%; }
.nav-top-item {
  position: relative;
  display: flex; align-items: center;
  height: 100%;
  padding: 0 2px;
}
.nav-top-trigger,
.nav-top-item.single {
  display: inline-flex; align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.nav-top-item.single .ico { width: 14px; height: 14px; display: inline-grid; place-items: center; opacity: .8; }
.nav-top-trigger:hover,
.nav-top-item.single:hover { background: var(--c-surface-2); color: var(--c-ink); }
/* Vercel active: inset bottom-border on topbar */
.nav-top-item.active > .nav-top-trigger,
.nav-top-item.single.active {
  color: var(--c-ink);
  background: var(--c-surface-2);
  box-shadow: inset 0 -2px 0 var(--c-ink);
  border-radius: 0;
}
.nav-top-item.open > .nav-top-trigger { background: var(--c-surface-2); color: var(--c-ink); }

.nav-top-menu {
  position: absolute;
  top: calc(100% - 2px); left: 0;
  min-width: 280px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  padding: 6px;
  z-index: 60;
  animation: navDown .12s ease-out;
}
@keyframes navDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-top-mi {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--c-ink);
}
.nav-top-mi:hover { background: var(--c-surface-2); }
.nav-top-mi.active { background: var(--c-surface-2); box-shadow: inset 2px 0 0 var(--c-ink); }
.nav-top-mi .mi-ico {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  flex: 0 0 auto;
}
.nav-top-mi.active .mi-ico { background: var(--c-ink); color: var(--c-bg); }
.nav-top-mi .mi-label {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: 6px;
}
.nav-top-mi .mi-ct {
  font-size: 10.5px; font-weight: var(--fw-medium);
  color: var(--c-ink-4);
  background: var(--c-surface-2);
  padding: 0 5px; border-radius: 999px;
  border: 1px solid var(--c-line-2);
}
.nav-top-mi.active .mi-ct { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.nav-top-mi .mi-sub {
  font-size: var(--fs-xs); color: var(--c-ink-3);
  margin-top: 1px;
}

/* ============================================================
   Buttons (legacy .btn-r alias on foundation)
   ============================================================ */
.btn-r {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer;
  line-height: 1.4;
  user-select: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard);
}
.btn-r:hover { background: var(--c-surface-2); }
.btn-r:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.btn-r:active { filter: brightness(0.95); }
.btn-r:disabled { opacity: .5; cursor: not-allowed; }

.btn-r.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-r.primary:hover { filter: brightness(1.06); }
.btn-r.ghost { border-color: transparent; background: transparent; color: var(--c-ink-2); }
.btn-r.ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }
.btn-r.danger { color: var(--s-err); border-color: var(--c-line); }
.btn-r.danger:hover { background: var(--s-err-bg); border-color: color-mix(in oklch, var(--s-err) 30%, var(--c-line)); }
.btn-r.success { background: var(--s-ok); color: white; border-color: var(--s-ok); }
.btn-r.success:hover { filter: brightness(1.06); }
.btn-r.secondary { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); }
.btn-r.secondary:hover { background: var(--c-surface-2); border-color: var(--c-line-strong, var(--c-line)); }
.btn-r.warning { color: var(--s-warn); border-color: color-mix(in oklch, var(--s-warn) 35%, var(--c-line)); background: var(--c-surface); }
.btn-r.warning:hover { background: var(--s-warn-bg); }

.btn-r.sm { padding: 3px 7px; font-size: var(--fs-xs); }
.btn-r.lg { padding: 8px 14px; font-size: var(--fs-lg); }
.btn-r.icon { padding: 5px; }
.btn-r.icon.sm { padding: 3px; }

/* ============================================================
   Card (legacy .card-r)
   ============================================================ */
.card-r {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card-r > .card-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-line-2);
  gap: 12px;
}
.card-h h3 {
  margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  display: flex; align-items: center; gap: 7px;
}
.card-h .sub { color: var(--c-ink-3); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.card-r > .card-b { padding: 14px; }
.card-r > .card-b.flush { padding: 0; }

/* ============================================================
   Page header
   ============================================================ */
.page-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.page-h h1 {
  margin: 0;
  font-size: var(--d-fz-h1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}
.page-h .sub { color: var(--c-ink-3); font-size: var(--fs-sm); margin-top: 4px; }
.page-h .right { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   Stat cards
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-1);
}
.stat .lbl { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: var(--fw-medium); display: flex; align-items: center; gap: 6px; }
.stat .v { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--c-ink); line-height: var(--lh-tight); }
.stat .delta { font-size: var(--fs-xs); color: var(--c-ink-3); }
.stat .delta.up { color: var(--s-ok); }
.stat .delta.dn { color: var(--s-err); }
.stat .spark { position: absolute; right: 8px; bottom: 6px; opacity: .55; pointer-events: none; }
.stat.accent::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent);
}
.stat .lbl .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c-ink-4); }
.stat.ok     .lbl .dot { background: var(--s-ok); }
.stat.warn   .lbl .dot { background: var(--s-warn); }
.stat.err    .lbl .dot { background: var(--s-err); }
.stat.info   .lbl .dot { background: var(--s-info); }
/* .stat.violet deprecated 2026-05-16 — use neutral default or .warn/.err per foundation */

/* ============================================================
   Tables
   ============================================================ */
.tbl-wrap {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}
/* v0.17.16 — opt-in horizontal-scroll desktop-en is azokon a táblákon,
   amelyek sok oszlopot tartalmaznak (parts_catalog, payments, stb.).
   A border-radius klippelés miatt a `overflow: hidden` default; ez a
   variáns x-tengelyen scroll-engedélyez. A `tbl()` macro hívása így:
   `{% call tbl(klass="scrollable", ...) %}`. */
.tbl-wrap.scrollable {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.tbl-wrap.scrollable > table.tbl {
  min-width: 980px;
}
table.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--d-fz-sm);
}
table.tbl thead th {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  text-align: left;
  padding: 8px var(--d-pad-x);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
table.tbl tbody td {
  padding: 0 var(--d-pad-x);
  height: var(--d-row-h);
  vertical-align: middle;
  border-bottom: 1px solid var(--c-line-2);
  color: var(--c-ink-2);
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--c-surface-2); }
table.tbl tbody td.strong { color: var(--c-ink); font-weight: var(--fw-medium); }
table.tbl tbody td.right { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tbody td.mono  { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-2); }
table.tbl tbody td.muted { color: var(--c-ink-3); }
table.tbl tbody tr.row-warn { background: color-mix(in oklch, var(--s-warn-bg) 50%, transparent); }
table.tbl tbody tr.row-warn:hover { background: var(--s-warn-bg); }
table.tbl tbody tr.row-err { background: color-mix(in oklch, var(--s-err-bg) 40%, transparent); }
table.tbl tbody tr.selected td { background: var(--accent-soft); }
.tbl-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--c-line-2);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  background: var(--c-surface-2);
}

/* ============================================================
   Badge (legacy .bdg with kind)
   ============================================================ */
.bdg {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  border: 1px solid var(--c-line);
  white-space: nowrap;
  line-height: 1.55;
}
.bdg .dot {
  width: 5px; height: 5px; border-radius: 999px; background: currentColor;
  margin-right: 2px;
}
.bdg.ok    { color: var(--s-ok);    background: var(--s-ok-bg);    border-color: color-mix(in oklch, var(--s-ok) 25%, var(--c-line)); }
.bdg.warn  { color: var(--s-warn);  background: var(--s-warn-bg);  border-color: color-mix(in oklch, var(--s-warn) 25%, var(--c-line)); }
.bdg.err   { color: var(--s-err);   background: var(--s-err-bg);   border-color: color-mix(in oklch, var(--s-err) 25%, var(--c-line)); }
.bdg.info  { color: var(--s-info);  background: var(--s-info-bg);  border-color: color-mix(in oklch, var(--s-info) 25%, var(--c-line)); }
/* .bdg.violet / .bdg.pink deprecated 2026-05-17 — removed. */
.bdg.solid-ok { background: var(--s-ok); color: white; border-color: transparent; }
.bdg.square { border-radius: var(--r-sm); font-family: var(--f-mono); }

/* ============================================================
   Form fields
   ============================================================ */
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld > label { font-size: var(--fs-sm); color: var(--c-ink-2); font-weight: var(--fw-medium); }
.fld > .hint { font-size: var(--fs-xs); color: var(--c-ink-3); }
.inp, .sel, textarea.inp {
  width: 100%;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 6px 9px;
  outline: 0;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.inp:hover, .sel:hover, textarea.inp:hover { border-color: var(--c-line-strong); }
.inp:focus, .sel:focus, textarea.inp:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.inp.mono { font-family: var(--f-mono); }
.inp[readonly] { background: var(--c-surface-2); color: var(--c-ink-2); }
.fld-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fld-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.fld-grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* ============================================================
   Toggle / switch
   ============================================================ */
.switch {
  --w: 30px; --h: 16px;
  position: relative; display: inline-block;
  width: var(--w); height: var(--h);
  background: var(--c-line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
  flex: 0 0 auto;
}
.switch::after {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: calc(var(--h) - 2px); height: calc(var(--h) - 2px);
  border-radius: 999px;
  background: var(--n-0);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.30);
  transition: transform var(--dur-base) var(--ease-spring);
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(calc(var(--w) - var(--h))); }

/* ============================================================
   Chip / tag
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: var(--fs-xs);
  font-family: var(--f-mono);
  font-weight: var(--fw-medium);
}
.chip.muted { background: var(--c-surface-2); color: var(--c-ink-3); }

/* ============================================================
   KV grid (key-value definition list)
   ============================================================ */
.kv {
  display: grid;
  /* auto first column = dt sizes to content (no overflow on long module-names
     like parts_search_module_fixed_hu_en_v3); minmax(130px, ...) keeps 130px
     visual-rhythm minimum; minmax(0, 1fr) prevents value-column overflow. */
  grid-template-columns: minmax(130px, max-content) minmax(0, 1fr);
  row-gap: 6px;
  column-gap: 12px;
  font-size: var(--fs-sm);
}
.kv dt { color: var(--c-ink-3); font-weight: var(--fw-medium); }
.kv dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
/* Inline code inside kv values (e.g. long module names like
   parts_search_module_fixed_hu_en_v3) must not overflow the dd column. */
.kv dd code { word-break: break-all; }

/* ============================================================
   Banner
   ============================================================ */
.banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--s-info-bg);
  color: var(--c-ink-2);
  border: 1px solid color-mix(in oklch, var(--s-info) 20%, var(--c-line));
  font-size: var(--fs-sm);
}
.banner.warn { background: var(--s-warn-bg); border-color: color-mix(in oklch, var(--s-warn) 25%, var(--c-line)); color: var(--s-warn); }
.banner.tip  { background: var(--c-surface-2); border-color: var(--c-line); }
.banner.ok   { background: var(--s-ok-bg); border-color: color-mix(in oklch, var(--s-ok) 25%, var(--c-line)); color: var(--s-ok); }
.banner.err  { background: var(--s-err-bg); border-color: color-mix(in oklch, var(--s-err) 25%, var(--c-line)); color: var(--s-err); }
.banner .ic { font-size: 14px; line-height: 1.2; }

/* Billing 3-flow tab-panel (rm-ui-015, v0.14.6) */
.tab-panel { display: block; }
.tab-panel.hidden { display: none; }

/* Line-item-row remove-button — keep it visually-compact */
.line-item-row td:last-child .btn-r { padding: 2px 8px; }

/* Parts catalog alt-SKU display (rm-ui-022, v0.15.11) */
.alt-sku-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.alt-ref-block { padding: 8px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Parts catalog bulk-action UI (rm-ui-010, v0.13.4) */
.bulk-action-bar {
    position: sticky; top: var(--top-h);
    z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.bulk-action-bar[hidden] { display: none; }

.pc-check-col { width: 36px; padding-left: 8px; padding-right: 0; }
.pc-row-deleted td {
    opacity: 0.55;
    background: var(--c-surface-2);
    text-decoration: line-through;
    text-decoration-color: var(--c-ink-3);
}
.pc-row-deleted td.pc-check-col { text-decoration: none; }

/* Per-row actions dropdown (rm-ui-010 — .row-actions native details/summary) */
.row-actions { position: relative; display: inline-block; }
.row-actions > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px;
}
.row-actions > summary::-webkit-details-marker { display: none; }
.row-actions > summary::marker { content: ""; }
.row-actions .row-actions-menu {
    position: absolute; right: 0; top: calc(100% + 4px);
    margin: 0; padding: 4px;
    min-width: 180px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-pop);
    z-index: 50;
    list-style: none;
}
.row-actions .row-actions-menu li { margin: 0; }
.row-actions .row-actions-menu a,
.row-actions .row-actions-menu .row-actions-btn {
    display: block; width: 100%;
    padding: 6px 10px;
    color: var(--c-ink);
    text-decoration: none;
    font-size: var(--fs-sm);
    background: transparent; border: 0;
    text-align: left;
    border-radius: var(--r-xs);
    cursor: pointer;
}
.row-actions .row-actions-menu a:hover,
.row-actions .row-actions-menu .row-actions-btn:hover { background: var(--c-surface-2); }
.row-actions .row-actions-menu .row-actions-btn.danger { color: var(--s-err); }
.row-actions .row-actions-menu .row-actions-btn.danger:hover {
    background: var(--s-err-bg); color: var(--s-err);
}

/* Billing invoice preview box (rm-ui-008, v0.13.2) */
.invoice-preview-box {
    min-height: 64px;
    background: var(--c-surface-2);
    border-radius: var(--r);
    padding: 12px 16px;
}

/* Option A (rm-ui-006, v0.13.0) — manufacturer confidence-jelölés a parts_catalog listán */
.badge-mfg-inferred {
    display: inline-block; margin-left: 3px;
    color: var(--c-ink-3); font-size: var(--fs-xs);
    cursor: help; font-weight: var(--fw-medium);
}
.badge-mfg-materom-disambig {
    display: inline-block; margin-left: 3px;
    color: var(--s-info); font-size: var(--fs-xs);
    cursor: help; font-weight: var(--fw-semibold);
}

/* ============================================================
   Modal (foundation v1, rm-ui-004 Phase 12-cleanup)
   ============================================================
   Pattern: <div class="modal-overlay" id="modal-X" hidden>
              <div class="modal-r" role="dialog" aria-modal="true">
                <div class="modal-h"><h3>...</h3><button class="modal-close">×</button></div>
                <div class="modal-b">…form / content…</div>
                <div class="modal-f">…actions…</div>
              </div>
            </div>
   Toggle: JS handler in base.html (.modal-trigger / [data-modal-open] etc.)
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.36);
    display: flex; align-items: center; justify-content: center;
    z-index: 150; padding: 24px;
    animation: modal-fade 120ms ease;
}
.modal-overlay[hidden] { display: none; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-r {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,0.20);
    max-width: 560px; width: 100%;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.modal-h {
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-line-2);
    background: var(--c-surface-2);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.modal-h h3 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.modal-b { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-f {
    padding: 12px 18px;
    border-top: 1px solid var(--c-line-2);
    background: var(--c-surface-2);
    display: flex; gap: 8px; justify-content: flex-end;
}
.modal-close {
    background: transparent; border: 0;
    color: var(--c-ink-3); cursor: pointer;
    font-size: 20px; line-height: 1;
    padding: 4px 8px; border-radius: var(--r-sm);
}
.modal-close:hover { background: var(--c-line-2); color: var(--c-ink); }

@media (max-width: 480px) {
    .modal-overlay { padding: 8px; }
    .modal-r { max-height: calc(100vh - 16px); border-radius: var(--r); }
    .modal-h, .modal-b, .modal-f { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   Empty / loading
   ============================================================ */
.empty {
  padding: 28px;
  text-align: center;
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
}

/* ============================================================
   Dropdown
   ============================================================ */
.dropdown { position: relative; display: inline-block; }

/* Language dropdown (native <details>/<summary>, no JS) */
.lang-dropdown { position: relative; display: inline-block; }
.lang-dropdown > summary { list-style: none; cursor: pointer; }
.lang-dropdown > summary::-webkit-details-marker { display: none; }
.lang-dropdown > summary::marker { content: ""; }
.lang-dropdown[open] > summary { background: var(--c-surface-2); }
.lang-dropdown .lang-menu {
    position: absolute; right: 0; top: calc(100% + 4px);
    margin: 0; padding: 4px; list-style: none;
    min-width: 80px; background: var(--c-surface);
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    z-index: 1000;
}
.lang-dropdown .lang-menu li { margin: 0; }
.lang-dropdown .lang-menu a {
    display: block; padding: 6px 10px; border-radius: var(--r-xs);
    color: var(--c-ink); text-decoration: none; font-size: var(--fs-sm);
}
.lang-dropdown .lang-menu a:hover { background: var(--c-surface-2); }
.dropdown-menu-r {
  /* position + top/right/left set inline by Dropdown (fixed positioning so menu
     escapes any .tbl-wrap { overflow: hidden } clipping). */
  min-width: 240px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--sh-pop);
  padding: 4px;
  z-index: 1000;
}
.dropdown-menu-r .item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-menu-r .item:hover { background: var(--c-surface-2); }
.dropdown-menu-r .item .ico { color: var(--c-ink-3); }
.dropdown-menu-r .item.danger { color: var(--s-err); }
.dropdown-menu-r .item.danger .ico { color: var(--s-err); }
.dropdown-menu-r .sep { height: 1px; background: var(--c-line-2); margin: 4px 0; }

/* ============================================================
   Tabs
   ============================================================ */
.tabs-r {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 16px;
}
.tabs-r .tab {
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs-r .tab:hover { color: var(--c-ink); }
.tabs-r .tab.active { color: var(--c-ink); border-bottom-color: var(--accent); }

/* ============================================================
   Activity feed
   ============================================================ */
.feed-item {
  display: flex; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-line-2);
  font-size: var(--fs-sm);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item .when { color: var(--c-ink-3); font-variant-numeric: tabular-nums; min-width: 78px; font-size: var(--fs-xs); }
.feed-item .who  { color: var(--c-ink-2); font-weight: var(--fw-medium); }

/* ============================================================
   Code block
   ============================================================ */
.code {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 10px 12px;
  color: var(--c-ink-2);
  white-space: pre;
  overflow-x: auto;
}

/* ============================================================
   Progress + mini-bar
   ============================================================ */
.bar {
  height: 4px;
  background: var(--c-line);
  border-radius: 999px;
  overflow: hidden;
}
.bar > i {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.bar > i.ok   { background: var(--s-ok); }
.bar > i.warn { background: var(--s-warn); }
.bar > i.err  { background: var(--s-err); }

/* Numeric display — large metric values (currency totals, hero figures).
   Foundation typography helper. */
.num-display {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.minibars { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.minibars i { width: 3px; background: var(--accent); border-radius: 1px; opacity: .8; display: block; }

/* ============================================================
   Section header
   ============================================================ */
.sect-h {
  display: flex; align-items: center; gap: 8px;
  margin: 22px 0 10px;
  color: var(--c-ink);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
}
.sect-h .ico { color: var(--c-ink-3); }
.sect-h .right { margin-left: auto; }

/* ============================================================
   Checkbox-ish
   ============================================================ */
.cbx {
  width: 14px; height: 14px;
  border: 1px solid var(--c-line);
  border-radius: 3px;
  background: var(--c-surface);
  display: inline-grid; place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.cbx.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.cbx.on::after { content: "✓"; font-size: 10px; line-height: 1; }

/* ============================================================
   Two-col layout (form sections)
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}
.two-col .label-col h4 { margin: 0 0 4px; font-size: var(--fs-md); }
.two-col .label-col p { margin: 0; font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ============================================================
   Misc utility helpers
   ============================================================ */
.hr-r { height: 1px; background: var(--c-line); border: 0; margin: 14px 0; }
.muted { color: var(--c-ink-3); }
.ink-2 { color: var(--c-ink-2); }
.ink-3 { color: var(--c-ink-3); }
.ink-4 { color: var(--c-ink-4); }
.t-mono { font-family: var(--f-mono); font-size: var(--fs-sm); }
.t-num  { font-variant-numeric: tabular-nums; }
.flex { display: flex; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.col { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.center { align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 18px; } .mt-5 { margin-top: 24px; }
.mt-6 { margin-top: 6px; } .mt-10 { margin-top: 10px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 18px; } .mb-5 { margin-bottom: 24px; }
.mb-card, .mb-14 { margin-bottom: 14px; } .mb-10 { margin-bottom: 10px; } .mb-16 { margin-bottom: 16px; }
.ms-1 { margin-left: 4px; } .ms-2 { margin-left: 8px; } .ms-3 { margin-left: 12px; }
.me-1 { margin-right: 4px; } .me-2 { margin-right: 8px; } .me-3 { margin-right: 12px; }
.ms-auto { margin-left: auto; }
.ml-auto { margin-left: auto; }
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.w-full { width: 100%; } .w-100 { width: 100%; } .w-50 { width: 50%; } .w-25 { width: 25%; } .w-75 { width: 75%; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-block { display: block; }
.d-none, .hidden { display: none; }
.d-flex { display: flex; }
.cursor-pointer { cursor: pointer; }
.text-err  { color: var(--s-err); }
.text-ok   { color: var(--s-ok); }
.text-warn { color: var(--s-warn); }
.text-info { color: var(--s-info); }
.text-end  { text-align: right; }
.text-right { text-align: right; }
.justify-end   { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.flush-tbl-wrap { border: 0; border-radius: 0; box-shadow: none; }
.btn-r-block { width: 100%; justify-content: center; }
.btn-r-block-padded { width: 100%; justify-content: center; padding: 8px; }

/* Common flex / grid composition utilities */
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-end     { display: flex; justify-content: flex-end; }
.flex-stretch { display: flex; align-items: stretch; }
.fld-grid-2   { grid-template-columns: 1fr 1fr; }

/* Input-group composition (foundation v1, replaces inline style on .inp prefix boxes) */
.input-group { display: flex; align-items: stretch; }
.input-group-prefix {
    display: grid; place-items: center; padding: 0 10px;
    background: var(--c-surface-2); border: 1px solid var(--c-line);
    border-radius: 0 var(--r) var(--r) 0;
    color: var(--c-ink-3); font-size: var(--fs-sm);
}
.inp.input-group-left { border-right: 0; border-radius: var(--r) 0 0 var(--r); }

/* Card-footer compositional (used in modal-like cards) */
.card-foot-actions {
    padding: 12px 16px; border-top: 1px solid var(--c-line-2);
    background: var(--c-surface-2); display: flex; gap: 8px;
    justify-content: flex-end; border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* Compact misc */
.pad-24 { padding: 24px; }
.pad-empty { padding: 24px 12px; }
.hr-tight { border: 0; border-top: 1px solid var(--c-line); margin: 10px 0; }
.text-block { font-size: var(--fs-sm); margin: 0 0 12px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 18px; padding-bottom: 18px; }
.py-5 { padding-top: 24px; padding-bottom: 24px; }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-center { text-align: center; }
.fw-600 { font-weight: var(--fw-semibold); }
.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--sp-4); padding-right: var(--sp-4); }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.justify-center { justify-content: center; }
.mt-14 { margin-top: 14px; }
.m-row-gap { margin: 4px 0 8px; }
.scroll-600 { max-height: 600px; overflow-y: auto; }
.caption-sub { opacity: 0.88; margin-top: 4px; font-weight: var(--fw-regular); }
.toggle-section-header { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-sm); padding-top: 22px; }

/* Sidebar footer — user info block */
.sidebar-user-col { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.sidebar-user-email { font-size: 12px; color: var(--c-ink-2); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout-link { font-size: 10.5px; color: var(--c-ink-3); text-decoration: none; }
.sidebar-version-link { margin-left: auto; font-size: 10px; text-decoration: none; }

/* Auth / login shell — unauthenticated layout */
.auth-shell { max-width: 460px; padding-top: 56px; }
.auth-brand-block { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 28px; text-align: center; }
.auth-brand-row { display: flex; align-items: center; gap: 12px; }
.auth-brand-icon { width: 32px; height: 32px; border-radius: var(--r-md, 8px); background: var(--n-900); color: var(--n-0); display: grid; place-items: center; }
.auth-app-title { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--c-ink); }
.auth-subtitle { font-size: var(--fs-sm); max-width: 380px; line-height: var(--lh-base); }
.no-underline { text-decoration: none; }

/* ============================================================
   Login screen (bare layout, no sidebar/topbar)
   ============================================================ */
.login-shell {
  min-height: 100vh;
  background: var(--c-surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
  gap: var(--sp-6);
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.login-brand {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--sp-1);
}
.login-brand .brand-mark {
  width: 26px; height: 26px; border-radius: var(--r-md);
  background: var(--n-900); color: var(--n-0);
  display: grid; place-items: center;
}
.login-brand .brand-name {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}
.login-sub {
  margin: 0 0 var(--sp-2);
  line-height: 1.45;
}
.login-form {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.login-form .btn-r.primary {
  justify-content: center;
  padding: 10px;
  font-size: var(--fs-lg);
  margin-top: var(--sp-2);
}
.login-captcha {
  display: flex; align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.login-captcha-brand {
  text-align: right;
  display: flex; flex-direction: column;
  gap: 2px;
}
.login-forgot {
  text-align: center;
  font-size: var(--fs-sm);
}
.login-forgot a {
  color: var(--c-ink-2);
}
.login-card .btn-r.secondary {
  justify-content: center;
  padding: 8px;
}
.login-lang {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  margin-top: var(--sp-1);
}
.login-lang a {
  cursor: pointer;
  color: var(--c-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--c-line);
}
.login-lang a.active {
  color: var(--c-ink);
  text-decoration-color: var(--c-ink);
  font-weight: var(--fw-medium);
}
.login-foot {
  text-align: center;
}

/* ============================================================
   Dashboard-specific grid
   ============================================================ */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--sp-4);
}
.dash-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.dash-card-pad {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

/* ============================================================
   Responsive
   ============================================================ */
/* ============================================================
   Responsive breakpoints (Phase 12c, v0.11.2-ui)
   ============================================================
   Mobile-pass: 4 viewport tier — desktop default (≥1101px),
   tablet (≤1100px), large-phone/tablet-portrait (≤768px),
   phone-portrait (≤480px), small-phone (≤360px).
   ============================================================ */

/* Tablet — desktop layout marad, stat-grid 6→3 col, dash-grid 1-col */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}

/* Hamburger toggle — default hidden, mobile-only show */
.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--c-line);
  border-radius: var(--r); color: var(--c-ink-2);
  padding: 6px 8px; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle:hover { background: var(--c-surface-2); color: var(--c-ink); }

/* Tablet portrait / large phone — sidebar→drawer, 2-col stat */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .topbar, .main { grid-column: 1; }
  .main { padding: 16px 14px 48px; }

  /* Sidebar → off-canvas drawer (left slide-in) */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 240px; max-width: 86vw;
    transform: translateX(-105%);
    transition: transform 180ms ease;
    z-index: 100; box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    display: flex;
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(0,0,0,0.32); z-index: 99;
  }

  /* Show hamburger */
  .nav-toggle { display: inline-flex; }

  /* Stat-grid 6→2 col, dash-sub-grid → 1-col */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-sub-grid { grid-template-columns: 1fr; }

  /* Tables — horizontal scroll on narrow viewport */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap > table.tbl { min-width: 600px; }

  /* Page header — stack title + right-actions */
  .page-h { flex-direction: column; align-items: stretch; gap: 8px; }
  .page-h .right { justify-content: flex-end; flex-wrap: wrap; }

  /* Field grids → narrow 2-col */
  .fld-grid.cols-3, .fld-grid.cols-4 { grid-template-columns: 1fr 1fr; }

  /* Topbar — tighter padding */
  .topbar { padding: 0 12px; gap: 8px; }

  /* Action-bar (rm-ui-007 — gomb-sor table-fejléc fölött) */
  .action-bar { flex-wrap: wrap; }

  /* Selective column-hide: alacsony-prioritású oszlopok 768px alatt rejtve.
     A template-ek hozzáadhatják ezt a th/td-hez (created_at, mfg, stb.). */
  .col-hide-mobile { display: none; }

  /* In-row action-stack — per-row Műveletek gombsor wrap, hogy ne ugorjon
     ki a row-on. */
  td .row.gap-2 { flex-wrap: wrap; row-gap: 4px; }
}

/* Phone portrait — 1-col grids everywhere */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .fld-grid, .fld-grid.cols-2, .fld-grid.cols-3, .fld-grid.cols-4 {
    grid-template-columns: 1fr;
  }
  .page-h h1 { font-size: calc(var(--d-fz-h1) * 0.85); }
  .main { padding: 12px 10px 40px; }
  .tbl-foot {
    flex-direction: column; gap: 6px; align-items: stretch;
  }
  .topbar .crumbs { font-size: var(--fs-xs); }
  .topbar-actions { gap: 4px; }

  /* rm-ui-007 — extra columns rejtve nagyon keskeny viewport-on */
  .col-hide-narrow { display: none; }

  /* Modal footer (Save/Cancel) — vertikális stack mobilon */
  .modal-f { flex-direction: column; align-items: stretch; }
  .modal-f .btn-r { width: 100%; justify-content: center; }

  /* Filter forms — egy-oszlopos minden mező */
  form.card-r .fld-grid { grid-template-columns: 1fr !important; }
}

/* Small phone — minimal further compression */
@media (max-width: 360px) {
  .page-h h1 { font-size: calc(var(--d-fz-h1) * 0.75); }
  .btn-r { font-size: var(--fs-xs); padding: 4px 8px; }
  .topbar { padding: 0 8px; }
}

/* ============================================================
   Bootstrap-neutralization (v0.10.7)
   ============================================================
   Bootstrap CDN is still loaded (per v0.8.0 plan; removal deferred to a
   later sweep). Its `.row > * { width: 100%; flex-shrink: 0 }` rule
   forces every child of any `.row` to take full width — which breaks
   the foundation `.row` flex utility (used as `.row.gap-3` etc. for
   inline-flex layouts in page headers and stat-strips). The override
   below restores natural sizing for foundation `.row`-children, while
   leaving Bootstrap-grid `.col-md-*` semantics alone (those are
   barely used post-Phase-11 anyway).
*/
.row > * {
  width: auto;
  max-width: none;
  flex-shrink: 1;
  flex-basis: auto;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}
/* But preserve Bootstrap-grid columns explicitly (if any template still
   uses .col-md-*-style classes), so we don't break legacy layouts. */
.row > .col,
.row > [class*=" col-"],
.row > [class^="col-"] {
  width: 100%;
  flex-shrink: 0;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* ── v0.11.2 Payment reminder popups ─────────────────────────────── */
.pay-reminder-stack {
  position: fixed;
  bottom: var(--sp-4);
  right: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  z-index: 1050;
  max-width: 400px;
  width: calc(100vw - var(--sp-8, 2rem));
}
.pay-reminder-card {
  display: flex;
  gap: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid color-mix(in oklch, var(--s-err) 35%, var(--c-line));
  border-left: 4px solid var(--s-err);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2, 0 4px 16px rgba(0,0,0,.12));
  padding: var(--sp-3) var(--sp-4);
  animation: pay-remind-in 0.25s ease;
}
@keyframes pay-remind-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pay-reminder-icon {
  color: var(--s-err);
  flex-shrink: 0;
  padding-top: 2px;
}
.pay-reminder-body {
  flex: 1;
  min-width: 0;
}
.pay-reminder-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  margin-bottom: var(--sp-1);
}
.pay-reminder-meta {
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  line-height: var(--lh-base);
  margin-bottom: var(--sp-2);
}
.pay-reminder-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.pay-reminder-card--trial {
  border-color: color-mix(in oklch, var(--s-warn) 35%, var(--c-line));
  border-left-color: var(--s-warn);
}
.pay-reminder-card--trial .pay-reminder-icon {
  color: var(--s-warn);
}
.pay-reminder-card--trial.pay-reminder-card--expired {
  border-color: color-mix(in oklch, var(--s-err) 35%, var(--c-line));
  border-left-color: var(--s-err);
}
.pay-reminder-card--trial.pay-reminder-card--expired .pay-reminder-icon {
  color: var(--s-err);
}

/* ── rm-ui-003: CSP inline-style cleanup utilities (2026-05-17) ───── */

/* Sidebar footer — user info column */
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.sidebar-user-email {
  font-size: 12px;
  color: var(--c-ink-2);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-logout-link {
  font-size: 10.5px;
  color: var(--c-ink-3);
  text-decoration: none;
}

/* Topbar clock / timestamp */
.topbar-clock {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Auth shell (unauthenticated pages) */
.auth-shell {
  max-width: 460px;
  padding-top: 56px;
}
.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  text-align: center;
}
.auth-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* brand-mark in auth context (32px vs sidebar 26px) */
.auth-brand-row .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--n-900);
  color: var(--n-0);
  display: grid;
  place-items: center;
}
.auth-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}
.auth-subtitle {
  font-size: var(--fs-sm);
  max-width: 380px;
  line-height: 1.45;
}
.auth-footer {
  font-size: 11px;
}

/* Changelog badge in sidebar nav */
.changelog-badge {
  margin-left: auto;
  font-size: 10px;
  text-decoration: none;
}

/* ============================================================
   v0.15.13-ui — UI hatékonysági javaslatok (rm-ui)
   ============================================================ */

/* #3 — sticky thead viewport-szinten.
   A default .tbl-wrap `overflow: hidden`-je új containing-block-ot
   csinál, így a sticky thead csak a wrapper-en belül „ragad", ami
   gyakorlatilag nem ragadás. Opt-in variáns engedi a vertikális
   sticky-t a topbar alatt — alkalmazd hosszú listákra (parts_catalog,
   audit-log, import-events). Border-radius klippelés feláldozva
   cserébe valódi sticky-headerért. */
.tbl-wrap.sticky-head { overflow: visible; }
.tbl-wrap.sticky-head > table.tbl thead th {
  top: calc(var(--top-h) - 1px);
  z-index: 5;
  box-shadow: 0 1px 0 var(--c-line);
}

/* #4 — globális HTMX loading-indicator.
   Minden `hx-*` request-során a triggerelő elem (form/button/link)
   .htmx-request class-t kap. Vizuális signposting: opacity-fade +
   cursor-progress, hogy az operator tudja: a kérés fut. */
.htmx-request,
.htmx-request * {
  cursor: progress;
}
form.htmx-request,
button.htmx-request,
a.htmx-request,
.htmx-request > button[type="submit"] {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}
/* Inline spinner — vékony border-pörgő animáció a button mellett. */
.htmx-indicator {
  display: none;
  width: 12px; height: 12px;
  border: 2px solid var(--c-line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: htmx-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }
@keyframes htmx-spin { to { transform: rotate(360deg); } }

/* #1 — sidebar nav-item hover-prefetch (no visual change, just
   marker class for JS handler in base.html). */
.nav-item[data-prefetch] { /* hook */ }