/* ============================================================
   SHARED COMPONENTS — TrackIT
   ============================================================ */

/* ---- Inter, saját tárhelyről ----
   2026-08-01-ig a Google Fonts CDN-ről jött, miközben a projekt minden más
   eszköze saját tárhelyen volt. Ez egy külső függőség volt a kritikus úton:
   plusz DNS + TLS kézfogás egy harmadik félhez, és az ő elérhetőségén múlt,
   hogy a lap a saját betűtípusával jelenik-e meg.

   Variable font (wght 100-900): EGY fájl fedi mind az öt használt súlyt.
   Statikus példányokkal 5 súly x 2 subset = 10 fájl, 650 KB lett volna;
   így 2 fájl, 130 KB.

   A latin-ext NEM elhagyható: a magyar ő (U+0151) és ű (U+0171) abban a
   tartományban van, a latin subset nem tartalmazza őket. A unicode-range
   miatt a böngésző csak akkor tölti le, ha tényleg kell — magyar szövegnél
   mindig. A licenc a fonts/Inter-OFL.txt-ben.

   font-display: swap — a szöveg azonnal látszik rendszerbetűvel, és a font
   megérkezésekor vált. Ugyanaz a viselkedés, mint a korábbi &display=swap. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin.260c81a4759b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-ext.1ad231aac0a8.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ---- Typography ---- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- Animations ---- */
.fade-in {
    animation: fadeInUp 0.45s ease backwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Page section header (lapos) ---- */
.page-section-header {
    background: var(--tk-primary);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: var(--tk-radius);
    margin-bottom: 1.5rem;
}

/* ---- Action bar (lapos, tömör) ---- */
.page-action-bar {
    background: var(--tk-primary);
    color: white;
    border-radius: var(--tk-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* ---- Data card — hajszálkeret nagy lebegő árnyék helyett ---- */
.data-card {
    background: var(--bs-body-bg);
    border-radius: var(--tk-radius);
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    margin-bottom: 1.5rem;
}

/* ---- Data table header — finom kék árnyalat + akcentus-csík, hogy
       egyértelműen fejlécként olvasódjon, de ne legyen harsány ---- */
.data-table-header {
    background: rgba(var(--tk-primary-rgb), 0.07);
    color: var(--bs-body-color);
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid rgba(var(--tk-primary-rgb), 0.18);
    box-shadow: inset 3px 0 0 var(--tk-primary);
}

.data-table-header h5,
.data-table-header h6 {
    margin: 0;
    font-weight: 650;
    color: var(--tk-primary);
}

.data-table-header h5 i,
.data-table-header h6 i {
    color: var(--tk-primary);
}

/* A világos fejlécen a korábban sötét háttérre szánt vezérlők olvashatóak
   maradjanak (így nem kell egyesével átírni a sablonokban) */
.data-table-header .btn-light {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

.data-table-header .btn-light:hover {
    background: rgba(var(--tk-primary-rgb), 0.1);
    border-color: var(--tk-primary);
    color: var(--tk-primary);
}

.data-table-header .badge.bg-white {
    background: var(--tk-primary) !important;
    color: #fff !important;
}

.data-table-header .input-group-text.bg-light {
    background: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-right: none !important;
}

.data-table-header .input-group .form-control {
    border: 1px solid var(--bs-border-color) !important;
    border-left: none !important;
}

/* ---- Table rows inside data-card ---- */
.data-card .table {
    margin-bottom: 0;
}

.data-card .table thead th {
    background: transparent;
    border-bottom: 2px solid var(--bs-border-color);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    color: var(--bs-secondary-color);
    padding: 0.85rem 1rem;
}

.data-card .table tbody tr {
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.15s ease;
}

/* Halvány zebra-csíkozás — kevésbé egyszínű, könnyebb egy soron végigfutni */
.data-card .table tbody tr:nth-of-type(even) {
    background-color: rgba(var(--tk-primary-rgb), 0.025);
}

.data-card .table tbody tr:last-child {
    border-bottom: none;
}

.data-card .table tbody tr:hover {
    background-color: rgba(var(--tk-primary-rgb), 0.07);
}

/* Összegző / átlag sávok: enyhén kiemelt háttér, hogy elkülönüljenek */
.data-card .table tfoot tr {
    background-color: rgba(var(--tk-primary-rgb), 0.05);
}

.data-card .table td, .data-card .table th {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

/* ---- Sűrű változat sok oszlophoz ----
   A fenti cellabelső 8-10 oszlopig kényelmes. A Garmin táblában 14 oszlop van;
   ott az alapméret vízszintes görgetést és túl ritka sorokat adna, amiben
   nehéz egy soron végigfutni. Külön modifier, hogy a többi tábla ne változzon.

   A tabular-nums a lényegi rész: enélkül az arányos számjegyek miatt a
   lépésszám és a kalória oszlopok nem állnak egy vonalba, és sokkal nehezebb
   összehasonlítani két napot. */
.data-card .table-compact td,
.data-card .table-compact th {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
}

/* A fejléc tördelhet: két rövid sor kevesebb helyet foglal, mint egy hosszú,
   és a fejlécmagasság úgyis egyszer fizetődik ki az egész táblára. */
.data-card .table-compact thead th {
    font-size: 0.64rem;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.2;
}

.data-card .table-compact td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A mértékegység és a százalék másodlagos: kisebb betű, hogy a szám vezessen,
   és ne az egység húzza szélesre az oszlopot. */
.data-card .table-compact td .text-muted {
    font-size: 0.9em;
}

/* ---- Hosszú táblák: görgetés a lapon belül ----

   Kétszáz sornál maga a LAP válik használhatatlanul hosszúvá: mire az ember a
   tábla aljára ér, az összesítők és a kereső régen kigörögtek a képből. A tábla
   saját görgetése ezt megoldja.

   A ragadós fejléc nem díszítés, hanem a görgetés feltétele: enélkül az
   oszlopnevek eltűnnének, és a lefelé haladva már kitalálhatatlan lenne, melyik
   dátum melyik. Az átlátszatlan háttér is kell, különben a sorok átütnek rajta. */
/* A magasság a képernyőhöz igazodik, nem fix: így a tábla addig nyúlik,
   ameddig az ablak tart, és a LAPOT nem kell görgetni, csak a táblát. A
   max() alsó korlátja kis ablakban véd, hogy ne maradjon két sor magas. */
.table-scroll {
    max-height: max(18rem, calc(100vh - 21rem));
    overflow-y: auto;
}

.data-card .table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-body-bg);
}

/* ---- KPI kártyák (hero számok) ---- */
.kpi-card {
    background: var(--bs-body-bg);
    border-radius: var(--tk-radius);
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    margin-bottom: 1rem;
    height: 100%;
}

.kpi-card-expense { border-left: 3px solid var(--viz-8); }
.kpi-card-income  { border-left: 3px solid var(--viz-2); }
.kpi-card-savings { border-left: 3px solid var(--viz-1); }

/* ---- Kompakt változat ----
   Ahol a kártyák alatt egy görgethető, ragadós fejlécű tábla áll, ott minden
   elvett függőleges pixel a tábla látható részét növeli. A KPI-k ilyenkor
   kísérők, nem a lap főszereplői — a szám maradjon olvasható, de ne foglaljon
   akkora sávot, amitől már a lapot is görgetni kell. */
.kpi-card-compact {
    padding: 0.55rem 0.8rem;
    margin-bottom: 0;
}

.kpi-card-compact .kpi-value {
    font-size: 1.15rem;
    margin-bottom: 0;
}

.kpi-card-compact .kpi-label {
    font-size: 0.66rem;
}

.kpi-value {
    font-size: 1.6rem;
    font-weight: 650;
    line-height: 1.15;
    margin-bottom: 0.15rem;
    /* A számjegyek azonos szélessége — így az értékek egymás alá igazodnak */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.kpi-sub {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* ---- Amount badge (green pill) ---- */
.amount-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    background: rgba(39, 174, 96, 0.12);
    color: #1a7a41;
}

[data-bs-theme="dark"] .amount-badge {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

/* ---- Chart container ---- */
.chart-section {
    background: var(--bs-body-bg);
    border-radius: var(--tk-radius);
    padding: 1.5rem;
    border: 1px solid var(--bs-border-color);
    margin-bottom: 1.5rem;
}

/* ---- Modal fejléc (lapos) ---- */
.modal-gradient-header {
    background: var(--tk-primary);
    color: white;
    padding: 1.2rem 1.5rem;
    border: none;
    border-radius: 0;
}

.modal-gradient-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.modal-gradient-header .btn-close:hover {
    opacity: 1;
}

.modal-content {
    border: none;
    border-radius: var(--tk-radius);
    overflow: hidden;
}

/* ---- Pénzügyi számok: azonos szélességű számjegyek, hogy az oszlopok
       tizedes-pontosan egymás alá essenek ---- */
.data-card .table td,
.stats-table td,
.amount-badge {
    font-variant-numeric: tabular-nums;
}

/* ---- Form controls — unified focus ring ---- */
.form-control:focus,
.form-select:focus {
    border-color: var(--tk-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--tk-primary-rgb), 0.2);
}

/* ---- Confirm delete page ---- */
.delete-confirm-wrapper {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.delete-confirm-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tk-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    max-width: 440px;
    width: 100%;
}

.delete-confirm-card .card-header {
    background: var(--viz-8);
    color: white;
    padding: 1.5rem;
    border: none;
    text-align: center;
}

.delete-confirm-card .card-body {
    padding: 2rem;
    text-align: center;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .page-section-header,
    .page-action-bar {
        border-radius: 12px;
        padding: 1rem 1.25rem;
    }

    .kpi-value {
        font-size: 1.3rem;
    }

    .data-card .table td,
    .data-card .table th {
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }
}