/* LazyBill – könnyű, saját design-rendszer.
   Modern, letisztult: sok whitespace, kártyák, nagy lekerekítés, lágy
   többrétegű árnyékok, pill-gombok finom színátmenettel. */

/* Inter (OFL, self-hostolt – a CSP miatt külső fontszolgáltató nem játszik).
   A relatív út kötelező: a whitenoise manifest storage így írja át. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.2bf3d951bf9d.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #6d5ce6;
  --primary-strong: #5a49d6;
  --primary-soft: #efecfd;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --border: #e7e5e0;
  --text: #26251f;
  --text-muted: #6f6d66;
  --success: #1a936f;
  --success-soft: #e3f5ee;
  --danger: #d64550;
  --danger-soft: #fbe9ea;
  --warning: #b7791f;
  --warning-soft: #fdf3e1;
  --info-soft: #e8f0fc;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 1px rgba(38, 37, 31, .04), 0 5px 10px rgba(38, 37, 31, .05), 0 15px 30px rgba(38, 37, 31, .06);
  --grad-primary: linear-gradient(180deg, #7d6cf0 0%, #6d5ce6 100%);
  --shadow-btn: 0 1px 2px rgba(38, 37, 31, .06), 0 3px 8px rgba(109, 92, 230, .20);
  --shadow-btn-hover: 0 2px 4px rgba(38, 37, 31, .08), 0 6px 18px rgba(109, 92, 230, .35);
  --control-h: 44px;
  --control-h-sm: 36px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
a { color: var(--primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; margin: 0 0 .35rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
.page-sub { color: var(--text-muted); margin: 0 0 1.5rem; }
/* Címke a főcím mellett (pl. időszak a vezérlőpulton) */
.h1-chip {
  display: inline-block; vertical-align: .18em; margin-left: .35rem;
  padding: .15rem .65rem; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-strong);
  font-size: .82rem; font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
/* Időszak-választó pill gombok a vezérlőpult főcíme alatt */
.period-picker { display: inline-flex; gap: .35rem; margin-top: .45rem; flex-wrap: wrap; }
.period-btn {
  padding: .32rem .9rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  transition: border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.period-btn:hover {
  border-color: var(--primary); color: var(--primary-strong);
  text-decoration: none; box-shadow: 0 0 0 3px var(--primary-soft);
}
/* Az „Egyéni időszak" popup finomabb vezérlői: hónap-léptető + tól–ig */
.period-range { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.period-range label { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--text-muted); }
.period-range input[type="date"] { width: auto; }
.period-btn.active {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary-strong);
}
/* Kör alakú, lila hó-léptető nyilak (‹ ›) – a period-btn-nel azonos magasság */
.period-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  background: var(--grad-primary); color: #fff; border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(109, 92, 230, .35);
  transition: filter .12s ease, box-shadow .12s ease;
}
.period-nav-btn:hover { filter: brightness(1.06); text-decoration: none; box-shadow: 0 3px 12px rgba(109, 92, 230, .45); }
.period-nav-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* --- Fejléc ---------------------------------------------------------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; gap: 1.25rem; min-height: 60px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand svg { flex: none; }
/* Színátmenetes felirat (márkanév a fejlécben és az auth-oldalakon) */
.grad-text {
  background: linear-gradient(92deg, #7d6cf0, #5a49d6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.main-nav { display: flex; gap: .15rem; flex-wrap: wrap; }
.main-nav a {
  padding: .45rem .8rem; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 500; font-size: .95rem;
}
.main-nav a:hover { background: var(--primary-soft); color: var(--primary-strong); text-decoration: none; }
.main-nav a.active { background: var(--primary-soft); color: var(--primary-strong); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.menu-wrap { position: relative; }
.menu-btn { padding: .3rem .8rem; line-height: 1; min-height: 44px; min-width: 52px; }
.menu-btn svg { width: 20px; height: 20px; flex: none; }
/* Mobil fejléc: márkanév középen, alatta egy sorban balra a cégváltó/cégnév
   és jobbra a (nagyobb, ujjbarát) hamburger gomb – egyforma magasan */
@media (max-width: 767px) {
  .topbar-inner {
    flex-direction: column; align-items: stretch;
    gap: .45rem; padding: .55rem 1rem .6rem;
  }
  .brand { justify-content: center; }
  .topbar-right { margin-left: 0; justify-content: space-between; }
  .switcher-btn { min-height: 46px; padding: .55rem 1rem; font-size: .95rem; }
  .menu-btn { min-height: 46px; min-width: 54px; }
  .menu-btn svg { width: 24px; height: 24px; }
}
[x-cloak] { display: none !important; }

/* --- Cégváltó combobox --------------------------------------------------- */
.company-switcher { position: relative; }
.switcher-btn {
  border: 1px solid var(--border); border-radius: 999px;
  padding: .55rem 1.1rem; min-height: 44px;
  background: var(--surface); font-weight: 600;
  font-size: .95rem; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font);
  box-shadow: 0 1px 2px rgba(38, 37, 31, .06);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.switcher-btn:hover, .switcher-btn[aria-expanded="true"] {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.switcher-btn-name {
  max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher-chevron { flex: none; color: var(--text-muted); }
.switcher-panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; width: 320px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(38, 37, 31, .14);
  padding: .6rem;
}
.switcher-panel input[type="text"] {
  margin-bottom: .5rem; font-size: .9rem;
  background: var(--bg); border-color: transparent;
}
.switcher-panel input[type="text"]:focus {
  background: var(--surface); border-color: var(--primary);
}
.switcher-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.switcher-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  width: 100%; text-align: left; padding: .45rem .65rem; cursor: pointer;
  border: none; background: none; border-radius: var(--radius-sm);
  font-family: var(--font); color: var(--text);
}
.switcher-item-name { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.switcher-item-tax { font-size: .78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.switcher-item.active { background: var(--primary-soft); }
.switcher-item.active .switcher-item-name { color: var(--primary-strong); }
.switcher-item.current .switcher-item-name::after {
  content: "aktív"; margin-left: .5rem; padding: .05rem .45rem;
  background: var(--success-soft); color: var(--success);
  border-radius: 999px; font-size: .7rem; font-weight: 600; vertical-align: middle;
}
.switcher-empty { padding: .6rem .65rem; font-size: .88rem; color: var(--text-muted); }
.switcher-hint {
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border);
  font-size: .74rem; color: var(--text-muted); text-align: center;
}
@media (max-width: 767px) {
  /* A cégváltó mobilon a bal szélre kerül, ezért a panel is balra nyílik */
  .switcher-panel { width: min(320px, 92vw); left: 0; right: auto; }
  .switcher-btn-name { max-width: 55vw; }
}

/* --- Elrendezés ------------------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
/* Oldal-fejléc gombsor: egy sorban, egyforma (normál) magasságú gombok */
.page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Kétsoros változat (Számlák oldal): felül a „+ Számla/Kiadás", alatta jobbra
   a Hiányzó számlaképek + Export gombok. */
.page-actions-stacked { flex-direction: column; align-items: flex-end; }
.page-actions-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.grid { display: grid; gap: 1rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-4, .grid-2 { grid-template-columns: 1fr; } }
/* Havi csomag: két egymás melletti, EGYFORMA magas blokk asztalon (align-items:
   stretch = a rövidebb kártya a magasabbhoz nyúlik). BAL: időszak + összegző +
   ellenőrzőlista; JOBB: megjegyzés + letöltés. Mobilon egy oszlop, a forrás
   sorrendjében (időszak → összegző → ellenőrzőlista → megjegyzés → letöltés). */
.package-cols { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 900px) {
  .package-cols { flex-direction: row; align-items: stretch; }
  .package-cols > .card { flex: 1 1 0; min-width: 0; }
  /* JOBB blokk: flex-oszlop – a megjegyzés kitölti a helyet, a sárga
     (előkészítés/letöltés) blokk a kártya aljára kerül. */
  .package-side { display: flex; flex-direction: column; }
  .package-side .package-note { flex: 1 1 auto; display: flex; flex-direction: column; }
  /* align-items:flex-start → a „Megjegyzés mentése" gomb ne nyúljon teljes szélesre
     (a textarea a saját width:100%-ától marad teljes szélességű). */
  .package-side .package-note-form { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; }
  .package-side .package-note-area { flex: 1 1 auto; min-height: 6rem; }
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem;
}
.card + .card { margin-top: 1rem; }
/* Grid/flex-oszlopon belül a gap adja a térközt (nem a margó), és minden kártya
   egyforma magasra nyúlik. FONTOS: ez a szabály a .card + .card UTÁN áll, hogy a
   második kártya se kapjon margó-eltolást (különben alacsonyabb lenne). */
.grid > .card, .package-cols > .card { margin-top: 0; }
.stat-label { color: var(--text-muted); font-size: .85rem; font-weight: 500; margin-bottom: .25rem; }
.stat-value { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.stat-value.success { color: var(--success); }
.stat-value.danger { color: var(--danger); }
.stat-value-suffix { font-size: .78rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.stat-secondary { font-size: .85rem; color: var(--text-muted); margin-top: .1rem; }
.stat-secondary a { color: var(--text-muted); font-weight: 600; }
.stat-secondary a:hover { color: var(--primary-strong); text-decoration: none; }
.stat-split { display: flex; gap: 1.75rem; }
.stat-split-item { display: flex; flex-direction: column; color: var(--text); }
.stat-split-item:hover { text-decoration: none; }
.stat-split-item:hover .stat-value { color: var(--primary-strong); }
.stat-split-label { font-size: .8rem; color: var(--text-muted); }

/* --- Gombok ----------------------------------------------------------- */
/* Pill forma, a beviteli mezőkkel közös magasság (--control-h), finom
   színátmenet + emelkedő hover (a hoverben a gradientet újra kell adni,
   különben a sima background felülütné). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid transparent; border-radius: 999px;
  min-height: var(--control-h);
  /* Fix sormagasság: az <a> a body 1.55-jét örökölné, a <button> nem –
     enélkül a linkek 1-2 px-szel magasabbak lennének a gomboknál */
  line-height: 1.2;
  padding: .6rem 1.35rem; font-size: 1rem; font-weight: 600;
  cursor: pointer; background: var(--grad-primary); color: #fff;
  box-shadow: var(--shadow-btn); text-align: center;
  transition: box-shadow .15s ease, transform .15s ease, filter .15s ease, background .15s ease;
}
.btn:hover {
  background: var(--grad-primary); filter: saturate(1.05) brightness(1.05);
  transform: translateY(-1px); box-shadow: var(--shadow-btn-hover);
  text-decoration: none;
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-btn); }
.btn-secondary {
  background: var(--surface); color: var(--text); border-color: var(--border);
  box-shadow: 0 1px 2px rgba(38, 37, 31, .06);
}
.btn-secondary:hover {
  background: var(--bg); filter: none;
  box-shadow: 0 3px 10px rgba(38, 37, 31, .12);
}
.btn-danger { background: var(--danger); box-shadow: 0 1px 2px rgba(38, 37, 31, .06), 0 3px 8px rgba(214, 69, 80, .22); }
.btn-danger:hover { background: #b93842; filter: none; box-shadow: 0 2px 4px rgba(38, 37, 31, .08), 0 6px 16px rgba(214, 69, 80, .35); }
.btn-success { background: var(--success); box-shadow: 0 1px 2px rgba(38, 37, 31, .06), 0 3px 8px rgba(26, 147, 111, .22); }
.btn-success:hover { background: #157a5c; filter: none; box-shadow: 0 2px 4px rgba(38, 37, 31, .08), 0 6px 16px rgba(26, 147, 111, .35); }
.btn-sm { min-height: var(--control-h-sm); padding: .35rem 1rem; font-size: .9rem; }
.btn-block { display: flex; width: 100%; }
/* Inaktív gomb: teljesen szürkített, nem kattintható jelzés (pl. „Könyvelőm
   értesítése" könyvelő nélkül) – NEM rejtjük el, csak vizuálisan letiltjuk */
.btn:disabled, .btn[disabled] {
  opacity: .5; cursor: not-allowed; box-shadow: none;
  filter: grayscale(.4); transform: none;
}
.btn:disabled:hover, .btn[disabled]:hover {
  transform: none; box-shadow: none; filter: grayscale(.4);
}

/* --- Hamburger menü panel --------------------------------------------------- */
/* A menüpontok megjelenése megegyezik a fejléc-menü (.main-nav a) linkjeivel */
.menu-panel {
  position: absolute; right: 0; top: calc(100% + .4rem); min-width: 220px;
  display: flex; flex-direction: column; gap: .1rem; padding: .6rem;
}
.menu-panel-email { padding: .2rem .8rem .5rem; }
.menu-panel a {
  display: block; padding: .45rem .8rem; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 500; font-size: .95rem;
}
.menu-panel a:hover { background: var(--primary-soft); color: var(--primary-strong); text-decoration: none; }
.menu-panel a.active { background: var(--primary-soft); color: var(--primary-strong); }
.menu-divider { border: none; border-top: 1px solid var(--border); margin: .5rem 0; }
.menu-version, .auth-version {
  color: var(--text-muted); font-size: .74rem; text-align: center;
  padding: .45rem .8rem .1rem;
}
/* Fejléc-menü mobilon: a linkek a hamburger panelbe költöznek, a fejlécben
   csak a logó + cégváltó + ☰ marad, így nem foglalja el a képernyő tetejét */
.menu-mobile-nav { display: none; flex-direction: column; gap: .1rem; }
@media (max-width: 767px) {
  .main-nav { display: none; }
  .menu-mobile-nav { display: flex; }
  .menu-panel { max-height: calc(100vh - 5rem); overflow-y: auto; }
}
/* Beállítások almenü (lenyíló csoport) a hamburger panelben */
.menu-group-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .45rem .8rem; border: none; background: none;
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-family: var(--font); font-weight: 500; font-size: .95rem;
  cursor: pointer; text-align: left;
}
.menu-group-btn:hover { background: var(--primary-soft); color: var(--primary-strong); }
.menu-group { display: flex; flex-direction: column; gap: .1rem; }
.menu-group a { padding-left: 1.6rem; }

/* --- Sor-műveletek (⋯) és NAV-adat nézet ------------------------------------ */
.row-menu-btn {
  padding: .2rem .9rem; font-weight: 700; font-size: 1.15rem;
  min-width: 48px; line-height: 1;
}
.row-menu-upload {
  display: block; width: 100%; text-align: left; padding: .45rem .8rem;
  border: none; border-radius: var(--radius-sm); background: none;
  color: var(--text-muted); font-weight: 500; font-size: .95rem;
  line-height: 1.55; cursor: pointer; margin: 0;
  /* A gombos menüpontok (Másolás, törlés stb.) a szomszédos <a>/<label>
     elemekkel EGYFORMÁK legyenek: a <button> nem örökli a font-family-t (Inter
     kell), a reset-mezők (width/border/background) pedig a CLASS-ban vannak,
     NEM inline style-ban – különben az inline `background:none` erősebb a
     :hover szabálynál, és a hover-háttér fehér maradna. */
  font-family: var(--font);
}
.row-menu-upload:hover { background: var(--primary-soft); color: var(--primary-strong); }
.row-menu-danger { color: var(--danger); }
.row-menu-danger:hover { background: var(--danger-soft); color: var(--danger); }

.navd-summary { cursor: pointer; }
.navd { font-size: .9rem; max-width: 820px; }
.navd-section {
  margin: .6rem 0 .8rem; padding-left: .9rem;
  border-left: 2px solid var(--primary-soft);
}
.navd-title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--primary-strong); margin: .2rem 0 .3rem;
}
.navd-row { display: flex; gap: .75rem; padding: .13rem 0; }
.navd-key { color: var(--text-muted); width: 230px; flex: none; }
.navd-val { font-weight: 500; }
.navd-list-item {
  margin: .35rem 0 .6rem; padding: .5rem .7rem;
  background: var(--bg); border-radius: var(--radius-sm);
}
.navd-index { color: var(--primary-strong); font-weight: 700; font-size: .8rem; margin-bottom: .15rem; }
@media (max-width: 640px) {
  .navd-row { flex-direction: column; gap: 0; }
  .navd-key { width: auto; }
}

/* Fizetve jelölő: zöld kipipált / piros üres checkbox-stílusú négyzet */
.paid-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 5px;
  font-size: .85rem; font-weight: 700; vertical-align: middle;
}
.paid-check.paid { background: var(--success); color: #fff; border: 1px solid var(--success); }
.paid-check.unpaid { background: var(--danger-soft); border: 2px solid var(--danger); padding: 0; }
button.paid-check.unpaid { cursor: pointer; transition: box-shadow .12s ease; }
button.paid-check.unpaid:hover { box-shadow: 0 0 0 3px var(--danger-soft); }
.paid-inline-form { display: inline-flex; gap: .4rem; align-items: center; margin: 0 0 0 .5rem; }
.paid-inline-form input[type="date"] { width: auto; padding: .3rem .5rem; font-size: .88rem; }

.row-menu-divider { border-top: 1px solid var(--border); margin: .4rem 0; }
.row-menu-paid { padding: .35rem .8rem .5rem; display: flex; flex-direction: column; gap: .4rem; }
.row-menu-paid input[type="date"] { padding: .3rem .5rem; font-size: .88rem; margin-top: .15rem; }
.row-menu-paid .btn { width: 100%; }

/* --- Táblázatok --------------------------------------------------------- */
.table-wrap { overflow-x: auto; position: relative; }
/* Mobilon a jobb szél halvány elúsztatása jelzi, hogy van még tartalom
   (mask kell: a táblázat háttere egy rárakott gradienst kitakarna).
   Az osztályokat az app.js initTableScroll() kezeli. */
@media (max-width: 767px), (pointer: coarse) {
  .table-wrap.has-overflow:not(.at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, .12));
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, .12));
  }
}
/* Egyszeri, animált „húzd oldalra" hint az első görgethető táblázaton */
/* Vízszintesen középre igazítva (nem a jobb sarokban), hogy a jobb/bal alsó
   sarki lebegő „+" (FAB) ne takarja ki mobilon. */
.swipe-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 5; pointer-events: none; display: inline-flex; align-items: center;
  gap: .35rem; padding: .45rem .85rem; border-radius: 999px;
  background: rgba(38, 37, 31, .78); color: #fff;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  transition: opacity .4s ease;
  animation: swipe-nudge 1.1s ease-in-out 3;
}
.swipe-hint.fade { opacity: 0; }
@keyframes swipe-nudge {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -50%) translateX(-10px); }
}
table.data {
  width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--surface);
}
table.data th {
  text-align: left; color: var(--text-muted); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .6rem .55rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: .65rem .55rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Az utolsó (művelet) oszlop a tartalmára szűküljön – így nem marad nagy
   lyuk a számlakép jelvény és a ⋯ gomb között, és keskenyebb a táblázat */
table.data:not(.stack-mobile) th:last-child,
table.data:not(.stack-mobile) td:last-child { width: 1%; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: #fbfbfa; }
/* A table.data th szabálynál erősebb szelektor kell, különben a fejléc
   balra igazítva marad, és elcsúszik a jobbra igazított adatoktól */
table.data td.num, table.data th.num,
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A bruttó összeg alatt a pénznem külön sorban (kevésbé zsúfolt lista) */
.amount-cur { display: block; font-size: .78rem; font-weight: 500; color: var(--text-muted); }
/* A dátum-oszlopok (Kiállítva/Teljesítés/Fiz. határidő) sose törjenek sortöréssel */
.data td.date-cell, .data th.date-cell { white-space: nowrap; }
/* Lejárt, fizetetlen fizetési határidő kiemelése – csak a dátum + figyelmeztető
   ikon, egy sorban tartva (a nowrap miatt az ikon sem törik a következő sorba) */
.due-overdue {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  color: var(--danger); background: var(--danger-soft);
  padding: .08rem .4rem; border-radius: var(--radius-sm); font-weight: 600;
}
.due-overdue-icon { flex: none; }

/* Hiányzó könyvelési adat (fizetési mód / teljesítés dátuma) jelzése – közös ⚠
   ikon a listában, és mező-kiemelés a részletnél/szerkesztőnél. */
.warn-icon {
  display: inline-flex; align-items: center; vertical-align: middle;
  color: var(--danger); flex: none; margin-left: .25rem;
}
/* Szerkesztő: a hiányos mező inputja/selectje piros keret + halvány sárga. */
.field-warn input, .field-warn select {
  border: 1.5px solid var(--danger); background: var(--warning-soft);
}
/* Részlet: a hiányos érték („–") piros kerettel + halvány sárga háttérrel. */
.field-warn-value {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--danger); background: var(--warning-soft);
  border: 1.5px solid var(--danger); border-radius: var(--radius-sm);
  padding: .05rem .45rem; font-weight: 600;
}

/* --- Kimutatás-táblázatok mobilon: soronként egy kártya ------------------ */
/* A td-k data-label attribútuma adja a bal oldali címkét (a thead elrejtve). */
@media (max-width: 640px) {
  table.data.stack-mobile thead { display: none; }
  table.data.stack-mobile, table.data.stack-mobile tbody,
  table.data.stack-mobile tr, table.data.stack-mobile td { display: block; }
  table.data.stack-mobile { background: none; }
  table.data.stack-mobile tr {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: .3rem .85rem .45rem; margin-bottom: .75rem;
  }
  table.data.stack-mobile tr:hover td { background: none; }
  table.data.stack-mobile td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: .32rem 0; border-bottom: none; text-align: right;
  }
  table.data.stack-mobile td::before {
    content: attr(data-label); flex: none;
    color: var(--text-muted); font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; text-align: left;
  }
  table.data.stack-mobile td.stack-head {
    display: block; text-align: left; font-size: 1.02rem;
    border-bottom: 1px solid var(--border);
    padding: .45rem 0 .4rem; margin-bottom: .2rem;
  }
}

/* --- Oszlop-magyarázat (i) buborék a táblázat-fejlécekben ---------------- */
.info-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; margin-left: .2rem; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
  font-size: .68rem; font-weight: 700; font-style: italic; line-height: 1;
  cursor: help; vertical-align: text-bottom;
}
.info-tip:hover, .info-tip:focus-visible, .info-tip.open {
  color: var(--text); border-color: var(--text-muted);
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); right: -6px; z-index: 40;
  width: max-content; max-width: 240px;
  background: var(--text); color: var(--bg);
  font-size: .78rem; font-weight: 400; font-style: normal; line-height: 1.45;
  text-transform: none; letter-spacing: normal; white-space: normal; text-align: left;
  padding: .5rem .65rem; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease;
}
.info-tip:hover::after, .info-tip:focus-visible::after, .info-tip.open::after {
  opacity: 1; visibility: visible;
}
/* Táblázaton belüli (i): a CSS ::after buborékot ELHAGYJUK – az overflow-os
   .table-wrap levágná (bal fél) és fantom függőleges scrollbart adna. Helyette
   az app.js .has-tip fix (position:fixed) buborékot mutat. */
.info-tip.has-tip::after { content: none; }
/* Mobilon az abszolút buborék a görgethető táblázatból kilógna/levágódna –
   helyette a képernyő aljára rögzített sáv (a position:fixed-et az
   overflow-os ős nem vágja le; ugyanez az elv, mint a ⋯ sor-menünél). */
@media (max-width: 767px) {
  .info-tip::after {
    position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px;
    width: auto; max-width: none; z-index: 90;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  }
  /* Ahol van lebegő + gomb (FAB), a buborékot a gomb fölé emeljük, hogy ne
     takarja ki (a FAB 56px magas, alul 20px). :has → modern böngésző; ahol
     nincs támogatás, marad a régi alsó pozíció (a FAB legfeljebb rátakar). */
  body:has(.fab) .info-tip::after {
    bottom: 88px; z-index: 95;
  }
}

/* Általános, szép hover-tooltip gomboknak (a natív title helyett). A buborékot
   az app.js teszi a body végére position:fixed-del – táblázaton BELÜLI
   ::after buborék a scroll-konténer görgethető területét növelné (fantom
   scrollbar) és a következő sor kitakarná. Csak egeres eszközön él. */
.tip-bubble {
  position: fixed; z-index: 120; max-width: 240px;
  background: var(--text); color: var(--bg);
  font-size: .78rem; font-weight: 400; line-height: 1.45; text-align: left;
  padding: .5rem .65rem; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  pointer-events: none;
}

/* --- Címkék ------------------------------------------------------------ */
.badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.badge-in { background: var(--info-soft); color: #2b5aa7; }
.badge-out { background: var(--primary-soft); color: var(--primary-strong); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-muted { background: var(--bg); color: var(--text-muted); }
/* Piszkozat (draft) jelvény: lila-halvány, hogy elüssön a többitől (a piszkozat
   nem számít statisztikába/könyvelésbe, de a listában látszik). */
.badge-draft { background: var(--primary-soft); color: var(--primary-strong); border: 1px dashed var(--primary); }
/* Ismétlődés-jelző ikon a listákban: az ismétlődő (parent) = ZÖLD, az
   automatikusan generált = LILA. A buborékot a JS has-tip adja (fix pozíció, a
   görgethető táblázat nem vágja le). A detail-jelvények ugyanezt a színt kapják
   (.badge-recurring / .badge-recurring-child). */
.rec-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.2rem; height: 1.2rem; border-radius: 999px; margin-left: .3rem;
  font-size: .9rem; font-weight: 700; line-height: 1;
  vertical-align: text-bottom; cursor: help;
}
.rec-parent, .badge-recurring { background: var(--success-soft); color: var(--success); }
.rec-child, .badge-recurring-child { background: var(--primary-soft); color: var(--primary-strong); }
/* Készpénzes fizetés jelző a bizonylatszám mellett (kis bankjegy-ikon). */
.cash-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.2rem; height: 1.2rem; margin-left: .3rem;
  vertical-align: text-bottom; cursor: help; color: var(--success);
}
/* Az ismétlődés-eredetiből generált számlák listája a részletoldalon. */
.rec-children { margin: .4rem 0 0; padding-left: 1.1rem; }
.rec-children li { margin: .15rem 0; }
/* Rendezhető oszlop-fejléc: a link a fejléc színét örökli, kattintható. */
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
.th-sort:hover { color: var(--primary); }
/* Piszkozat sor: dőlt betű. Könyvelésből kizárt sor: minden elem 35%-ban látszik
   (érződjön, hogy „nem játszik"), KIVÉVE a „Kizárva" (bordó) jelvényt, ami teljes
   erősségű marad. FONTOS: a felugró (⋯/fizetve/számlakép) popupokat NEM tompítjuk
   – olvashatóak maradnak. Mivel az opacity szülőn nem enged „erősebb" gyereket, a
   popupot tartalmazó cellákban (att/paid/menu) csak a KIVÁLTÓ elemet tompítjuk,
   nem a cellát; a többi (display) cellát egészben. */
.data tr.row-draft td { font-style: italic; }
/* A piszkozat-sor dőlt stílusa NE öröklődjön a felugró menükbe/popupokba
   (⋯ művelet-, számlakép-, fizetve-popup mind .menu-panel). */
.data tr.row-draft td .menu-panel { font-style: normal; }
/* Sor-háttér jelzések: „nincs teendő" (feltöltött/mellőzött számlakép + fizetve,
   vagy kizárt) → enyhe zöld; piszkozat → enyhe amber. A háttér a SORON (tr) van,
   nem a cellákon, hogy a kizárt sor cella-tompítása (opacity, lásd lent) mellett
   is teljes erővel átüssön a zöld. */
/* A háttér-árnyalatok szándékosan HALVÁNYAK (a --success-soft/--warning-soft
   tokenek ~50%-ban fehér felé keverve), hogy csak finoman jelezzenek – a szöveg
   és minden más változatlan. */
.data tr.row-done { background: #f1faf7; }
.data tr.row-draft { background: #fef9f0; }
/* Hover-kor a színezett sorok NE villanjanak fehérre (a `tr:hover td` felülírná a
   tr-hátteret) – tartsák a saját (halvány) árnyalatukat. */
.data tr.row-done:hover td { background: #f1faf7; }
.data tr.row-draft:hover td { background: #fef9f0; }
/* Összesítő (totál) sor a kimutatás-táblák alján. */
.data tfoot .total-row td { border-top: 2px solid var(--border); font-weight: 600; }
.data tfoot .total-row:hover td { background: transparent; }

/* Deduplikáció – a megmaradó (keeper) számla kulcsadatai összehasonlításhoz */
.merge-keeper { margin: .25rem 0 1rem; padding: .75rem 1rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.merge-keeper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem .9rem; margin: .4rem 0 0; }
.merge-keeper-grid dt { font-size: .72rem; color: var(--text-muted); }
.merge-keeper-grid dd { margin: 0; font-weight: 600; color: var(--text); }
.data tr.row-excluded td:not(.att-cell):not(.paid-cell):not(.menu-cell) { opacity: .35; }
.data tr.row-excluded td.att-cell .badge:not(.badge-excluded),
.data tr.row-excluded td.paid-cell .paid-check,
.data tr.row-excluded td.menu-cell .row-menu-btn { opacity: .35; }
/* „Kizárva" jelvény: bordó, hogy a tompított soron is kiemelkedjen. */
.badge-excluded { background: #f6e0e0; color: #8b1a1a; }
/* Hiányt jelző jelvény (pl. „nincs" számlakép): borostyán, hogy figyelmet
   kérjen – a szürke azt sugallná, hogy nem kell vele foglalkozni. */
.badge-missing { background: var(--warning-soft); color: var(--warning); }

/* Kattintható számlakép-jelvény (van → megnéző/letöltő felugró,
   nincs → feltöltő) a listákban */
.att-badge-wrap { display: inline-block; }
.att-badge-wrap form { margin: 0; }
button.badge-btn {
  border: 0; cursor: pointer; font-family: var(--font);
  transition: box-shadow .12s ease;
}
button.badge-btn:hover { box-shadow: 0 0 0 3px var(--success-soft); }
.badge-action { cursor: pointer; border: 1px dashed var(--text-muted); transition: border-color .12s ease, color .12s ease, background .12s ease; }
.badge-missing.badge-action { border-color: var(--warning); }
button.badge-action { font-family: var(--font); }
.badge-action:hover { border-color: var(--primary); color: var(--primary-strong); background: var(--primary-soft); }
.att-row {
  display: flex; justify-content: center; align-items: baseline;
  gap: .6rem; padding: .35rem .8rem;
}
.att-num { color: var(--text-muted); font-size: .85rem; }
.att-links { display: flex; gap: .8rem; flex: none; }
/* A .menu-panel a blokk-stílusát itt vissza kell venni soron belülire */
.menu-panel .att-links a {
  display: inline; padding: .1rem .2rem; font-size: .88rem; font-weight: 600;
  color: var(--primary-strong);
}

/* --- Űrlapok ------------------------------------------------------------ */
form div { margin-bottom: .9rem; }
form div:last-child { margin-bottom: 0; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
/* A gombokkal közös magasság (--control-h), hogy az egy sorba kerülő
   gomb+mező párosok ne csússzanak el. A mezők NEM pill formájúak
   (radius-sm) – szövegbevitelhez az olvashatóbb. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="file"], select, textarea {
  width: 100%; min-height: var(--control-h);
  padding: .55rem .9rem; font-size: .95rem; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
textarea { min-height: unset; }
/* Fix (nem csak minimum) magasság a sorba rendezhető mezőknek, hogy a
   select se lógjon ki a szomszédai közül (a fájlmező és a textarea kivétel) */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], select {
  height: var(--control-h);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Fájlválasztó: a natív gomb helyett a design-rendszerhez illő megjelenés.
   A belső gombbal együtt is a közös kontroll-magasságot (44px) tartja. */
input[type="file"] {
  padding: .25rem .4rem; border-style: dashed; background: var(--bg);
  color: var(--text-muted); font-size: .88rem; cursor: pointer;
}
input[type="file"]:hover { border-color: var(--primary); }
input[type="file"]::file-selector-button {
  border: none; border-radius: 999px;
  padding: .3rem .95rem; margin-right: .8rem;
  background: var(--primary-soft); color: var(--primary-strong);
  font-family: var(--font); font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
input[type="file"]::file-selector-button:hover {
  background: var(--primary); color: #fff;
}
input[type="checkbox"] {
  width: 1.35rem; height: 1.35rem; vertical-align: middle;
  accent-color: var(--primary);
}
input[type="radio"] {
  width: 1.35rem; height: 1.35rem; vertical-align: middle; flex: none;
  accent-color: var(--primary);
}
.helptext { display: block; color: var(--text-muted); font-size: .82rem; margin-top: .25rem; }
.errorlist { color: var(--danger); font-size: .85rem; margin: .25rem 0 0; padding-left: 1rem; }
/* Checkboxos űrlapsor (pl. adatvédelmi elfogadás a regisztrációnál): a Django
   as_div a címkét a mező ELÉ teszi – itt megfordítjuk, a pipa kerül előre,
   egy sorba a szöveggel. */
form > div:has(> input[type="checkbox"]) {
  display: flex; align-items: flex-start; gap: .55rem; flex-wrap: wrap;
}
form > div:has(> input[type="checkbox"]) > input[type="checkbox"] {
  order: -1; margin-top: .15rem; flex: none;
}
form > div:has(> input[type="checkbox"]) > label { margin-bottom: 0; font-weight: 400; }
form > div:has(> input[type="checkbox"]) > .errorlist { flex-basis: 100%; margin: 0; }
form > div:has(> input[type="checkbox"]) > .helptext { flex-basis: 100%; margin: 0; }
.form-inline { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.form-inline div { margin-bottom: 0; }
/* Feltöltő űrlap-mezők rácsban: asztali nézetben egymás mellett, mobilon
   egymás alatt (pl. Dokumentumok: időszak + kategória + fájl) */
.form-grid { display: grid; gap: .9rem; margin-bottom: .9rem; }
.form-grid > div { margin-bottom: 0; }
@media (min-width: 768px) {
  /* Időszak + kategória együtt a blokk fele, a fájlválasztó a másik fele */
  .form-grid { grid-template-columns: 1fr 1fr 2fr; align-items: start; }
  .form-grid > .span-all { grid-column: 1 / -1; }
}
/* Ismétlődés (gyakoriság + a hónap napja): mobilon egymás alatt, asztalin egymás
   mellett. */
.recurrence-fields { display: grid; gap: .9rem; }
.recurrence-fields > div { margin-bottom: 0; }
@media (min-width: 640px) {
  .recurrence-fields { grid-template-columns: 1fr 1fr; align-items: start; }
}
/* Időszak-léptető (legördülő + előző/következő nyilak, pl. havi csomag) */
.period-nav { display: flex; gap: .4rem; align-items: center; }
.period-nav select { flex: 1 1 auto; min-width: 0; width: auto; }
@media (min-width: 641px) {
  .period-nav select { min-width: 270px; }
}
/* Kerek (nem ovális) léptető nyíl-gombok, a mezőkkel azonos magasságban */
.btn-nav {
  width: var(--control-h); height: var(--control-h); min-height: var(--control-h);
  padding: 0; font-size: 1.15rem; flex: none;
}
/* Asztali nézetben az e-mail mező (pl. meghívó) legyen kényelmesen széles */
@media (min-width: 641px) {
  .form-inline input[type="email"] { min-width: 300px; }
}
/* Mobilon az inline űrlap (pl. meghívó, kivonat-feltöltés) mezői egymás alá,
   teljes szélességben kerülnek */
@media (max-width: 640px) {
  .form-inline { flex-direction: column; align-items: stretch; }
  .form-inline > div { min-width: 0; max-width: none; width: 100%; }
  .form-inline .btn { width: 100%; }
}

/* --- Üzenetek ------------------------------------------------------------ */
.messages { max-width: 1200px; margin: 1rem auto 0; padding: 0 1.25rem; }
.message {
  padding: .7rem 1rem; border-radius: var(--radius-sm); margin-bottom: .5rem;
  font-size: .93rem; border: 1px solid;
}
.message.success { background: var(--success-soft); color: var(--success); border-color: #bfe6d7; }
.message.error { background: var(--danger-soft); color: var(--danger); border-color: #f2c9cc; }
.message.info, .message.warning { background: var(--info-soft); color: #2b5aa7; border-color: #cbdcf5; }

/* --- Szűrősáv, lapozó ------------------------------------------------------ */
.filterbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filterbar > div { margin: 0; min-width: 140px; flex: 1; max-width: 220px; }
/* A kereső mező kitölti a maradék helyet, így a „Szűrő alaphelyzet" gomb a sor
   (és a lista-blokk) jobb széléig ér. */
.filterbar > div.filter-search { max-width: none; flex: 1 1 auto; }
.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); flex-wrap: nowrap; }
.tabs > a {
  padding: .55rem 1rem; color: var(--text-muted); font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs > a.active { color: var(--primary-strong); border-bottom-color: var(--primary); }
.tabs > a:hover { text-decoration: none; color: var(--primary-strong); }
/* Mobil: a Törölt + Deduplikáltak tab a „Egyéb ▾" lenyílóba kerül (a tab-sáv
   ne csorduljon túl → ne lötyögjön oldalra a lap, ne csússzon ki a lebegő + gomb). */
.tabs-more { display: none; position: relative; }
.tabs-more-btn {
  padding: .55rem 1rem; color: var(--text-muted); font-weight: 600;
  border: none; background: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; font-family: var(--font); font-size: 1rem;
  cursor: pointer; white-space: nowrap;
}
.tabs-more-btn.active { color: var(--primary-strong); border-bottom-color: var(--primary); }
.tabs-more-menu {
  /* Jobb-szélhez igazítva (a gomb a tab-sor jobb vége), balra nyílik – így a
     popup sosem lóg túl a képernyő jobb szélén (nem lötyög oldalra a lap). */
  position: absolute; top: calc(100% + 4px); right: 0; left: auto; z-index: 60;
  min-width: 170px; max-width: calc(100vw - 24px);
  padding: .3rem; display: flex; flex-direction: column; gap: .15rem;
}
.tabs-more-menu a { padding: .55rem .8rem; border-radius: var(--radius-sm); color: var(--text); font-weight: 600; }
.tabs-more-menu a:hover { background: var(--primary-soft); color: var(--primary-strong); text-decoration: none; }
.tabs-more-menu a.active { background: var(--primary-soft); color: var(--primary-strong); }
@media (max-width: 767px) {
  .tab-secondary { display: none; }
  .tabs-more { display: inline-block; }
  .tabs > a, .tabs-more-btn { padding: .55rem .7rem; }
}
.pagination { display: flex; gap: .35rem; margin-top: 1rem; align-items: center; flex-wrap: wrap; row-gap: .4rem; }
.pagination a, .pagination span {
  padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font-size: .88rem;
  white-space: nowrap;
}
.pagination a:hover { border-color: var(--primary); text-decoration: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }
/* A kísérő feliratok (Összesen / Oldalanként) NEM pillek – csak a bennük
   lévő méret-választó chipek */
.pagination span.muted {
  border: none; background: none; padding-left: 0; padding-right: 0;
  display: inline-flex; gap: .3rem; align-items: center; flex-wrap: wrap;
}

/* --- Üres állapot (Bill) -------------------------------------------------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state svg { margin-bottom: 1rem; opacity: .9; }
.empty-state p { max-width: 420px; margin: 0 auto .75rem; }

/* --- Auth oldalak ----------------------------------------------------------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card-wide { max-width: 470px; }
.auth-card .brand { justify-content: center; margin-bottom: 1.25rem; font-size: 1.3rem; }
.auth-footer { text-align: center; margin-top: 1rem; color: var(--text-muted); font-size: .9rem; }

/* --- Mobil számlakép feltöltés (választó lap, kártyák) ----------------------- */
/* Érintőképernyőn (telefon, tablet) a hármas választó lap látszik, egérrel a
   hagyományos fájlválasztó – a pointer media query dönt, nem a képernyőméret. */
@media (pointer: coarse) {
  .pointer-only { display: none !important; }
}
@media (pointer: fine), (pointer: none) {
  .touch-only { display: none !important; }
}

.sheet-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(38, 37, 31, .45);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  max-width: 480px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -8px 30px rgba(38, 37, 31, .18);
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .6rem;
  /* Ha a tartalom magasabb lenne a látható viewportnál (pl. Android Chrome
     címsávval), a lap belül görgethető és a képernyő aljához rögzül – nem lóg ki. */
  max-height: 85vh; overflow-y: auto;
}
.sheet div { margin-bottom: 0; }
.sheet-title { font-weight: 700; text-align: center; margin: 0 0 .2rem; }
.sheet-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 52px; padding: .6rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 1.05rem; font-weight: 600; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.sheet-btn { text-decoration: none; }
.sheet-btn:hover, .sheet-btn:active { background: var(--primary-soft); border-color: var(--primary); text-decoration: none; }
.sheet-btn:disabled { opacity: .6; cursor: default; }
.sheet-cancel { background: var(--surface); color: var(--text-muted); border-color: transparent; }
.sheet-busy {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .4rem 0; color: var(--text-muted); font-size: .95rem;
}
/* Vezérlőpult „Egyéni időszak" popup belső elrendezése (dátum tól–ig, középen) */
.period-sheet { gap: .8rem; }
.period-sheet-block { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.period-sheet .period-range { justify-content: center; }

/* Fizetve-popup: asztalon pozicionált lenyíló (rowMenu), mobil nézetben
   (max-width 767px VAGY érintő – ugyanaz a feltétel, mint a .table-wrap mask-je)
   a body végére teleportált alsó lap. A váltás képernyő-méret alapú, nem pointer. */
.paid-mobile { display: none; }
.paid-desktop { display: inline-block; }
@media (max-width: 767px), (pointer: coarse) {
  .paid-mobile { display: inline-block; }
  .paid-desktop { display: none; }
}

.btn-photo { min-height: 48px; font-size: 1rem; width: 100%; }
/* A gomb-feliratok emoji-ikonja arányos méretben */
.btn-icon { font-size: 1.35em; line-height: 1; }
/* Asztali nézetben a fotós gomb ne nyúljon kártya-szélesre */
@media (min-width: 768px) {
  .btn-photo { width: auto; }
}

/* Lebegő „Számla rögzítés" gomb – csak mobil nézetben, a user kezessége
   szerint a bal vagy a jobb alsó sarokban. A .hide-on-mobile ennek a párja:
   az asztali gombot rejti el mobilon (ott a lebegő gomb veszi át a szerepét). */
.fab {
  display: none;
  position: fixed; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 6px 20px rgba(109, 92, 230, .45);
}
.fab:hover { background: var(--grad-primary); filter: brightness(1.05); text-decoration: none; }
.fab-right { right: 18px; }
.fab-left { left: 18px; }
/* Asztali „+ Számla/Kiadás" gomb lenyíló választója (bejövő számla / kiadás). */
.new-entry { position: relative; }
.new-entry-menu { z-index: 60; }
.show-on-mobile { display: none; }
/* Kártya-fejléc cím + „összes" gombbal (pl. Legutóbbi számlák) */
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.card-head h2 { margin: 0; }
@media (max-width: 767px) {
  .fab { display: inline-flex; }
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: flex; }
}

/* Számla-szerkesztő: felső Mentés/Mégsem sáv (sok tétel esetén ne kelljen görgetni) */
.edit-actions-top { margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }

/* Kézi számla – tételek + végösszegek */
.section-title { font-size: 1.05rem; margin: 1.3rem 0 .6rem; }
.line-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .8rem; margin-bottom: .7rem; background: var(--bg);
}
.line-item > div { margin-bottom: .6rem; }
.line-item-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 0;
}
.line-item-grid > div { margin-bottom: 0; }
@media (max-width: 640px) {
  .line-item-grid { grid-template-columns: 1fr 1fr; }
}
.line-item-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: .6rem; margin-bottom: 0; margin-top: .3rem;
}
.totals {
  margin-top: 1.2rem; padding: 1rem;
  background: var(--warning-soft); border: 1px solid #f0e2c4;
  border-radius: var(--radius-sm);
}
.totals label { font-weight: 700; }
/* A (nem szerkeszthető) bruttó végösszeg olvasható, ezres-szeparátoros kijelzője. */
.total-value { font-size: 1.25rem; font-weight: 800; padding: .35rem 0; }

/* Mobil: az input[type=date] iOS-en a belső szélessége miatt kilóghat a
   képből – a natív megjelenés kikapcsolása + min-width:0 a konténerbe zárja. */
@media (max-width: 767px) {
  input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }
}

/* Dokumentum-kategóriák kezelő – táblázat helyett rugalmas sorok (mobilon sem
   lóg ki). */
.cat-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
}
.cat-row:last-child { border-bottom: none; }
.cat-rename {
  display: flex; gap: .4rem; align-items: center; margin: 0;
  flex: 1 1 240px; min-width: 0;
}
.cat-rename input[type="text"] { max-width: 260px; }
.cat-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Könyvelési checklist – sorok a Könyvelés oldalon és a kezelőben */
.check-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.check-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; flex-wrap: wrap;
  padding: .45rem 0; border-bottom: 1px solid var(--border);
}
.check-row:last-child { border-bottom: none; }
.check-status { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.check-toggle { flex: 1 1 240px; min-width: 0; margin: 0; }
.check-kind { display: block; }

/* E-mail értesítések – cégenkénti blokk + kapcsoló-sorok */
.notif-company { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.notif-company:last-of-type { border-bottom: none; }
.notif-toggle {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 400; margin-bottom: .35rem;
}

/* A ⋯ menüben a feltöltő gomb ugyanúgy nézzen ki, mint a label-es változat */
button.row-menu-upload-btn {
  width: 100%; text-align: left; border: none; background: none;
  font-family: var(--font); font-size: .95rem;
}

.invoice-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 640px) { .invoice-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .invoice-cards { grid-template-columns: repeat(3, 1fr); } }
.invoice-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem; display: flex; flex-direction: column; gap: .55rem;
}
.invoice-card-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.invoice-card-number { font-weight: 700; }
.invoice-card-meta { display: flex; flex-direction: column; gap: .15rem; font-size: .92rem; }
.invoice-card-meta .partner { font-weight: 500; }
.invoice-card-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.invoice-card-action { margin-top: auto; text-align: center; }

/* --- Vezérlőpult szekciók ----------------------------------------------------- */
/* Flex oszlop, hogy mobilon a hiányzó számlaképek blokk CSS orderrel előre kerülhessen */
.dash-sections { display: flex; flex-direction: column; gap: 1rem; }
.dash-sections > .card { margin-top: 0; }
.dash-missing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dash-missing .invoice-cards { margin-bottom: 0; }
/* A vezérlőpult hiányzó-blokkja is legfeljebb 3 kártya/sor (mint a hiányzó-
   számlaképek oldal) – 4-5 kártya asztali nézetben kilógna jobbra. */
@media (max-width: 640px) {
  .dash-sections .dash-missing { order: -1; }
}

.spinner {
  width: 1rem; height: 1rem; border-radius: 50%; flex: none;
  border: 2px solid var(--primary-soft); border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Egyéb ------------------------------------------------------------------- */
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.danger-zone { border-color: #f2c9cc; }
.danger-zone h2 { color: var(--danger); }
/* Sárga figyelmeztető/megnyugtató doboz ikonnal (pl. NAV csak-olvasás felhívás) */
.notice-readonly {
  display: flex; gap: .8rem; align-items: flex-start;
  border-color: #f0d9a8; background: var(--warning-soft);
}
.notice-readonly-icon { font-size: 1.5rem; line-height: 1.3; flex: none; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1rem; }
/* A sorszám abszolút pozíciós, a szöveg normál sorfolytonos marad – flexszel
   a sor minden inline eleme külön hasábba esne szét */
.steps li { counter-increment: step; position: relative; padding: .55rem 0 .55rem 2.5rem; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: .5rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-strong);
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
dl.kv dt { color: var(--text-muted); font-size: .9rem; }
dl.kv dd { margin: 0; font-weight: 500; }
@media (max-width: 640px) {
  dl.kv { grid-template-columns: 1fr; gap: 0 0; }
  dl.kv dd { margin-bottom: .5rem; }
}

/* Havi csomag időszak-léptető mobilon: a kör-nyilak (34px) elférnek a legördülő
   mellett, ezért [‹] [legördülő] [›] EGY sorban marad (nem törnek külön sorba). */
@media (max-width: 640px) {
  .period-nav { flex-wrap: nowrap; }
  .period-nav select { order: 0; flex: 1 1 auto; min-width: 0; }
}

/* --- Érintőképernyős méretek -------------------------------------------------- */
/* A fájl legvégén kell lennie, hogy a fenti alap-szabályokat (pl. a checkbox
   width: auto értékét) biztosan felülírja */
@media (pointer: coarse) {
  .row-menu-btn { min-width: 44px; min-height: 40px; font-size: 1.3rem; }
  .paid-check { width: 1.6rem; height: 1.6rem; font-size: 1rem; }
  input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
  input[type="radio"] { width: 1.5rem; height: 1.5rem; }
  .row-menu-paid .btn { min-height: 44px; }
  .row-menu-paid input[type="date"] { min-height: 42px; }
}

/* Alpine: x-cloak elemek elrejtese, amig az Alpine be nem toltodik */
[x-cloak]{display:none!important}

/* --- Előfizetés: állapot-sáv (header alatt) + csomag-kártyák --------------- */
.billing-bar {
  padding: .6rem 1rem;
  text-align: center;
  font-weight: 500;
  font-size: .95rem;
}
.billing-bar a { margin-left: .5rem; font-weight: 600; white-space: nowrap; }
.billing-bar-danger { background: var(--danger-soft); color: var(--danger); }
.billing-bar-danger a { color: var(--danger); }
.billing-bar-warning { background: var(--warning-soft); color: var(--warning); }
.billing-bar-warning a { color: var(--warning); }
.billing-bar-info { background: var(--info-soft); color: var(--primary-strong); }
.billing-bar-info a { color: var(--primary-strong); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}
.tier-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  text-align: center;
}
.tier-card.tier-current { border-color: var(--primary); background: var(--primary-soft); }
.tier-limit { font-weight: 600; }
.tier-price { font-size: 1.25rem; font-weight: 700; margin: .35rem 0 .75rem; }