:root {
            --primary-color: #61cc49; --primary-hover-color: #52ad3f; --danger-color: #ef4444; --danger-hover-color: #dc2626; --secondary-color: #64748b; --secondary-hover-color: #475569; --warning-color: #f59e0b; --warning-hover-color: #d97706; --info-color: #3b82f6; --info-hover-color: #2563eb; --light-gray: #f1f5f9; --border-color: #e2e8f0; --text-color: #1e293b; --text-muted-color: #64748b; --card-bg: #ffffff; --info-bg: #f0fdf4;
        }
        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--light-gray); margin: 0; color: var(--text-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        #login-view { display: flex; justify-content: center; align-items: center; height: 100vh; }
        .login-container { padding: 40px; background: var(--card-bg); border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); text-align: center; width: 90%; max-width: 400px; }
        #login-form input { box-sizing: border-box; display: block; width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 16px; background-color: var(--light-gray); }
        #login-form input:focus { outline: 2px solid var(--primary-color); border-color: transparent; }
        .error-message { color: var(--danger-color); margin-top: 10px; font-size: 14px; }
        #admin-view { display: none; }
        
        /* HEADER MÓDOSÍTÁSOK KERESŐHÖZ */
        header { background-color: var(--card-bg); color: var(--text-color); padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); gap: 20px; }
        header h1 { margin: 0; font-size: 24px; font-weight: 700; }
        .header-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
        
        .global-search-container { position: relative; width: 300px; }
        .global-search-container input { width: 100%; padding: 8px 35px 8px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; box-sizing: border-box; }
        .global-search-container .search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted-color); pointer-events: none; }
        .search-results-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: white; border: 1px solid var(--border-color); border-radius: 6px; margin-top: 5px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); z-index: 100; max-height: 300px; overflow-y: auto; display: none; }
        .search-result-item { padding: 10px; border-bottom: 1px solid var(--border-color); cursor: pointer; display: flex; flex-direction: column; }
        .search-result-item:last-child { border-bottom: none; }
        .search-result-item:hover { background-color: var(--light-gray); }
        .search-result-item strong { font-size: 14px; color: var(--text-color); }
        .search-result-item small { font-size: 12px; color: var(--text-muted-color); }

        .main-nav { display: flex; gap: 10px; }
        main { padding: 30px; }
        .view-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 20px; }
        .view-header h2 { margin: 0; font-size: 28px; font-weight: 700; }
        h4.section-title { margin-top: 30px; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px solid var(--border-color); }
        button { background-color: var(--primary-color); color: white; border: none; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; transition: background-color 0.2s, transform 0.1s; display: inline-flex; align-items: center; gap: 8px; }
        button:hover { background-color: var(--primary-hover-color); }
        button:active { transform: scale(0.98); }
        button i { width: 18px; height: 18px; }
        #logout-button { background-color: var(--danger-color); }
        #logout-button:hover { background-color: var(--danger-hover-color); }
        #back-to-trips-button { background-color: var(--secondary-color); }
        #back-to-trips-button:hover { background-color: var(--secondary-hover-color); }
        #export-excel-button, #copy-email-button { background-color: var(--info-color); }
        #export-excel-button:hover, #copy-email-button:hover { background-color: var(--info-hover-color); }
        .data-list .item { background: var(--card-bg); padding: 20px; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); transition: box-shadow 0.2s, transform 0.2s; }
        .item-header { display: flex; justify-content: space-between; align-items: center; }
        .data-list .item:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); transform: translateY(-2px); }
        .item-info { flex-grow: 1; cursor: pointer; display: flex; align-items: center; gap: 10px; }
        .item-info:hover { color: var(--primary-color); }
        .item-info strong { font-size: 1.1em; font-weight: 600; }
        .item-info small { color: var(--text-muted-color); }
        .item-actions { display: flex; gap: 8px; }
        .item-actions button { padding: 8px; background-color: var(--light-gray); color: var(--secondary-color); }
        .item-actions button:hover { background-color: var(--border-color); color: var(--text-color); }
        .item-actions .edit-button:hover { background-color: #fef3c7; color: #d97706; }
        .item-actions .delete-button:hover { background-color: #fee2e2; color: #dc2626; }
        .item-actions .archive-button:hover { background-color: #dbeafe; color: #2563eb; }
        .item-actions .restore-button:hover { background-color: #dcfce7; color: #16a34a; }
        .item-actions .hard-delete-button:hover { background-color: #fee2e2; color: #dc2626; }
        #group-view-controls button { background-color: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); padding: 8px 12px; }
        #group-view-controls button.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
        .item-details { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border-color); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
        .item-details h5 { margin-top: 0; margin-bottom: 10px; color: var(--primary-hover-color); font-weight: 600; }
        .item-details ul { list-style: none; padding: 0; margin: 0; }
        .item-details li { margin-bottom: 5px; color: var(--text-muted-color); display: flex; align-items: center; gap: 6px;}
        .item-details li strong { color: var(--text-color); }
        .price-breakdown li { font-size: 0.9em; }
        .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 20px; }
        .modal-content { background: white; padding: 30px 30px 0 30px; border-radius: 12px; width: 90%; max-width: 700px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; }
        .modal-content h3 { margin-top: 0; font-size: 24px; font-weight: 700; flex-shrink: 0; }
        .modal-content form { flex-grow: 1; }
        .modal-buttons { position: sticky; bottom: 0; background-color: var(--card-bg); padding: 20px 30px; margin: 30px -30px 0 -30px; border-top: 1px solid var(--border-color); text-align: right; z-index: 10; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
        .modal-content input, .modal-content label, .modal-content select, .modal-content textarea { box-sizing: border-box; display: block; width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 8px; }
        .modal-content label { border: none; padding: 0; margin-bottom: 5px; font-weight: 600; }
        .checkbox-wrapper, .checkbox-list-item { display: flex; align-items: center; margin-bottom: 10px; }
        .checkbox-wrapper input, .checkbox-list-item input { width: auto; margin-right: 10px; }
        .modal-buttons button { margin-left: 10px; }
        .modal-buttons button[type="button"] { background-color: var(--secondary-color); }
        .modal-buttons button[type="button"]:hover { background-color: var(--secondary-hover-color); }
        .form-section { border-top: 1px solid var(--border-color); padding-top: 20px; margin-top: 20px; }
        .passenger-entry, .payment-entry, .reminder-entry { padding: 15px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 15px; position: relative; }
        .payment-entry, .reminder-entry, .discount-entry { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
        .extra-cost-entry { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 15px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 15px; position: relative; }
        .payment-entry select, .reminder-entry input, .discount-entry select { flex: 2; }
        .payment-entry input, .reminder-entry input, .discount-entry input { flex: 1; }
        .delete-payment-btn, .delete-reminder-btn, .delete-extra-cost-btn, .delete-discount-btn { background: var(--danger-color); padding: 0; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .delete-payment-btn:hover, .delete-reminder-btn:hover, .delete-extra-cost-btn:hover, .delete-discount-btn:hover { background-color: var(--danger-hover-color); }
        .delete-payment-btn i, .delete-reminder-btn i, .delete-extra-cost-btn i, .delete-discount-btn i { width: 16px; height: 16px; }
        #trip-summary-section { background-color: var(--info-bg); border: 1px solid var(--primary-color); border-radius: 10px; padding: 20px; margin-bottom: 25px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        .summary-card h4 { margin-top: 0; color: var(--primary-hover-color); border-bottom: 1px solid var(--primary-color); padding-bottom: 5px; }
        .summary-card ul { list-style: none; padding: 0; margin: 0; }
        #passengers-controls, #trip-view-controls { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
        #passengers-controls input, #passengers-controls select, #trip-view-controls button { padding: 10px; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; }
        #trip-view-controls button { background-color: var(--card-bg); color: var(--text-color); }
        #trip-view-controls button.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
        .tab-container { border-bottom: 1px solid #ddd; margin-bottom: 20px; }
        .tab-button { padding: 10px 20px; cursor: pointer; border: none; background-color: transparent; border-bottom: 3px solid transparent; font-size: 18px; font-weight: 600; color: var(--secondary-color); }
        .tab-button.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
        #view-actions { display: flex; gap: 10px; flex-wrap: wrap; }
        .payment-status-icon { flex-shrink: 0; }
        .payment-status-icon.paid { color: var(--primary-hover-color); }
        .payment-status-icon.unpaid { color: var(--danger-color); }
        #dashboard-view { display: none; }
        .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
        .dashboard-card { background-color: var(--card-bg); padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
        .dashboard-card h3 { margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
        .dashboard-card ul { list-style: none; padding: 0; }
        .dashboard-card li { padding: 8px 0; font-size: 14px; }
        .dashboard-card li small { color: var(--text-muted-color); display: block; }
        .discount-entry .discount-field { display: flex; gap: 10px; align-items: center; }
        .discount-entry .discount-field > select { flex: 1; }
        .discount-entry .discount-field > input { flex-shrink: 0; width: 60px; }
        .extra-cost-entry[data-is-discount="true"] { background-color: #f0fdf4; border-color: var(--primary-color); }
        .extra-cost-entry[data-is-discount="true"] input { background-color: #eafaf6; color: var(--text-muted-color); border-style: dashed; }
        #extra-cost-summary-display { padding: 10px 15px; background-color: var(--light-gray); border-radius: 8px; margin-bottom: 15px; border: 1px solid var(--border-color); }
        .extra-payment-entry input:first-child, .extra-payment-entry select { flex: 1; }
        @media (max-width: 768px) {
            header, .view-header, #passengers-controls { flex-direction: column; align-items: flex-start; gap: 15px; }
            main { padding: 15px; }
            #view-actions { flex-direction: column; width: 100%; align-items: stretch; }
            #view-actions > button { width: 100%; justify-content: center; }
            .item-header { flex-direction: column; align-items: flex-start; gap: 15px; }
            .item-actions { width: 100%; display: flex; justify-content: flex-start; gap: 10px; }
            .item-actions button { flex-grow: 1; justify-content: center; }
            #trip-summary-section, .item-details { grid-template-columns: 1fr; }
            .modal-content { width: 95%; padding: 20px 20px 0 20px; }
            .modal-buttons { margin: 20px -20px 0 -20px; padding: 15px 20px; bottom: 0; }
            .payment-entry, .reminder-entry, .extra-cost-entry, .discount-entry { flex-direction: column; align-items: stretch; }
            .global-search-container { width: 100%; }
        }

/* === TOAST ÉRTESÍTÉSEK === */
.toast {
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 5px solid;
}
.toast.show { transform: translateX(0); }
.toast-success { border-left-color: var(--primary-color); }
.toast-error { border-left-color: var(--danger-color); }
.toast i { width: 20px; height: 20px; }
.toast-success i { color: var(--primary-color); }
.toast-error i { color: var(--danger-color); }

/* === TÖLTÉSI ÁLLAPOTOK (SKELETONS) === */
.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
    border-radius: 8px;
    min-height: 20px;
    width: 100%;
}
.skeleton-text { height: 16px; margin-bottom: 8px; width: 80%; }
.skeleton-title { height: 24px; margin-bottom: 12px; width: 50%; }
.skeleton-card { height: 100px; }

@keyframes skeleton-loading {
    0% { background-color: var(--border-color); }
    100% { background-color: var(--light-gray); }
}

/* === SÖTÉT MÓD === */
body.dark-theme {
    --light-gray: #0f172a;
    --border-color: #334155;
    --text-color: #f8fafc;
    --text-muted-color: #94a3b8;
    --card-bg: #1e293b;
    --info-bg: #0f172a;
}
body.dark-theme .search-results-dropdown, 
body.dark-theme .modal-content, 
body.dark-theme .toast {
    background: var(--card-bg);
    border-color: var(--border-color);
}
body.dark-theme header, 
body.dark-theme .item, 
body.dark-theme .dashboard-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}
body.dark-theme .item-actions button, 
body.dark-theme #group-view-controls button {
    background-color: var(--light-gray);
    color: var(--text-color);
}
body.dark-theme .item-actions button:hover { background-color: var(--border-color); }

body.dark-theme .modal-content input, 
body.dark-theme .modal-content label, 
body.dark-theme .modal-content select, 
body.dark-theme .modal-content textarea,
body.dark-theme #passengers-controls input, 
body.dark-theme #passengers-controls select,
body.dark-theme .global-search-container input {
    background-color: var(--light-gray);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-theme .passenger-entry, 
body.dark-theme .payment-entry, 
body.dark-theme .reminder-entry, 
body.dark-theme .extra-cost-entry {
    border-color: var(--border-color);
}
body.dark-theme .extra-cost-entry[data-is-discount="true"] {
    background-color: #064e3b;
    border-color: var(--primary-color);
}
body.dark-theme .extra-cost-entry[data-is-discount="true"] input {
    background-color: #022c22;
    color: #6ee7b7;
}
body.dark-theme #extra-cost-summary-display {
    background-color: var(--light-gray);
    border-color: var(--border-color);
}