/* Dark Mode Styles */
html.dark-mode body {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

html.dark-mode body .bg-white {
    background-color: #1e1e1e !important;
}

html.dark-mode body .bg-light {
    background-color: #252525 !important;
}

html.dark-mode body .card,
html.dark-mode body .modal-content,
html.dark-mode body .dropdown-menu,
html.dark-mode body .popover {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

html.dark-mode body .card-header,
html.dark-mode body .card-footer,
html.dark-mode body .modal-header,
html.dark-mode body .modal-footer {
    background-color: #252525 !important;
    border-color: #333 !important;
}

html.dark-mode body .form-control {
    background-color: #2c2c2c !important;
    border-color: #444 !important;
    color: #fff !important;
}

html.dark-mode body .form-control:focus {
    background-color: #333 !important;
    border-color: #666 !important;
    color: #fff !important;
}

html.dark-mode body .text-body,
html.dark-mode body .text-muted,
html.dark-mode body .text-secondary {
    color: #b0b0b0 !important;
}

html.dark-mode body .text-dark {
    color: #e0e0e0 !important;
}

html.dark-mode body a.text-body:hover {
    color: #fff !important;
}

html.dark-mode body .border,
html.dark-mode body .border-top,
html.dark-mode body .border-bottom,
html.dark-mode body .border-left,
html.dark-mode body .border-right {
    border-color: #333 !important;
}

html.dark-mode body .table {
    color: #e0e0e0 !important;
}

html.dark-mode body .table td,
html.dark-mode body .table th {
    border-color: #333 !important;
}

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

html.dark-mode body .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.075) !important;
}

html.dark-mode body .sidebar {
    background-color: #1e1e1e !important;
    border-right-color: #333 !important;
}

html.dark-mode body .sidebar .sidebar-menu-item.active>.sidebar-menu-button {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

html.dark-mode body .navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

html.dark-mode body .navbar-light .navbar-nav .nav-link:hover {
    color: #fff !important;
}

html.dark-mode body .dropdown-item {
    color: #e0e0e0 !important;
}

html.dark-mode body .dropdown-item:hover,
html.dark-mode body .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

html.dark-mode body .page-section {
    background-color: #121212 !important;
}

/* Scrollbar opacity fix for dark mode */
html.dark-mode ::-webkit-scrollbar-track {
    background: #1e1e1e;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #555;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #888;
}

html.dark-mode body .text-70,
html.dark-mode body .text-50,
html.dark-mode body .text-black-70,
html.dark-mode body .text-black-50 {
    color: #b0b0b0 !important;
}

html.dark-mode body h1,
html.dark-mode body h2,
html.dark-mode body h3,
html.dark-mode body h4,
html.dark-mode body h5,
html.dark-mode body h6,
html.dark-mode body .h1,
html.dark-mode body .h2,
html.dark-mode body .h3,
html.dark-mode body .h4,
html.dark-mode body .h5,
html.dark-mode body .h6 {
    color: #f1f1f1 !important;
}

/* Card titles and other specific headings */
html.dark-mode body .card-title,
html.dark-mode body .page-separator__text,
html.dark-mode body .font-weight-medium,
html.dark-mode body .text-black,
html.dark-mode body .nav-link:not(.btn) {
    color: #f1f1f1 !important;
}

html.dark-mode body .page-separator__text {
    background-color: #121212 !important;
}

html.dark-mode body .bg-white .page-separator__text,
html.dark-mode body .card .page-separator__text {
    background-color: #1e1e1e !important;
}

html.dark-mode body .bg-light .page-separator__text {
    background-color: #252525 !important;
}

/* Accordion Specific */
html.dark-mode body .accordion .card {
    border-color: #333 !important;
    background-color: #1e1e1e !important;
}

html.dark-mode body .accordion .card-header {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

html.dark-mode body .accordion .btn-link {
    color: #e0e0e0 !important;
}

html.dark-mode body .accordion .btn-link:hover {
    color: #fff !important;
    background-color: #2a2a2a !important;
}

html.dark-mode body .accordion .card-body {
    color: #b0b0b0 !important;
}

/* Form Visibility Fixes */
html.dark-mode body .form-label {
    color: #e0e0e0 !important;
}

html.dark-mode body p,
html.dark-mode body span,
html.dark-mode body .form-group p,
html.dark-mode body .form-group span {
    color: #b0b0b0 !important;
}

html.dark-mode body a:not(.btn) {
    color: #3d95ff !important;
}

html.dark-mode body a.small,
html.dark-mode body .small a {
    color: #3d95ff !important; /* Lighter blue for visibility */
}

html.dark-mode body a.small:hover,
html.dark-mode body .small a:hover {
    color: #55aaff !important;
    text-decoration: underline !important;
}

/* Ensure inputs are dark even if autofilled */
html.dark-mode body .form-control:-webkit-autofill,
html.dark-mode body .form-control:-webkit-autofill:hover, 
html.dark-mode body .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px #2c2c2c inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Register Page Specifics */
html.dark-mode body .register-card {
    background-color: #1e1e1e !important;
    color: #f1f1f1 !important;
}

html.dark-mode body .section-title {
    color: #3d95ff !important; /* Stand out as a header */
}

html.dark-mode body .modern-input {
    background-color: #2c2c2c !important;
    border-color: #444 !important;
    color: #fff !important;
}

html.dark-mode body .modern-input:focus {
    border-color: #3d95ff !important;
    box-shadow: 0 0 0 3px rgba(61, 149, 255, 0.2) !important;
}

html.dark-mode body .form-check-label {
    color: #b0b0b0 !important;
}

html.dark-mode body .form-check-label a {
    color: #3d95ff !important;
}

html.dark-mode body .text-primary,
html.dark-mode body a:not(.btn).text-primary {
    color: #3d95ff !important;
}

html.dark-mode body .form-text.text-muted {
    color: #b0b0b0 !important;
}

html.dark-mode body .form-text.text-danger {
    color: #ff5b5b !important;
}