/* Theme variables for popup and cards */
:root {
    --app-overlay-bg: rgba(30,41,59,0.85);
    --app-card-bg: #f8fafc;
    --app-card-text: #1e293b;
    --app-input-bg: #e2e8f0;
    --app-input-text: #1e293b;
    --app-label-text: #334155;
}

body.light-mode {
    background: #f8fafc;
    color: #1e293b;
}
body.dark-mode {
    background: #1e293b;
    color: #f8fafc;
}

.popup {
    background: var(--app-overlay-bg) !important;
}
.popup-content {
    background: var(--app-card-bg) !important;
    color: var(--app-card-text) !important;
}
.popup-content label,
#user-popup-title {
    color: var(--app-label-text) !important;
}
.popup-content input,
.popup-content select {
    background: var(--app-input-bg) !important;
    color: var(--app-input-text) !important;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 12px;
    width: 90%;
    font-size: 1em;
}

.card {
    background: var(--app-card-bg);
    color: var(--app-card-text);
    box-shadow: 0 2px 8px #333;
    border-radius: 8px;
}

.btn {
    background: #1e293b;
    color: #f8fafc;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
}
.btn.cancel-btn {
    background: #e11d48;
    color: #fff;
}