/* Dark Theme Styles */

/* Body and background */
body {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

/* Containers */
.container,
.container-fluid {
    color: #e0e0e0 !important;
}

/* Navigation (legacy navbar, if any) */
.navbar {
    background-color: #1f1f1f !important;
}

/* Sidebar dark mode — darker variant */
.sidebar {
    --sidebar-bg: #111827;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sidebar-submenu-bg: rgba(0, 0, 0, 0.25);
    background-color: var(--sidebar-bg) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
}

/* Mobile top bar */
.main-topbar {
    background-color: #111827 !important;
}

/* Cards */
.card {
    background-color: #1f1f1f !important;
    border-color: #404040 !important;
}

.card-header {
    background-color: #333333 !important;
    border-bottom: 1px solid #404040 !important;
    color: #e0e0e0 !important;
}

.card-body {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
}

.card.border-0 {
    background-color: #1f1f1f !important;
}

.card-title {
    color: #e0e0e0 !important;
}

.card-text {
    color: #b0b0b0 !important;
}

/* Forms */
.form-control,
.form-control-sm,
.form-control-lg {
    background-color: #333333 !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.form-control:hover,
.form-control-sm:hover,
.form-control-lg:hover {
    background-color: #3a3a3a !important;
    border-color: #505050 !important;
    color: #e0e0e0 !important;
}

.form-control:focus,
.form-control-sm:focus {
    background-color: #3a3a3a !important;
    border-color: #1266f1 !important;
    color: #e0e0e0 !important;
}

.form-control::placeholder {
    color: #888 !important;
}

.form-select {
    background-color: #333333 !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.form-select option {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

.input-group-text {
    background-color: #333333 !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.form-label {
    color: #e0e0e0 !important;
}

/* Checkboxes and radios */
.form-check-input {
    background-color: #333333 !important;
    border-color: #555 !important;
}

.form-check-input:checked {
    background-color: #1266f1 !important;
    border-color: #1266f1 !important;
}

.form-check-label {
    color: #e0e0e0 !important;
}

/* Validation */
.invalid-feedback {
    color: #ff6b6b !important;
}

.valid-feedback {
    color: #51cf66 !important;
}

/* Tables */
.table {
    color: #e0e0e0 !important;
    --bs-table-bg: transparent !important;
}

.table th {
    color: #e0e0e0 !important;
    background-color: #333333 !important;
}

.table td {
    background-color: transparent !important;
    border-color: #404040 !important;
}

.table > :not(caption) > * > * {
    border-bottom-color: #404040 !important;
}

.table-bordered > :not(caption) > * {
    border-color: #404040 !important;
}

.table-bordered > :not(caption) > * > * {
    border-color: #404040 !important;
}

.table-light,
.table-light th,
.table-light td {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

/* Table-dark in dark mode: slightly lighter to differentiate from page bg */
.table-dark,
.table-dark th,
.table-dark td,
thead.table-dark th {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #e0e0e0 !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #e0e0e0 !important;
}

/* Preserve contextual colors on hover */
.table-hover > tbody > tr.table-warning:hover > * {
    background-color: rgba(249, 168, 37, 0.25) !important;
    color: #f9a825 !important;
}

.table-hover > tbody > tr.table-danger:hover > * {
    background-color: rgba(220, 53, 69, 0.25) !important;
    color: #ff6b6b !important;
}

.table-hover > tbody > tr.table-success:hover > * {
    background-color: rgba(0, 183, 74, 0.25) !important;
    color: #51cf66 !important;
}

/* Detail/collapse rows: don't let outer table-hover override nested content */
.table-hover > tbody > tr.detail-row:hover > * {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

/* Nested table warning/danger rows keep their colors even when parent is hovered */
.detail-row .table-warning td {
    color: #f9a825 !important;
}

.detail-row .table-danger td {
    color: #ff6b6b !important;
}

.detail-row .table-warning .text-orange {
    color: #f9a825 !important;
}

.detail-row .table-danger .text-danger {
    color: #ff6b6b !important;
}

.detail-row .table-light td {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

/* Table contextual classes */
.table-active,
.table-active > th,
.table-active > td {
    background-color: rgba(18, 102, 241, 0.15) !important;
}

.table-success,
.table-success > th,
.table-success > td {
    background-color: rgba(0, 183, 74, 0.15) !important;
    color: #51cf66 !important;
}

.table-info,
.table-info > th,
.table-info > td {
    background-color: rgba(57, 192, 237, 0.15) !important;
    color: #74d0f1 !important;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td,
thead.table-secondary th {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

.table-warning,
.table-warning > th,
.table-warning > td {
    background-color: rgba(249, 168, 37, 0.15) !important;
    color: #f9a825 !important;
}

.table-danger,
.table-danger > th,
.table-danger > td {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #ff6b6b !important;
}

.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: rgba(18, 102, 241, 0.15) !important;
    color: #74a9f9 !important;
}

.table-group-divider {
    border-top-color: #555 !important;
}

/* Table responsive wrapper */
.table-responsive {
    color: #e0e0e0 !important;
}

/* Dropdowns */
.dropdown-menu {
    background-color: #1f1f1f !important;
    border-color: #404040 !important;
}

.dropdown-item {
    color: #e0e0e0 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #333333 !important;
    color: #ffffff !important;
}

.dropdown-divider {
    border-color: #404040 !important;
}

/* Modals */
.modal-content {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
}

.modal-header {
    border-bottom: 1px solid #404040 !important;
    color: #e0e0e0 !important;
}

.modal-body {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
}

.modal-footer {
    background-color: #252525 !important;
    border-top: 1px solid #404040 !important;
}

.modal-backdrop.show {
    opacity: 0.7 !important;
}

/* Alerts (legacy — kept for non-flash alert usage) */
.alert {
    color: #e0e0e0 !important;
}

.alert-info {
    background-color: #2d5a87 !important;
    border-color: #39c0ed !important;
}

.alert-warning {
    background-color: #8b6914 !important;
    border-color: #f9a825 !important;
}

.alert-success {
    background-color: #1e6f40 !important;
    border-color: #00b74a !important;
}

.alert-danger {
    background-color: #8b2635 !important;
    border-color: #dc3545 !important;
}

.alert-secondary {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #b0b0b0 !important;
}

.alert-light {
    background-color: #333333 !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.alert-primary {
    background-color: #1a3a6a !important;
    border-color: #1266f1 !important;
}

.alert .btn-close {
    filter: invert(1) !important;
}

/* Flash Banners — Dark Theme */
.flash-success {
    background: #14332a;
    border-left: 4px solid #22c55e;
}
.flash-success .flash-icon { color: #4ade80; }
.flash-success .flash-msg  { color: #bbf7d0; }
.flash-success .flash-close { color: #bbf7d0; }
.flash-success .flash-progress { background: #1a3d2e; }
.flash-success .flash-progress-bar { background: #22c55e; }

.flash-danger {
    background: #3b1419;
    border-left: 4px solid #ef4444;
}
.flash-danger .flash-icon { color: #f87171; }
.flash-danger .flash-msg  { color: #fecaca; }
.flash-danger .flash-close { color: #fecaca; }
.flash-danger .flash-progress { background: #451a1f; }
.flash-danger .flash-progress-bar { background: #ef4444; }

.flash-warning {
    background: #362a10;
    border-left: 4px solid #f59e0b;
}
.flash-warning .flash-icon { color: #fbbf24; }
.flash-warning .flash-msg  { color: #fde68a; }
.flash-warning .flash-close { color: #fde68a; }
.flash-warning .flash-progress { background: #3d3015; }
.flash-warning .flash-progress-bar { background: #f59e0b; }

.flash-info {
    background: #1a2740;
    border-left: 4px solid #3b82f6;
}
.flash-info .flash-icon { color: #60a5fa; }
.flash-info .flash-msg  { color: #bfdbfe; }
.flash-info .flash-close { color: #bfdbfe; }
.flash-info .flash-progress { background: #1e3350; }
.flash-info .flash-progress-bar { background: #3b82f6; }

.flash-success .flash-msg a { color: #bbf7d0; }
.flash-danger .flash-msg a  { color: #fecaca; }
.flash-warning .flash-msg a { color: #fde68a; }
.flash-info .flash-msg a    { color: #bfdbfe; }

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item {
    color: #b0b0b0 !important;
}

.breadcrumb-item.active {
    color: #e0e0e0 !important;
}

.breadcrumb-item a {
    color: #1266f1 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #b0b0b0 !important;
}

/* Buttons */
.btn-outline-primary {
    border-color: #1266f1 !important;
    color: #1266f1 !important;
}

.btn-outline-primary:hover {
    background-color: #1266f1 !important;
    color: #ffffff !important;
}

.btn-outline-secondary {
    border-color: #6c757d !important;
    color: #9a9da0 !important;
}

.btn-outline-secondary:hover {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.btn-outline-danger {
    border-color: #dc3545 !important;
    color: #ff6b6b !important;
}

.btn-outline-danger:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.btn-outline-success {
    border-color: #00b74a !important;
    color: #51cf66 !important;
}

.btn-outline-success:hover {
    background-color: #00b74a !important;
    color: #ffffff !important;
}

.btn-outline-info {
    border-color: #39c0ed !important;
    color: #5fd4f4 !important;
}

.btn-outline-info:hover {
    background-color: #39c0ed !important;
    color: #ffffff !important;
}

.btn-outline-warning {
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

.btn-outline-warning:hover {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.btn-close {
    filter: invert(1) !important;
}

/* Badges */
.badge.bg-primary {
    background-color: #1266f1 !important;
    color: #ffffff !important;
}

.badge.bg-success {
    background-color: #00b74a !important;
    color: #ffffff !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.badge.bg-info {
    background-color: #39c0ed !important;
    color: #ffffff !important;
}

.badge.bg-warning {
    background-color: #f9a825 !important;
    color: #1a1a1a !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.badge.bg-light {
    background-color: #404040 !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

.badge.bg-light.text-dark {
    color: #e0e0e0 !important;
}

.badge.bg-light.text-primary {
    color: #5e9aff !important;
}

/* Text colors */
.text-primary {
    color: #1266f1 !important;
}

.text-secondary {
    color: #b0b0b0 !important;
}

.text-info {
    color: #39c0ed !important;
}

.text-success {
    color: #00b74a !important;
}

.text-warning {
    color: #f9a825 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.text-orange {
    color: #f9a825 !important;
}

.text-muted {
    color: #b0b0b0 !important;
}

.text-gray-800 {
    color: #b0b0b0 !important;
}

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

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

.text-white {
    color: #ffffff !important;
}

.fw-semibold,
.fw-bold,
strong {
    color: inherit !important;
}

/* Invoice aging bucket backgrounds — dark mode */
.aging-bucket-current   { background: rgba(25, 135, 84, .15) !important; }
.aging-bucket-1-30      { background: rgba(255, 193, 7, .15) !important; }
.aging-bucket-31-60     { background: rgba(253, 126, 20, .15) !important; }
.aging-bucket-61-90     { background: rgba(220, 53, 69, .15) !important; }
.aging-bucket-90-plus   { background: rgba(220, 53, 69, .25) !important; }
.aging-bucket-total     { background: rgba(255, 255, 255, .06) !important; }

/* Orange text (31-60 day aging) */
.text-orange {
    color: #fd7e14 !important;
}

/* Nav Tabs */
.nav-tabs {
    border-bottom-color: #404040 !important;
}

.nav-tabs .nav-link {
    color: #b0b0b0 !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: #e0e0e0 !important;
    border-color: #555 #555 #404040 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.nav-tabs .nav-link.active {
    color: #e0e0e0 !important;
    background-color: #1f1f1f !important;
    border-color: #404040 #404040 #1f1f1f !important;
}

/* Nav Pills */
.nav-pills .nav-link {
    color: #b0b0b0 !important;
}

.nav-pills .nav-link.active {
    background-color: #1266f1 !important;
    color: #ffffff !important;
}

/* Background colors */
.bg-light {
    background-color: #333333 !important;
}

.bg-white {
    background-color: #1f1f1f !important;
}

/* Card headers/footers with bg-white should stay differentiated from card body */
.card-header.bg-white,
.card-footer.bg-white {
    background-color: #333333 !important;
}

/* Accordion buttons with bg-white */
.accordion-button.bg-white {
    background-color: #333333 !important;
}

.bg-body {
    background-color: #2a2a2a !important;
}

/* Accordion */
.accordion-item {
    background-color: #1f1f1f !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.accordion-button {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

.accordion-button:not(.collapsed) {
    background-color: #2a3a5a !important;
    color: #e0e0e0 !important;
}

.accordion-button::after {
    filter: invert(1) !important;
}

.accordion-body {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
}

.accordion-collapse {
    background-color: #1f1f1f !important;
}

.accordion .card-header:hover {
    background-color: #3a3a3a !important;
}

/* List groups */
.list-group-item {
    background-color: #1f1f1f !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.list-group-item:hover {
    background-color: #333333 !important;
}

/* Progress bars */
.progress {
    background-color: #404040 !important;
}

.progress-bar {
    color: #ffffff !important;
}

/* Spinners */
.spinner-border {
    color: inherit !important;
}

/* Form text and help */
.form-text {
    color: #b0b0b0 !important;
}

/* Small text */
small:not(.badge):not(.text-primary):not(.text-secondary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
.small {
    color: #b0b0b0 !important;
}

/* Avatar */
.avatar-sm {
    background-color: #1266f1 !important;
    color: #ffffff !important;
}

/* Borders */
.border {
    border-color: #404040 !important;
}

.border-top {
    border-top-color: #404040 !important;
}

.border-bottom {
    border-bottom-color: #404040 !important;
}

.border-start {
    border-left-color: #404040 !important;
}

.border-end {
    border-right-color: #404040 !important;
}

/* Links */
a {
    color: #1266f1 !important;
}

a:hover {
    color: #5e9aff !important;
}

/* Tooltips */
.tooltip {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

.tooltip .tooltip-arrow {
    border-top-color: #333333 !important;
    border-bottom-color: #333333 !important;
    border-left-color: #333333 !important;
    border-right-color: #333333 !important;
}

.popover {
    background-color: #1f1f1f !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.popover-header {
    background-color: #333333 !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

.popover-body {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
}

/* Button groups */
.btn-group .btn {
    border-color: #404040 !important;
}

/* Stats circles on dashboard */
.rounded-circle {
    background-color: #333333 !important;
}

/* Shadows */
.shadow,
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5) !important;
}

/* Charts */
canvas {
    background-color: #1f1f1f !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #e0e0e0 !important;
}

/* All text elements */
p, span, div, td, th, li {
    color: #e0e0e0 !important;
}

/* Preserve white text on coloured backgrounds */
.bg-primary, .bg-primary *,
.bg-success, .bg-success *,
.bg-danger, .bg-danger *,
.bg-dark, .bg-dark *,
.btn-primary, .btn-primary *,
.btn-success, .btn-success *,
.btn-danger, .btn-danger *,
.btn-dark, .btn-dark * {
    color: #ffffff !important;
}

/* But keep badge text colours correct */
.badge.bg-warning, .badge.bg-warning * {
    color: #1a1a1a !important;
}

/* Icons */
.fas, .far, .fab {
    color: inherit !important;
}

/* Flatpickr calendar dark overrides */
.flatpickr-calendar {
    background: #1f1f1f !important;
    border-color: #404040 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.flatpickr-months,
.flatpickr-month {
    background: #333333 !important;
    color: #e0e0e0 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #333333 !important;
    color: #e0e0e0 !important;
}

.flatpickr-current-month input.cur-year {
    color: #e0e0e0 !important;
}

.flatpickr-weekdays {
    background: #333333 !important;
}

span.flatpickr-weekday {
    background: #333333 !important;
    color: #b0b0b0 !important;
}

.flatpickr-day {
    color: #e0e0e0 !important;
    border-color: transparent !important;
}

.flatpickr-day:hover {
    background: #404040 !important;
    border-color: #404040 !important;
}

.flatpickr-day.today {
    border-color: #1266f1 !important;
}

.flatpickr-day.selected {
    background: #1266f1 !important;
    border-color: #1266f1 !important;
    color: #ffffff !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #555 !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #e0e0e0 !important;
    fill: #e0e0e0 !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #e0e0e0 !important;
}

/* Flatpickr monthSelect plugin */
.flatpickr-monthSelect-month {
    color: #e0e0e0 !important;
}

.flatpickr-monthSelect-month:hover {
    background: #404040 !important;
}

.flatpickr-monthSelect-month.selected {
    background: #1266f1 !important;
    color: #ffffff !important;
}

/* Custom page-specific overrides */

/* Clockify project selector dropdown */
#projectSelectorDropdown {
    background-color: #1f1f1f !important;
    border-color: #404040 !important;
}

#projectSelectorDropdown label:hover {
    background-color: #333333 !important;
}

/* Timesheet grid dark overrides */
.ts-grid input[type="number"] {
    color: #e0e0e0 !important;
    --ts-input-bg: #333333;
}
.ts-grid input[type="number"]:focus {
    background: #333333 !important;
}
.ts-grid input[type="number"]:hover {
    border-color: #555 !important;
}
.ts-grid .project-header td {
    --ts-project-bg: #333333;
    background: #333333 !important;
}
.ts-grid .status-submitted {
    --ts-submitted-bg: rgba(255, 152, 0, 0.15);
    background: rgba(255, 152, 0, 0.15) !important;
}
.ts-grid .status-approved {
    --ts-approved-bg: rgba(0, 183, 74, 0.15);
    background: rgba(0, 183, 74, 0.15) !important;
}
.ts-grid .status-rejected {
    --ts-rejected-bg: rgba(220, 53, 69, 0.15);
    background: rgba(220, 53, 69, 0.15) !important;
}
.save-indicator.saving {
    background: #4a3a1a !important;
    color: #f9a825 !important;
}
.save-indicator.saved {
    background: #1e3a25 !important;
    color: #51cf66 !important;
}
.save-indicator.error {
    background: #3a1a1a !important;
    color: #ff6b6b !important;
}

/* Parent task hierarchy sub-headers */
.ts-grid .parent-task-header td {
    --ts-parent-bg: #2a3040;
    background: #2a3040 !important;
    color: #b0b0b0 !important;
}

/* Inline add row dashed border */
.add-row-inline td {
    border-top-color: #404040 !important;
}

/* Impersonation banner */
.alert-warning.shadow-sm {
    background-color: #3a3520 !important;
    color: #ffd43b !important;
    border-color: #5a4f1a !important;
}
.alert-warning .btn-outline-dark {
    color: #ffd43b !important;
    border-color: #ffd43b !important;
}
.alert-warning .btn-outline-dark:hover {
    background-color: #ffd43b !important;
    color: #1a1a1a !important;
}

/* Resource selector in admin mode */
#resourceSelector {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

/* Weekend columns in timesheet grid */
.ts-grid td.ts-weekend {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #e0e0e0 !important;
}
.ts-grid th.ts-weekend {
    background-color: #262626 !important;
    color: #e0e0e0 !important;
}
.ts-grid .ts-weekend input[type="number"] {
    background-color: transparent !important;
    color: #e0e0e0 !important;
}
.ts-grid .project-header td.ts-weekend {
    background-color: #333333 !important;
}
.ts-grid .parent-task-header td.ts-weekend {
    background-color: #2a3040 !important;
}
/* Daily totals row weekend cells */
.ts-grid tr td.ts-weekend {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Add Task Modal — project/task list selections */
#modalProjectList .list-group-item:hover,
#modalProjectList .list-group-item.active {
    background-color: #2a3a5a !important;
    border-left-color: #1266f1 !important;
    color: #e0e0e0 !important;
}
#modalTaskList .form-check:hover {
    background-color: #2a2a2a !important;
}
#modalTaskList .form-check-label {
    color: #e0e0e0 !important;
}

/* Row delete button */
.ts-row-delete {
    color: #ff6b6b !important;
}

/* Clockify: btn-outline-dark unreadable on dark card headers */
.card-header .btn-outline-dark {
    color: #c0c0c0 !important;
    border-color: #808080 !important;
}
.card-header .btn-outline-dark:hover {
    color: #fff !important;
    background-color: #555 !important;
    border-color: #888 !important;
}

/* Clockify Import Timeline (dark mode) */
.clockify-timeline::before {
    background: #404040 !important;
}
.timeline-content {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}
.timeline-item-latest .timeline-content {
    border-left-color: #1266f1 !important;
}

/* Lazy-load spinner (dark mode) */
.lazy-spinner .text-primary {
    color: #6ea8fe !important;
}
.lazy-spinner .lazy-text {
    color: #adb5bd !important;
}

/* Help Panel (dark mode) */
#helpPanel .offcanvas-header {
    background-color: #111827 !important;
    border-bottom-color: #404040 !important;
}

#helpPanel .offcanvas-body {
    background-color: #1f1f1f !important;
}

#helpPanel .offcanvas-footer {
    background-color: #252525 !important;
    border-top-color: #404040 !important;
}

.help-content h1 {
    border-bottom-color: #404040 !important;
}

.help-content th {
    background-color: #333333 !important;
}

.help-content th,
.help-content td {
    border-color: #404040 !important;
}

.help-content code {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

.help-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}