:root {
    --color-bg: #141414;
    --color-surface: #212121;
    --color-accent: #415a77;
    --color-primary: white;
    --color-text: #f9feff;
    --color-muted: #c0c0c0;
    --color-success: #14a44d;
    --color-success-hover: #0f8c3c;
    --color-danger: #ff6b6b;
}

body {
    background-color: var(--color-bg);
    color: var(--color-primary);
}

a {
    color: var(--color-primary);
}

.card, .navbar, .form-control, .dropdown-menu {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: none;
}

.form-control {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.form-control::placeholder {
    color: var(--color-muted);
}

.navbar .nav-link,
.dropdown-item {
    color: var(--color-text);
}

.btn-primary {
    background-color: var(--color-primary);
    border: none;
}

.btn-danger {
    background-color: var(--color-danger);
    border: none;
}

.btn-pocketid {
    background-color: var(--color-success);
    color: white;
}

.btn-pocketid:hover {
    background-color: var(--color-success-hover);
}

hr {
    border-top: 1px solid var(--color-accent);
}

/* Bootstrap Overrides für Dark Theme */
.text-muted {
    color: var(--color-muted) !important;
}

.bg-light {
    background-color: var(--color-surface) !important;
}

.text-text {
    color: var(--color-text) !important;
}

.text-primary-emphasis {
    color: var(--color-primary) !important;
}

.border-secondary {
    border-color: rgba(255, 255, 255, 0.2) !important;
}
