/* 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);
}
.period-btn.active {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary-strong);
}

/* --- 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; }
.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; } }

.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-en belül a gap adja a térközt, és minden kártya egyforma magasra nyúlik */
.grid > .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%; }

/* --- 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; padding: .45rem .8rem; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 500; font-size: .95rem; cursor: pointer;
  margin: 0;
}
.row-menu-upload:hover { background: var(--primary-soft); color: var(--primary-strong); }

.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 */
.swipe-hint {
  position: absolute; top: 50%; right: 10px; transform: translateY(-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: translateY(-50%); }
  50% { transform: translateY(-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; }

/* --- 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;
}
/* 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);
  }
}

/* Á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); }
/* 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; }
}
/* 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; }
.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tabs a {
  padding: .55rem 1rem; color: var(--text-muted); font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a.active { color: var(--primary-strong); border-bottom-color: var(--primary); }
.tabs a:hover { text-decoration: none; color: var(--primary-strong); }
.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;
}
.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:hover, .sheet-btn:active { background: var(--primary-soft); border-color: var(--primary); }
.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;
}

.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; }
.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; }
}

/* 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; }

/* 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ó-blokkjában szélesebb kijelzőn 4-5 kártya fér egy sorba */
@media (min-width: 1000px) {
  .dash-missing .invoice-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1150px) {
  .dash-missing .invoice-cards { grid-template-columns: repeat(5, 1fr); }
}
@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: felül a két nyíl fél-fél szélesen,
   alatta a legördülő teljes szélességben (egy sorban nem férne el). A
   .form-inline .btn width:100% szabályt is itt írjuk felül. */
@media (max-width: 640px) {
  .period-nav { flex-wrap: wrap; }
  .form-inline .period-nav .btn-nav { flex: 1 1 0; width: auto; }
  .period-nav select { order: 3; flex: 1 1 100%; }
}

/* --- É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}