:root {
    --bg-color: #f4f7f6;
    --text-color: #333;
    --background-secondary: #f8f9fa;
    --hover-color: #e9ecef;
    --primary-color: #28a745;
    --container-bg: white;
    --header-color: #1a6a48;
    --border-color: #e0e0e0;
    --form-bg: #ffffff;
    --form-shadow: rgba(0,0,0,0.05);
    --input-bg: #fff;
    --input-border: #ccc;
    --input-text: #333;
    --button-bg: #28a745;
    --button-hover-bg: #218838;
    --button-text: white;
    --success-bg: #e9f7ef;
    --success-border: #28a745;
    --success-text: #155724;
    --error-bg: #f8d7da;
    --error-border: #dc3545;
    --error-text: #721c24;
    --info-text: #555;
    --table-header-bg: #f2f2f2;
    --table-row-hover-bg: #f9f9f9;
    --summary-bg: #e9f7ef;
    --switcher-border: #ccc;
    --switcher-hover-bg: #f0f0f0;
}

html[data-theme="dark"] {
    --bg-color: #212529;
    --text-color: #e0e0e0;
    --background-secondary: #2c3034;
    --hover-color: #495057;
    --primary-color: #28a745;
    --container-bg: #343a40;
    --header-color: #4caf50;
    --border-color: #495057;
    --form-bg: #2c2f33;
    --form-shadow: rgba(0,0,0,0.2);
    --input-bg: #3a3f44;
    --input-border: #555;
    --input-text: #e0e0e0;
    --button-bg: #28a745;
    --button-hover-bg: #32c453;
    --button-text: white;
    --success-bg: #1a3e29;
    --success-border: #28a745;
    --success-text: #a7d7b9;
    --error-bg: #4d1f24;
    --error-border: #dc3545;
    --error-text: #f5c6cb;
    --info-text: #aaa;
    --table-header-bg: #3a3f44;
    --table-row-hover-bg: #495057;
    --summary-bg: #2c3e50;
    --switcher-border: #555;
    --switcher-hover-bg: #495057;
}

/* Dinamikus betűméret beállítása a képernyő szélessége alapján */
html {
    /* Min: 12px, Preferált: 2.5vw, Max: 15px */
    font-size: clamp(12px, 2.5vw, 15px);
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.4; margin: 0; padding: 10px; transition: background-color 0.3s, color 0.3s; font-size: 1rem; }
.container { max-width: 800px; margin: auto; background: var(--container-bg); padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: background-color 0.3s; }
h1 { font-size: 1.6rem; color: var(--header-color); margin: 0; padding: 0; border: none; }
h2 { font-size: 1.3rem; color: var(--header-color); border-bottom: 1px solid var(--border-color); padding-bottom: 6px; margin-top: 20px; margin-bottom: 12px; }
/* A dobozokon belüli h2-nek ne legyen felső margója, mert a szülő már ad neki teret */
.form-section h2, .summary h2 {
    margin-top: 0;
}
.form-section { background-color: var(--form-bg); padding: 12px 15px; border-radius: 8px; box-shadow: 0 1px 4px var(--form-shadow); margin-bottom: 15px; transition: background-color 0.3s; }
label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.9rem; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="file"] { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid var(--input-border); border-radius: 4px; box-sizing: border-box; background-color: var(--input-bg); color: var(--input-text); font-size: 1rem; }
button { background-color: var(--button-bg); color: var(--button-text); padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 1rem; font-weight: bold; transition: background-color 0.2s; }
button:hover { background-color: var(--button-hover-bg); }
.message { padding: 10px; margin-bottom: 12px; border-radius: 5px; font-size: 0.95rem; border-left: 4px solid; }
.success { background-color: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.error { background-color: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.info { font-size: 0.85rem; color: var(--info-text); margin-bottom: 8px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-color); }
th { background-color: var(--table-header-bg); font-weight: 600; }
tr:hover { background-color: var(--table-row-hover-bg); }
.summary { background-color: var(--summary-bg); padding: 12px 15px; border-radius: 8px; margin-top: 15px; }
.header-controls { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--border-color); padding-bottom: 8px; margin-bottom: 12px; }
#theme-switcher {
    background: none;
    border: 1px solid var(--switcher-border);
    color: var(--text-color);
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
#theme-switcher:hover { background-color: var(--switcher-hover-bg); }

/* Media Query kisebb képernyőkre */
@media (max-width: 600px) {
    body {
        padding: 5px; /* Még kevesebb hely a széleken mobilon */
    }
    .container {
        padding: 10px; /* Kisebb belső térköz a konténerben mobilon */
    }
}

.action-link {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--header-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.action-link:hover {
    text-decoration: underline;
}
.back-link {
    display: inline-block;
    margin-top: 15px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-color);
}
.back-link:hover {
    text-decoration: underline;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.button-save {
    width: 100%;
}
.form-actions > form {
    width: 100%;
}
.button-delete {
    background-color: #dc3545;
}
.button-delete:hover {
    background-color: #c82333;
}
html[data-theme="dark"] .button-delete {
    background-color: #c82333;
}
html[data-theme="dark"] .button-delete:hover {
    background-color: #e04455;
}

/* Táblázat oszlopainak finomhangolása */
.date-column {
    white-space: nowrap; /* Megakadályozza a dátum sortörését */
    width: 1%; /* Segít, hogy az oszlop csak a szükséges helyet foglalja */
}

/* Dokumentum lista stílusok */
.document-list { list-style: none; padding: 0; margin-top: 0; }
.document-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-color);
}
.document-list li:last-child { border-bottom: none; }
.document-list a { color: var(--header-color); text-decoration: none; font-weight: 500; }
.document-list a:hover { text-decoration: underline; }
.delete-doc-form button { background: none; border: none; cursor: pointer; padding: 4px; line-height: 1; }
.delete-doc-form svg { color: var(--error-border); transition: color 0.2s; }
.delete-doc-form button:hover svg { color: #a02330; }
html[data-theme="dark"] .delete-doc-form button:hover svg { color: #ff6b81; }

/* Lenyitható szekciók stílusai */
.collapsible-section {
    background-color: var(--form-bg);
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--form-shadow);
    margin-bottom: 15px;
    transition: background-color 0.3s;
}

.collapsible-section summary {
    cursor: pointer;
    outline: none; /* Eltávolítja a fókusz keretet */
    display: flex; /* Igazításhoz szükséges */
    align-items: center; /* Vertikálisan középre igazítja a nyilat és a szöveget */
    padding: 12px 15px; /* A belső térközt a summary kapja, nem a h2 */
    list-style: none; /* Eltávolítja az alapértelmezett nyilat (Firefox) */
}

/* Eltávolítja az alapértelmezett nyilat (Chrome/Safari) */
.collapsible-section summary::-webkit-details-marker { display: none; }

/* Egyedi nyíl létrehozása */
.collapsible-section summary::before {
    content: '►'; /* A nyíl karaktere */
    font-size: 0.8em;
    margin-right: 10px;
    transition: transform 0.2s ease-in-out;
}

.collapsible-section[open] > summary::before { transform: rotate(90deg); }

/* A summary-n belüli h2-nek ne legyen felesleges térköze */
.collapsible-section summary h2 { border-bottom: none; margin: 0; padding: 0; }
.collapsible-section[open] > summary { border-bottom: 1px solid var(--border-color); }

.collapsible-section .section-content { padding: 0 15px 12px 15px; }
.collapsible-section .section-content p:first-child { margin-top: 0; }