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

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

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