/* ==========================================================================
   ajanlat-szerkeszto.css — Ajánlat-szerkesztő · progresszív (kártyás) terv
   --------------------------------------------------------------------------
   Forrás (jóváhagyott, pixelpontos):
     design/Ajanlat-szerkeszto-progressive.html
   A mock <style>-ja a valós --eclipse-* / token rendszerre hangolva
   (a tokenek a tokens.diff.css :root-jában már globálisan elérhetők:
    --corona, --signal, --ink*, --bg-*, --line*, --eclipse-dark, --serif/sans/mono).

   ALKALMAZÁS
     - App.razor: az auth.css UTÁN linkelve (globális).
     - Minden szabály a .ajx gyökér alá scope-olva → nem szivárog ki
       (Bootstrap .row, globális .pill stb. érintetlen).
     - A valós űrlapmezők Radzen-komponensek; ezért a mock statikus
       .ctrl-dobozait a Radzen-osztályokra (.rz-textbox / .rz-dropdown /
       .rz-numeric / .rz-datepicker) hangoljuk — kényelmes 13.5px-en,
       az eclipse-brand.css 30px/13px default-jait felülírva (!important +
       magasabb specificitás: `.ajx .rz-*`).
   ========================================================================== */

/* ====================================================================== */
/* 0 · GYÖKÉR                                                              */
/* ====================================================================== */
.ajx {
  --ajx-ctrl-h: 36px;
  --bg-surface: #e7eaf0;        /* egy fokkal mélyebb belső sávokhoz (assethead, readonly mező) */
  background: #eceef3;          /* mélyebb canvas → a fehér kártyák kiemelkednek */
  color: var(--ink, #0e131d);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  -webkit-font-smoothing: antialiased;
}
.ajx .num,
.ajx .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ====================================================================== */
/* 1 · CRUMBBAR (Vissza · középső breadcrumb · Ajánlat/Ütemezés subtab)    */
/* ====================================================================== */
.ajx-crumbbar {
  background: var(--bg-elev, #fff);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--topbar-h);   /* a topbar ALÁ tapad, nem rá (#1832) */
  z-index: 20;
}
.ajx-crumbbar__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 13px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}
.ajx-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  background: var(--bg-elev, #fff);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.ajx-back:hover { border-color: var(--corona); color: var(--corona-deep); }
.ajx-back svg { width: 15px; height: 15px; }
/* Blokk-navigáció nyitógombja: asztalin nincs (ott a rail lépéslistája áll ki) */
.ajx-stepmenu-btn { display: none; padding: 0 9px; }
.ajx-stepmenu-btn.is-open { border-color: var(--corona); color: var(--corona-deep); }

.ajx-crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.ajx-crumbs a { color: var(--ink-muted); text-decoration: none; }
.ajx-crumbs a:hover { color: var(--corona-deep); }
.ajx-crumbs .cur {
  color: var(--corona-deep);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .03em;
}
.ajx-crumbs .sep { color: var(--ink-faint); }
/* Készítés időpontja: csak keskeny kijelzőn (a 01-es kártya „Készült" sora helyett) */
.ajx-crumbs .kesz { display: none; }
.ajx-crumbs .mode { color: var(--ink-faint); }

.ajx-subtabs { display: flex; gap: 4px; margin-left: auto; }
.ajx-subtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  background: transparent;
  border: none;
}
.ajx-subtab svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ajx-subtab.active { background: var(--corona-soft); color: var(--corona-deep); }

/* ====================================================================== */
/* 2 · LAYOUT — rail + stream                                              */
/* ====================================================================== */
.ajx-wrap {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 28px 120px;
  align-items: start;
}
/* A rács-elem alapértelmezett min-width-e `auto`, azaz a TARTALMA soha nem tud
   összenyomódni: egyetlen széles gyerek (fix px-es űrlapsor) a teljes 1fr sávot
   kitágítja, és ettől az EGÉSZ oldal szélesebb lesz a képernyőnél. Keskeny
   kijelzőn ez láncreakció (kilógó KPI, félrecentrált overlay), ezért a sávot
   kifejezetten összenyomhatóvá tesszük. Asztali szélességen nincs hatása. (#1839) */
.ajx-wrap > * { min-width: 0; }

/* ====================================================================== */
/* 3 · RAIL — KPI / kitöltöttség / stepper                                 */
/* ====================================================================== */
.ajx-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 84px);   /* a morzsa-sáv alatt marad (#1832) */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* KPI sötét doboz */
.ajx-kpi {
  background: var(--eclipse-dark, #0a0e1a);
  border-radius: 14px;
  padding: 20px 20px 16px;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.ajx-kpi::before {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(200,147,102,.25), transparent 70%);
}
.ajx-kpi__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
.ajx-kpi__sub { margin-top: 13px; }
.ajx-kpi__main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 3px 0 0;
  white-space: nowrap;
}
.ajx-kpi__main .v {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--corona);
}
.ajx-kpi__main .u {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.6);
}
.ajx-kpi__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.ajx-kpi__cell .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.ajx-kpi__cell .n {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-top: 2px;
}
.ajx-kpi__cell .n .uu { color: rgba(255,255,255,.5); font-size: 11px; font-weight: 400; }
.ajx-kpi__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ajx-kpi__foot .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #34d399;
  font-weight: 600;
}
.ajx-kpi__foot .live .d {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52,211,153,.18);
}
.ajx-kpi__foot .t { color: rgba(255,255,255,.45); }

/* Kitöltöttség */
.ajx-progress {
  background: var(--bg-elev, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 20px -10px rgba(17,24,39,.08);
}
.ajx-progress__foot {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ajx-progress__foot .d { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* Stepper */
.ajx-stepper {
  background: var(--bg-elev, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 20px -10px rgba(17,24,39,.08);
}
.ajx-step{display:grid;grid-template-columns:32px 1fr;gap:11px;padding:9px 8px;position:relative;cursor:pointer;text-decoration:none;color:inherit;border-radius:9px;align-items:center}
.ajx-step:hover{background:var(--bg-canvas)}
.ajx-step + .ajx-step::before{content:"";position:absolute;left:23px;top:-3px;width:2px;height:14px;background:var(--line)}
.ajx-step .pnum{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.02em;background:var(--bg-canvas);border:1.5px solid var(--line-bright);color:var(--ink-muted)}
.ajx-step .ptext{display:flex;flex-direction:column;gap:2px;min-width:0}   /* ← alcím a cím ALÁ */
.ajx-step .pt{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.ajx-step .psub{font-size:11px;color:var(--ink-faint);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* aktív: telt corona korong + drappos sor — igazodik a kártyafejléc badge-éhez */
.ajx-step.active{background:var(--corona-soft)}
.ajx-step.active .pt{color:var(--corona-deep)}
.ajx-step.active .pnum{background:var(--corona);border-color:var(--corona-deep);color:#fff;box-shadow:0 0 0 3px var(--corona-soft)}

/* ====================================================================== */
/* 4 · STREAM — kártyák                                                    */
/* ====================================================================== */
.ajx-stream { display: flex; flex-direction: column; gap: 16px; }
/* #1866/V1: visszaadás-sáv a stream tetején — a belsős feldolgozó kötelező indoklása Visszaadott státuszban.
   A csak-megtekintés sáv (.ajx-savebar__readonly) színvilágát viszi, de teljes szélességű blokk. */
.ajx-visszaadas {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  padding: 12px 14px;
  color: #92400e;
}
.ajx-visszaadas__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.ajx-visszaadas__head svg { width: 16px; height: 16px; flex: none; }
.ajx-visszaadas__datum { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 500; opacity: .8; }
.ajx-visszaadas__szoveg { margin-top: 6px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; color: #78350f; }
/* #1840: RV-jelzés sáv — Egyedi (borostyán, az ajánlat menthető 0 RV-vel) és Tiltott (piros,
   a mentés-gomb eltűnik). Ugyanaz a blokk-forma, mint a visszaadás-sávnál. */
.ajx-rvjelzes {
  border-radius: 12px;
  padding: 12px 14px;
}
.ajx-rvjelzes__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.ajx-rvjelzes__head svg { width: 16px; height: 16px; flex: none; }
.ajx-rvjelzes__szoveg { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.ajx-rvjelzes--egyedi { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }
.ajx-rvjelzes--egyedi .ajx-rvjelzes__szoveg { color: #78350f; }
.ajx-rvjelzes--tiltott { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.ajx-rvjelzes--tiltott .ajx-rvjelzes__szoveg { color: #7f1d1d; }
.ajx-rvjelzes--tiltott .ajx-rvjelzes__head { font-size: 13.5px; }
.ajx-card {
  background: var(--bg-elev, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 12px 28px -8px rgba(17,24,39,.10);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ajx-card:has(.ajx-phead--active) {
  border-color: rgba(200,147,102,.32);
  box-shadow: 0 0 24px -2px rgba(200,147,102,.38), 0 14px 34px -10px rgba(141,93,51,.20);
}
.ajx-phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-bright);
  background: var(--bg-elev, #fff);          /* fehér: a kártya része, nem olvad a háttérbe */
}
.ajx-phead__idx {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 12.5px;                          /* 11 → 12.5 */
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);                          /* ink-muted → ink (sötétebb) */
  font-weight: 700;                           /* 600 → 700 */
}
/* sorszám = corona badge */
.ajx-phead__idx .ord {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--corona-deep, #8d5d33);
  background: var(--corona-soft);
  border: 1px solid rgba(200,147,102,.32);
  border-radius: 6px;
  padding: 3px 8px;
}

/* AKTÍV kártya fejléce: meleg corona-tint sáv + tömör badge (jelzi: itt vagy) */
.ajx-phead--active {
  background: rgba(200,147,102,.16);
  border-bottom-color: rgba(200,147,102,.34);
}
.ajx-phead--active .ajx-phead__idx { color: var(--corona-deep); }
.ajx-phead--active .ajx-phead__idx .ord {
  color: #fff;
  background: var(--corona);
  border-color: var(--corona-deep);
}
/* az „Itt vagy" csak az aktív kártyán látszik */
.ajx-phead:not(.ajx-phead--active) .ajx-here { display: none; }
.ajx-phead__meta { display: flex; align-items: center; gap: 10px; }
.ajx-phead__tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .06em;
}
.ajx-here {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--corona-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ajx-here .d {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--corona);
  box-shadow: 0 0 0 3px var(--corona-soft);
}
.ajx-pbody { padding: 22px; }

/* A 02-kártya eszköz/díj detail-panelje: fix magassági alap, hogy a panel
   alatti fa eszköz↔díj váltáskor ne ugorjon (a magasabbik = eszköz-panel). */
.ajx-detail { min-height: 210px; }

/* Eszköz/díj kártya sorrendje MINDEN sávban: fejléc-sáv → fa → kijelölés-vezérelt
   szerkesztő-panel (#1839/V8). Előbb a lista, alatta az, amit épp szerkesztek — a
   fordított sorrendben a kijelölt sor FÖLÖTT frissültek a mezők. A `:has()` szűkíti a
   szabályt erre az egy kártyára (a `.ajx-pbody` osztályt minden kártya viseli). */
.ajx-pbody:has(> .ajx-tree) { display: flex; flex-direction: column; }
.ajx-pbody:has(> .ajx-tree) > .ajx-assethead { order: 1; margin-top: 0; }
.ajx-pbody:has(> .ajx-tree) > .ajx-tree { order: 2; }
.ajx-pbody:has(> .ajx-tree) > .ajx-detail { order: 3; margin-top: 24px; }

/* ====================================================================== */
/* 5 · ŰRLAP-PRIMITÍVEK                                                    */
/* ====================================================================== */
.ajx-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.ajx-fcol  { display: flex; flex-direction: column; gap: 13px; }
/* Sor-páros burok: asztalin nem létezik (a sorok a szülő oszlop közvetlen gyerekei maradnak),
   keskeny kijelzőn két oszlopra bontja a két rövid sort — lásd a BP-M blokkot. */
.ajx-pair  { display: contents; }
.ajx-ffull { display: flex; flex-direction: column; gap: 13px; }
.ajx-subhead {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--corona-deep);
  font-weight: 600;
  margin-bottom: 3px;
}
.ajx-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: center;
}
.ajx-row.r3 { grid-template-columns: 150px 1fr auto; }
.ajx-kamatgrid .ajx-row.r3 { grid-template-columns: 150px 90px auto; }
.ajx-row > label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  text-align: right;
}
.ajx-unit {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-subtle);
  min-width: 52px;
}
.ajx-unit--tight { min-width: 0; text-align: center; }

/* ====================================================================== */
/* 6 · RADZEN INPUT → MOCK .ctrl LÁTVÁNY (kényelmes 13.5px)                */
/*    Felülírja az eclipse-brand.css 30px/13px szabályait a .ajx alatt.    */
/* ====================================================================== */
.ajx .rz-textbox,
.ajx .rz-numeric,
.ajx .rz-dropdown,
.ajx .rz-datepicker {
  height: var(--ajx-ctrl-h) !important;
  min-height: var(--ajx-ctrl-h) !important;
  background: #fff !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 100%;
  box-sizing: border-box;
}
.ajx .rz-textbox,
.ajx .rz-textbox input,
.ajx .rz-numeric input,
.ajx .rz-numeric input.rz-spinner-input,
.ajx .rz-datepicker input,
.ajx .rz-dropdown .rz-dropdown-label {
  height: calc(var(--ajx-ctrl-h) - 2px) !important;
  line-height: calc(var(--ajx-ctrl-h) - 2px) !important;
  font-size: 13.5px !important;
  color: var(--ink) !important;
}
.ajx .rz-textbox,
.ajx .rz-textbox input,
.ajx .rz-datepicker input { padding: 0 12px !important; }
.ajx .rz-dropdown .rz-dropdown-label {
  padding: 0 8px 0 12px !important;
  display: block !important;
  text-align: left !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ajx .rz-dropdown .rz-dropdown-trigger {
  width: 30px !important;
  height: calc(var(--ajx-ctrl-h) - 2px) !important;
  color: var(--ink-faint) !important;
  background: transparent !important;
}
.ajx .rz-dropdown .rz-dropdown-trigger .rzi { font-size: 13px; }

/* Numerikus mezők — mono, jobbra zárt, tabular */
.ajx .rz-numeric { padding: 0 !important; }
.ajx .rz-numeric input,
.ajx .rz-numeric input.rz-spinner-input {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  padding: 0 12px !important;
  width: 100% !important;
}
.ajx .rz-numeric .rz-numeric-up,
.ajx .rz-numeric .rz-numeric-down { display: none !important; }

/* Datepicker — mono, tabular */
.ajx .rz-datepicker input {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.ajx .rz-datepicker .rz-datepicker-trigger {
  width: 30px !important;
  height: calc(var(--ajx-ctrl-h) - 2px) !important;
  color: var(--ink-faint) !important;
  background: transparent !important;
}

/* Fókusz-gyűrű — corona (a tokens.diff.css :focus-within szabályát erősíti) */
.ajx .rz-textbox:focus-within,
.ajx .rz-numeric:focus-within,
.ajx .rz-dropdown:focus-within,
.ajx .rz-datepicker:focus-within {
  border-color: var(--corona) !important;
  box-shadow: 0 0 0 3px var(--corona-soft) !important;
}

/* Disabled (nem szerkeszthető) mező: szürke a .ajx-ctrl.ro readonly-mintán — jelezve, hogy
   nem szerkeszthető (pl. az automatikus leírás, a Fixálva-output marzs/kamat, a lockolt vezérlők,
   a kikapcsolt havi-ütemezés szorzó). */
.ajx .rz-textbox:disabled,
.ajx .rz-numeric.rz-state-disabled,
.ajx .rz-dropdown.rz-state-disabled,
.ajx .rz-datepicker.rz-state-disabled {
  background: var(--bg-surface) !important;
  border-color: var(--line) !important;
  cursor: not-allowed;
}
.ajx .rz-textbox:disabled,
.ajx .rz-numeric.rz-state-disabled input,
.ajx .rz-datepicker.rz-state-disabled input,
.ajx .rz-dropdown.rz-state-disabled .rz-dropdown-label {
  color: var(--ink-muted) !important;
  -webkit-text-fill-color: var(--ink-muted) !important;   /* WebKit különben felülírja a disabled input színét */
}

/* Readonly / számított mező-doboz (statikus .ctrl) */
.ajx-ctrl {
  height: var(--ajx-ctrl-h);
  background: #fff;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  color: var(--ink);
}
.ajx-ctrl.num {
  justify-content: flex-end;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.ajx-ctrl.ro {
  background: var(--bg-surface);
  border-color: var(--line);
  color: var(--ink-muted);
}

/* ── Checkbox — kompakt corona-pipa (mock .cb .box) ───────────────────── */
.ajx-cb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.ajx .rz-chkbox,
.ajx .rz-chkbox-box {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}
.ajx .rz-chkbox { display: inline-flex !important; align-items: center; justify-content: center; }
.ajx .rz-chkbox .rz-chkbox-box {
  border: 1px solid var(--line-bright) !important;
  border-radius: 4px !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;   /* pozícionálási kontextus az abszolút pipának */
}
.ajx .rz-chkbox .rz-chkbox-box.rz-state-active {
  background: var(--corona) !important;
  border-color: var(--corona-deep) !important;
}
/* A pipát a Radzen position:absolute-tal rendereli → a doboz flex-középre-igazítása nem hat rá;
   ezért az ikon maga feszül a dobozra (inset:0) és saját maga is középre igazít. */
.ajx .rz-chkbox .rz-chkbox-icon {
  position: absolute !important;
  inset: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 12px !important;
}

/* ── Refresh / info glyph — diszkrét signal ──────────────────────────── */
.ajx-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  font-size: 13px;
  color: var(--signal);
  cursor: pointer;
  user-select: none;
  line-height: 1;
}
.ajx-glyph:hover { color: var(--signal-deep); }

/* ── Inline gomb-címke (Nettó marzs / Ügyleti kamat) ─────────────────── */
.ajx-mbtn {
  height: var(--ajx-ctrl-h);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  padding: 0 12px;
  cursor: pointer;
  white-space: nowrap;
}
.ajx-mbtn.signal { background: var(--corona); color: #fff; border: 1px solid var(--corona-deep); }
.ajx-mbtn.ghost  { background: #fff; color: var(--ink); border: 1px solid var(--line-bright); }

/* Opten cégkeresés találati lista (terv § 10) — lenyíló panel a kereső alatt */
.ajx .opten-results { display: flex; flex-direction: column; border: 1px solid var(--line-bright); border-radius: 8px;
    background: var(--bg-elev, #fff); overflow: hidden; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 20px -10px rgba(17,24,39,.18); }
.ajx .opten-item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 12px;
    background: transparent; border: none; border-top: 1px solid var(--line); cursor: pointer; }
.ajx .opten-item:first-child { border-top: none; }
.ajx .opten-item:hover { background: var(--corona-soft, rgba(200,147,102,.12)); }
.ajx .opten-item__nev { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ajx .opten-item__meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-subtle); }
.ajx .opten-item__badge { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); }

/* ====================================================================== */
/* 7 · ESZKÖZFA (02 kártya)                                                */
/* ====================================================================== */
.ajx-assethead {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
}
.ajx-assethead .t {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--corona-deep);
  font-weight: 600;
}
.ajx-assethead .c {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ajx-tree {
  border: 1px solid var(--line);
  border-radius: 0 0 9px 9px;
  overflow: hidden;
}
.ajx-trow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--bg-surface);
}
.ajx-trow:last-child { border-bottom: none; }
.ajx-trow.sel { background: var(--corona-soft); }
.ajx-trow .ico { font-family: var(--mono); font-size: 11px; color: var(--corona); width: 13px; }
.ajx-trow .nm { flex: 1; font-weight: 600; }

/* sor-eleji típus-chip: eszköz = corona, díj = signal-kék */
.ajx-trow .tico {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.ajx-trow .tico svg { width: 14px; height: 14px; }
.ajx-trow.eszkoz .tico { background: var(--corona-soft); color: var(--corona-deep, #8d5d33); border: 1px solid rgba(200,147,102,.32); }
.ajx-trow.sub     .tico { background: rgba(47,109,240,.10); color: var(--signal-deep, #1d4ed8); border: 1px solid rgba(47,109,240,.22); }

.ajx-trow.sub { padding-left: 30px; color: var(--ink-muted); }
.ajx-trow.sub .nm { font-weight: 500; }
.ajx-trow .amt { font-family: var(--mono); color: var(--ink-muted); font-weight: 400; }
.ajx-tact { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; margin-left: 12px; }
.ajx-tbtn {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--line-bright, #d6dae3);
  background: var(--bg-elev, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-subtle, #6b7280);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(17,24,39,.03);
  transition: background .12s, color .12s, border-color .12s;
}
.ajx-tbtn svg { width: 15px; height: 15px; }
.ajx-tbtn:hover { background: var(--corona-soft); color: var(--corona-deep); border-color: var(--corona); }

/* hozzáadás = halvány zöld, törlés = halvány piros (alaphelyzetben is) */
.ajx-tbtn.add { color: var(--success, #15803d); border-color: rgba(21,128,61,.30); background: rgba(21,128,61,.10); }
.ajx-tbtn.add:hover { color: #0f5d2d; border-color: var(--success, #15803d); background: rgba(21,128,61,.16); }
.ajx-tbtn.del { color: var(--danger, #b91c1c); border-color: rgba(185,28,28,.28); background: rgba(185,28,28,.07); }
.ajx-tbtn.del:hover { color: #7f1414; border-color: var(--danger, #b91c1c); background: rgba(185,28,28,.14); }
.ajx-tbtn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.ajx-tslot { width: 28px; height: 28px; flex: 0 0 28px; }
.ajx-assetfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 9px 9px;
}
.ajx-assetfoot .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.ajx-assetfoot .v { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.ajx-addbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--corona);
  color: #fff;
  border: 1px solid var(--corona-deep);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.ajx-addbtn svg { width: 15px; height: 15px; }

/* ====================================================================== */
/* 8 · 06 · HAVI ÜTEMEZÉS — hónap-kapcsolók                                */
/* ====================================================================== */
.ajx-monthgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; }
.ajx-mitem { display: grid; grid-template-columns: 1fr 92px; gap: 9px; align-items: center; }
.ajx-mtog {
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--line-bright);
  background: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background .12s, border-color .12s, color .12s;
}
.ajx-mtog:hover { border-color: var(--line-strong); color: var(--ink); }
.ajx-mtog.on { background: var(--corona-soft); border-color: var(--corona); color: var(--corona-deep); font-weight: 600; }
.ajx-mtog .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: #fff;
  flex: 0 0 auto;
}
.ajx-mtog.on .dot { background: var(--corona); border-color: var(--corona-deep); }

/* ====================================================================== */
/* 9 · RESULT-SOR                                                          */
/* ====================================================================== */
.ajx-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--corona);
  border-radius: 14px;
  padding: 18px 24px;
  box-shadow: 0 8px 26px rgba(200,147,102,.10);
}
.ajx-result__cell { min-width: 0; }
.ajx-result__cell .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--corona-deep);
  font-weight: 600;
  margin-bottom: 4px;
}
.ajx-result__cell .v { display: flex; align-items: baseline; gap: 9px; }
.ajx-result__cell .v .n {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.ajx-result__cell .v .u { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); }
.ajx-result__cell + .ajx-result__cell { border-left: 1px solid var(--line); padding-left: 24px; }
/* Szerkeszthető részlet a result-sorban (numeric + deviza-választó) */
.ajx-result__edit { display: flex; align-items: center; gap: 10px; }
.ajx-result__edit .ajx-reszlet-input { width: 200px; }
.ajx-result__edit .ajx-reszlet-input input { font-family: var(--mono); font-size: 22px; font-weight: 600; text-align: right; }
.ajx-result__edit .ajx-reszlet-dev { width: 92px; }

/* ====================================================================== */
/* 10 · LEBEGŐ MENTÉS-SÁV                                                  */
/* ====================================================================== */
.ajx-savebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 62px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  z-index: 40;
}
.ajx-savebar__tools { display: flex; gap: 8px; align-items: center; }
/* Mini-KPI a sávban — csak keskeny kijelzőn (#1839 P2/E), asztalin a rail KPI-doboza áll rendelkezésre */
.ajx-savebar__kpi { display: none; }
/* A státusz-gombok burka asztalin nem létezik (a sor a sávhoz képest abszolút, középre igazított) */
.ajx-savebar__statuswrap { display: contents; }
.ajx-statusmenu-btn { display: none; }
.ajx-icobtn {
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line-bright);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  cursor: pointer;
}
.ajx-icobtn svg { width: 17px; height: 17px; }
.ajx-icobtn.danger { border-color: var(--danger); color: var(--danger); }
.ajx-icobtn.success { background: var(--success); border-color: var(--success); color: #fff; }
.ajx-savebar__mid {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Csak-megtekintés sáv (csoportból látott, nem saját dealer ajánlata) — figyelemfelhívó, de visszafogott */
.ajx-savebar__readonly {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--sans, inherit);
  font-size: 12.5px;
  font-weight: 500;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 7px 12px;
  margin-right: auto;
}
/* #1873: a státusz-zár fieldset-je csak a natív disabled-öröklődés miatt van a DOM-ban — a layoutból tűnjön el.
   A tiltott mezőket a Radzen/böngésző amúgy is halványítja; itt csak a kurzort állítjuk következetesre. */
.ajx-lock { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.ajx-lock[disabled] button { cursor: not-allowed; }
/* A fieldset disabled-je CSAK a natív form-elemekre (input/button/select) öröklődik. A Radzen DropDown és
   CheckBox div-alapú vezérlő, ezért zárolt állapotban is nyílt/kattintható maradna — ezeket itt fogjuk meg
   (pointer-events + a natív disabled mezőkkel egyező halványítás). A grid oszlop-szerkesztői is ide esnek. */
.ajx-lock[disabled] .rz-dropdown,
.ajx-lock[disabled] .rz-chkbox,
.ajx-lock[disabled] .rz-datepicker { pointer-events: none; opacity: .55; }

/* Státuszváltás gombok — középen, a Mentéstől elválasztva; egyforma méretű outline-pirulák */
.ajx-savebar__status { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; }
.ajx-savebar__right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.ajx-statusbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  min-width: 138px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-bright);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.ajx-statusbtn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ajx-statusbtn:hover { background: var(--bg-surface); border-color: var(--line-strong); color: var(--ink); }
/* Beküldés (elsődleges státusz-akció): corona-tónusú outline + halvány tölt — kiemelt, de NEM tömör (a Mentés az egyetlen tömör corona CTA) */
.ajx-statusbtn.is-primary { background: var(--corona-soft); border-color: var(--corona); color: var(--corona-deep); }
.ajx-statusbtn.is-primary:hover { background: rgba(200,147,102,.22); border-color: var(--corona-deep); color: var(--corona-deep); }
.ajx-statusbtn.is-success { border-color: var(--success); color: var(--success); }
.ajx-statusbtn.is-success:hover { background: var(--success-soft); }
.ajx-statusbtn.is-danger { border-color: var(--danger); color: var(--danger); }
.ajx-statusbtn.is-danger:hover { background: var(--danger-soft); }
.ajx-statusbtn:disabled { opacity: .5; cursor: default; }
.ajx-savebtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--corona);
  color: #fff;
  border: 1px solid var(--corona-deep);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ajx-savebtn:hover { background: var(--corona-deep); }
.ajx-savebtn svg { width: 16px; height: 16px; }
.ajx-savebtn .kb {
  font-family: var(--mono);
  font-size: 10px;
  opacity: .8;
  padding-left: 9px;
  margin-left: 3px;
  border-left: 1px solid rgba(255,255,255,.35);
}

/* ── pill (08 fejléc-státusz) — globális .pill már létezik; kompatibilis ── */
.ajx .pill { font-size: 12px; }

/* ====================================================================== */
/* 11 · RESZPONZÍV — keskeny ablakon a rail a stream fölé kerül            */
/*      Töréspontok: lásd tokens.diff.css „BREAKPOINTOK — SSOT” (#1839).   */
/* ====================================================================== */
/* BP-L — tablet fekvő (1024×768): a rail a stream fölé kerül (volt: 1100px) */
@media (max-width: 1199px) {
  .ajx-wrap { grid-template-columns: 1fr; }
  .ajx-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .ajx-rail > * { flex: 1 1 240px; }
  .ajx-crumbs { position: static; transform: none; margin: 0 auto; }

  /* ── #1839/V9 — a stepper lenyíló menü a crumbbarban ──
     Vízszintes sávvá lapulva a lépéslista se navigációt, se áttekintést nem adott, viszont
     egy egész képernyő-magasságnyi sávot elvett. Itt a Vissza gomb melletti hamburger-gombból
     nyílik, `position: fixed`-del a sávhoz igazítva — így a rail teljesen kiürül
     (`display: contents`), nem hagy rést a rácsban. */
  .ajx-stepmenu-btn { display: inline-flex; }
  .ajx-rail { display: contents; }
  .ajx-stepper {
    position: fixed; z-index: 45;
    top: calc(var(--topbar-h) + 69px); left: 28px;
    width: min(340px, calc(100vw - 56px));
    max-height: calc(100vh - var(--topbar-h) - 92px);
    overflow: auto;
    display: none;
    box-shadow: var(--shadow-pop, 0 12px 40px rgba(17,24,39,.14));
  }
  .ajx-stepper.is-open { display: block; }

  /* ── #1839/V8 — a rail itt már vízszintes sáv: a KPI-doboz és a validáció-sáv középre
     csúszna, értéket nem hordozva. Mindkettő kiesik, a KPI SZÁMAI a fixen látszó lebegő
     sávba költöznek (mint telefonon, csak itt egy sorban, a gombok mellett). ── */
  .ajx-kpi, .ajx-progress { display: none; }

  .ajx-savebar { height: auto; min-height: 0; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  /* A mentés-státusz szövege kimarad: a folyamba került státusz-gombok mögé csúszott.
     A csak-megtekintés figyelmeztetés (ugyanez az osztály) viszont MARAD. */
  .ajx-savebar__mid:not(.ajx-savebar__readonly) { display: none; }

  .ajx-savebar__kpi {
    display: flex; flex-wrap: wrap; order: 1; flex: 1 1 auto;
    align-items: baseline; gap: 2px 14px; min-width: 0;
    background: var(--eclipse-dark, #0a0e1a);
    border-radius: 10px;
    padding: 7px 11px;
  }
  .ajx-savebar__kpi > * { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
  /* A fő számok a természetes szélességükön — csonkolva a devizanem olvashatatlan. */
  .ajx-savebar__kpi .fo { flex: 0 1 auto; }
  .ajx-savebar__kpi .fo .n { overflow: visible; text-overflow: clip; }
  .ajx-savebar__kpi .mell { flex: 0 1 auto; }
  .ajx-savebar__kpi .k {
    flex: 0 0 auto;
    font-family: var(--mono); font-size: 9px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5);
  }
  .ajx-savebar__kpi .n {
    font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--corona);
    white-space: nowrap;
  }
  .ajx-savebar__kpi .fo .n { font-size: 14px; }
  .ajx-savebar__kpi .n i { font-style: normal; font-size: 9px; color: rgba(255,255,255,.5); margin-left: 3px; }
  .ajx-savebar__kpi .mell .n { font-weight: 600; color: #fff; }

  /* Státusz-menü: a nyitó gomb az eszköz-ikonok mellé kerül, a gombsor fölé nyílik —
     abszolút középre pozicionálva a KPI-csíkkal fedné egymást. */
  .ajx-savebar__statuswrap { display: block; position: relative; order: 3; }
  .ajx-statusmenu-btn { display: inline-flex; }
  .ajx-savebar__status {
    position: absolute; left: 0; bottom: calc(100% + 10px); transform: none;
    display: none; flex-direction: column; gap: 6px;
    background: var(--bg-elev, #fff); border: 1px solid var(--line);
    border-radius: 12px; padding: 8px;
    box-shadow: var(--shadow-pop, 0 12px 40px rgba(17,24,39,.14));
  }
  .ajx-savebar__status.is-open { display: flex; }
  .ajx-statusbtn { min-width: 150px; }

  .ajx-savebar__tools { order: 2; }
  .ajx-savebar__right { order: 4; justify-content: flex-end; gap: 10px; }
  .ajx-savebar__readonly { order: 0; flex: 1 1 100%; margin-right: 0; }
}
/* BP-M — tablet álló (768×1024): a kétoszlopos űrlap-blokkok egyoszloposak
   (volt: 720px, ami a 768-as tabletet még kétoszlopos rácson hagyta) */
@media (max-width: 899px) {
  .ajx-fgrid { grid-template-columns: 1fr; }
  .ajx-monthgrid { grid-template-columns: 1fr 1fr; }
  /* A detail-panel magasság-foglalása itt kiesik: a fa FÖLÉ került (lásd lentebb), tehát a
     panel magasság-változása már nem tolja el a fát — a fix minimum csak üres sávot hagyna
     a rövidebb díj-panel alatt (#1839/V6). */
  .ajx-detail { min-height: 0; }

  .ajx-pbody:has(> .ajx-tree) > .ajx-detail { margin-top: 22px; }

  /* ── #1839/E — keskeny kijelző: szűkebb keret, tördelhető sávok ── */
  .ajx-wrap { padding: 18px 16px 130px; }   /* a mentés-sáv itt már két sorba tördelhet */
  .ajx-rail > * { flex: 1 1 100%; min-width: 0; }
  .ajx-card, .ajx-stream > * { min-width: 0; }

  /* Crumbbar EGY sorban (#1839/V5): a morzsa a Vissza gomb és az alfülek KÖZÉ kerül, nem alájuk.
     Így a fejléc két sor marad (app-fejléc + crumbbar). A morzsa zsugorodik, a két
     szélső elem a természetes méretén marad; a készítés időpontja is itt jelenik meg. */
  .ajx-crumbbar__inner { flex-wrap: nowrap; gap: 10px; padding: 10px 16px; }
  /* a sáv itt alacsonyabb és keskenyebb paddinget kap → a lenyíló lépéslista is feljebb-balra */
  .ajx-stepper { top: calc(var(--topbar-h) + 63px); left: 16px; width: min(340px, calc(100vw - 32px)); }
  .ajx-back, .ajx-subtabs { flex: 0 0 auto; }
  .ajx-crumbs {
    order: 0; flex: 1 1 auto; margin: 0; justify-content: flex-start;
    min-width: 0; overflow: hidden; white-space: nowrap;
  }
  .ajx-crumbs .kesz {
    display: inline; font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  }

  /* Címke-érték sorok egyoszlopossá.
     BUKTATÓ: 23 `.ajx-row` INLINE `style="grid-template-columns: ..."`-t hordoz (a
     legszélesebb 7 oszlopos, kb. 598 px) — inline stílust media query nem tud
     felülírni. Ezért mobilon a sor FLEX-re vált: a `display`-t a cascade dönti el
     (nem kell !important), flex-konténerben pedig az inline rács-definíció
     érvényét veszti. A címke saját sorba kerül, a kontrollok utána tördelnek. */
  .ajx-row,
  .ajx-row.r3,
  .ajx-kamatgrid .ajx-row.r3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }
  .ajx-row > * { flex: 1 1 130px; min-width: 0; }
  .ajx-row > label { flex: 0 0 100%; text-align: left; }
  /* mértékegység, inline ikon és nyomógomb a természetes méretén marad */
  .ajx-row > .ajx-unit,
  .ajx-row > .ajx-glyph,
  .ajx-row > .rz-chkbox,
  .ajx-row > button { flex: 0 0 auto; }
  /* a Radzen kontrollok a saját default szélességük helyett a nekik jutó helyet
     töltsék ki (különben ugyanabban a sorban az egyik mező hosszú, a másik rövid) */
  .ajx-row > .rz-textbox,
  .ajx-row > .rz-numeric,
  .ajx-row > .rz-dropdown,
  .ajx-row > .rz-datepicker,
  .ajx-row > .rz-mask,
  .ajx-row > .ajx-ctrl { width: 100% !important; }

  /* A fenti „minden kontroll 100%" jó az egy-mezős sorokra, de a %+összeg+deviza hármast
     három külön sorba tördeli. Ezeken a sorokon a mező-szerep dönti a szélességet.
     A pozíció-szelektor azért kell, mert a Radzen Numeric/DropDown 10.3.1-ben NEM vesz át
     `Class=` paramétert — a sor kap osztályt, a gyerekeket a sorrendjük azonosítja.
     `--pct`: címke · % · %-jel · összeg · deviza [· díjtípus · dátum] */
  .ajx-row--pct > *:nth-child(2) { flex: 0 0 84px; width: 84px !important; }
  .ajx-row--pct > *:nth-child(4) { flex: 1 1 104px; max-width: 200px; }
  .ajx-row--pct > *:nth-child(5) { flex: 0 0 84px; width: 84px !important; }
  /* `--dij`: címke · mennyiség · × · % · %-jel · összeg · deviza */
  .ajx-row--dij > *:nth-child(2) { flex: 0 0 62px; width: 62px !important; }
  .ajx-row--dij > *:nth-child(4) { flex: 0 0 84px; width: 84px !important; }
  .ajx-row--dij > *:nth-child(6) { flex: 1 1 104px; max-width: 200px; }
  .ajx-row--dij > *:nth-child(7) { flex: 0 0 84px; width: 84px !important; }
  /* `--rovid`: rövid tartalmú szám (futamidő) — a mértékegység mellé fér */
  .ajx-row--rovid > *:nth-child(2) { flex: 0 0 96px; width: 96px !important; }
  /* Dátum-mezők egységes szélessége (különben a mellettük álló elemtől függ, és két
     egymás alatti dátumsor eltérő szélességű lesz), a rács-kitöltő üres cella pedig kiesik. */
  .ajx-row > .rz-datepicker { flex: 0 0 150px; width: 150px !important; }
  .ajx-row > span:empty { display: none; }
  /* Mező + jelölőnégyzet: a jelölő a CÍMKE mögé kerül, zárójelben, a címke betűméretével —
     így sem külön sort nem eszik, sem a szövegmezőtől nem vesz el helyet. A mező a
     rendezéssel (`order`) csúszik a második sorba, a DOM-sorrend változatlan.
     Az inline margin-left-et !important üti. */
  .ajx-row--cb > label { flex: 0 0 auto; }
  .ajx-row--cb > .ajx-cb {
    flex: 0 0 auto; margin-left: 0 !important;
    font-size: 13px; font-weight: 500; color: var(--ink-muted); gap: 0;
  }
  /* a zárójel a `.ajx-cb` flex-konténer gyereke lenne → a 8px-es gap szóköznek látszott;
     ezért gap: 0, és a felirat kapja a négyzettől való távolságot */
  .ajx-row--cb > .ajx-cb > span { margin-left: 7px; }
  .ajx-row--cb > .ajx-cb::before { content: "("; }
  .ajx-row--cb > .ajx-cb::after  { content: ")"; }
  .ajx-row--cb > .rz-textbox { flex: 1 1 100%; order: 1; }
  /* A „Készült" sor kiesik — az érték a crumbbar morzsájába költözött. A rács-oszlopot
     is el kell tüntetni, különben a `.ajx-fgrid` gap-je üres rést hagyna. */
  .ajx-fcol:has(> .ajx-row--keszult) { display: none; }
  /* `--vetelar`: címke · típus · összeg · deviza — egy sorban */
  .ajx-row--vetelar > *:nth-child(2) { flex: 0 0 96px; width: 96px !important; }
  .ajx-row--vetelar > *:nth-child(3) { flex: 1 1 104px; }
  .ajx-row--vetelar > *:nth-child(4) { flex: 0 0 84px; width: 84px !important; }
  /* `--eszkoz`: címke · mennyiség · „új" · évjárat · „évjárat" felirat — egy sorban
     (a mennyiség-mező inline 50px-es Style-ját a fenti 100%-os szabály tágítaná ki) */
  .ajx-row--eszkoz > *:nth-child(2) { flex: 0 0 58px; width: 58px !important; }
  .ajx-row--eszkoz > *:nth-child(4) { flex: 0 0 118px; width: 118px !important; }
  /* A jelölőnégyzet-burok nem `.rz-chkbox`, ezért az általános `flex: 1 1 130px` alá esett:
     felszívta a maradék helyet, és az „évjárat" feliratot a következő sorba nyomta. */
  .ajx-row--eszkoz > .ajx-cb { flex: 0 0 auto; }
  /* A yyyy.MM érték rácsúszott a naptár-ikonra — hely a triggernek */
  .ajx-row--eszkoz .rz-datepicker input { padding-right: 28px; }

  /* Eszköz-fa: a sorok 3-4 sorra törtek szét. A megnevezés alá kerül az összeg (nem mellé),
     a díj-sor összege egy sorban marad, és az „add" gombot pótló üres hely kiesik. */
  .ajx-trow { gap: 5px 9px; padding: 10px 12px; }
  .ajx-trow .nm { min-width: 0; }
  .ajx-trow .nm .amt { display: block; margin-top: 2px; font-size: 12px; }
  .ajx-trow > .amt { flex: 0 0 auto; white-space: nowrap; font-size: 12px; }
  .ajx-trow.sub { padding-left: 16px; }
  .ajx-tact { margin-left: 8px; }
  .ajx-tslot { display: none; }

  /* Két rövid sor egymás mellé (a burok asztalin display:contents, ott nincs hatása) */
  .ajx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 12px; align-items: start; }

  .ajx-pbody { padding: 18px 16px; }

  /* Kártya-fejlécek (#1839/V7): a cím egy sorban marad, a meta-blokk EGÉSZBEN csúszik a
     második sorba, ha nem fér ki — eddig a benne lévő szöveg tördelt szét 3 sorra. */
  .ajx-phead { padding: 12px 16px; flex-wrap: wrap; row-gap: 8px; }
  .ajx-phead__idx { flex: 1 1 auto; min-width: 0; }
  .ajx-phead__meta { flex-wrap: wrap; }
  .ajx-phead__meta .num { white-space: nowrap; }
  /* a 01-es fejléc ajánlatszáma redundáns: a crumbbarban fixen látszik */
  .ajx-phead__num { display: none; }

  /* A kártyán belüli arany alcímek mobilon kiesnek: a kártya fejléce már megnevezi a
     blokkot, a rövid, egyoszlopos kártyán az ismétlés csak zajt visz be (user-döntés). */
  .ajx-subhead { display: none; }

  /* Result-sor: a két cella egymás alá, hogy a szerkeszthető részlet és a devizája
     olvasható maradjon (egy sorban 390 px-en összeszorulnak) */
  .ajx-result { grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; }
  .ajx-result__cell + .ajx-result__cell {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 14px;
  }
  .ajx-result__cell .v .n { font-size: 26px; }
  .ajx-result__edit > *:nth-child(1) { flex: 1 1 auto; width: auto !important; }
  .ajx-result__edit > *:nth-child(2) { flex: 0 0 92px; width: 92px !important; }

  /* Lebegő mentés-sáv (a közös rész a BP-L blokkban van, ≤1199px): itt a KPI-csík
     TELJES SORT kap, alatta az egyetlen akció-sor — keskenyebb kijelzőn a gombok mellé
     már nem férne be. */
  .ajx-savebar { gap: 6px 8px; padding: 6px 16px; }
  .ajx-savebar__kpi { flex: 1 1 100%; }
  .ajx-savebar__right { flex: 1 1 auto; }
}

/* BP-S — telefon álló (390×844) */
@media (max-width: 599px) {
  /* Morzsa: csak az aktuális ajánlatszám és a készítés NAPJA fér ki (az óra-perc kiesik) */
  .ajx-crumbs a,
  .ajx-crumbs .sep,
  .ajx-crumbs .mode,
  .ajx-crumbs .kesz .ido { display: none; }
  .ajx-crumbs .cur { font-size: 15px; }
  /* A Vissza és a két alfül ikonra fogyva fér el a morzsa mellett ugyanabban a sorban */
  .ajx-back > span,
  .ajx-subtab > span { display: none; }
  .ajx-back { padding: 7px 9px; gap: 0; }
  .ajx-subtab { padding: 7px 10px; gap: 0; }

  /* Díj-sor: mind a négy mező EGY sorba (#1839/V11 — korábban a V6/b törése az összeg
     elé esett). A mennyiség a legszűkebb (jellemzően 1, max. „999"), a % szélesebb,
     mert a „100,00" beírás közben is olvasható kell legyen (#1839/V12); a deviza a
     kódra méretezve, az összeg viszi a maradékot. A rugalmas alapméretek összege
     ~303 px, tehát 360 px-es kijelzőn sem lép új sorba. */
  .ajx-row--dij > *:nth-child(2) { flex: 0 0 42px; width: 42px !important; }
  .ajx-row--dij > *:nth-child(4) { flex: 0 0 74px; width: 74px !important; }
  .ajx-row--dij > *:nth-child(6) { flex: 1 1 58px; width: auto !important; }
  .ajx-row--dij > *:nth-child(7) { flex: 0 0 70px; width: 70px !important; }

  .ajx-wrap { padding: 16px 12px 120px; }
  .ajx-monthgrid { grid-template-columns: 1fr; }
  .ajx-pbody { padding: 16px 13px; }

  /* A sáv két sor: KPI-csík (két sorba tördelve) + egyetlen akció-sor
     (három eszköz-ikon · státusz-menü · Mentés), kb. 100 px összesen. */
  .ajx-savebar { padding: 6px 12px; }
  .ajx-savebar__kpi { gap: 2px 10px; }
  .ajx-savebar__tools { gap: 6px; }
  .ajx-savebtn { padding: 0 16px; font-size: 13px; }
}

/* ====================================================================== */
/* BUSY-OVERLAY — Eclipse: eklipsz-scrim + fade + mini-eklipsz spinner     */
/* (savebar z-index:40 + crumbbar z-index:20 fölött; minden kattintást elnyel) */
/* ====================================================================== */
.ajx-busy{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,14,26,.22);          /* --eclipse-dark tónusú scrim */
  backdrop-filter:blur(2px); cursor:wait;
  opacity:0; pointer-events:none;          /* rejtve: NE nyeljen kattintást */
  transition:opacity .2s ease;
}
.ajx-busy.is-visible{opacity:1; pointer-events:auto}

.ajx-busy__card{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--bg-elev,#fff); border:1px solid var(--line);
  border-radius:var(--radius-lg,14px); padding:16px 22px 16px 18px;
  box-shadow:var(--shadow-pop,0 12px 40px rgba(17,24,39,.10));
  transform:translateY(8px) scale(.98);
  transition:transform .26s cubic-bezier(.16,1,.3,1);
}
.ajx-busy.is-visible .ajx-busy__card{transform:translateY(0) scale(1)}

.ajx-busy__text{display:flex; flex-direction:column; gap:2px}
.ajx-busy__title{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.ajx-busy__sub{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)}

/* —— mini-eklipsz spinner: sötét korong + bronz perem + keringő fénygyöngy —— */
.ajx-busy__spin{position:relative; width:32px; height:32px; flex:0 0 auto; display:block}
.ajx-busy__spin .el-glow{position:absolute; inset:-5px; border-radius:50%;
  background:radial-gradient(circle,rgba(200,147,102,.55) 28%,rgba(200,147,102,.14) 54%,transparent 70%);
  animation:ajx-busy-beat 3s ease-in-out infinite}
.ajx-busy__spin .el-disk{position:absolute; inset:5px; border-radius:50%;
  background:radial-gradient(circle at 50% 36%,#1a2235,#0a0e1a 72%);
  box-shadow:0 0 0 1.5px rgba(200,147,102,.85),inset 0 0 9px rgba(0,0,0,.55)}
.ajx-busy__spin .el-orbit{position:absolute; inset:0; animation:ajx-busy-spin .95s cubic-bezier(.55,.1,.45,.9) infinite}
.ajx-busy__spin .el-bead{position:absolute; top:-1px; left:50%; width:7px; height:7px; border-radius:50%;
  transform:translateX(-50%); background:#fff5ea;
  box-shadow:0 0 7px 2px rgba(255,225,190,.9),0 0 14px 5px rgba(200,147,102,.6)}

@keyframes ajx-busy-spin{to{transform:rotate(360deg)}}
@keyframes ajx-busy-beat{0%,100%{transform:scale(.92);opacity:.85}50%{transform:scale(1.08);opacity:1}}

/* akadálymentesség: mozgáscsökkentésnél nincs pörgés, a gyöngy a perem tetején áll */
@media (prefers-reduced-motion:reduce){
  .ajx-busy__spin .el-glow,
  .ajx-busy__spin .el-orbit{animation:none!important}
  .ajx-busy__spin .el-bead{top:50%; transform:translate(-50%,-50%) translateY(-13px)}
  .ajx-busy,.ajx-busy__card{transition:opacity .12s ease!important}
}