:root {
    /* Base Colors */
    --app-bg-body: #ffffff;
    --app-text-main: #212529;
    --app-text-muted: #6c757d;
    --app-border-color: #dee2e6;
    --app-border-light: rgba(0, 0, 0, 0.1);

    /* Components */
    --app-card-bg: rgba(255, 255, 255, 0.5); /* #FFF5 */
    --app-card-border: #dee2e6;
    
    /* Sidebar */
    --app-sidebar-bg: #ffffff;
    --app-sidebar-text: rgba(0, 0, 0, 0.67); /* #000a */
    --app-sidebar-active-bg: rgba(0, 0, 0, 0.067); /* #0001 */
    --app-sidebar-border: rgba(0, 0, 0, 0.2); /* #0003 */
    --app-sidebar-hover-bg: rgba(0, 0, 0, 0.05);
    
    /* Navbar */
    --app-navbar-bg: rgba(255, 255, 255, 0.4); /* #FFF6 */
    --app-navbar-shadow: rgba(0, 0, 0, 0.4); /* #0006 */
    
    /* Steps/Design */
    --app-step-bg: #ffffff;
    --app-step-text: #666666;
    --app-step-shadow: rgba(0, 0, 0, 0.4); /* #0006 */
    
    /* Homepage Specifics */
    --app-hero-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --app-ai-gradient: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
    
    /* General Shadows */
    --app-shadow: rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] {
    /* Base Colors */
    --app-bg-body: #212529;
    --app-text-main: #e0e0e0;
    --app-text-muted: #adb5bd;
    --app-border-color: #495057;
    --app-border-light: rgba(255, 255, 255, 0.1);

    /* Components */
    --app-card-bg: rgba(33, 37, 41, 0.6); 
    --app-card-border: #373b3e;
    
    /* Sidebar */
    --app-sidebar-bg: #1a1d20;
    --app-sidebar-text: #e0e0e0;
    --app-sidebar-active-bg: rgba(255, 255, 255, 0.1);
    --app-sidebar-border: #495057;
    --app-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Navbar */
    --app-navbar-bg: rgba(26, 29, 32, 0.85);
    --app-navbar-shadow: rgba(0, 0, 0, 0.8);
    
    /* Steps/Design */
    --app-step-bg: #2c3034;
    --app-step-text: #e0e0e0;
    --app-step-shadow: rgba(0, 0, 0, 0.8);

    /* Homepage Specifics */
    --app-hero-bg: linear-gradient(135deg, #1a1d20 0%, #2c3034 100%);
    --app-ai-gradient: linear-gradient(135deg, #1a2a2d 0%, #2c3e50 100%);
    
    /* General Shadows */
    --app-shadow: rgba(0, 0, 0, 0.5);
}

/* Force override common utility classes in dark mode */
[data-bs-theme="dark"] .bg-white { background-color: var(--app-bg-body) !important; color: var(--app-text-main) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--app-sidebar-bg) !important; color: var(--app-text-main) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--app-text-main) !important; }

/* =========================================
   Overrides
   ========================================= */

/* Global Transition for smooth toggling */
body, .card, .navbar, #sidebar, .nav-link, .step, table, th, td {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Body */
body {
    background-color: var(--app-bg-body) !important;
    color: var(--app-text-main) !important;
}

#bodys {
    background-size: contain;
}

[data-bs-theme="dark"] #bodys {
    background-image: none !important;
}

/* Hardcoded Border/Shadow Fixes for Dark Mode */
[data-bs-theme="dark"] .border-bottom, 
[data-bs-theme="dark"] .border-top, 
[data-bs-theme="dark"] .border-end, 
[data-bs-theme="dark"] .border-start, 
[data-bs-theme="dark"] .border {
    border-color: var(--app-border-color) !important;
}

[data-bs-theme="dark"] .shadow, 
[data-bs-theme="dark"] .shadow-sm, 
[data-bs-theme="dark"] .shadow-lg {
    box-shadow: 0 .5rem 1rem var(--app-shadow) !important;
}

/* Cards */
.card {
    background: var(--app-card-bg) !important;
    border-color: var(--app-card-border) !important;
    color: var(--app-text-main);
}
.card-header, .card-footer {
    background-color: transparent !important;
    border-color: var(--app-border-color) !important;
}

/* Sidebar */
#sidebar {
    background-color: var(--app-sidebar-bg) !important;
}

#menu > li > a {
    background: var(--app-sidebar-bg);
    color: var(--app-sidebar-text);
    border: none; 
}

#menu > li > a:hover {
    background-color: var(--app-sidebar-hover-bg);
}

#menu > li > a.active {
    background: var(--app-sidebar-active-bg) !important;
    color: var(--app-text-main) !important;
}

#sidebar #sidebarCollapse {
    background: var(--app-sidebar-bg);
    border-color: var(--app-sidebar-border);
    color: var(--app-text-main);
}

#sidebar .nav-link {
    color: var(--app-sidebar-text);
}

#sidebar .active {
    background-color: var(--app-sidebar-active-bg) !important;
    color: var(--app-text-main) !important;
}

/* Sidebar Minified Popup */
#sidebar.minified .collapse {
    background: var(--app-sidebar-bg);
    box-shadow: 5px 5px 10px var(--app-shadow);
}
#sidebar.minified .collapse > li:first-child::before {
    border-left: thin solid var(--app-sidebar-border);
    border-top: thin solid var(--app-sidebar-border);
}
#sidebar .collapse > li::before {
    border-left: thin solid var(--app-sidebar-border);
    border-bottom: thin solid var(--app-sidebar-border);
}

/* Navbar */
.navbar {
    background: var(--app-navbar-bg) !important;
    box-shadow: 0 0px 5px -2px var(--app-navbar-shadow) !important;
}
.navbar-brand, .nav-link {
    color: var(--app-text-main) !important;
}
.navbar-toggler {
    border-color: var(--app-border-color);
}
.navbar-toggler-icon {
    filter: invert(var(--bs-theme-invert, 0)); 
}
[data-bs-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* Steps (Arrow Head) */
.aro-head .step {
    background-color: var(--app-step-bg);
    color: var(--app-step-text);
    box-shadow: 0 0px 1px var(--app-step-shadow);
}
.aro-head .step:not(.active):not(.visited):after {
    border-left-color: var(--app-step-bg) !important;
}
.aro-head .step:not(:first-child):before {
    border-top-color: var(--app-step-bg);
    border-bottom-color: var(--app-step-bg);
    border-right-color: var(--app-step-bg);
}

/* Tables */
.table {
    color: var(--app-text-main);
    border-color: var(--app-border-color);
}
.table > :not(caption) > * > * {
    background-color: transparent; /* Let body/card bg show through or handle specifically */
    color: var(--app-text-main);
    border-bottom-color: var(--app-border-color);
}

/* Modals */
.modal-content {
    background-color: var(--app-step-bg); /* Use step bg (solid card-like) */
    border-color: var(--app-border-color);
}
.modal-header, .modal-footer {
    border-color: var(--app-border-color);
}
.btn-close {
    filter: invert(var(--bs-theme-invert, 0));
}
[data-bs-theme="dark"] .btn-close {
    filter: invert(1);
}

/* Lists */
.cusUList li {
    border-bottom: 1px solid var(--app-border-light);
}
.cusUList li:first-child {
    border-top: 1px solid var(--app-border-light);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--app-step-bg);
    border-color: var(--app-border-color);
}
.dropdown-item {
    color: var(--app-text-main);
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--app-sidebar-active-bg);
    color: var(--app-text-main);
}

/* Accessibility & Utility Overrides */

/* Image Inversion for simple black icons */
[data-bs-theme="dark"] img.invert-on-dark {
    filter: invert(1) hue-rotate(180deg);
}

/* Focus Rings */
:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Code Blocks */
pre, code {
    background-color: var(--app-border-light) !important;
    color: var(--bs-info) !important;
}

[data-bs-theme="dark"] pre, [data-bs-theme="dark"] code {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Markdown Specifics (Evaluation View) */
.markdown-body {
    color: var(--app-text-main) !important;
}
.markdown-body pre {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--app-border-color);
}

/* Profile Card in Sidebar */
.profile-card {
    background-color: var(--app-sidebar-hover-bg) !important;
    border-color: var(--app-sidebar-border) !important;
    color: var(--app-text-main) !important;
}