/* PDFkivonat — saját stílus a Tabler fölött (→ docs/app.md, docs/review-ui.md). */

/* ---- Arculat (2026-09-17, → docs/brand.md) ------------------------------------------------
   A Tabler kékje helyett a logó zöldje. A Tabler a színeket `:root`-on változóként adja, ezt a
   fájl később töltődik, így felülírja; ami a Tablerben beégetett kék, azt külön pótoljuk. */
:root {
  --brand: #1c7c54; --brand-rgb: 28, 124, 84; --brand-dark: #145c3e; --brand-lt: #e8f3ee;
  --brand-focus: #8ec5ac; --brand-ink: #14202e;
  --tblr-primary: var(--brand); --tblr-primary-rgb: var(--brand-rgb); --tblr-primary-fg: #fff;
  --tblr-primary-lt: var(--brand-lt); --tblr-primary-lt-rgb: 232, 243, 238;
  --tblr-primary-bg-subtle: #d2e5dd; --tblr-primary-border-subtle: #a4cbbb; --tblr-primary-text-emphasis: #0b3222;
  --tblr-link-color: var(--brand); --tblr-link-color-rgb: var(--brand-rgb);
  --tblr-link-hover-color: var(--brand-dark); --tblr-link-hover-color-rgb: 20, 92, 62;
}
.form-control:focus, .form-select:focus, .form-check-input:focus,
.input-group-flat:focus-within .form-control, .input-group-flat:focus-within .input-group-text { border-color: var(--brand-focus) !important; }
.btn-link { color: var(--brand); }
.btn-link:hover { color: var(--brand-dark); }
.brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo img { height: 32px; width: auto; }
.brand-logo-lg img { height: 44px; }
/* A menüben LÁTSZIK, melyik oldalon áll a felhasználó (a tulajdonos kérése, 2026-09-18):
   halványzöld, lekerekített háttér a Tabler alig látható színváltása helyett. */
.app-header .navbar-nav .nav-link { border-radius: 8px; padding: .4rem .85rem; }
.app-header .navbar-nav .nav-link:hover { background: #f1f5f4; }
.app-header .navbar-nav .nav-link.active, .app-header .nav-item.active .nav-link {
  color: var(--brand-dark); background: var(--brand-lt); font-weight: 600;
}
/* A fiók-gomb ugyanaz a lekerekített csempe. A Tabler nyitott állapotban 4 px-es, SZÖGLETES
   fókuszgyűrűt tesz rá (box-shadow), ezért látszott téglalap a név körül — helyette ugyanaz a
   halvány háttér; billentyűzetnél marad a gyűrű, de lekerekítve. */
.app-header .dropdown > .nav-link { border-radius: 8px; padding: .25rem .6rem; }
.app-header .dropdown > .nav-link:hover,
.app-header .dropdown > .nav-link.show { background: #f1f5f4; box-shadow: none; }
/* …de NYITOTT menünél nem: ott a menü maga a visszajelzés, a gyűrű csak zajos keret lenne. */
.app-header .dropdown > .nav-link:focus-visible:not(.show) { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25); }
/* A legördülő: ikon balra, és ugyanaz a zöldes kiemelés a hoverre, mint a menüben. */
.app-header .dropdown-menu { padding: .25rem; --tblr-dropdown-link-hover-bg: var(--brand-lt); --tblr-dropdown-link-hover-color: var(--brand-dark); }
.app-header .dropdown-item { display: flex; align-items: center; gap: .55rem; border-radius: 6px; }
.app-header .dropdown-item .icon { width: 18px; height: 18px; flex: none; opacity: .75; }
.app-header .dropdown-item:hover .icon, .app-header .dropdown-item:focus .icon { opacity: 1; }
.app-header .dropdown-header { padding-inline: .6rem; }

body { background: #f6f8fb; }
html, body { overflow-x: hidden; }   /* mobilon csak a táblázatok görgessenek vízszintesen, az oldal ne */

/* ---- Feltöltés ------------------------------------------------------------------------ */
.dropzone-box {
  display: block; text-align: center; cursor: pointer;
  padding: 3rem 1rem; border: 2px dashed #c8d1dc; border-radius: 12px; background: #fff;
  transition: border-color .15s, background .15s;
}
.dropzone-box.dropzone-compact { padding: 1.25rem 1rem; }
.dropzone-box:hover,
.dropzone-box.dragging {
  border-color: var(--tblr-primary, #206bc4);
  background: var(--tblr-primary-lt, #f0f6fd);
}
.dropzone-box.uploading { opacity: .6; pointer-events: none; }

/* ---- Keretjelző ------------------------------------------------------------------------ */
.usage-bar { background: #fff; border: 1px solid var(--tblr-border-color, #e6e7e9); border-radius: 8px; padding: .625rem 1rem .75rem; }
.usage-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.usage-plan { font-weight: 600; }
.usage-sep { color: var(--tblr-secondary, #667382); margin: 0 .5rem; }
.usage-restart { margin-left: auto; font-size: .8125rem; }
.usage-progress { height: 4px; }

/* ---- Előfizetés ------------------------------------------------------------------------ */
.billing-current { background: #fff; border: 1px solid var(--tblr-border-color, #e6e7e9); border-radius: 8px; padding: .75rem 1rem; }
.billing-plan { height: 100%; }
.billing-plan-current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.billing-price { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.billing-price span { font-size: .875rem; font-weight: 400; color: var(--tblr-secondary, #667382); }
.billing-gross { color: var(--tblr-secondary, #667382); font-size: .8125rem; min-height: 1.3em; }
/* A landing árkártyáival azonos felsorolás (frontend/landing.css §Árak): zöld pipa a sorok előtt. */
.billing-features li { padding: .2rem 0; }
.billing-features li::before { content: "✓"; color: var(--brand); font-weight: 700; margin-right: .5rem; }
.checkout-body { min-height: 420px; }

/* ---- Kiolvasások lista ---------------------------------------------------------------- */
/* 15%-kal szélesebb a `container-xl`-nél (1320 → 1518 px, a tulajdonos kérése, 2026-09-17). */
.uploads-wide { max-width: 1518px; }
.app-header .container-xl { max-width: 1518px; }   /* a fejléc a lista szélével egy vonalban */
/* FIX oszlopszélességek, vízszintes görgetés nélkül: `table-layout: fixed`, a Fájl oszlop kapja a
   maradékot, a hosszú szöveg három ponttal vágódik (a teljes a tooltipben). */
.uploads-table { table-layout: fixed; width: 100%; }
.uploads-table .c-created { width: 175px; }
.uploads-table .c-account { width: 240px; }
.uploads-table .c-period { width: 215px; }
.uploads-table .c-count { width: 70px; }
.uploads-table .c-status { width: 160px; }
.uploads-table .c-actions { width: 260px; }
.uploads-table td { overflow: hidden; }
.uploads-table td.c-created, .uploads-table td.c-period, .uploads-table td.c-status { white-space: nowrap; }
.cell-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: inline-flex; gap: .375rem; justify-content: flex-end; flex-wrap: nowrap; }
.row-actions .btn { white-space: nowrap; }
.row-actions .btn-delete:hover { color: var(--tblr-danger, #d63939); border-color: var(--tblr-danger, #d63939); }
/* Keskenyedő képernyőn előbb a kevésbé fontos oszlopok tűnnek el, nem jön vízszintes görgetés. */
@media (max-width: 1199.98px) { .uploads-table .c-period, .uploads-table .c-created { display: none; } }
@media (max-width: 991.98px) { .uploads-table .c-account, .uploads-table .c-count { display: none; } }
@media (max-width: 575.98px) {
  .uploads-table .c-actions { width: 136px; padding-left: .25rem; }
  .uploads-table .c-status { width: 112px; padding-left: .25rem; padding-right: .25rem; }
  .uploads-table .status-badge { font-size: .6875rem; }
  .row-actions { gap: .25rem; }
  .row-actions .btn { padding: .3rem .4rem; }
  .row-actions .btn span { display: none; }       /* csak ikonok */
}
.uploads-table tr.row-clickable { cursor: pointer; }
.uploads-table tr.row-clickable:hover { background: var(--tblr-active-bg, #f6f8fb); }
.status-badge { font-size: .8125rem; }

.form-msg:empty { display: none; }

/* ---- Nézegető (Feltöltve állapotú kivonat) ------------------------------------------------ */
.viewer-body { height: 80vh; background: #f8f9fa; display: flex; align-items: center; justify-content: center; overflow: auto; }
.viewer-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.viewer-body img { max-width: 100%; padding: 1rem; align-self: flex-start; }

/* ---- Folyamatjelző ---------------------------------------------------------------------- */
.status-box { text-align: center; max-width: 560px; margin: 0 auto; }
.status-box .progress { width: 280px; max-width: 100%; height: 6px; margin: 1rem auto; }
.review-status { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }

/* ---- Ellenőrző ablak -------------------------------------------------------------------- */
/* Alapméret: a SzámlaPáros modal-xl + 15% = 1311px széles, a látható magasság ~90%-a. */
.review-dialog { max-width: 1311px; }
/* A magasság 90vh-ról 81vh (−10%, a tulajdonos kérése, 2026-09-17: a Letöltés gomb túl lent volt). */
.review-dialog .review-frame { height: 81vh; display: flex; flex-direction: column; }
/* NAGYÍTOTT állapot (§review.js toggleReviewSize): a képernyő széléig. A szélesség NEM `vw`: a
   `98vw` a görgetősávot is beleszámolja, a `body.modal-open` pedig ugyanennyi `padding-right`-ot
   tesz a modal köré — a kettő együtt a modal bal oldalát tolta ki a képernyőről (SzámlaPáros,
   2026-09-14). A nyert helyet főleg a KIVONATKÉP kapja; a SzámlaPáros itt 7/5-re fordítja az
   osztást, itt 1/1, mert az Irány + Összeg két oszlop, így a lista 7/5-nél már görgetne. */
.review-dialog.review-max { max-width: none; margin: 1rem; }
.review-dialog.review-max .review-frame { height: calc((100vh - 2rem) * .9); }
.review-cols { display: flex; flex: 1 1 auto; min-height: 0; }
.review-preview {
  flex: 0 0 41.666667%; max-width: 41.666667%; background: #f8f9fa;
  border-right: 1px solid var(--tblr-border-color, #e6e7e9);
  display: flex; align-items: center; justify-content: center; overflow: auto;
}
.review-list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: auto; }
.review-max .review-preview { flex-basis: 50%; max-width: 50%; }
.review-preview iframe { width: 100%; height: 100%; border: 0; display: block; }
.review-preview img { max-width: 100%; padding: 1rem; align-self: flex-start; }
.review-table-wrap { flex: 1 1 auto; overflow: auto; }
.review-footer { flex-wrap: wrap; gap: .5rem; }
.review-footer > * { margin: 0; }

/* NAGYOBB BETŰ (SzámlaPáros, 2026-09-05): ez a fő munkafelület — soronként kell összevetni a
   kivonattal —, ezért szándékos kivétel a Tabler `table-sm`/`form-control-sm` apró betűje alól.
   A sávokat a letöltés ELŐTT kell elolvasni, nem apróbetűben. */
#reviewModal .alert { font-size: .95rem; }
#balanceCheckResult { font-size: .95rem; }
.review-table { font-size: .9375rem; min-width: 720px; }
.review-table .form-control-sm,
.review-table .form-select-sm { font-size: .9375rem; padding: .25rem .5rem; }
.review-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.review-table .col-date { width: 140px; }
.review-table .col-dir { width: 125px; }
.review-table .col-amount { width: 130px; }
.review-table .col-act { width: 64px; }
.review-table input.text-end { font-variant-numeric: tabular-nums; }

/* Mobil / keskeny ablak: teljes képernyős ablak, a kivonatkép a lista FÖLÖTT, a lista görgethető. */
@media (max-width: 767.98px) {
  .review-dialog, .review-dialog.review-max { margin: 0; max-width: none; }
  .review-dialog .review-frame, .review-dialog.review-max .review-frame { height: 100vh; border-radius: 0; }
  .review-cols { flex-direction: column; overflow: auto; }
  .review-preview, .review-max .review-preview {
    flex: 0 0 auto; max-width: 100%; height: 55vh;
    border-right: 0; border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  }
  .review-list { overflow: visible; }
  .review-table-wrap { max-height: 70vh; }
  #reviewSizeBtn { display: none; }
}

.confirm-dialog { border: 0; border-radius: 8px; padding: 1.25rem; max-width: min(460px, calc(100vw - 2rem)); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.confirm-dialog::backdrop { background: rgba(24, 36, 51, .45); }