/* === SZÍN-VÁLTOZÓK DEFINÍCIÓJA === */
:root {
    --bg-color: #f4f7f6;
    --container-bg: #ffffff;
    --text-primary: #333;
    --text-secondary: #666;
    --border-color: #ddd;
    --border-light: #eee;
    --primary-color: #007bff;
    --primary-hover: #0056b3;
    --table-header-bg: #f4f7f6;
    --table-section-bg: #e9f5ff;
    --total-final-color: #d93025;
        --positive-color: #28a745; /* Zöld a megtakarításhoz */

}


body.dark-theme {
    --bg-color: #121212;
    --container-bg: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --border-color: #444;
    --border-light: #333;
    --primary-color: #4dabf7;
    --primary-hover: #1e90ff;
    --table-header-bg: #2a2a2a;
    --table-section-bg: #1c3d5e;
    --total-final-color: #ff6b6b;
        --positive-color: #40c057;

}

.positive-saving {
    color: var(--positive-color) !important;
}
.negative-saving {
    color: var(--total-final-color) !important;
}
/* === ÖSSZEFOGLALÓ MÁSOLÁSA GOMB ÉS ÜZENET === */
.copy-summary-container {
    text-align: center;
    margin-top: 2rem;
    position: relative;
}
.copy-summary-btn {
    width: auto;
    padding: 0.8rem 1.5rem;
    background-color: #6c757d; /* Semleges szürke szín */
}
.copy-summary-btn:hover {
    background-color: #5a6268;
}
.copy-success-message {
    display: block;
    margin-top: 0.5rem;
    color: var(--positive-color);
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.copy-success-message.visible {
    opacity: 1;
}
/* === ALAP STÍLUSOK (Változókkal) === */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    margin: 0;
    color: var(--text-primary);
    transition: background-color 0.2s, color 0.2s;
}
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
body.calculator-page {
    padding: 2rem 1rem;
}
.login-container, .main-container {
    background-color: var(--container-bg);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    transition: background-color 0.2s;
}
.login-container { max-width: 450px; }
.main-container { max-width: 900px; margin: 0 auto; }

/* === GOMBOK ÉS INPUTOK === */
h1, h2, h3, h4 { color: var(--text-primary); }
h4.input-header { margin-top: 1.5rem; }
input[type="text"], input[type="number"], input[type="password"], select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--bg-color);
    color: var(--text-primary);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
label { color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 0.5rem; }
button {
    width: 100%;
    padding: 0.8rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}
button:hover { background-color: var(--primary-hover); }

/* === TÉMA VÁLTÓ GOMB === */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--bg-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Megakadályozza, hogy összenyomódjon */
}
/* A gomb pozicionálása a bejelentkező oldalon */
.login-container .theme-toggle-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* === FEJLÉC ÉS VEZÉRLŐK === */
.header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.header h1 { margin: 0; }
.header-controls { display: flex; align-items: center; gap: 1rem; }
.header-controls a { text-decoration: none; background-color: #6c757d; color: white; padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.9rem; }
.lang-switcher select, .lang-switcher-login select { cursor: pointer; }
.error-message { color: #d93025; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 0.75rem; border-radius: 4px; text-align: center; }

/* === TAB-OS ELRENDEZÉS === */
.tab-nav { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 1.5rem; }
.tab-link { padding: 0.8rem 1.5rem; cursor: pointer; border: none; background-color: transparent; font-size: 1rem; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s ease-in-out; }
.tab-link:hover { background-color: var(--bg-color); color: var(--primary-color); }
.tab-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.divider { border: none; border-top: 1px solid var(--border-light); margin: 1.5rem 0; }

/* === RÉSZLETEZŐ ÉS EREDMÉNY SZEKCIÓK === */
.details-section h4 { font-size: 1rem; color: var(--primary-color); margin-top: 1.5rem; margin-bottom: 0.75rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border-light); }
.details-section p { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-secondary); margin: 0.5rem 0; text-align: left; }
.details-section p span { font-weight: bold; color: var(--text-primary); }
.details-section p.total-cost { font-size: 1.2rem; font-weight: bold; color: var(--text-primary); margin-top: 1rem; }
.details-section p.total-cost span { color: var(--primary-color); }

/* === ÖSSZEHASONLÍTÓ TÁBLÁZAT ÉS ÖSSZEGZÉS === */
.comparison-table-container h3 { text-align: center; margin-bottom: 1.5rem; }
.comparison-subtitle { text-align: center; margin-top: -1rem; margin-bottom: 2rem; color: var(--text-secondary); font-style: italic; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.8rem; text-align: left; border-bottom: 1px solid var(--border-color); }
th { background-color: var(--table-header-bg); font-weight: 700; }
td:not(:first-child) { text-align: right; }
tbody tr:hover { background-color: var(--bg-color); }
.section-header td { background-color: var(--table-section-bg); font-weight: bold; color: var(--primary-color); }
.total-row { font-weight: bold; }
.final-total { background-color: var(--table-header-bg); font-size: 1rem; }
.final-summary { margin-top: 2rem; padding: 1.5rem; background-color: var(--bg-color); border-radius: 8px; text-align: center; border: 2px solid var(--primary-color); }
.final-summary p { font-size: 1.2rem; font-weight: bold; margin: 0.5rem 0; text-align: center; color: var(--text-primary); }
.final-summary span { font-size: 2rem; color: var(--total-final-color); margin-left: 0.5rem; }

/* === PWA TELEPÍTÉSI SÁV STÍLUSAI === */
.pwa-install-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--primary-color);
    color: white;
    position: sticky; /* Az oldal tetején marad görgetéskor */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
}
.pwa-install-banner p {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}
.pwa-close-banner {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    width: auto;
    padding: 0 0.5rem;
}
.pwa-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Az Android telepítés gomb stílusa a fejlécben */
.header-controls .install-btn {
    width: auto;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    background-color: #28a745; /* Zöld */
}
.header-controls .install-btn:hover {
    background-color: #218838;
}

/* === MOBILNÉZET ÉS RESZPONZIVITÁS === */
@media (max-width: 768px) {
    
    /* A fő tárolóelemek kevesebb belső térközt kapnak */
    body.calculator-page {
        padding: 1rem 0.5rem;
    }
    .main-container {
        padding: 1rem;
    }

    /* A fülek tördelése, ha nem férnek el */
    .tab-nav {
        flex-wrap: wrap;
    }
    .tab-link {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }

    /* A RÉSZLETES TÁBLÁZAT ÁTALAKÍTÁSA "KÁRTYA" NÉZETRE */

    /* A táblázat fejlécét elrejtjük */
    .comparison-table-container thead {
        display: none;
    }
    /* A táblázat sorai különálló blokkok lesznek */
    .comparison-table-container tr {
        display: block;
        border: 1px solid var(--border-color);
        margin-bottom: 1rem;
        border-radius: 4px;
    }
    /* A szekciók fejlécei (Listaár, stb.) nem változnak */
    .comparison-table-container tr.section-header {
        display: table-row; /* Visszaállítjuk a normál táblázat sort */
    }
    .comparison-table-container tr.section-header td {
        display: table-cell; /* Visszaállítjuk a normál cellát */
    }

    /* A cellák egymás alatt fognak megjelenni */
    .comparison-table-container td {
        display: block;
        text-align: right; /* Az értékeket jobbra igazítjuk */
        position: relative;
        padding-left: 50%; /* Helyet csinálunk a címkének */
        border-bottom: 1px dashed var(--border-light);
    }
    .comparison-table-container td:last-child {
        border-bottom: none; /* Az utolsó cella alatt ne legyen vonal */
    }

    /* A "varázslat": a data-label tartalmát megjelenítjük a cella előtt */
    .comparison-table-container td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.8rem;
        width: calc(50% - 1.6rem);
        text-align: left;
        font-weight: bold;
        color: var(--text-primary);
    }

    /* Az első oszlop (Paraméter) cellái másképp néznek ki */
    .comparison-table-container td[data-label="<?php echo $lang['TABLE_HEADER_METRIC']; ?>"] {
        padding-left: 0.8rem;
        text-align: left;
        font-weight: bold;
        background-color: var(--bg-color);
    }
    /* Elrejtjük a feleslegesen generált címkét */
    .comparison-table-container td[data-label="<?php echo $lang['TABLE_HEADER_METRIC']; ?>"]::before {
        display: none;
    }
}
/* === FEJLÉC MOBILNÉZET JAVÍTÁSA === */
@media (max-width: 600px) {
    .header {
        flex-direction: column; /* Egymás alá rendezi a címsort és a vezérlőket */
        gap: 1.5rem; /* Nagyobb térköz a címsor és a gombok között */
    }

    .header-controls {
        flex-wrap: wrap; /* A gombok is tördelődhetnek, ha már végképp nem férnek el */
        justify-content: center; /* A gombokat középre igazítja a soron belül */
    }
}

/* === TELEPÍTÉSI KÉPERNYŐ (INSTALL GATE) STÍLUSAI === */
.app-content {
    display: none; /* A fő tartalom alapból rejtett */
}

#install-gate {
    display: block; /* A telepítési képernyő alapból látható */
    text-align: center;
    padding: 3rem 1rem;
}

/* === TELEPÍTŐ KÉPERNYŐ (INSTALL GATE) STÍLUSAI === */

/* A tartalom dobozának alapbeállításai */
.install-gate-content {
    position: relative; /* Ez kell a gombok pozicionálásához */
    text-align: center;
    padding: 2rem;
    padding-top: 5rem; /* Nagyobb felső térköz a gombok miatt */
}

/* A jobb felső sarokban lévő vezérlők (téma, kijelentkezés) */
.install-gate-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem; /* Kis térköz a gombok között */
    align-items: center;
}

/* A vezérlőkhöz tartozó gombok stílusai */
.install-gate-controls .theme-toggle-btn,
.install-gate-controls .logout-btn {
    width: auto; /* A gombok ne legyenek teli szélesek */
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Az ikon alatti címsor */
.install-gate-content h1 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* A nyelvválasztó középre igazítása */
.install-gate-content .lang-switcher-login {
    margin-bottom: 1.5rem;
}

/* Az útmutató szövegek stílusai */
#pwa-install-text p {
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0 auto 1.5rem auto;
    line-height: 1.6;
}

/* A telepítés gomb stílusai */
.install-gate-content .install-btn {
    width: 100%;
    max-width: 400px;
    margin-top: 1rem;
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
}
.pwa-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}


/* === A VARÁZSLAT: A TARTALOM MEGJELENÍTÉSE TELEPÍTÉS UTÁN === */

/* Ha az app "standalone" módban fut (telepítve), akkor... */
@media all and (display-mode: standalone) {
    .app-content {
        display: block; /* ...a fő tartalom láthatóvá válik... */
    }
    #install-gate {
        display: none; /* ...a telepítési képernyő pedig eltűnik. */
    }
}

/* === TELEPÍTÉSI GOMB TELJES SZÉLESSÉGŰVÉ TÉTELE === */
.install-gate-content .install-btn {
    width: 100%; /* A gomb kitölti a rendelkezésre álló helyet */
    max-width: 400px; /* De ne legyen túl széles nagy képernyőn */
    margin-top: 1rem; /* Kis térköz felette */
}

/* === ÉVES MEGTAKARÍTÁS SZIMULÁTOR STÍLUSAI === */
.annual-simulator {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-color);
}
.annual-simulator h3 {
    text-align: center;
    margin-bottom: 1.5rem;
}
.simulator-inputs {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 2rem;
}
.simulator-inputs .input-group {
    max-width: 200px;
}
.annual-result {
    text-align: center;
    background-color: var(--bg-color);
    padding: 1.5rem;
    border-radius: 8px;
}
.annual-result p {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-secondary);
}
.annual-result span {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--total-final-color);
}
@media (max-width: 600px) {
    .simulator-inputs {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
}
/* === ÖSSZEFOGLALÓ MÁSOLÁSA GOMB ÉS ÜZENET === */
.copy-summary-container {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
    position: relative;
}
.copy-summary-btn {
    width: auto;
    padding: 0.8rem 1.5rem;
    background-color: #6c757d; /* Semleges szürke szín */
    color: white !important; /* Fontos a sötét témához */
}
.copy-summary-btn:hover {
    background-color: #5a6268;
}
.copy-success-message {
    display: block;
    margin-top: 0.5rem;
    color: var(--positive-color);
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    width: 100%;
    left: 0;
}
.copy-success-message.visible {
    opacity: 1;
}
/* === RESET GOMB STÍLUSA === */
.reset-btn {
    width: auto;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    background-color: #ffc107; /* Figyelmeztető sárga */
    color: #212529;
    border: 1px solid #d39e00;
}
.reset-btn:hover {
    background-color: #e0a800;
}

/* Logout gomb stílusa (hogy egységes legyen a többi gombbal) */
/* === KIJELENTKEZÉS GOMB JAVÍTÁSA (BOMBABIZTOS VERZIÓ) === */
.logout-btn {
    display: inline-block !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-decoration: none !important; /* Eltünteti a link aláhúzást */
    color: white !important;
    background-color: #6c757d !important; /* Semleges szürke */
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.2s !important;
}

.logout-btn:hover {
    background-color: #5a6268 !important;
    color: white !important;
}
/* === MEOSZTÁS GOMB STÍLUSA === */
.share-btn {
    width: auto;
    padding: 0.8rem 1.5rem;
    background-color: #6c757d;
    color: white !important;
    position: relative;
    padding-left: 3rem; /* Hely az ikonnak */
}
.share-btn:hover {
    background-color: #5a6268;
}
/* A megosztás ikon (SVG) */
.share-btn::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: white;
    mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>');
    mask-repeat: no-repeat;
}
.install-gate-content {
    position: relative;
    padding-top: 4rem; /* Helyet csinálunk a gomboknak */
}
.install-gate-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
}
/* === KIJELENTKEZÉS GOMB JAVÍTÁSA === */
.logout-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none; /* Eltünteti a link aláhúzást */
    color: white;
    background-color: #6c757d; /* Semleges szürke */
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.logout-btn:hover {
    background-color: #5a6268;
    color: white;
}