/* =============================================================================
   Eclipse CFO - komponens-minták (F-26 / D-30)
   -----------------------------------------------------------------------------
   Kartya, tablazat, urlap-mezo, gomb, jelveny, ures-allapot, figyelmeztetes-sav:
   EGY helyen definialva, minden oldal ugyanazt hasznalja. Ertek csak tokenbol.
   ========================================================================== */

/* ------------------------------- kartya --------------------------------- */
/* Minden blokk (muszerfal-mutato, havi osszesito, tablazat, diagram,
   figyelmeztetesek) ugyanez a kartya, ugyanazzal a belso szerkezettel:
   card > card-head (card-title) + card-body + card-foot. */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr));
    gap: var(--space-4);
    align-items: stretch;
}

/* teljes szelessegu kartya ugyanabban a racsban (tablazat, diagram) */
.card-wide {
    grid-column: 1 / -1;
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    background: var(--color-surface);
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
}

.card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.card-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.card-badge {
    font-size: var(--text-xs);
    color: var(--color-ink-subtle);
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    flex: 1 1 auto;
}

/* a kartya fo szama */
.card-metric {
    font-size: var(--text-metric);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    border-top: var(--border-thin) solid var(--color-line);
    padding-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

/* a kartya EGESZE link (F-25/V-15): valodi <a>, tehat billentyuzettel is elerheto */
a.card-link {
    color: inherit;
    text-decoration: none;
}

a.card-link:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

a.card-link:hover .card-foot {
    color: var(--color-accent-strong);
}

a.card-link:focus-visible {
    outline: var(--focus-width) solid var(--color-accent-strong);
    outline-offset: var(--focus-offset);
}

/* osszevetes-tabla a kartyaban (cimke + szam) */
table.totals {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

table.totals td {
    padding: var(--space-1) 0;
    color: var(--color-ink-muted);
}

table.totals td.num {
    padding-left: var(--space-4);
    color: var(--color-ink);
}

table.totals tr.fx td {
    color: var(--color-ink-subtle);
}

table.totals .fx-huf {
    margin-left: var(--space-2);
    color: var(--color-ink-subtle);
}

table.totals .fx-warn {
    margin-left: var(--space-2);
    color: var(--color-warning);
    font-size: var(--text-xs);
}

table.totals tr.fx-sum td {
    border-top: var(--border-thin) solid var(--color-line);
    padding-top: var(--space-2);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
}

/* ------------------------------ tablazat -------------------------------- */
/* A tablazat MINDIG sajat vizszintes gorgetesu dobozban all, hogy a szeles
   listak (szamla-lista) se lokjek meg az oldalt keskeny ablakban. */

.table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

table.grid {
    border-collapse: collapse;
    width: 100%;
    background: var(--color-surface);
    font-size: var(--text-sm);
}

table.grid th,
table.grid td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: var(--border-thin) solid var(--color-line);
    vertical-align: top;
}

table.grid th {
    background: var(--color-surface-sunken);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    white-space: nowrap;
}

/* A QuickGrid a rendezheto oszlop cimet GOMBKENT rajzolja ki (col-title); az urlap-elem
   nem orokli a th tipografiajat, ezert kulon ra kell allitani - kulonben a fejlec fele
   nagybetus (sima th), a masik fele nem. */
table.grid th button.col-title,
table.grid th .col-options-button {
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

table.grid tbody tr:hover td {
    background: var(--color-surface-sunken);
}

td.num, th.num {
    text-align: right !important;
    white-space: nowrap;
}

td.note, .grid td span.note {
    font-size: var(--text-xs);
    color: var(--color-ink-subtle);
}

/* sor-allapotok. A QuickGrid (8.0.x) nem ad row-class hook-ot, ezert a jelzes
   cellankent, a cella-tartalmat korbevevo span osztalyaval megy. */
.grid td span.incoming {
    color: var(--color-incoming);
}

.grid td span.storno {
    color: var(--color-muted-row);
}

.grid td span.storno-number {
    text-decoration: line-through;
}

tr.overdue td {
    background: var(--color-danger-bg);
}

/* --------------------------- urlap-mezo, gomb --------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.control {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border-thin) solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}

.control:hover {
    border-color: var(--color-accent-strong);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border-thin) solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
}

.btn:hover:not(:disabled) {
    border-color: var(--color-accent-strong);
    color: var(--color-accent-strong);
}

.btn:disabled {
    color: var(--color-ink-subtle);
    border-color: var(--color-line);
    cursor: default;
}

.btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent-strong);
    font-weight: var(--weight-semibold);
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-accent-bright);
    color: var(--color-ink);
}

/* gomb sotet savon (fejlec) */
.btn-on-dark {
    background: transparent;
    border-color: var(--color-line-on-dark);
    color: var(--color-ink-on-dark);
}

.btn-on-dark:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent-bright);
}

/* ------------------------------- jelveny -------------------------------- */

.badge {
    display: inline-block;
    padding: 0 var(--space-2);
    border: var(--border-thin) solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.badge-estimate {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-line);
    color: var(--color-warning);
    cursor: help;
}

/* -------------------- ures allapot, jelzesek, savok --------------------- */

.empty-note {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.alert {
    border: var(--border-thin) solid transparent;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
}

.alert-error {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-line);
    color: var(--color-danger);
}

ul.warnings {
    margin: 0;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-warning);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* hianyzo arfolyam jelzese a Ft-oszlopban (F-24): jelzes, nem nulla */
.fx-missing {
    color: var(--color-warning);
    font-size: var(--text-xs);
    white-space: nowrap;
}

/* lejart blokk cime (F-18) */
.overdue-head {
    color: var(--color-danger);
}

/* --------------------------- eszkoz-savok ------------------------------- */

.toolbar {
    display: flex;
    align-items: end;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.toolbar .count {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.toolbar .current {
    font-weight: var(--weight-semibold);
    min-width: var(--space-7);
    text-align: center;
}

/* QuickGrid oszlop-szuro panel tartalma (a keret/hatter a QuickGrid alap-CSS-e) */
.col-filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

/* szoveges oszlop-szuro: legyen eleg szeles a "tartalmazza..." kifejezeshez */
.col-filter-text {
    min-width: var(--filter-text-min);
}

/* tobb-ertekes valasztek az oszlop-szuroben (F-27/V-20): a lista gorduljon, ne
   nyujtsa szet a szuro-panelt */
.control.multi {
    min-width: var(--filter-text-min);
    max-height: var(--multi-select-max);
    overflow-y: auto;
    padding: var(--space-1);
}

/* a gyorskereso a felso savban vigye el a maradek helyet */
.field-grow {
    flex: 1 1 var(--filter-text-min);
    min-width: var(--filter-text-min);
}

/* ------------------------- aktiv szurok sava ---------------------------- */
/* V-20/3: a hato szurok LATSZANAK, egyenkent es egyben is torolhetok. */

.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.filter-empty {
    font-size: var(--text-sm);
    color: var(--color-ink-subtle);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: inherit;
    font-size: var(--text-xs);
    color: var(--color-ink);
    background: var(--color-accent-soft);
    border: var(--border-thin) solid var(--color-accent-strong);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
}

.chip:hover {
    background: var(--color-surface);
}

.chip-x {
    font-size: var(--text-md);
    line-height: 1;
    color: var(--color-accent-strong);
}

.btn-clear {
    font-size: var(--text-xs);
}

/* ------------------------------ diagram --------------------------------- */
/* D-29: sajat, szerver-oldalon renderelt SVG - diagram-konyvtar nelkul */

.chart {
    display: block;
    width: 100%;
    max-width: var(--chart-max);
    height: auto;
}

.chart-grid {
    stroke: var(--color-line);
    stroke-width: var(--chart-hairline-width);
}

.chart-zero {
    stroke: var(--color-line-strong);
    stroke-width: var(--chart-hairline-width);
}

.chart-axis {
    font-size: var(--chart-axis-text);
    fill: var(--color-ink-muted);
}

/* A ket kovetkezo szabaly ELEM-hez kotott szelektort hasznal (magasabb specifikussag), mert a
   sorozat-szinek (.series-*) a stroke-ot ES a fill-t is beallitjak - azonos specifikussag mellett
   azok nyernenek, es a vonal kitoltott foltta, a felirat korvonalassa valna. */
text.chart-value {
    font-size: var(--chart-value-text);
    stroke: none;
}

polyline.chart-line {
    fill: none;
    stroke-width: var(--chart-line-width);
}

.chart-dot {
    stroke-width: var(--chart-hairline-width);
}

/* a harom sorozat: szin ES vonal-mintazat is megkulonbozteti oket */
.series-out { stroke: var(--color-series-out); fill: var(--color-series-out); }
.series-in { stroke: var(--color-series-in); fill: var(--color-series-in); }
.series-res { stroke: var(--color-series-result); fill: var(--color-series-result); }

polyline.chart-line.series-in { stroke-dasharray: 5 3; }

ul.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

ul.chart-legend .swatch {
    display: inline-block;
    width: var(--space-4);
    height: var(--border-accent);
    margin-right: var(--space-1);
    vertical-align: middle;
}

ul.chart-legend .series-out { background: var(--color-series-out); }
ul.chart-legend .series-in { background: var(--color-series-in); }
ul.chart-legend .series-res { background: var(--color-series-result); }

/* ------------------------------- belepes -------------------------------- */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--color-surface-dark);
}

.login-card {
    width: min(100%, var(--login-width));
}

.login-card h1 {
    font-size: var(--text-lg);
    color: var(--color-ink);
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.login-card .error {
    color: var(--color-danger);
    font-size: var(--text-sm);
}