/* ==========================================================================
   Ajánlat-szerkesztő — ÜTEMEZÉS nézet (testvér-fül az Ajánlat mellett)
   Referencia: design/Ajanlat-utemezes.html  (.summary / .sched / .cell-input /
   .cell-dd / .total szabályok portja RadzenDataGrid-re).
   Minden szabály a .ajx gyökér alá van szkópolva (a szerkesztő wrapper); a
   számolt mono-cellákra a meglévő .ajx .mono szabály érvényes.
   Tokenek: --eclipse-dark, --corona, --mono, --ink*, --line*, --bg-*.
   ========================================================================== */

/* ── Konténer (design .wrap) ── */
.ajx .util-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 28px 110px; }

/* ── Kontextus-fejléc ── */
.ajx .util-ctxhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.ajx .util-ctxhead .eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: var(--corona-deep); font-weight: 500; }
.ajx .util-ctxhead h1 { font-family: var(--serif); font-size: 42px; line-height: 1.0; letter-spacing: -.015em; margin: 6px 0 0; font-weight: 400; color: var(--ink); }
.ajx .util-ctxhead .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; display: flex; align-items: center; gap: 9px; }

/* Megjelenítési deviza-választó (ütemezés feletti combobox) */
.ajx .util-devpick { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ajx .util-devpick__label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle); font-weight: 600; }
.ajx .util-devpick__dd { min-width: 130px; }

/* ── Összegző sáv (sötét, 4 cella, függőleges elválasztókkal) ── */
.ajx .util-summary { display: flex; background: var(--eclipse-dark); border-radius: 13px; overflow: hidden; }
.ajx .util-summary .cell { flex: 1; padding: 15px 20px; position: relative; }
.ajx .util-summary .cell + .cell::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: rgba(255,255,255,.1); }
.ajx .util-summary .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 600; }
.ajx .util-summary .v { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; white-space: nowrap; }
.ajx .util-summary .v .n { font-family: var(--mono); font-size: 18px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.ajx .util-summary .v .n.gold { color: var(--corona); }
.ajx .util-summary .v .u { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.55); }

/* ── Rács-kártya ── */
.ajx .util-gridcard { background: var(--bg-elev); 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; margin-top: 16px; }
.ajx .util-gridcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line-bright); }
.ajx .util-gridcard__head .t { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--corona-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.ajx .util-gridcard__head .t svg { width: 15px; height: 15px; }
.ajx .util-gridcard__head .legend { display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.ajx .util-gridcard__head .legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.ajx .util-gridcard__head .legend .sw { width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--line-bright); background: #fff; box-shadow: 0 0 0 2px var(--corona-soft); }
.ajx .util-gridcard__head .legend .sw.ro { background: var(--bg-surface); box-shadow: none; }

.ajx .util-gridfoot { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px; border-top: 1px solid var(--line); background: var(--bg-canvas); }
.ajx .util-gridfoot .l { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.ajx .util-gridfoot .r { font-size: 12px; color: var(--ink-faint); }

/* ── RadzenDataGrid felülírások (Class="util-grid") ──────────────────────── */
.ajx .util-grid { border: none; }
.ajx .util-grid .rz-datatable { border: none !important; }

/* Sötét fejléc — fehér mono uppercase */
.ajx .util-grid thead th,
.ajx .util-grid .rz-datatable-thead th { background: var(--eclipse-dark) !important; border-bottom: none !important; padding: 12px 16px !important; vertical-align: middle; }
.ajx .util-grid .rz-column-title,
.ajx .util-grid .rz-column-title-content { font-family: var(--mono) !important; font-size: 10px !important; letter-spacing: .1em !important; text-transform: uppercase !important; font-weight: 600 !important; color: #fff !important; }
.ajx .util-grid .rz-sortable-column .rz-sortable-column-icon,
.ajx .util-grid thead th .rzi-sort { color: rgba(255,255,255,.55) !important; }

/* A két szerkeszthető fejléc-cella jelölése: 2px corona alsó szegély + corona pötty */
.ajx .util-grid thead th.util-edithead { border-bottom: 2px solid var(--corona) !important; }
.ajx .util-editdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--corona); margin-right: 7px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(200,147,102,.25); }

/* Adatcellák — kompakt, finom vonalak, zebra + hover */
.ajx .util-grid .rz-data-row td,
.ajx .util-grid tbody td { height: 40px; padding: 4px 16px !important; border-bottom: 1px solid var(--line) !important; color: var(--ink); font-size: 13.5px; vertical-align: middle; }
.ajx .util-grid .rz-data-row:nth-child(even) td { background: var(--bg-canvas); }
.ajx .util-grid .rz-data-row:hover td { background: var(--corona-soft) !important; }

/* Megnevezés / Esedékesség / Tőketartozás finomságok */
.ajx .util-grid .util-meg { font-family: var(--mono); color: var(--ink-muted); font-weight: 500; }
.ajx .util-grid .util-esed { font-family: var(--mono); color: var(--ink-muted); }
.ajx .util-grid .util-bal { color: var(--ink-muted); }

/* Nyitó tételek (Vételár/Önerő): corona-deep, vastag, sans megnevezés */
.ajx .util-grid .util-meg--special { color: var(--corona-deep); font-weight: 600; font-family: var(--sans); }

/* ── Szerkeszthető cellák: kompakt RadzenNumeric ── */
.ajx .util-grid .rz-numeric { height: 30px; min-height: 30px; }
.ajx .util-grid .rz-numeric,
.ajx .util-grid .rz-numeric .rz-inputtext,
.ajx .util-grid .rz-numeric input { height: 30px !important; border-radius: 7px; background: #fff; }
.ajx .util-grid .rz-numeric input { text-align: right; font-family: var(--mono) !important; font-variant-numeric: tabular-nums; padding: 0 11px !important; border: 1px solid var(--line-bright); border-radius: 7px; }
.ajx .util-grid .rz-numeric .rz-spinner-up,
.ajx .util-grid .rz-numeric .rz-spinner-down { display: none !important; }
.ajx .util-grid .rz-numeric input:focus { outline: none; border-color: var(--corona) !important; box-shadow: 0 0 0 3px var(--corona-soft) !important; }

/* ── Szerkeszthető cellák: kompakt RadzenDropDown ── */
.ajx .util-grid .rz-dropdown { height: 30px; min-height: 30px; border: 1px solid var(--line-bright); border-radius: 7px; background: #fff; display: flex; align-items: center; }
.ajx .util-grid .rz-dropdown .rz-dropdown-label,
.ajx .util-grid .rz-dropdown .rz-inputtext { padding: 0 8px 0 11px !important; line-height: 28px; color: var(--ink); }
.ajx .util-grid .rz-dropdown.rz-state-focused { border-color: var(--corona) !important; box-shadow: 0 0 0 3px var(--corona-soft) !important; }
.ajx .util-grid .rz-dropdown .rz-dropdown-trigger { color: var(--ink-faint); }

/* Letiltott szerkeszthető cellák a nyitó/összesen sorokban */
.ajx .util-grid .rz-numeric.rz-state-disabled input,
.ajx .util-grid .rz-dropdown.rz-state-disabled { background: var(--bg-surface); border-color: var(--line-bright); color: var(--ink-faint); box-shadow: none; }

/* ── Összesen (footer) sor ── */
.ajx .util-grid tfoot td,
.ajx .util-grid .rz-datatable-tfoot td { border-top: 2px solid var(--line-strong) !important; border-bottom: none !important; background: var(--bg-surface) !important; font-weight: 700; padding: 10px 16px !important; color: var(--ink); }
.ajx .util-grid tfoot .util-foot-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ajx .util-grid tfoot .util-foot-meg { font-family: var(--sans); font-weight: 700; color: var(--ink); }

/* ==========================================================================
   RESZPONZÍV — #1839/F.  Töréspontok: tokens.diff.css „BREAKPOINTOK — SSOT".
   --------------------------------------------------------------------------
   A rács 8 oszlopa keskeny kijelzőn nem fér ki. Az oszlop-redukciót NEM ez a
   fájl végzi: a szélességek inline colgroup-ba kerülnek, ezért a komponens
   kapcsolja az oszlopok Visible-jét a ViewportFigyelő flagjével
   (AjanlatSzerkeszto.razor). Marad:
     BP-M alatt   — Megnevezés · Esedékesség · Részlet · Tőketartozás ·
                    Egyedi díj · Díj típusa   (a Tőke és a Kamat kimarad)
     BP-S alatt   — Esedékesség · Részlet · Tőketartozás
   A szélességek EGY készletből jönnek (106·110·114·110·114·128·118·136), ami
   mindhárom sávban kifér belső görgetés nélkül: 8 oszlop = 936 px (1024 px-es
   kijelzőn ~953 px a hely), 6 oszlop = 712 px (768-on ~734), 3 oszlop = 352 px
   (390-en ~366). Korábban 1010 px volt, és az utolsó oszlop legördülője
   levágódott (#1839/V11-V12). A négy pénz-oszlop 2026-08-06-án +4..+6 px-et
   kapott (#1844): tizedes nélküli HUF-nál a leghosszabb érték 11 karakter
   („123 456 789") ≈ 89 px, ami a korábbi 108/106 px-es oszlopokban a cella-
   paddinggel együtt még ellipszisre futott. Ahol a hely több, ott a Radzen a
   táblát 100%-ra nyújtja, tehát 1280 px-en a rács változatlanul kitölti a kártyát.
   ========================================================================== */

/* BP-L — tablet fekvő és alatta: keskenyebb cella-levegő. A fix oszlop-szélességek
   mellett 1200 px alatt a 16 px-es alap-padding már elvenné a helyet a leghosszabb
   számoktól (tőketartozás), és ellipszisre futnának (#1839/V12). */
@media (max-width: 1199px) {
  .ajx .util-grid thead th,
  .ajx .util-grid .rz-datatable-thead th { padding: 10px 10px !important; }
  .ajx .util-grid .rz-data-row td,
  .ajx .util-grid tbody td { padding: 4px 10px !important; }
  .ajx .util-grid tfoot td,
  .ajx .util-grid .rz-datatable-tfoot td { padding: 10px 10px !important; }
}

/* BP-M — tablet álló és alatta */
@media (max-width: 899px) {
  .ajx .util-wrap { padding: 18px 16px 150px; }   /* a mentés-sáv mobilon tördelhet */
  .ajx .util-ctxhead { flex-direction: column; align-items: stretch; gap: 14px; }
  .ajx .util-ctxhead h1 { font-size: 32px; }
  .ajx .util-devpick { align-items: flex-start; }
  .ajx .util-gridcard__head { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; }
  .ajx .util-gridfoot { flex-wrap: wrap; gap: 4px 12px; padding: 11px 16px; }

  /* Összegző sáv: 4 cella egy sorban helyett 2×2 rács. A függőleges elválasztó
     (::before) csak sor-elrendezésben helyes — itt cella-szegélyek veszik át. */
  .ajx .util-summary { display: grid; grid-template-columns: 1fr 1fr; }
  .ajx .util-summary .cell + .cell::before { display: none; }
  .ajx .util-summary .cell { border-top: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
  .ajx .util-summary .cell:nth-child(-n+2) { border-top: none; }
  .ajx .util-summary .cell:nth-child(odd) { border-left: none; }
}

/* BP-S — telefon álló */
@media (max-width: 599px) {
  .ajx .util-wrap { padding: 16px 12px 180px; }
  .ajx .util-ctxhead h1 { font-size: 28px; }
  .ajx .util-summary .v .n { font-size: 15px; }
  /* a jelmagyarázat a szerkeszthető oszlopokra utal — telefonon azok kimaradnak */
  .ajx .util-gridcard__head .legend { display: none; }
  /* a keskenyebb cella-levegőt a BP-M blokk adja (onnan öröklődik ide is) */
}

/* ── Savebar: „Vissza az ajánlathoz" gomb (design .savebar__l) ── */
.ajx .util-savebar__back { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border: 1px solid var(--line-bright); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 500; color: var(--ink-muted); cursor: pointer; transition: border-color .12s, color .12s; }
.ajx .util-savebar__back:hover { border-color: var(--corona); color: var(--corona-deep); }
.ajx .util-savebar__back svg { width: 15px; height: 15px; }