/* A felület VILÁGOS témájú. Minden szövegszín ezekből a változókból jöjjön —
 * ne írjunk sehova `rgba(255,255,255,…)` szövegszínt, mert az a világos háttéren
 * láthatatlan. Ez korábban több szakaszban is elő is fordult (hitelesítés,
 * szerződéstár, kimutatások), és olvashatatlan feliratokat okozott.
 *
 * Kontraszt (WCAG AA, 4.5:1 a normál szöveghez) a #f5f4f9 háttérre:
 *   --vb-text   #142125  ->  15,1:1
 *   --vb-muted  #5f6e74  ->   4,9:1
 *   --vb-faint  #78868b  ->   3,6:1  — CSAK kiegészítő, nem lényegi információ
 */
:root {
  --vb-primary: #6d2077;
  --vb-secondary: #011111;
  --vb-accent: #e6bb84;
  --vb-text: #142125;
  --vb-muted: #5f6e74;
  /* Halvány, másodlagos felirat. Lényeges információt SOHA ne ezzel írjunk. */
  --vb-faint: #78868b;
  --vb-bg: #f6f2f8;
  --vb-surface: #ffffff;
  /* Áttetsző fehér lap a színes háttér fölé */
  --vb-surface-soft: rgba(255, 255, 255, 0.72);
  /* Enyhe sötét árnyalat apró elemekhez (címke, sáv háttere) */
  --vb-tint: rgba(16, 22, 26, 0.06);
  /* Az --vb-accent (arany) és a menta zöld VILÁGOS lapon szövegként
   * olvashatatlan (1,8:1 és 1,6:1). Keretnek és háttérnek jók, de
   * FELIRATHOZ ezeket a sötét párjukat kell használni. */
  --vb-accent-text: #7f5308;   /* 6,7:1 */
  --vb-success-text: #0f6c3f;  /* 6,5:1 */
  --vb-line: rgba(16, 22, 26, 0.12);
  --radius: 16px;
  --shadow: 0 10px 40px rgba(1, 17, 17, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Public Sans", "Segoe UI", sans-serif;
  color: var(--vb-text);
  background: radial-gradient(circle at 15% 20%, #f8e4f8 0, #f5f4f9 45%, #edf5f7 100%);
}

.bg-orb {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.25;
}

.bg-orb-a {
  background: var(--vb-primary);
  top: -150px;
  left: -100px;
}

.bg-orb-b {
  background: var(--vb-accent);
  right: -150px;
  bottom: -140px;
}

.page {
  width: min(1200px, 92vw);
  margin: 26px auto 40px;
}

.topbar {
  width: min(1200px, 92vw);
  margin: 18px auto 0;
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.brand {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(145deg, var(--vb-primary), #882e90);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text strong {
  font-size: 1rem;
}

.brand-text small {
  color: var(--vb-muted);
}

.top-actions {
  display: flex;
  gap: 10px;
}

.btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

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

.btn.solid {
  background: linear-gradient(120deg, var(--vb-primary), #8a2a91);
  color: #fff;
  box-shadow: 0 8px 20px rgba(109, 32, 119, 0.35);
}

.btn.ghost {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--vb-line);
  color: var(--vb-secondary);
}

.btn.tiny {
  padding: 7px 10px;
  font-size: 0.82rem;
}

.btn.danger {
  background: #b32038;
  color: #fff;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.hero,
.panel,
.board,
.metric,
.flash,
.detail-head {
  background: var(--vb-surface);
  border: 1px solid var(--vb-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero {
  padding: 24px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}

.eyebrow {
  color: var(--vb-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
  font-weight: 800;
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--vb-secondary);
}

h1 {
  margin-top: 6px;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1.1;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  font-size: 1rem;
}

.muted {
  margin-top: 8px;
  color: var(--vb-muted);
}

.search-card {
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(109, 32, 119, 0.08), rgba(230, 187, 132, 0.14));
}

.search-card label {
  font-size: 0.85rem;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.search-row {
  display: flex;
  gap: 8px;
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  border-radius: 10px;
  border: 1px solid var(--vb-line);
  padding: 10px 11px;
  background: #fff;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(109, 32, 119, 0.3);
  border-color: var(--vb-primary);
}

.metric-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  padding: 16px;
}

.metric span {
  color: var(--vb-muted);
  font-size: 0.85rem;
}

.metric strong {
  display: block;
  margin-top: 6px;
  font-size: 1.8rem;
  color: var(--vb-secondary);
}

.board {
  margin-top: 18px;
  padding: 16px;
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid rgba(10, 20, 20, 0.08);
  vertical-align: middle;
  white-space: nowrap;
}

th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #66747a;
}

.empty {
  text-align: center;
  color: var(--vb-muted);
  padding: 22px;
}

.mono {
  font-family: "Poppins", monospace;
  font-size: 0.82rem;
}

.pill {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pill.draft {
  color: #50307d;
  background: #f0e9fe;
}

.pill.approval {
  color: #7f5308;
  background: #ffefcf;
}

.pill.approved {
  color: #0f6c3f;
  background: #dcf8ec;
}

.pill.ordered,
.pill.received {
  color: #075a73;
  background: #ddf4fb;
}

.pill.rejected {
  color: #8a1f1f;
  background: #ffdede;
}

.pill.closed {
  color: #fff;
  background: linear-gradient(135deg, var(--vb-secondary), #173539);
}

.panel {
  padding: 18px;
}

.grid-form {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.grid-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vb-text);
  display: grid;
  gap: 7px;
}

.span-2 {
  grid-column: span 2;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.detail-head {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.status-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.detail-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

.flash {
  margin-top: 14px;
  padding: 12px 14px;
  font-weight: 600;
}

.flash.ok {
  border-left: 6px solid #14a058;
}

.flash.err {
  border-left: 6px solid #be2424;
}

.file-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.file-card {
  border: 1px solid var(--vb-line);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.file-card small {
  color: var(--vb-muted);
}

.file-card .row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.footer {
  width: min(1200px, 92vw);
  margin: 20px auto 24px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--vb-line);
  background: rgba(255, 255, 255, 0.88);
  display: flex;
  justify-content: space-between;
  color: var(--vb-muted);
  font-size: 0.85rem;
}

.reveal {
  animation: rise 0.5s ease both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .hero,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-box {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .top-actions {
    justify-content: space-between;
  }

  .grid-form {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: span 1;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   BEJELENTKEZÉS ÉS BIZTONSÁGI FELÜLETEK  (v1.3.0)
   ===================================================================== */
.auth-body { display: flex; min-height: 100vh; }

.auth-shell {
  margin: auto;
  width: min(520px, 92vw);
  padding: 32px 0 48px;
}

.auth-card {
  background: var(--vb-surface);
  border: 1px solid rgba(230, 187, 132, 0.22);
  border-radius: 20px;
  padding: 36px 34px 30px;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(1, 17, 17, 0.45);
}

.auth-brand {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 26px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(230, 187, 132, 0.16);
}

.auth-title { font-size: 1.5rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.auth-lead  { color: var(--vb-muted); font-size: 0.94rem; line-height: 1.55; margin: 0 0 24px; }
.auth-hint  { color: var(--vb-muted); font-size: 0.85rem; margin-top: 20px; text-align: center; }
.auth-footer{ text-align: center; color: var(--vb-faint); font-size: 0.8rem; margin-top: 18px; }

.auth-form { display: flex; flex-direction: column; gap: 18px; }

.auth-form .field { display: flex; flex-direction: column; gap: 7px; }
.auth-form .field > span { font-size: 0.85rem; color: var(--vb-text); font-weight: 500; }
.auth-form input {
  width: 100%; padding: 13px 15px;
  background: var(--vb-surface);
  border: 1px solid rgba(230, 187, 132, 0.24);
  border-radius: 11px; color: var(--vb-text); font-size: 1rem;
  font-family: inherit; transition: border-color .18s, box-shadow .18s;
}
.auth-form input:focus {
  outline: none;
  border-color: rgba(230, 187, 132, 0.65);
  box-shadow: 0 0 0 3px rgba(230, 187, 132, 0.13);
}

.code-input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.5rem !important; letter-spacing: 0.32em;
  text-align: center; padding: 15px !important;
}

.btn.wide { width: 100%; justify-content: center; padding: 14px; font-size: 1rem; margin-top: 6px; }

/* --- visszajelzések --- */
.alert {
  padding: 13px 16px; border-radius: 11px; margin-bottom: 20px;
  font-size: 0.9rem; line-height: 1.5;
}
.alert.error { background: rgba(220, 60, 60, 0.14); border: 1px solid rgba(220, 60, 60, 0.42); }
.alert.ok    { background: rgba(60, 190, 130, 0.13); border: 1px solid rgba(60, 190, 130, 0.38); }
.alert.warn  { background: rgba(230, 187, 132, 0.13); border: 1px solid rgba(230, 187, 132, 0.44); }
.alert.info  { background: rgba(109, 32, 119, 0.08);  border: 1px solid rgba(109, 32, 119, 0.30); }
.alert ul { margin: 8px 0 0; padding-left: 20px; }
.alert li { margin: 3px 0; }

/* --- MFA beállítás --- */
.setup-steps { color: var(--vb-text); font-size: 0.9rem; line-height: 1.65; padding-left: 20px; margin: 0 0 20px; }
.setup-steps li { margin-bottom: 9px; }

.qr-box {
  background: #fff; border-radius: 14px; padding: 18px;
  width: fit-content; margin: 0 auto 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.qr-box svg { display: block; width: 210px; height: 210px; }

.manual-entry { margin-bottom: 22px; font-size: 0.86rem; }
.manual-entry summary { cursor: pointer; color: var(--vb-primary); padding: 8px 0; user-select: none; }
.manual-entry dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 12px 0 0; }
.manual-entry dt { color: var(--vb-muted); }
.manual-entry dd { margin: 0; }
.secret {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--vb-surface); padding: 4px 9px; border-radius: 6px;
  letter-spacing: .06em; word-break: break-all;
}

/* --- tartalék kódok --- */
.backup-codes {
  list-style: none; padding: 20px; margin: 0 0 22px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px;
  background: var(--vb-surface); border-radius: 12px;
  border: 1px solid rgba(230,187,132,.18);
}
.backup-codes code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.02rem; letter-spacing: .05em; color: var(--vb-primary);
}
.auth-actions { display: flex; gap: 12px; }
.auth-actions .btn { flex: 1; justify-content: center; }

/* --- jelszópolitika --- */
.policy-box {
  margin-top: 26px; padding: 18px 20px;
  background: var(--vb-surface); border-radius: 12px;
  border: 1px solid rgba(230,187,132,.15);
}
.policy-box h2 { font-size: 0.88rem; margin: 0 0 10px; color: var(--vb-primary); text-transform: uppercase; letter-spacing: .05em; }
.policy-box ul { margin: 0; padding-left: 20px; color: var(--vb-muted); font-size: 0.86rem; line-height: 1.7; }

@media (max-width: 520px) {
  .auth-card { padding: 26px 20px 24px; }
  .backup-codes { grid-template-columns: 1fr; }
  .auth-actions { flex-direction: column; }
}

/* =====================================================================
   SZERZŐDÉSTÁR, EXCEL IMPORT, ÍRÁSVÉDELEM  (v1.4.0)
   ===================================================================== */
.hero-actions { display: flex; gap: 10px; align-items: center; }
.hero-side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.back-link { display: inline-block; margin-bottom: 8px; color: var(--vb-muted);
  text-decoration: none; font-size: .88rem; }
.back-link:hover { color: var(--vb-primary); }

.user-chip { display: inline-flex; align-items: center; padding: 6px 12px;
  background: rgba(230,187,132,.12); border: 1px solid rgba(230,187,132,.28);
  border-radius: 999px; font-size: .84rem; color: var(--vb-accent-text); }
.user-chip.trusted { background: rgba(60,190,130,.12); border-color: rgba(60,190,130,.3); color: var(--vb-success-text); }

/* --- áttekintő számok --- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--vb-surface); border: 1px solid rgba(230,187,132,.16);
  border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat-card.warn   { border-color: rgba(230,187,132,.5); background: rgba(230,187,132,.09); }
.stat-card.danger { border-color: rgba(220,60,60,.45);  background: rgba(220,60,60,.09); }
.stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1; font-family: 'Poppins', sans-serif; }
.stat-label { font-size: .8rem; color: var(--vb-muted); }

/* --- táblázatok --- */
.table-card, .table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th { text-align: left; padding: 12px 14px; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--vb-muted); font-weight: 600;
  border-bottom: 1px solid rgba(230,187,132,.2); white-space: nowrap; }
.data-table .sort-link { color: inherit; text-decoration: none; display: inline-flex;
  align-items: center; gap: 5px; }
.data-table .sort-link:hover, .data-table .sort-link:focus-visible { color: var(--vb-accent-text); }
.data-table .sort-indicator { font-size: .9rem; line-height: 1; }
.data-table td { padding: 13px 14px; border-bottom: 1px solid var(--vb-line); vertical-align: middle; }
.data-table tbody tr[onclick] { cursor: pointer; transition: background .15s; }
.data-table tbody tr[onclick]:hover { background: rgba(230,187,132,.07); }
.data-table.compact td, .data-table.compact th { padding: 9px 12px; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table tr.row-danger { background: rgba(220,60,60,.08); }
.data-table tr.row-warn   { background: rgba(230,187,132,.06); }
.row-action { white-space: nowrap; text-align: right; }
.row-action form { display: inline-block; margin-left: 6px; }

/* --- címkék --- */
.chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  font-size: .78rem; background: var(--vb-surface-soft); border: 1px solid var(--vb-line); white-space: nowrap; }
.chip.small  { padding: 2px 8px; font-size: .7rem; margin-left: 6px; }
.chip.large  { padding: 7px 16px; font-size: .92rem; }
.chip.active { background: rgba(60,190,130,.16); border-color: rgba(60,190,130,.4); color: var(--vb-success-text); }
.chip.warn   { background: rgba(230,187,132,.16); border-color: rgba(230,187,132,.45); color: var(--vb-accent-text); }
.chip.danger { background: rgba(220,60,60,.16);  border-color: rgba(220,60,60,.45);  color: #b32038; }
.chip.draft  { background: var(--vb-tint); color: var(--vb-muted); }
.chip.closed { background: var(--vb-tint); color: var(--vb-faint); }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }

/* --- keretkihasználtság --- */
.usage-bar { height: 4px; background: var(--vb-tint); border-radius: 2px;
  margin-top: 5px; overflow: hidden; min-width: 70px; }
.usage-fill { display: block; height: 100%; background: #7fe0b0; border-radius: 2px; transition: width .3s; }
.usage-fill.figyelmeztetes { background: #E6BB84; }
.usage-fill.kritikus       { background: #ff9d5c; }
.usage-fill.kimerult       { background: #ff6b6b; }

/* --- panelek --- */
.panel-lead { color: var(--vb-muted); font-size: .9rem; margin: 0 0 16px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px;
  padding-top: 18px; border-top: 1px solid var(--vb-line); }
.panel.danger-zone { border-color: rgba(220,60,60,.3); }
.empty-state { text-align: center; padding: 48px 20px; color: var(--vb-muted); }

.inline-form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form input, .inline-form select { padding: 8px 11px; background: var(--vb-surface);
  border: 1px solid rgba(230,187,132,.22); border-radius: 8px; color: var(--vb-text); font-family: inherit; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-row input[type="search"] { flex: 1; min-width: 220px; }

.btn.tiny   { padding: 5px 11px; font-size: .78rem; }
.btn.danger { background: rgba(220,60,60,.18); border-color: rgba(220,60,60,.45); color: #b32038; }

/* --- importált extra mezők --- */
.extra-fields { display: grid; grid-template-columns: auto 1fr; gap: 9px 20px; margin: 0; }
.extra-fields dt { color: var(--vb-muted); font-size: .86rem; }
.extra-fields dd { margin: 0; font-size: .92rem; }

/* --- Excel import --- */
.upload-form { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; margin-top: 20px; }
.file-drop { display: block; width: 100%; padding: 28px; text-align: center; cursor: pointer;
  background: var(--vb-surface); border: 2px dashed rgba(230,187,132,.3); border-radius: 14px;
  transition: border-color .18s, background .18s; }
.file-drop:hover { border-color: rgba(230,187,132,.6); background: rgba(230,187,132,.06); }
.file-drop input { display: block; margin: 0 auto 10px; color: var(--vb-text); }
.file-drop span { color: var(--vb-muted); font-size: .9rem; }

.mapping-table select { width: 100%; padding: 8px 10px; background: var(--vb-surface);
  border: 1px solid rgba(230,187,132,.22); border-radius: 8px; color: var(--vb-text); font-family: inherit; }
.mapping-table select.matched { border-color: rgba(60,190,130,.45); }
.samples { font-size: .8rem; }
.sample { display: inline-block; padding: 2px 7px; margin: 2px 4px 2px 0;
  background: var(--vb-tint); border-radius: 5px; color: var(--vb-muted); }

/* --- M365 írásvédelem szalag --- */
.readonly-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px; margin-bottom: 18px;
  background: rgba(230,187,132,.12); border: 1px solid rgba(230,187,132,.4);
  border-radius: 11px; font-size: .88rem;
}
.readonly-banner strong { color: var(--vb-accent-text); }

.req  { color: #b32038; }
.hint { display: block; margin-top: 4px; color: var(--vb-faint); font-size: .78rem; }
label.check { flex-direction: row; align-items: center; gap: 9px; }
label.wide  { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .hero-actions { flex-direction: column; align-items: stretch; }
}

/* --- beszerzés kimenete: megrendelés / szerződés (v1.4.0) --- */
.outcome-form { border-left: 3px solid rgba(230,187,132,.5); padding-left: 18px; }
.outcome-options { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.outcome-option {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; cursor: pointer;
  background: var(--vb-surface); border: 1px solid rgba(230,187,132,.18);
  border-radius: 11px; transition: border-color .15s, background .15s;
}
.outcome-option:hover { border-color: rgba(230,187,132,.45); background: rgba(230,187,132,.06); }
.outcome-option:has(input:checked) { border-color: rgba(230,187,132,.7); background: rgba(230,187,132,.1); }
.outcome-option:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.outcome-option input { margin-top: 4px; flex-shrink: 0; }
.outcome-option span { display: flex; flex-direction: column; gap: 3px; }
.outcome-option strong { font-size: .95rem; }
.outcome-option small { color: var(--vb-muted); font-size: .82rem; line-height: 1.4; }

#szerzodes-valaszto {
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--vb-surface); border-radius: 11px;
  border: 1px solid rgba(230,187,132,.22);
}
#szerzodes-valaszto select { width: 100%; }

.linked-contracts { margin-bottom: 20px; }
.linked-contracts h3 { margin-bottom: 10px; }

/* --- felosztás nézet (v1.4.1) --- */
.allocation-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px; padding: 16px 18px; margin-bottom: 18px;
  background: var(--vb-surface); border-radius: 12px;
  border: 1px solid rgba(230,187,132,.18);
}
.allocation-summary > div { display: flex; flex-direction: column; gap: 4px; }
.allocation-summary strong { font-size: 1.15rem; font-family: 'Poppins', sans-serif; }
.alloc-label { font-size: .78rem; color: var(--vb-muted); }
.alloc-bar-wrap { grid-column: 1 / -1; gap: 6px !important; }
.alloc-bar-wrap .usage-bar { height: 6px; }

/* =====================================================================
   ŰRLAP-CSOPORTOK  (fieldset / legend)
   Eddig nem volt rá szabály, ezért a böngésző alapértelmezett kerete
   jelent meg, és a felirat ráült a keret vonalára.
   ===================================================================== */
.grid-form fieldset,
fieldset {
  grid-column: 1 / -1;
  border: 1px solid rgba(230, 187, 132, 0.2);
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin: 0 0 4px;
  background: var(--vb-surface);
  /* A csoporton belül a mezők két oszlopban */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 16px;
}

fieldset > legend {
  /* A HTML-szabvány szerint a böngésző CSAK azt a `legend`-et helyezi el
   * speciálisan (a keret vonalára ültetve), amelynek a `float` értéke `none`.
   * Ilyenkor a felirat nem grid-elem, ezért a `grid-column` sem hat rá, és
   * elcsúszik — pontosan ez volt a hiba az „Alapadatok" felirattal.
   *
   * A `float: left` kiveszi a legendet ebből a különleges elhelyezésből, így
   * a grid rendes elemként kezeli. (Grid konténerben a float maga hatástalan,
   * tehát nem is fog úsztatni — csak a legend-státuszt szünteti meg.) */
  float: left;
  width: 100%;
  padding: 0 0 4px;
  margin: 0;
  grid-column: 1 / -1;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vb-primary);
}

fieldset label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--vb-text);
  min-width: 0;
}

fieldset input,
fieldset select,
fieldset textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--vb-surface);
  border: 1px solid rgba(230, 187, 132, 0.22);
  border-radius: 9px;
  color: var(--vb-text);
  font-family: inherit;
  font-size: 0.92rem;
}
fieldset input:focus,
fieldset select:focus,
fieldset textarea:focus {
  outline: none;
  border-color: rgba(230, 187, 132, 0.6);
}
fieldset input:disabled { opacity: .5; }
fieldset .hint { font-weight: 400; }

/* A teljes szélességet igénylő elemek a csoporton belül */
fieldset label.wide,
fieldset > p,
fieldset > .outcome-options { grid-column: 1 / -1; }

/* Jelölőnégyzetes sor: a doboz és a felirat egy sorban */
fieldset label.check {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  font-weight: 500;
}
fieldset label.check input { width: auto; }

/* --- a "Mivel zárul" döntési blokk a panelen belül maradjon --- */
.outcome-form {
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(230, 187, 132, 0.28);
  border-left: 3px solid rgba(230, 187, 132, 0.65);
  border-radius: 12px;
  background: var(--vb-surface);
}
.outcome-form > h3 { margin: 0 0 6px; }
.outcome-form > p  { margin: 0 0 4px; }
.outcome-form label { display: grid; gap: 6px; font-size: .85rem; }
.outcome-form input[type="text"],
.outcome-form input:not([type="radio"]),
.outcome-form select {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  background: var(--vb-surface); border: 1px solid rgba(230,187,132,.22);
  border-radius: 9px; color: var(--vb-text); font-family: inherit;
}
.outcome-form .outcome-option input { width: auto; }

/* ==========================================================================
   KIMUTATÁSOK  (v1.6.0)
   A grafikonok szerveroldalon renderelt SVG-k — nincs külső könyvtár, nincs
   JS. A méretezést a viewBox intézi, ezért itt csak a keretet adjuk meg.
   ========================================================================== */

/* --- időszak-szűrő --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--vb-surface);
  border: 1px solid rgba(230, 187, 132, .16);
  border-radius: var(--radius);
}
.filter-bar label { display: flex; flex-direction: column; gap: 6px; }
.filter-bar label span {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vb-muted);
}
.filter-bar input {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--vb-line);
  background: var(--vb-surface);
  color: var(--vb-text);
  font: inherit;
  font-size: .9rem;
  /* A dátumválasztó ikonja sötét háttéren alapból láthatatlan */
  color-scheme: dark;
}

/* --- vezetői mutatók --- */
.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.metric-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--vb-surface);
  border: 1px solid rgba(230, 187, 132, .16);
}
.metric-card.good   { border-color: rgba(60, 190, 130, .42); background: rgba(60, 190, 130, .08); }
.metric-card.warn   { border-color: rgba(230, 187, 132, .5);  background: rgba(230, 187, 132, .09); }
.metric-card.danger { border-color: rgba(220, 60, 60, .45);   background: rgba(220, 60, 60, .09); }
.metric-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--vb-muted);
}
.metric-value {
  font-family: "Poppins", "Public Sans", sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--vb-text);
  line-height: 1.2;
}
.metric-hint { font-size: .78rem; color: var(--vb-muted); }

/* --- panel fejléc --- */
.panel-head { margin-bottom: 14px; }
.panel-head h2 {
  margin: 0;
  font-family: "Poppins", "Public Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--vb-text);
}
.panel-sub {
  margin: 4px 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--vb-muted);
}

/* Két panel egymás mellett, de szűk kijelzőn egymás alá csúsznak. */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}

/* --- grafikonok --- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart.donut { width: 200px; max-width: 42%; flex: 0 0 auto; }
.chart text { font-family: "Public Sans", "Segoe UI", sans-serif; }

/* Üres állapot: magyarázat, nem néma üres doboz. */
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 18px;
  border: 1px dashed var(--vb-line);
  border-radius: 12px;
  font-size: .86rem;
  color: var(--vb-faint);
  text-align: center;
}

/* --- gyűrűdiagram jelmagyarázata --- */
.donut-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.legend { flex: 1 1 180px; list-style: none; margin: 0; padding: 0; min-width: 170px; }
.legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--vb-line);
  font-size: .84rem;
}
.legend li:last-child { border-bottom: none; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.legend-label { flex: 1; color: var(--vb-text); }
.legend-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--vb-text);
  white-space: nowrap;
}
.legend-value em {
  font-style: normal;
  font-size: .72rem;
  color: var(--vb-faint);
}

/* A paletta sorrendje meg kell egyezzen a charts.py PALETTE listájával. */
.legend-dot.i0 { background: #4c9aff; }
.legend-dot.i1 { background: #36b37e; }
.legend-dot.i2 { background: #ffab00; }
.legend-dot.i3 { background: #ff5630; }
.legend-dot.i4 { background: #9f7aea; }
.legend-dot.i5 { background: #00b8d9; }
.legend-dot.i6 { background: #f06595; }
.legend-dot.i7 { background: #7bc86c; }
.legend-dot.i8 { background: #e6a817; }
.legend-dot.i9 { background: #8993a4; }

/* --- keretkihasználtság haladássáv --- */
.bar-col { width: 150px; }
.progress {
  position: relative;
  height: 20px;
  border-radius: 10px;
  background: var(--vb-surface-soft);
  overflow: hidden;
}
.progress-fill { height: 100%; border-radius: 10px; background: #36b37e; transition: width .3s; }
.progress.warn   .progress-fill { background: #ffab00; }
.progress.danger .progress-fill { background: #ff5630; }
.progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 600;
  /* Szövegárnyék, mert a felirat hol a kitöltésen, hol a háttéren áll */
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.tight { margin: 8px 0 0; padding-left: 20px; }
.tight li { margin: 3px 0; }

/* --- nyomtatás --- */
@media print {
  .top-actions, .hero-actions, .filter-bar { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .panel, .metric-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  .metric-label, .metric-hint, .panel-sub { color: #555 !important; }
  .metric-value, .panel-head h2 { color: #000 !important; }
  /* Nyomtatásban a halvány szürkék elmosódnak — erősítünk rajtuk. */
  .chart text { fill: #333 !important; }
}

/* ==========================================================================
   TEAMS BEÁGYAZOTT NÉZET  (v1.7.0)
   A `teams` osztály a <html> elemen jelzi, hogy a Teams-en belül futunk.
   Ilyenkor a saját fejléc és lábléc elmarad — azt a keretet a Teams adja —,
   és szűkebb a margó, mert az iframe amúgy is korlátos.
   ========================================================================== */
.teams .footer,
.teams .bg-orb {
  display: none;
}

/* A Teams a FÜL keretét adja, az alkalmazás saját menüjét NEM. Korábban itt
   a teljes `.topbar` el volt rejtve — ettől a felhasználó nem tudott a
   Beszerzések, a Szerződések és a Kimutatások között váltani, és ha a
   `?teams=1` egy sima böngésző munkamenetébe ragadt be, egyáltalán nem
   jutott vissza sehova. Ezért a márkajelzés megy el, a navigáció marad. */
.teams .topbar {
  margin-top: 8px;
  padding: 8px 12px;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.teams .brand {
  display: none;
}

.teams body { background: transparent; }

.teams .page {
  padding-top: 14px;
  padding-bottom: 20px;
  /* A Teams fül maga görget; a dupla görgetősáv zavaró lenne. */
  min-height: auto;
}

/* A hero fejléc a Teams-ben fölösleges magasságot venne el. */
.teams .hero { margin-bottom: 16px; padding-top: 0; }
.teams .hero h1 { font-size: 1.3rem; }

/* --- Teams témák ---
   Az osztályt a teams.js teszi ki a Teams kontextusa alapján.

   A saját felületünk VILÁGOS, ezért a Teams világos témájához nincs teendő —
   csak a hátteret igazítjuk a Teams sajátjához. A sötét és a nagy kontrasztú
   témához viszont a szövegszíneket is meg kell fordítani, különben pont az a
   hiba állna elő, ami a világos alapon a fehér szöveggel: olvashatatlan felirat.

   Csak a színváltozókat írjuk felül, elemenkénti szabályok helyett — így az
   összes szakasz (hitelesítés, szerződéstár, kimutatások) együtt mozdul. */
.teams-light body { background: #f5f5f5; }

.teams-dark {
  --vb-text: rgba(255, 255, 255, 0.95);
  --vb-muted: rgba(255, 255, 255, 0.68);
  --vb-faint: rgba(255, 255, 255, 0.48);
  --vb-surface: #292929;
  --vb-surface-soft: rgba(255, 255, 255, 0.06);
  --vb-tint: rgba(255, 255, 255, 0.09);
  --vb-line: rgba(255, 255, 255, 0.14);
}
.teams-dark body { background: #1f1f1f; color: var(--vb-text); }
.teams-dark .chart text { fill: rgba(255, 255, 255, 0.75); }
.teams-dark .chart-empty { color: var(--vb-faint); }

.teams-contrast {
  --vb-text: #ffffff;
  --vb-muted: #ffffff;
  --vb-faint: #ffffff;
  --vb-surface: #000000;
  --vb-surface-soft: #000000;
  --vb-tint: #000000;
  --vb-line: #ffffff;
}
.teams-contrast body { background: #000; color: #fff; }
.teams-contrast .panel,
.teams-contrast .metric-card { background: #000; border: 1px solid #fff; }
.teams-contrast .chart text { fill: #fff; }

/* --- Teams fül beállítóoldala --- */
.tab-choices { display: grid; gap: 10px; margin-bottom: 18px; }
.tab-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--vb-surface);
  border: 1px solid rgba(230, 187, 132, .16);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tab-choice:hover { border-color: rgba(230, 187, 132, .42); }
.tab-choice:has(input:checked) {
  border-color: var(--vb-accent);
  background: rgba(230, 187, 132, .1);
}
.tab-choice-body { display: flex; flex-direction: column; gap: 2px; }
.tab-choice-body strong { color: var(--vb-text); }
.tab-choice-body small { color: var(--vb-muted); font-size: .8rem; }

/* --- Bejelentkezés Microsoft 365 fiókkal (v1.8.0) --- */
.auth-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--vb-faint);
  font-size: 0.8rem;
}
.auth-separator::before,
.auth-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vb-line);
}

.sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* A Microsoft arculati elvárása: a logó ne legyen átszínezve vagy torzítva. */
  text-decoration: none;
}
.sso-btn svg { flex: 0 0 auto; }

/* --- Verziójelölés a lábléc sarkában (v1.9.0) --- */
.footer-right { display: inline-flex; align-items: center; gap: 10px; }
.version-tag {
  /* Diszkrét: ott van, ha keresed, de nem vonja el a figyelmet. */
  font-size: 0.72rem;
  font-family: "Poppins", monospace;
  color: var(--vb-faint);
  padding: 2px 7px;
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  white-space: nowrap;
}

/* ==========================================================================
   BEÁLLÍTÁSOK MENÜ  (v1.9.0)
   ========================================================================== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 20px;
}

.setting { display: flex; flex-direction: column; gap: 5px; }
.setting label { display: grid; gap: 6px; font-size: 0.88rem; }
.setting-label { font-weight: 600; color: var(--vb-text); }
.setting.setting-bool { justify-content: flex-start; }
.setting .check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  cursor: pointer;
}
.setting .check input { width: auto; margin: 0; }

/* Honnan jön az érték — enélkül nem derülne ki, hogy a mentés felülír-e. */
.setting-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--vb-faint);
}
.setting-meta code {
  font-family: "Poppins", monospace;
  font-size: 0.7rem;
  background: var(--vb-tint);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--vb-muted);
}
.source { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--vb-line); }
.source-db  { color: var(--vb-accent-text); border-color: rgba(230, 187, 132, .5); }
.source-env { color: var(--vb-faint); }

.settings-form .panel { margin-bottom: 18px; }

.settings-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--vb-surface);
  border: 1px solid var(--vb-line);
  box-shadow: var(--shadow);
  /* Hosszú oldalon a mentés maradjon elérhető. */
  position: sticky;
  bottom: 12px;
}

/* --- zárolt biztonsági fékek --- */
.locked-panel { border-left: 3px solid var(--vb-accent-text); }
.locked-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.locked-list div { display: flex; flex-direction: column; gap: 2px; }
.locked-list dt { font-size: 0.75rem; color: var(--vb-muted); text-transform: uppercase; letter-spacing: .04em; }
.locked-list dd { margin: 0; font-weight: 600; color: var(--vb-text); }

/* --- Jogi dokumentumok (v1.13.0) --- */
.legal-page { max-width: 78ch; line-height: 1.65; }
.legal-page h2 {
  margin: 26px 0 10px;
  font-size: 1rem;
  color: var(--vb-primary);
}
.legal-page h2:first-child { margin-top: 0; }
.legal-page p { margin: 0 0 10px; color: var(--vb-text); }

.legal-list { margin: 10px 0 4px; }
.legal-list dt {
  font-weight: 600;
  color: var(--vb-text);
  margin-top: 12px;
}
.legal-list dd {
  margin: 3px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--vb-line);
  color: var(--vb-muted);
}

/* --- Keretszerződéses beszerzés jelzése (v1.17.0) --- */
.keret-jelzes {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(109, 32, 119, .07);
  border: 1px solid rgba(109, 32, 119, .22);
  font-size: .9rem;
}
.keret-jelzes small { color: var(--vb-muted); }
.ajanlat-blokk { display: contents; }

/* --- Gyorsválasztó sor (pl. negyedévek az adatszolgáltatási kimutatáson) --- */
.quick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
.quick-label {
  color: var(--vb-muted);
  font-size: .82rem;
  font-weight: 600;
  margin-right: 4px;
}

/* Apró kiegészítő szöveg táblázatcellában. A `.muted`-del együtt használva
 * halványabb; önmagában csak kisebb, de teljes kontrasztú. */
.small { font-size: .8rem; line-height: 1.35; }

/* Egy sorba tördelt űrlap a táblázatban (közzététel rögzítése) */
.data-table .inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.data-table .inline-form input[type="date"],
.data-table .inline-form input[type="text"] {
  width: auto;
  min-width: 8.5rem;
  padding: 5px 8px;
  font-size: .8rem;
}

/* --- Költési ütem: az elköltött arány az eltelt idő mellett ---------------
 * A két sáv egymás alatt áll, azonos szélességgel — a lényeg a KETTŐ közti
 * különbség, ezt csak így lehet ránézésre látni. Az „eltelt idő" sáv
 * szándékosan semleges színű: az nem jó vagy rossz, csak viszonyítás. */
.pace-compare {
  display: grid;
  gap: 10px;
  margin: 16px 0 4px;
}

.pace-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 3.5rem;
  align-items: center;
  gap: 12px;
}

.pace-label {
  color: var(--vb-muted);
  font-size: .85rem;
  font-weight: 600;
}

.pace-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--vb-text);
}

.progress.neutral .progress-fill {
  background: var(--vb-muted);
}

@media (max-width: 640px) {
  .pace-row {
    grid-template-columns: 6.5rem 1fr 3rem;
    gap: 8px;
  }
}

/* --- Haladásjelző: rögzítve a képernyő jobb alsó sarkában ----------------
 * Minden hosszú művelet ide jelenti a haladását. Azért `fixed`, mert a
 * művelet a háttérben fut: a felhasználó közben elnavigálhat, és attól még
 * látnia kell, hogy dolgozik a rendszer.
 *
 * A `pointer-events` a tárolón `none`, a kártyákon `auto`: az üres sáv ne
 * fogja el a kattintást a mögötte lévő tartalomtól. */
.job-tray {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 36px));
  pointer-events: none;
}

.job-card {
  pointer-events: auto;
  background: var(--vb-surface);
  border: 1px solid var(--vb-line);
  border-left: 4px solid var(--vb-primary);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  font-size: .85rem;
  color: var(--vb-text);
}

.job-card.kesz  { border-left-color: #0f6c3f; }
.job-card.hiba  { border-left-color: #b32038; }

.job-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.job-head strong {
  flex: 1;
  font-size: .88rem;
  line-height: 1.3;
}

.job-close {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  color: var(--vb-muted);
}

.job-close:hover { color: var(--vb-text); }

.job-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--vb-muted);
  font-size: .78rem;
}

.job-message {
  margin: 8px 0 0;
  color: var(--vb-muted);
  font-size: .78rem;
  line-height: 1.4;
}

/* Forgó jelzés. `prefers-reduced-motion` esetén nem pörög — a mozgás
 * egyeseknek zavaró, és az információt a sáv úgyis hordozza. */
.job-spinner {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--vb-tint);
  border-top-color: var(--vb-primary);
  animation: job-spin .9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .job-spinner { animation: none; }
}

/* Nyomtatáskor semmi keresnivalója */
@media print {
  .job-tray { display: none; }
}

/* --- Fizetési ütem és a hozzá tartozó számlák -------------------------- */
.utem-blokk {
  border: 1px solid var(--vb-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.utem-fej {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vb-line);
}

.utem-fej strong { font-variant-numeric: tabular-nums; }

.utem-osszeg {
  margin-left: auto;
  font-size: .82rem;
  color: var(--vb-muted);
}

/* --- A `hidden` attribútum mindig győzzön -------------------------------
 * A böngésző `[hidden] { display: none }` szabálya a legalacsonyabb
 * fajsúlyú: BÁRMELY szerzői szabály, ami `display`-t állít (nálunk pl.
 * `.grid-form label { display: flex }`), felülírja. Emiatt a rejtettnek
 * jelölt űrlapmezők LÁTSZOTTAK — az új beszerzés űrlapján a szerződés-
 * választó és a használat alapú mezők akkor is megjelentek, amikor nem
 * lett volna szabad.
 *
 * Ez a szabály zárja le a kérdést: ami rejtett, az rejtve marad. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Ajánlatok összehasonlítása a jóváhagyói oldalon
 *
 * A jóváhagyó azt mérlegeli, MELYIK ajánlat a jobb — ehhez egymás mellett kell
 * látnia őket, nem egymás alatt. Oszlopokban az összegek és a pénznemek
 * összevethetők; listában a szem ide-oda ugrálna.
 *
 * A nyertes kerete és jelölése nem díszítés: a jóváhagyás EGY ajánlatra szól,
 * és tévedés esetén a döntés is téves lenne.
 * ------------------------------------------------------------------------ */
.ajanlat-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
}

.ajanlat-kartya {
  border: 1px solid var(--vb-line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--vb-surface);
}

.ajanlat-kartya.nyertes {
  border: 2px solid var(--vb-primary);
  box-shadow: 0 0 0 4px rgba(109, 32, 119, 0.1);
}

.ajanlat-kartya .ceg {
  font-weight: 700;
  color: var(--vb-text);
}

.ajanlat-kartya dl {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 0.9rem;
}

.ajanlat-kartya dt {
  color: var(--vb-muted);
}

.ajanlat-kartya dd {
  margin: 0;
  text-align: right;
  color: var(--vb-text);
}

/* A forintra átszámolt érték tájékoztató: az árfolyam a teljesítésig
 * változhat, ezért nem keverjük össze a szerződéses összeggel. */
.ajanlat-kartya .forintban {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--vb-line);
  color: var(--vb-muted);
  font-size: 0.85rem;
}