/* Aura Supply OS — UI Components */
/* Source: docs/aura-supply-os/design/01-design-system.md §5 */

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer; border: none;
  transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn-sm  { height: 28px; padding: 0 var(--sp-3); font-size: var(--text-sm); }
.btn-md  { height: 36px; }
.btn-lg  { height: 44px; padding: 0 var(--sp-6); }
.btn-scanner { height: 56px; padding: 0 var(--sp-6); font-size: var(--text-md); font-weight: 600; }

.btn-primary {
  background: var(--color-primary); color: var(--color-text-inverse);
}
.btn-primary:hover  { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }

.btn-secondary {
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover  { background: var(--color-surface-2); }
.btn-secondary:active { background: var(--color-surface-3); }

.btn-ghost {
  background: transparent; color: var(--color-text-secondary);
}
.btn-ghost:hover  { background: var(--color-surface-2); color: var(--color-text); }
.btn-ghost:active { background: var(--color-surface-3); }

.btn-danger-outline {
  background: transparent; color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.btn-danger-outline:hover { background: var(--color-danger-bg); }

.btn-danger {
  background: var(--color-danger); color: var(--color-text-inverse);
}
.btn-danger:hover { background: #8f1f18; }

.btn-ai {
  background: var(--color-ai-bg); color: var(--color-ai);
  border: 1px solid var(--color-ai-border);
}
.btn-ai:hover { background: var(--color-ai-border); }

.btn-full { width: 100%; }

.btn:disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.btn-gate::before { content: '🔒 '; font-size: 12px; }

/* ─── Inputs ─────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-label {
  /* display:block + margin: e nelkul a cimke inline volt, es a mezo betujara tapadt
     (merve 2026-08-27, Uj ugyfel urlap kepernyokep -- Peter lelete). */
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text);
}
.field-label .required { color: var(--color-danger); margin-left: 2px; }
.field-hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.field-error { font-size: var(--text-sm); color: var(--color-danger); display: flex; align-items: center; gap: 4px; }

.input {
  height: 36px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: var(--font-ui);
  outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  width: 100%;
}
.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-subtle);
}
.input.error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger-bg);
}
.input-num { text-align: right; font-variant-numeric: tabular-nums; }
.input-scanner {
  height: 64px; font-size: 28px; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600;
  letter-spacing: 2px;
}
select.input { cursor: pointer; }
textarea.input { height: auto; padding: var(--sp-2) var(--sp-3); resize: vertical; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 500;
  white-space: nowrap;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-neutral { background: var(--color-surface-2);  color: var(--color-text-secondary); }
/* FAKTORING kiemelés (KIMENŐ OLDAL spec, 2026-10-16): lila, mert faktoringnál több a teendő.
   A rendelés-listán a sor bal szélén lila sáv is jelzi (`tr.m5-sor-faktoring`). */
.badge-faktoring { background: #EDE7FF; color: #5A3FC2; font-weight: 700; letter-spacing: .3px; }
tr.m5-sor-faktoring > td:first-child { box-shadow: inset 4px 0 0 #6B4FD8; }
:root[data-theme="dark"] .badge-faktoring { background: #3B2A86; color: #E6DDFF; }
/* M5 Allokáció-munkaképernyő rácsa (2026-10-16): a tétel-tábla rugalmas, a lot-oszlop fix; keskenyen egymás alá. */
.m5-s4-racs { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-4); align-items: start; }
.m5-s4-racs > .card { min-width: 0; }
.m5-s4-racs .data-table thead th { white-space: normal; height: auto; padding-top: 6px; padding-bottom: 6px; vertical-align: bottom; }
.m5-s4-racs .data-table tbody td { white-space: normal; }
.m5-s4-racs .data-table tbody td.num { white-space: nowrap; }
.m5-s4-racs > .card:last-child .data-table { table-layout: fixed; }
.m5-s4-racs > .card:last-child .data-table th,
.m5-s4-racs > .card:last-child .data-table td { padding-left: 4px; padding-right: 4px; overflow-wrap: anywhere; word-break: break-word; }
.m5-s4-racs > .card:last-child .data-table thead th { text-transform: none; letter-spacing: 0; overflow-wrap: normal; word-break: normal; }
.m5-s4-racs > .card:last-child .data-table th:nth-child(1) { width: 30%; }
.m5-s4-racs > .card:last-child .data-table th:nth-child(2) { width: 17%; }
.m5-s4-racs > .card:last-child .data-table th:nth-child(3),
.m5-s4-racs > .card:last-child .data-table th:nth-child(4) { width: 17%; }
@media (max-width: 1280px) { .m5-s4-racs { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-faktoring { background: #3B2A86; color: #E6DDFF; }
}
.badge-ai {
  background: var(--color-ai-bg); color: var(--color-ai);
  border: 1px solid var(--color-ai-border);
}
.badge-primary { background: var(--color-primary-subtle); color: var(--color-primary); }

.status-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0;
}
.dot-success { background: var(--color-success); }
.dot-warning { background: var(--color-warning); }
.dot-danger  { background: var(--color-danger); }
.dot-info    { background: var(--color-info); }
.dot-muted   { background: var(--color-text-muted); }

.confidence-dots {
  display: inline-flex; gap: 3px; align-items: center;
}
.conf-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-ai-border);
}
.conf-dot.filled { background: var(--color-ai); }

/* ─── Table ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table thead th {
  height: 36px;
  padding: 0 var(--sp-3);
  background: var(--color-surface-2);
  font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--color-text-muted);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.data-table thead th.sortable { cursor: pointer; user-select: none; }
.data-table thead th.sortable:hover { color: var(--color-text); }
.data-table thead th.num { text-align: right; }

.data-table tbody tr { height: var(--row-compact); }
.data-table tbody tr:hover td { background: var(--color-surface-2); }
.data-table tbody tr.selected td { background: var(--color-primary-subtle); }
.data-table tbody tr.selected td:first-child { box-shadow: inset 2px 0 0 var(--color-primary); }

.data-table tbody td {
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.data-table tbody td.ai-col { text-align: center; }

.table-header {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.table-title { font-size: var(--text-xl); font-weight: 650; }
.table-actions { display: flex; gap: var(--sp-2); align-items: center; margin-left: auto; }

/* ─── Filter bar ─────────────────────────────────────────── */
.filter-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.filter-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.filter-search {
  position: relative; flex: 1; min-width: 200px; max-width: 320px;
}
.filter-search .input { padding-left: 32px; }
.filter-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); pointer-events: none; width: 14px; height: 14px;
}

.filter-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px 10px;
  background: var(--color-primary-subtle); color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 500;
}
.filter-chip-remove {
  background: none; border: none; cursor: pointer; color: var(--color-primary);
  display: flex; align-items: center; padding: 0; margin-left: 2px;
  width: 14px; height: 14px; border-radius: var(--radius-full);
}
.filter-chip-remove:hover { background: var(--color-primary); color: white; }

/* ─── Bulk action bar ────────────────────────────────────── */
.bulk-bar {
  display: none;
  position: sticky; top: 0; z-index: 10;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-2);
  align-items: center; gap: var(--sp-3);
  animation: slide-in 120ms ease-out;
}
.bulk-bar.visible { display: flex; }
.bulk-count { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); }
@keyframes slide-in { from { transform: translateY(-4px); opacity: 0; } }

/* ─── Pagination ─────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-3) 0;
}
.page-count { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); }
.page-btn {
  min-width: 32px; height: 32px; padding: 0 var(--sp-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-size: var(--text-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.page-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.page-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

/* ─── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-bottom: 1px solid var(--color-border);
}
.card-title { font-size: var(--text-md); font-weight: 600; }
.card-body { padding: var(--sp-4); }

/* ─── KPI Strip ──────────────────────────────────────────── */
.kpi-strip {
  display: flex; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.kpi-tile {
  flex: 1; min-width: 140px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.kpi-label {
  font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--color-text-muted); margin-bottom: var(--sp-2);
}
.kpi-value {
  font-size: var(--text-kpi); font-weight: 700;
  line-height: var(--lh-kpi); font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.kpi-trend {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); margin-top: var(--sp-1);
}
.kpi-trend.up { color: var(--color-success); }
.kpi-trend.down { color: var(--color-danger); }
.kpi-trend.neutral { color: var(--color-text-muted); }

/* ─── Tabs ───────────────────────────────────────────────── */
.tabs {
  display: flex; border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--sp-4); gap: 0; overflow-x: auto;
}
.tab-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: none; background: transparent; cursor: pointer;
  font-size: var(--text-base); color: var(--color-text-secondary);
  font-family: var(--font-ui);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; }
/* Deaktivált (később bevezetendő) fül -- javítás 2026-10-16 A, felhasználói szabály: a szürke fülek a belső menüsor
   VÉGÉN, jobbra állnak; az első szürke fül tolja jobbra a csoportot (margin-left:auto). Nem kattintható. */
.tab-btn.tab-off, .tab-btn.tab-off:hover { color: var(--color-text-muted); opacity: .5; cursor: not-allowed; }
.tab-btn.tab-off-first { margin-left: auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Toast / Alert ──────────────────────────────────────── */
.toast-stack {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  /* ⚠️ A SZIN A HATTERREL EGYUTT JAR. A design-system.css SOTET toastot ad
     (background: var(--color-text) + color: var(--color-text-inverse)); ez a szabaly kesobb
     toltodik es a HATTERET vilagosra irja at -- szin nelkul viszont maradna a sotet tervhez
     valo VILAGOS betu, vagyis feher szoveg feher alapon. Pontosan ez tortent: az ertesites
     "felirat nelkul" jelent meg (merve 2026-08-27, Peter lelete). */
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  min-width: 280px; max-width: 360px;
  animation: toast-in 180ms ease-out;
}
/* A JS (`supply-os.js` showToast) `toast toast-<tipus>` osztalyt ad ki -- NEM `toast.<tipus>`-t.
   A lenti `.toast.success` alak ezert SOHA nem illeszkedett. Mindketto itt marad, hogy a regi
   hivok se essenek szet. */
.toast-success { border-left: 3px solid var(--color-success); }
.toast-warning { border-left: 3px solid var(--color-warning); }
.toast-danger  { border-left: 3px solid var(--color-danger); }
.toast-error   { border-left: 3px solid var(--color-danger); }
.toast-info    { border-left: 3px solid var(--color-info); }
.toast.success { border-left: 3px solid var(--color-success); }
.toast.warning { border-left: 3px solid var(--color-warning); }
.toast.danger  { border-left: 3px solid var(--color-danger); }
.toast.info    { border-left: 3px solid var(--color-info); }
.toast-body { flex: 1; }
.toast-title { font-size: var(--text-base); font-weight: 600; }
.toast-text { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }
@keyframes toast-in { from { transform: translateX(8px); opacity: 0; } }

.alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: var(--sp-3);
}
.alert-success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.alert-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger); }
.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info); }
.alert-ai { background: var(--color-ai-bg); border-color: var(--color-ai-border); color: var(--color-ai); }
.alert-body { flex: 1; }
.alert-title { font-weight: 600; margin-bottom: 2px; }
.alert-text { font-size: var(--text-sm); opacity: 0.9; }

/* ─── Modal ──────────────────────────────────────────────── */
/* Rejtett az alapallapot, es az `.open` osztaly nyitja -- ugyanaz a szerzodes,
   amit a design-system.css:942 hasznal, es amire a window.openModal/closeModal
   (supply-os.js:200/204), a hatterkattintas (:229) es az Escape (:236) EPIT.
   Korabban itt feltetel nelkuli `display: flex` allt, `.open` szabaly nelkul.
   Ez a fajl egyetlen oldalt szolgal ki, az index.html-t (mind a 25 modul-oldal a
   design-system.css-t tolti, megmerve), tehat a hatas oda zart -- de az index.html
   az SPA-hej, amiben az m1/m3/m5 es az admin fut. Kovetkezmenye: az m1.js:149-es
   m1-new-supplier-modal betoltestol fogva lathato volt (teljes kepernyos fatyol a
   Beszerzes lapon), a closeModal pedig olyan osztalyt vett le, aminek nem volt
   hatasa, ezert a "Megsem", a hatterkattintas es az Escape is no-op volt.
   FIGYELEM: az alapallapot rejtesse tetele ONMAGABAN regresszio lett volna -- az
   adminShowModal (admin.js:50) `.open` NELKUL szurta be a fatylat es a feltetel
   nelkuli flex-re epitett, tehat mind a 10 admin-modal nemman lathatatlanna valt
   volna. Ezert az adminShowModal ugyanebben a valtozasban teszi ra az `.open`-t. */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(30,26,24,.4);
  z-index: 500; display: none; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  width: 100%; max-width: 560px; max-height: 90dvh;
  display: flex; flex-direction: column;
  animation: modal-in 160ms ease-out;
}
.modal-sm { max-width: 400px; }
.modal-lg { max-width: 880px; }
@keyframes modal-in { from { transform: scale(.97); opacity: 0; } }

.modal-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.modal-title { font-size: var(--text-lg); font-weight: 600; flex: 1; }
.modal-close {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-muted); display: flex; align-items: center; justify-content: center;
  transition: background var(--motion-fast);
}
.modal-close:hover { background: var(--color-surface-2); color: var(--color-text); }
.modal-body { flex: 1; padding: var(--sp-5); overflow-y: auto; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--color-border);
}

/* ─── Empty state ────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-16) var(--sp-8);
  color: var(--color-text-muted);
  text-align: center;
}
.empty-icon { width: 48px; height: 48px; opacity: 0.5; }
.empty-title { font-size: var(--text-xl); font-weight: 650; color: var(--color-text); }
.empty-text { font-size: var(--text-base); max-width: 320px; }

/* ─── Skeleton ───────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-2) 0%,
    var(--color-surface-3) 50%,
    var(--color-surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ─── Step indicator ─────────────────────────────────────── */
.steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: var(--sp-6); padding: var(--sp-4);
  background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.step-item {
  flex: 1; display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm);
}
.step-circle {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700; flex-shrink: 0;
  background: var(--color-surface-3); color: var(--color-text-muted);
  border: 2px solid var(--color-border);
}
.step-item.done .step-circle { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); }
.step-item.active .step-circle { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.step-label { color: var(--color-text-muted); }
.step-item.done .step-label { color: var(--color-text-secondary); }
.step-item.active .step-label { color: var(--color-text); font-weight: 500; }
.step-connector {
  height: 2px; flex: 1; background: var(--color-border); margin: 0 var(--sp-2);
}
.step-connector.done { background: var(--color-success); }

/* ─── Progress bar ───────────────────────────────────────── */
.progress-bar {
  height: 8px; border-radius: var(--radius-full);
  background: var(--color-surface-3);
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width var(--motion-base);
}

/* ─── Section layout helpers ─────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.page-title { font-size: var(--text-xl); font-weight: 650; line-height: var(--lh-xl); }
.page-subtitle { font-size: var(--text-base); color: var(--color-text-secondary); margin-top: 2px; }
.page-header-actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }

.section { margin-bottom: var(--sp-8); }
.section-title {
  font-size: var(--text-md); font-weight: 600;
  margin-bottom: var(--sp-4); color: var(--color-text);
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .three-col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .three-col { grid-template-columns: 1fr; } }

/* ─── Checkbox ───────────────────────────────────────────── */
.checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 3px;
  cursor: pointer; accent-color: var(--color-primary);
}

/* ─── Menu (⋯ row action) ────────────────────────────────── */
.row-menu-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--motion-fast);
}
.row-menu-btn:hover { background: var(--color-surface-2); color: var(--color-text); }

.dropdown {
  position: absolute; right: 0; top: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  min-width: 160px; z-index: 100;
  overflow: hidden;
  animation: dropdown-in 120ms ease-out;
}
@keyframes dropdown-in { from { transform: translateY(-4px); opacity: 0; } }
.dropdown-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-base); color: var(--color-text);
  cursor: pointer; border: none; background: transparent;
  width: 100%; text-align: left;
  transition: background var(--motion-fast);
}
.dropdown-item:hover { background: var(--color-surface-2); }
.dropdown-item.danger { color: var(--color-danger); }
.dropdown-sep { height: 1px; background: var(--color-border); margin: 4px 0; }

/* ─── Utility ────────────────────────────────────────────── */
.text-muted   { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }
.text-ai      { color: var(--color-ai); }
.text-num     { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.text-right   { text-align: right; }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }
.text-balance { text-wrap: balance; }
.fw-600       { font-weight: 600; }
.fw-500       { font-weight: 500; }
.gap-2        { gap: var(--sp-2); }
.gap-3        { gap: var(--sp-3); }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.hidden       { display: none !important; }

/* Scan flash overlays */
.scan-flash-success {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(30, 127, 60, 0.35);
  animation: flash-fade 600ms ease-out forwards;
  pointer-events: none;
}
.scan-flash-error {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(179, 38, 30, 0.35);
  animation: flash-fade 600ms ease-out forwards;
  pointer-events: none;
}
@keyframes flash-fade { from { opacity: 1; } to { opacity: 0; } }

/* ─── Mobile ≤767px: narrow-viewport overrides ───────────── */
@media (max-width: 767px) {
  /* Page header: action buttons wrap below the title on 390px */
  .page-header {
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
  }
  .page-header-actions {
    flex-wrap: wrap;
    gap: var(--sp-2);
    /* margin-left: auto places actions right-aligned when alone on their row */
  }

  /* Card header action clusters wrap too (e.g. "+ Dokumentum" + filter buttons) */
  .card-header {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  /* Tables without an explicit .table-wrap container: make the card-body scroll.
     overflow-x: auto creates a scroll container so wide rows stay accessible. */
  .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══ M12 DASHBOARD — asztali alap + MOBIL NÉZET (Péter mobil-grafikája, 2026-10-04) ══════════
 * Asztalon a szerep-fülek pontosan a korábbi soros stílust kapják (az m12.js-ből ide költözött),
 * a KPI-ikon rejtett. Telefonon: vízszintesen görgethető szerep-csempék, 2 oszlopos KPI-kártyák
 * színes ikon-körrel (páratlan darabnál az utolsó teljes szélességű), 4 oszlopos tömör összesítő,
 * érinthető figyelmeztetés-sorok és egy négy sorra rövidített kérdező-magyarázat. */
.m12-szerepek {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--color-border);
}
.m12-szerep { display: flex; align-items: center; gap: 4px; }
.m12-kpi-ikon { display: none; }

@media (max-width: 767px) {
  .m12-szerepek {
    flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-2);
    margin: 0 calc(-1 * var(--content-pad-xs)) var(--sp-4); padding: 2px var(--content-pad-xs) var(--sp-1);
    border-bottom: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--content-pad-xs); scrollbar-width: none;
  }
  .m12-szerepek::-webkit-scrollbar { display: none; }
  .m12-szerepek .m12-szerep {
    flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 6px;
    width: 86px; min-height: 78px; padding: var(--sp-2) var(--sp-1);
    border-radius: var(--radius-lg); border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text-secondary);
    font-size: 13px; font-weight: 500; scroll-snap-align: start;
  }
  .m12-szerepek .m12-szerep.aktiv { background: var(--color-primary-subtle); border-color: var(--color-primary); color: var(--color-primary); }
  .m12-szerep-ikon { font-size: 24px; line-height: 1; }
  .m12-szerep-cimke { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .m12-nlq { border-color: var(--color-ai-border); border-radius: var(--radius-lg); }
  .m12-nlq-sor input { min-width: 0; }
  .m12-nlq-leiras {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    font-size: var(--text-sm) !important; line-height: 1.55 !important;
  }

  .m12-elrendezes-sav {
    position: relative; flex-wrap: nowrap !important; gap: var(--sp-3) !important;
    padding: var(--sp-3) var(--sp-4) !important; border-radius: var(--radius-lg) !important;
    background: var(--color-surface) !important; border: 1px solid var(--color-border);
  }
  .m12-elrendezes-sav > div:first-child { line-height: 1.5; color: var(--color-text-secondary); }
  .m12-elrendezes-sav > div:first-child .badge { margin-right: var(--sp-2); }

  /* A sor egésze érinthető, a gomb helyén nyíl (a grafika „›" jele). Az eredeti gomb marad -- a
     címkéje az aria-label-ben él tovább, és a kattintás ugyanazt a kezelőt hívja. */
  .m12-elrendezes-gomb, .m12-riaszto .btn {
    flex: 0 0 auto; width: 28px; min-height: 28px !important; height: 28px; padding: 0 !important;
    font-size: 0 !important; background: none !important; border: none !important; box-shadow: none !important;
    color: var(--color-text-muted) !important;
  }
  .m12-elrendezes-gomb::after, .m12-riaszto .btn::after {
    content: ''; display: block; width: 9px; height: 9px; margin: auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  }
  .m12-elrendezes-gomb::before, .m12-riaszto .btn::before { content: ''; position: absolute; inset: 0; }
  .m12-elrendezes-gomb:disabled::after { opacity: .35; }

  .m12-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .m12-kpi > :not(.kpi-tile) { grid-column: 1 / -1; }
  .m12-kpi .kpi-tile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cimke cimke" "ertek ikon" "lab lab";
    align-items: center; column-gap: var(--sp-2);
    padding: var(--sp-4); min-height: 132px; border-radius: 16px;
  }
  .m12-kpi .kpi-tile[data-m12-szeles] { grid-column: 1 / -1; }
  .m12-kpi .kpi-label { grid-area: cimke; font-size: 12px; letter-spacing: .6px; margin-bottom: var(--sp-2); }
  .m12-kpi .kpi-value { grid-area: ertek; font-size: 28px !important; line-height: 1.15; overflow-wrap: anywhere; }
  .m12-kpi .kpi-value span { font-size: 14px !important; }
  .m12-kpi .kpi-trend { grid-area: lab; align-self: end; flex-wrap: wrap; margin-top: var(--sp-3); }
  .m12-kpi .kpi-trend span { font-size: 12px !important; }
  .m12-kpi-ikon {
    grid-area: ikon; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  }
  .m12-ton-narancs   { background: #C9502A; color: #FFE6DB; }
  .m12-ton-kek       { background: #2D5BD0; color: #E4ECFF; }
  .m12-ton-zold      { background: #1E6B3C; color: #C3F2D2; }
  .m12-ton-lila      { background: #5A3FC2; color: #E6DDFF; }
  .m12-ton-piros     { background: #7B2436; color: #FFD0DA; }
  .m12-ton-borostyan { background: #93630F; color: #FFEBC0; }
  .m12-ton-semleges  { background: var(--color-surface-3); color: var(--color-text-secondary); }

  .m12-osszegzo { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2) !important; }
  .m12-osszegzo > :not(.m12-osszegzo-cella) { grid-column: 1 / -1; }
  .m12-osszegzo-cella {
    min-width: 0 !important; padding: var(--sp-2) !important;
    background: var(--color-surface) !important; border: 1px solid var(--color-border); border-radius: var(--radius-md) !important;
  }
  .m12-osszegzo-cella > div:first-child { font-size: 20px !important; line-height: 1.2; }
  .m12-osszegzo-cella > div:last-child { font-size: 11px !important; line-height: 1.25; overflow-wrap: anywhere; }

  .m12-riaszto {
    position: relative; display: flex; align-items: center;
    background: var(--color-surface) !important; border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4) !important; color: var(--color-text) !important;
  }
  .m12-riaszto .alert-body { gap: var(--sp-3); }
  .m12-riaszto .alert-text { font-size: var(--text-base); opacity: 1; }
}