: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);

    /* Code Blocks */
    --app-code-bg: rgba(0, 0, 0, 0.05);
    --app-code-color: #d63384;
    --app-pre-bg: #f8f9fa;
    --app-pre-color: #212529;
    --app-pre-border: #dee2e6;

    /* Footer */
    --app-footer-bg: #0388a6;
    --app-footer-text: #ffffff;
    --app-footer-link: #ffffff;
    --app-footer-link-hover: #ffb22c;
    --app-footer-border: rgba(255, 255, 255, 0.2);

    /* Theme Aware Badge Variables - Light Mode */
    --app-badge-warning-bg: rgba(255, 193, 7, 0.1);
    --app-badge-warning-text: #664d03;
    --app-badge-warning-border: rgba(255, 193, 7, 0.4);

    --app-badge-primary-bg: rgba(13, 110, 253, 0.1);
    --app-badge-primary-text: #0a58ca;
    --app-badge-primary-border: rgba(13, 110, 253, 0.4);

    --app-badge-info-bg: rgba(13, 202, 240, 0.1);
    --app-badge-info-text: #087990;
    --app-badge-info-border: rgba(13, 202, 240, 0.4);
}

[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);

    /* Code Blocks */
    --app-code-bg: rgba(255, 255, 255, 0.1);
    --app-code-color: #e685b5;
    --app-pre-bg: #2d3035;
    --app-pre-color: #e0e0e0;
    --app-pre-border: #495057;

    /* Footer */
    --app-footer-bg: #1a1d20;
    --app-footer-text: #adb5bd;
    --app-footer-link: #ffffff;
    --app-footer-link-hover: #ffb22c;
    --app-footer-border: var(--app-border-color);

    /* Theme Aware Badge Variables - Dark Mode */
    --app-badge-warning-bg: rgba(255, 193, 7, 0.15);
    --app-badge-warning-text: #ffda6a;
    --app-badge-warning-border: rgba(255, 193, 7, 0.5);

    --app-badge-primary-bg: rgba(13, 110, 253, 0.2);
    --app-badge-primary-text: #6ea8fe;
    --app-badge-primary-border: rgba(13, 110, 253, 0.5);

    --app-badge-info-bg: rgba(13, 202, 240, 0.2);
    --app-badge-info-text: #6edff6;
    --app-badge-info-border: rgba(13, 202, 240, 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;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100%;
    display: flex;
    align-items: center;
}
.navbar .logo-img {
    height: 60px;
    width: auto;
    max-width: none !important;
    display: block;
    padding: 4px 0;
    box-sizing: border-box;
}
@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}
.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 */
code {
    background-color: var(--app-code-bg) !important;
    color: var(--app-code-color) !important;
}

pre {
    background-color: var(--app-pre-bg) !important;
    color: var(--app-pre-color) !important;
    border: 1px solid var(--app-pre-border) !important;
}

pre code {
    background-color: transparent !important;
    color: inherit !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;
}

/* Theme Utilities */
.bg-theme { background-color: var(--app-bg-body) !important; }
.text-theme { color: var(--app-text-main) !important; }

/* Compact Steps */
.compact-steps .step {
    color: var(--app-step-text, #6c757d);
    background: transparent;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}
.compact-steps .step.active {
    color: #fff !important;
    background-color: var(--bs-primary, #0d6efd) !important;
}
.compact-steps .step.visited {
    color: #fff !important;
    background-color: var(--bs-success, #198754) !important;
}

/* Footer Styling */
.footer {
    background-color: var(--app-footer-bg) !important;
    color: var(--app-footer-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.footer a {
    color: var(--app-footer-link) !important;
    text-decoration: underline;
}

.footer a:hover {
    color: var(--app-footer-link-hover) !important;
}

.footer p, .footer span, .footer small, .footer b, .footer h3, .footer h5, .footer h6, .footer li {
    color: var(--app-footer-text) !important;
}

.footer .border-top {
    border-color: var(--app-footer-border) !important;
}

/* Theme Aware Badge Classes */
.theme-badge-warning {
    background-color: var(--app-badge-warning-bg) !important;
    color: var(--app-badge-warning-text) !important;
    border: 1px solid var(--app-badge-warning-border) !important;
}

.theme-badge-primary {
    background-color: var(--app-badge-primary-bg) !important;
    color: var(--app-badge-primary-text) !important;
    border: 1px solid var(--app-badge-primary-border) !important;
}

.theme-badge-info {
    background-color: var(--app-badge-info-bg) !important;
    color: var(--app-badge-info-text) !important;
    border: 1px solid var(--app-badge-info-border) !important;
}