/* =====================================================
   DARK THEME OVERRIDE LAYER
   Loaded after bootstrap.min.css, before style.css
   Overrides Bootstrap CSS variables and utility classes
   ===================================================== */

/* 1. Dark Mode Design Tokens */
:root {
    /* Bootstrap variable overrides */
    --bs-primary: #7c3aed;
    --bs-secondary: #22d3ee;
    --bs-success: #10b981;
    --bs-info: #3b82f6;
    --bs-warning: #f59e0b;
    --bs-danger: #ef4444;
    --bs-light: #1c1c35;
    --bs-dark: #07070e;
    --bs-white: #f1f5f9;
    --bs-body-rgb: 7, 7, 14;
    --bs-body-color: #94a3b8;
    --bs-body-bg: #07070e;
    --bs-primary-rgb: 124, 58, 237;
    --bs-secondary-rgb: 34, 211, 238;

    /* Custom dark mode tokens */
    --dm-bg-deepest: #07070e;
    --dm-bg-deep: #0d0d1a;
    --dm-bg-surface: #141425;
    --dm-bg-elevated: #1c1c35;
    --dm-bg-hover: #252545;
    --dm-accent-primary: #7c3aed;
    --dm-accent-primary-rgb: 124, 58, 237;
    --dm-accent-secondary: #22d3ee;
    --dm-accent-secondary-rgb: 34, 211, 238;
    --dm-accent-tertiary: #f472b6;
    --dm-text-primary: #f1f5f9;
    --dm-text-secondary: #94a3b8;
    --dm-text-muted: #64748b;
    --dm-border: #1e1e3a;
    --dm-border-glow: rgba(124, 58, 237, 0.3);
}

/* 2. Body base */
body {
    background-color: var(--dm-bg-deepest) !important;
    color: var(--dm-text-secondary) !important;
}

/* 3. Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--dm-text-primary) !important;
}

/* 4. Links */
a {
    color: var(--dm-accent-secondary);
}
a:hover {
    color: var(--dm-accent-primary);
}

/* 5. Bootstrap bg- utility overrides */
.bg-primary { background-color: var(--dm-accent-primary) !important; }
.bg-secondary { background-color: var(--dm-accent-secondary) !important; }
.bg-light { background-color: var(--dm-bg-surface) !important; }
.bg-dark { background-color: var(--dm-bg-deep) !important; }
.bg-white { background-color: var(--dm-bg-surface) !important; }

/* 6. Bootstrap text- utility overrides */
.text-primary { color: var(--dm-accent-primary) !important; }
.text-secondary { color: var(--dm-accent-secondary) !important; }
.text-light { color: var(--dm-text-secondary) !important; }
.text-dark { color: var(--dm-text-primary) !important; }
.text-white { color: var(--dm-text-primary) !important; }
.text-white-50 { color: rgba(241, 245, 249, 0.5) !important; }
.text-muted { color: var(--dm-text-muted) !important; }
.text-body { color: var(--dm-text-secondary) !important; }

/* 7. Bootstrap btn- overrides */
.btn-primary {
    background-color: var(--dm-accent-primary) !important;
    border-color: var(--dm-accent-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #6d28d9 !important;
    border-color: #6d28d9 !important;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
    color: #fff !important;
}

.btn-secondary {
    background-color: var(--dm-accent-secondary) !important;
    border-color: var(--dm-accent-secondary) !important;
    color: #0d0d1a !important;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #06b6d4 !important;
    border-color: #06b6d4 !important;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
    color: #0d0d1a !important;
}

.btn-light {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
.btn-light:hover {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-text-primary) !important;
}

.btn-dark {
    background-color: var(--dm-bg-deep) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

.btn-outline-primary {
    color: var(--dm-accent-primary) !important;
    border-color: var(--dm-accent-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--dm-accent-primary) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
}

.btn-outline-secondary {
    color: var(--dm-accent-secondary) !important;
    border-color: var(--dm-accent-secondary) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--dm-accent-secondary) !important;
    color: #0d0d1a !important;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}

/* 8. Border overrides */
.border { border-color: var(--dm-border) !important; }
.border-primary { border-color: var(--dm-accent-primary) !important; }
.border-secondary { border-color: var(--dm-accent-secondary) !important; }
.border-white { border-color: var(--dm-border) !important; }
.border-top { border-top-color: var(--dm-border) !important; }
.border-bottom { border-bottom-color: var(--dm-border) !important; }

/* 9. Form controls */
.form-control,
.form-select {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--dm-bg-hover) !important;
    border-color: var(--dm-accent-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25),
                0 0 15px rgba(124, 58, 237, 0.15) !important;
    color: var(--dm-text-primary) !important;
}
.form-control::placeholder {
    color: var(--dm-text-muted) !important;
}

/* 10. Dropdown menus */
.dropdown-menu {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.dropdown-item {
    color: var(--dm-text-secondary) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-accent-secondary) !important;
}

/* 11. Cards */
.card {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
}

/* 12. Tables */
.table {
    color: var(--dm-text-secondary);
    border-color: var(--dm-border);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--dm-text-secondary);
    border-bottom-color: var(--dm-border);
}

/* 13. Breadcrumb */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--dm-text-muted) !important;
}
.breadcrumb-item a {
    color: var(--dm-accent-secondary) !important;
}
.breadcrumb-item.active {
    color: var(--dm-text-primary) !important;
}

/* 14. Horizontal rules */
hr {
    color: var(--dm-border);
    opacity: 0.5;
}

/* 15. List groups */
.list-group-item {
    background-color: var(--dm-bg-surface);
    border-color: var(--dm-border);
    color: var(--dm-text-secondary);
}

/* 16. Paragraph text color */
p {
    color: var(--dm-text-secondary);
}

/* 17. Shadow override */
.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
}