/* ============================================
   Dark Mode Design Tokens
   ============================================ */
:root {
    --bg-primary: #0f1117;
    --bg-surface: #1a1d27;
    --bg-surface-hover: #242836;
    --bg-surface-alt: #151822;
    --bg-input: #242836;
    --border: #2d3148;
    --border-focus: #4f8ff7;
    --text-primary: #e8eaf0;
    --text-secondary: #8b90a0;
    --text-heading: #f0f2f7;
    --accent: #4f8ff7;
    --accent-hover: #3a7ae0;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.4);
}

/* ============================================
   Global Overrides
   ============================================ */
html, body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ============================================
   Form Controls
   ============================================ */
.form-control,
.form-select {
    background-color: var(--bg-input);
    border-color: var(--border);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-input);
    border-color: var(--border-focus);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(79, 143, 247, 0.25);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--text-secondary);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly] {
    background-color: var(--bg-surface-alt);
    border-color: var(--border);
    color: var(--text-secondary);
    opacity: 0.7;
}

.form-label {
    color: var(--text-secondary);
}

.form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-range {
    background: transparent;
}

.form-range::-webkit-slider-runnable-track {
    background-color: var(--border);
}

.form-range::-moz-range-track {
    background-color: var(--border);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--accent);
}

.form-range::-moz-range-thumb {
    background-color: var(--accent);
}

/* ============================================
   Buttons
   ============================================ */
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.btn-secondary {
    background-color: var(--bg-surface-hover);
    border-color: var(--border);
    color: var(--text-primary);
}

.btn-secondary:hover,
.btn-secondary:active {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--text-primary);
}

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

.btn-danger:hover,
.btn-danger:active {
    background-color: #e05555;
    border-color: #e05555;
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-outline-secondary {
    border-color: var(--border);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    background-color: var(--bg-surface-hover);
    border-color: var(--border);
    color: var(--text-primary);
}

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

.btn-outline-danger:hover,
.btn-outline-danger:active {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-link {
    color: var(--accent);
}

.btn-link:hover {
    color: var(--accent-hover);
}

.btn-close {
    filter: invert(1);
}

/* ============================================
   Alerts
   ============================================ */
.alert-success {
    background-color: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--success);
}

.alert-danger {
    background-color: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--danger);
}

/* ============================================
   Tables
   ============================================ */
.table {
    color: var(--text-primary);
    background-color: transparent;
    border-color: var(--border);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--border);
    color: var(--text-primary);
}

/* ============================================
   Progress Bars
   ============================================ */
.progress {
    background-color: var(--bg-surface-alt);
}

.progress-bar {
    background-color: var(--accent);
}

.progress-bar.bg-success {
    background-color: var(--success) !important;
}

.progress-bar.bg-info {
    background-color: var(--info) !important;
}

.progress-bar.bg-warning {
    background-color: var(--warning) !important;
}

.progress-bar.bg-danger {
    background-color: var(--danger) !important;
}

/* ============================================
   Modals
   ============================================ */
.modal-content {
    background-color: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-primary);
}

.modal-header {
    border-bottom-color: var(--border);
}

.modal-footer {
    border-top-color: var(--border);
}

/* ============================================
   Typography & Misc
   ============================================ */
.text-muted {
    color: var(--text-secondary) !important;
}

hr,
.dropdown-divider {
    border-color: var(--border);
}

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

a:hover {
    color: var(--accent-hover);
}

code {
    color: var(--accent);
    background-color: var(--bg-surface-alt);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

pre {
    background-color: var(--bg-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 0.375rem;
}

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

/* ============================================
   Cards
   ============================================ */
.card {
    background-color: var(--bg-surface);
    border-color: var(--border);
}

.card-header {
    background-color: var(--bg-surface);
    border-bottom-color: var(--border);
}

.card-title {
    color: var(--text-heading);
}

/* ============================================
   Text Utility Classes
   ============================================ */
.text-primary {
    color: var(--accent) !important;
}

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

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

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

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

/* ============================================
   Spinner
   ============================================ */
.spinner-border {
    color: var(--accent);
}