/* ==========================================================================
   Cashflow Manager – alkalmazásspecifikus kiegészítések az alap design system fölött
   ========================================================================== */

/* Összegek */
.osszeg { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.osszeg--be { color: var(--ok-600); }
.osszeg--ki { color: var(--danger-600); }
:root[data-theme="dark"] .osszeg--be { color: var(--ok-ink); }
:root[data-theme="dark"] .osszeg--ki { color: var(--danger-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .osszeg--be { color: var(--ok-ink); } :root:not([data-theme="light"]) .osszeg--ki { color: var(--danger-ink); } }
.negativ { color: var(--danger-600); }

/* Topbar gyorsgombok */
.topbar__gyors { display: flex; gap: 8px; }

/* Kategória színpötty */
.pont { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--c, var(--muted-2)); }

/* Tétellista (táblázat helyett mobilbarát sorok) */
.tetel-lista { display: flex; flex-direction: column; }
.tetel { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; transition: background .12s; }
.tetel:first-child { border-top: 0; }
a.tetel:hover { background: var(--hover-sor); }
.tetel__fo { flex: 1; min-width: 0; }
.tetel__fo b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tetel__fo small { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tetel__fo small .ikon { vertical-align: -2px; }
.tetel__jobb { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tetel__ikon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
    background: color-mix(in srgb, var(--acc, var(--primary)) 13%, transparent); color: var(--acc, var(--primary)); }
.tetel form { margin: 0; }

/* Ismétlődés beállításai az űrlapon */
.ismetlodes { border: 1px dashed var(--border-2); border-radius: var(--radius-s); padding: 16px; background: var(--surface-2); }
.ismetlodes[hidden] { display: none; }

/* Típusválasztó (kiadás / bevétel) */
.tipus-valto { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--track); border-radius: 12px; }
.tipus-valto label { cursor: pointer; }
.tipus-valto input { position: absolute; opacity: 0; pointer-events: none; }
.tipus-valto span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); transition: all .15s; }
.tipus-valto input:checked + span { background: var(--surface); box-shadow: var(--shadow-xs); color: var(--ink); }
.tipus-valto input[value="expense"]:checked + span { color: var(--danger-600); }
.tipus-valto input[value="income"]:checked + span { color: var(--ok-600); }
.input--nagy { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Előfordulások */
.elofordulas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); }
.elofordulas__datum { flex: 1 1 140px; }
.elofordulas__datum b { display: block; }
.elofordulas__datum small { font-size: 12px; color: var(--muted); }
.elofordulas form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.elofordulas .input { width: auto; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.elofordulas .input[type=number] { width: 120px; }

/* Mi lenne ha? */
.mlh-tetel { border: 1px solid var(--border); border-radius: var(--radius-s); padding: 12px; display: grid; gap: 8px; background: var(--surface-2); }
.mlh-tetel__sor { display: grid; gap: 8px; grid-template-columns: 110px minmax(0, 1fr) auto; }
.mlh-tetel__sor--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mlh-tetel__sor--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mlh-tetel .input, .mlh-tetel .select { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.mlh-sablonok { display: flex; flex-wrap: wrap; gap: 6px; }
.itelet { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-s); font-size: 13.5px; border: 1px solid; }
.itelet--ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); }
.itelet--hiba { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-ink); }
.itelet[hidden] { display: none; }

/* Számla előnézet */
.szamla-elonezet { width: 100%; height: 75vh; border: 0; display: block; background: var(--surface-2); }
.szamla-kep { width: 100%; display: block; }
.forras-ikon--gmail { --acc: #d9434a; }
.forras-ikon--drive { --acc: #e3b23c; }
.forras-ikon--upload { --acc: var(--muted); }

/* Lépések (Google beállítás) */
.lepes-lista { margin: 0 0 4px; padding-left: 20px; font-size: 13px; color: var(--muted); display: grid; gap: 6px; }
.lepes-lista code, .kod { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--track); padding: 1px 6px; border-radius: 6px; color: var(--ink-2); user-select: all; word-break: break-all; }
.beallitas-blokk { border: 1px solid var(--border); border-radius: var(--radius-s); padding: 16px; display: grid; gap: 14px; }
.beallitas-blokk > .checkbox-sor { font-weight: 600; }
details.beallitas-blokk > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.kategoria-sor { display: flex; align-items: center; gap: 8px; }
.kategoria-sor input[type=color] { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; flex-shrink: 0; }
.kategoria-sor .input { padding-top: 7px; padding-bottom: 7px; }
.kategoria-sor form { margin: 0; }
.gomb-sor { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Mobil / PWA alsó navigáció */
.also-nav { display: none; }
@media (max-width: 980px) {
    .also-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -12px rgba(6, 35, 48, .18); }
    .also-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 7px; font-size: 10.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
    .also-nav a.is-aktiv { color: var(--primary); }
    .also-nav a i { position: absolute; top: 4px; left: 54%; min-width: 16px; height: 16px; border-radius: 99px; background: var(--narancs); color: #fff; font-size: 10px; font-style: normal; display: grid; place-items: center; padding: 0 4px; }
    .also-nav__plusz { align-self: center; justify-self: center; width: 52px; height: 52px; margin-top: -22px; padding: 0 !important; border-radius: 50%; background: var(--grad); color: #fff !important; display: grid !important; place-items: center; box-shadow: 0 10px 24px -6px rgba(10, 133, 194, .55); }
    .topbar__gyors { display: none; }
}
@media (max-width: 640px) {
    .tetel { padding: 12px 14px; }
    .mlh-tetel__sor--3 { grid-template-columns: 1fr 1fr; }
    .mlh-tetel__sor--3 > :last-child { grid-column: 1 / -1; }
}

[hidden] { display: none !important; }

@media (max-width: 640px) {
    .card--tabla > .card__fej { flex-direction: column; align-items: stretch; gap: 10px; }
    .card--tabla > .card__fej .szegmens { flex-wrap: nowrap; overflow-x: auto; align-self: flex-start; max-width: 100%; }
    .card--tabla > .card__fej .szegmens a { white-space: nowrap; }
    .szuro-sor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    .szuro-sor input[type=search], .szuro-sor .btn { grid-column: 1 / -1; }
    .szuro-sor .input, .szuro-sor .select { width: 100%; min-width: 0; }
    .tetel__fo small { display: block; }
    .tetel__fo small > span { display: block; }
}

/* Márkanév egy sorban */
.logo-szoveg b { white-space: nowrap; font-size: 17.5px; }
.auth__logo .logo-szoveg b { font-size: 20px; }