/* 
   MaltoSpeak Dark Mode Refined
   Focus: High contrast, mathematical harmony, and full component coverage.
*/

:root {
    --ds-level-0: #070b14; /* Deepest background */
    --ds-level-1: #111827; /* Section background */
    --ds-level-2: #1f2937; /* Card/Surface background */
    --ds-level-3: #374151; /* Relief/Hover background */
    
    --ds-border: rgba(255, 255, 255, 0.08); 
    --ds-text-main: #f9fafb;     
    --ds-text-muted: #9ca3af;    
    --ds-accent: #38bdf8; 
}

/* 1. Global Reset for Dark Mode */
html.dark-mode, 
html.dark-mode body,
html.dark-mode .main {
    background-color: var(--ds-level-0) !important;
    color: var(--ds-text-main) !important;
}

/* 2. Section Layering */
html.dark-mode section {
    background-color: var(--ds-level-0) !important;
}

html.dark-mode .gray-light-bg,
html.dark-mode .bg-light:not(.card):not(.badge) {
    background-color: var(--ds-level-1) !important;
    border-color: var(--ds-border) !important;
}

/* 3. Surface & Components */
html.dark-mode .card,
html.dark-mode .modal-content,
html.dark-mode .dropdown-menu,
html.dark-mode .hs-sub-menu,
html.dark-mode .accordion-item,
html.dark-mode .list-group-item {
    background-color: var(--ds-level-2) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text-main) !important;
}

html.dark-mode .card-header,
html.dark-mode .modal-header,
html.dark-mode .accordion-button,
html.dark-mode thead th {
    background-color: var(--ds-level-3) !important;
    color: #ffffff !important;
    border-color: var(--ds-border) !important;
}

/* 4. Navigation Refinement */
html.dark-mode .main-header-menu-wrap {
    background-color: rgba(7, 11, 20, 0.8) !important;
    border-bottom: 1px solid var(--ds-border) !important;
}

html.dark-mode .nav-link {
    color: var(--ds-text-muted) !important;
}

html.dark-mode .nav-link:hover,
html.dark-mode .nav-link.active {
    color: #ffffff !important;
}

/* Mobile Menu Dark Mode */
@media (max-width: 991px) {
    html.dark-mode .navbar-collapse {
        background-color: var(--ds-level-1) !important;
        border-color: var(--ds-border) !important;
    }
}

/* 5. Typography */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, 
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode .text-dark,
html.dark-mode strong {
    color: #ffffff !important;
}

html.dark-mode p, 
html.dark-mode .text-muted,
html.dark-mode .text-secondary {
    color: var(--ds-text-muted) !important;
}

/* 6. Forms & Inputs */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode textarea {
    background-color: var(--ds-level-0) !important;
    border-color: var(--ds-border) !important;
    color: #ffffff !important;
}

html.dark-mode .input-group-text {
    background-color: var(--ds-level-3) !important;
    border-color: var(--ds-border) !important;
    color: #ffffff !important;
}

/* 7. Specific Overrides */
html.dark-mode .shout-bubble {
    background-color: var(--ds-level-1) !important;
    border-color: var(--ds-border) !important;
}

html.dark-mode .shout-content {
    color: var(--ds-text-muted) !important;
}

html.dark-mode .table {
    color: var(--ds-text-main) !important;
}

html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Fix for the theme toggle button visibility */
html.dark-mode #theme-toggle i {
    color: var(--ms-warning) !important;
}

/* Scrollbar */
html.dark-mode ::-webkit-scrollbar { width: 8px; }
html.dark-mode ::-webkit-scrollbar-track { background: var(--ds-level-0); }
html.dark-mode ::-webkit-scrollbar-thumb { background: var(--ds-level-3); border-radius: 10px; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--ds-level-2); }