html.theme-dark :is(.app-main, .app-wrapper),
html.theme-dark .app-content {
    color: #e5e7eb !important;
    background-color: #0f172a !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .card,
html.theme-dark :is(.app-main, .app-wrapper) .card-modern,
html.theme-dark :is(.app-main, .app-wrapper) .small-box,
html.theme-dark :is(.app-main, .app-wrapper) .info-box,
html.theme-dark :is(.app-main, .app-wrapper) .widget-menu,
html.theme-dark :is(.app-main, .app-wrapper) .modal-content,
html.theme-dark :is(.app-main, .app-wrapper) .dropdown-menu,
html.theme-dark :is(.app-main, .app-wrapper) .offcanvas,
html.theme-dark :is(.app-main, .app-wrapper) .tab-content,
html.theme-dark :is(.app-main, .app-wrapper) .tab-pane {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .card-header,
html.theme-dark :is(.app-main, .app-wrapper) .card-footer,
html.theme-dark :is(.app-main, .app-wrapper) .modal-header,
html.theme-dark :is(.app-main, .app-wrapper) .modal-footer,
html.theme-dark :is(.app-main, .app-wrapper) .accordion-button,
html.theme-dark :is(.app-main, .app-wrapper) .accordion-item {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .table,
html.theme-dark :is(.app-main, .app-wrapper) table {
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .table > :not(caption) > * > *,
html.theme-dark :is(.app-main, .app-wrapper) table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .table thead th,
html.theme-dark :is(.app-main, .app-wrapper) .table tfoot th,
html.theme-dark :is(.app-main, .app-wrapper) .table tfoot td,
html.theme-dark :is(.app-main, .app-wrapper) .table-light > :not(caption) > * > * {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .table-hover > tbody > tr:hover > * {
    background-color: rgba(148, 163, 184, 0.14) !important;
    color: #ffffff !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .form-control-plaintext-custom {
    color: #e5e7eb !important;
    border-bottom-color: #475569 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .form-control,
html.theme-dark :is(.app-main, .app-wrapper) .form-select,
html.theme-dark :is(.app-main, .app-wrapper) .input-group-text,
html.theme-dark :is(.app-main, .app-wrapper) .select2-container--default .select2-selection--single,
html.theme-dark :is(.app-main, .app-wrapper) .select2-container--default .select2-selection--multiple,
html.theme-dark :is(.app-main, .app-wrapper) .select2-container--bootstrap-5 .select2-selection,
html.theme-dark :is(.app-main, .app-wrapper) .choices__inner,
html.theme-dark :is(.app-main, .app-wrapper) .choices__input {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .select2-dropdown,
html.theme-dark :is(.app-main, .app-wrapper) .choices__list--dropdown,
html.theme-dark :is(.app-main, .app-wrapper) .choices__list[aria-expanded] {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .select2-container--default .select2-results__option,
html.theme-dark :is(.app-main, .app-wrapper) .choices__list--dropdown .choices__item,
html.theme-dark :is(.app-main, .app-wrapper) .choices__list[aria-expanded] .choices__item {
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .select2-container--default .select2-results__option--highlighted[aria-selected],
html.theme-dark :is(.app-main, .app-wrapper) .choices__list--dropdown .choices__item--selectable.is-highlighted,
html.theme-dark :is(.app-main, .app-wrapper) .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .bg-white,
html.theme-dark :is(.app-main, .app-wrapper) .bg-light,
html.theme-dark :is(.app-main, .app-wrapper) .bg-body-tertiary {
    background-color: #111827 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .text-dark,
html.theme-dark :is(.app-main, .app-wrapper) .text-body,
html.theme-dark :is(.app-main, .app-wrapper) .text-black {
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .text-muted,
html.theme-dark :is(.app-main, .app-wrapper) .text-secondary,
html.theme-dark :is(.app-main, .app-wrapper) .text-body-secondary,
html.theme-dark :is(.app-main, .app-wrapper) .text-black-50 {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .badge.bg-white,
html.theme-dark :is(.app-main, .app-wrapper) .bg-white.text-primary,
html.theme-dark :is(.app-main, .app-wrapper) .bg-white.text-secondary,
html.theme-dark :is(.app-main, .app-wrapper) .bg-white.text-success,
html.theme-dark :is(.app-main, .app-wrapper) .bg-white.text-dark {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .btn-white {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .btn-white:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .notification-item:hover {
    background-color: #243244 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #fff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#fff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #ffffff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#ffffff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #ffffff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#ffffff"] {
    background-color: #111827 !important;
    background: #111827 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #f8f9fa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#f8f9fa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f8f9fa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f8f9fa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #f0f9ff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#f0f9ff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f0f9ff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f0f9ff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #f1f5f9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#f1f5f9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f1f5f9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f1f5f9"] {
    background-color: #0f172a !important;
    background: #0f172a !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #000"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#000"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: black"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:black"] {
    color: #e5e7eb !important;
}

/* Attendance map and dashboard custom component overrides */
html.theme-dark :is(.app-main, .app-wrapper) .attendance-shell {
    border-color: #334155 !important;
    background:
        radial-gradient(circle at 95% 5%, rgba(13, 148, 136, 0.18), transparent 30%),
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.16), transparent 32%),
        #0f172a !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-hero {
    background: linear-gradient(140deg, rgba(30, 58, 138, 0.34), rgba(13, 148, 136, 0.22)) !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-title,
html.theme-dark :is(.app-main, .app-wrapper) .attendance-stat .value {
    color: #f8fafc !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-eyebrow {
    color: #67e8f9 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-subtitle,
html.theme-dark :is(.app-main, .app-wrapper) .attendance-hint {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-stat .label,
html.theme-dark :is(.app-main, .app-wrapper) .attendance-filter-wrap .form-label,
html.theme-dark :is(.app-main, .app-wrapper) .attendance-preview-item .label {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-stat {
    background: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.45) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-filter-wrap {
    background: linear-gradient(180deg, #111827, #0f172a) !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-toggle-group {
    background: #0b1220 !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-modal .modal-content {
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-modal-header {
    background: #1f2937 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-modal-body {
    background: #111827 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-modal-subtitle,
html.theme-dark :is(.app-main, .app-wrapper) .template-callout small {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-preview-item,
html.theme-dark :is(.app-main, .app-wrapper) .template-callout {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-preview-item .value {
    color: #e2e8f0 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .file-dropzone {
    background: #111827 !important;
    border-color: #475569 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .file-dropzone:hover {
    background: #0f172a !important;
    border-color: #64748b !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .file-dropzone.has-file {
    background: rgba(20, 83, 45, 0.35) !important;
    border-color: #22c55e !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .file-dropzone .file-name {
    background: #1f2937 !important;
    color: #cbd5e1 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .file-dropzone i {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .map-shell {
    background: #0b1220 !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .map-empty-card {
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .map-empty-card i {
    color: #67e8f9 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .map-legend {
    background: rgba(17, 24, 39, 0.94) !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .map-legend-title {
    color: #e2e8f0 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .map-legend-item {
    color: #cbd5e1 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-filter-wrap .select2-container--default .select2-selection--single,
html.theme-dark :is(.app-main, .app-wrapper) .attendance-filter-wrap .select2-container--default .select2-selection--multiple {
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .attendance-filter-wrap .select2-container--default .select2-selection--single .select2-selection__rendered,
html.theme-dark :is(.app-main, .app-wrapper) .attendance-filter-wrap .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .card-soft {
    border-color: #334155 !important;
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.42) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-carousel {
    background: #111827 !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-carousel .carousel-inner {
    background: #0f172a !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-carousel .carousel-item {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-image-wrap {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-carousel .banner-img {
    background: #0b1220 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-caption-side {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
    border-color: #334155 !important;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.5) !important;
    color: #f8fafc !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-caption-side::before {
    background: rgba(148, 163, 184, 0.16) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-caption-side::after {
    background: rgba(148, 163, 184, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-caption-meta {
    background: rgba(148, 163, 184, 0.18) !important;
    border-color: rgba(148, 163, 184, 0.36) !important;
    color: #e2e8f0 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .banner-caption-side p {
    background: rgba(15, 23, 42, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #e2e8f0 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .announcement-card {
    border-color: #334155 !important;
    border-left-color: #60a5fa !important;
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .announcement-item {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .announcement-item:hover {
    background: #162236 !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.42) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .announcement-meta {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .section-title {
    color: #e2e8f0 !important;
}

/* Workflow / approver components (shared) */
html.theme-dark :is(.app-main, .app-wrapper) .approver-scroll {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .approver-scroll li {
    border-bottom-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .user-selection-box,
html.theme-dark :is(.app-main, .app-wrapper) .selector-list-container {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .user-item:hover,
html.theme-dark :is(.app-main, .app-wrapper) .selector-item:hover {
    background-color: #1f2937 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .selector-item.selected {
    background-color: rgba(22, 163, 74, 0.22) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .approver-row-card {
    background-color: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.4) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="border-left-color:#0ea5e9"] {
    border-left-color: #0284c7 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="border-left-color:#14B8A6"] {
    border-left-color: #0d9488 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .approver-row-card.is-final {
    background-color: #17111c !important;
    border-left-color: #ef4444 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .step-badge {
    background-color: #1f2937 !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

/* SOP explorer folder/file cards */
html.theme-dark :is(.app-main, .app-wrapper) .folder-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .folder-row:hover {
    background: #1f2937 !important;
    border-color: #60a5fa !important;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.35) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .folder-name {
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .folder-meta {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .folder-actions .badge {
    background-color: #1f2937 !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .file-table thead th {
    background-color: #1f2937 !important;
    color: #cbd5e1 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .file-item:hover {
    background-color: rgba(148, 163, 184, 0.1) !important;
}

/* RFP + other pages using card-main */
html.theme-dark :is(.app-main, .app-wrapper) .card-main {
    background: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .section-label {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .section-label::after {
    background: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .label-custom {
    color: #cbd5e1 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .input-group-custom {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .input-group-custom:focus-within {
    background-color: #111827 !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .input-group-custom .form-control,
html.theme-dark :is(.app-main, .app-wrapper) .input-group-custom .form-select {
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .table-total-row {
    background-color: #0f172a !important;
    border-top-color: #334155 !important;
}

/* Implementation detail pages (PM/OM/Mitra/etc using card-clean/timeline) */
html.theme-dark :is(.app-main, .app-wrapper) .card-clean {
    background: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 22px rgba(2, 6, 23, 0.36) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .card-header-clean {
    color: #e5e7eb !important;
    border-bottom-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .label-meta {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .value-meta {
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .timeline::before {
    background: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .timeline-marker {
    background: #0f172a !important;
    border-color: #60a5fa !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .timeline-marker.success {
    border-color: #22c55e !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .timeline-marker.danger {
    border-color: #ef4444 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .timeline-marker.warning {
    border-color: #f59e0b !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .timeline-marker.secondary {
    border-color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) #workflowApproverPreview {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .milestone-toggle-handle.bg-success-subtle {
    background-color: rgba(22, 163, 74, 0.22) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .milestone-toggle-handle.bg-danger-subtle {
    background-color: rgba(220, 38, 38, 0.22) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .handler-list-container::-webkit-scrollbar-track {
    background: #0b1220 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .handler-list-container::-webkit-scrollbar-thumb {
    background-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .doc-item {
    background-color: #111827 !important;
    border-color: #475569 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .doc-item:hover {
    background-color: #0f172a !important;
    border-color: #64748b !important;
}

/* RFP grand total card (uses non-card summary-card) */
html.theme-dark :is(.app-main, .app-wrapper) .summary-card:not(.card) {
    background: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .summary-card:not(.card) .btn-link {
    color: #cbd5e1 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .summary-card:not(.card) .btn-link:hover {
    color: #ffffff !important;
}

/* PR create modal custom selector lists */
html.theme-dark :is(.app-main, .app-wrapper) .modal-pr .selection-card {
    background-color: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.35) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-pr .selection-box {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-pr .selectable-item {
    color: #e5e7eb !important;
    border-bottom-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-pr .selectable-item:hover {
    background-color: rgba(96, 165, 250, 0.16) !important;
    color: #f8fafc !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-pr .selected-box {
    background-color: rgba(30, 64, 175, 0.2) !important;
    border-color: rgba(96, 165, 250, 0.55) !important;
    color: #bfdbfe !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-pr .input-group-text.bg-white {
    background-color: #1f2937 !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-pr #searchProjectType,
html.theme-dark :is(.app-main, .app-wrapper) .modal-pr #searchRAB {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-pr #searchProjectType::placeholder,
html.theme-dark :is(.app-main, .app-wrapper) .modal-pr #searchRAB::placeholder {
    color: #94a3b8 !important;
}

/* My profile editable panels */
html.theme-dark :is(.app-main, .app-wrapper) .edit-panel {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .edit-panel .panel-title,
html.theme-dark :is(.app-main, .app-wrapper) .info-label {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .info-value {
    color: #e5e7eb !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .edit-photo-preview {
    background: #111827 !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .access-scroll {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* ================================================
   EXTENDED INLINE STYLE PATTERN OVERRIDES
   Catches variations: with/without spaces, semicolons, extra characters
   ================================================ */

/* White backgrounds (all variations) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#fff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #fff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#ffffff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #ffffff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#ffffff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #ffffff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:rgb(255,255,255)"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:white"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: white"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:white"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: white"] {
    background-color: #111827 !important;
    background: #111827 !important;
}

/* Light gray backgrounds (#f8fafc, #f9fafb, #f1f1f1, #fafafa) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#f8fafc"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #f8fafc"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f8fafc"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f8fafc"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#f9fafb"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #f9fafb"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f9fafb"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f9fafb"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#f1f1f1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #f1f1f1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f1f1f1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f1f1f1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#fafafa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #fafafa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fafafa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fafafa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#f8f9fa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #f8f9fa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f8f9fa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f8f9fa"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#f1f5f9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #f1f5f9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f1f5f9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f1f5f9"] {
    background-color: #0f172a !important;
    background: #0f172a !important;
}

/* Light blue #3FA7D6 (document type accent) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#3FA7D6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #3FA7D6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #3FA7D6;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#3FA7D6;"] {
    background-color: #2563eb !important;
    background: #2563eb !important;
}

/* Gray #64748B as background */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#64748B"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #64748B"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #64748B;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#64748B;"] {
    background-color: #334155 !important;
    background: #334155 !important;
}

/* Light gray #d1d5db */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#d1d5db"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #d1d5db"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #d1d5db;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#d1d5db;"] {
    background-color: var(--csa-dark-surface-soft) !important;
    background: var(--csa-dark-surface-soft) !important;
}

/* Very light blue #eef4fb */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#eef4fb"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #eef4fb"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#e0e7ff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #e0e7ff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #e0e7ff;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#e0e7ff;"] {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fffdfd"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fffdfd;"] {
    background-color: var(--csa-dark-surface) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #eef2ff"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #eef2ff;"] {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fce8e6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fce8e6;"] {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #eef4fb;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#eef4fb;"] {
    background-color: #1f2937 !important;
    background: #1f2937 !important;
}

/* Amber/yellow backgrounds */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#fff4cc"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #fff4cc"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fff4cc"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fff4cc"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#ffc107"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #ffc107"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#ffc107"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #ffc107"] {
    background-color: #1f2937 !important;
    background: #1f2937 !important;
}

/* Status pill hardcoded backgrounds - green */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#dcfce7"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #dcfce7"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#dcfce7"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #dcfce7"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#bbf7d0"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #bbf7d0"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#bbf7d0"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #bbf7d0"] {
    background-color: rgba(22, 163, 74, 0.2) !important;
    background: rgba(22, 163, 74, 0.2) !important;
}

/* Status pill hardcoded backgrounds - red */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#fee2e2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #fee2e2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fee2e2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fee2e2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#fef2f2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #fef2f2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fef2f2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fef2f2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#ef4444"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #ef4444"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#ef4444"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #ef4444"] {
    background-color: rgba(220, 38, 38, 0.2) !important;
    background: rgba(220, 38, 38, 0.2) !important;
}

/* Status pill hardcoded backgrounds - blue */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#dbeafe"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #dbeafe"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#dbeafe"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #dbeafe"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#dcfafe"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #dcfafe"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#dcfafe"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #dcfafe"] {
    background-color: rgba(59, 130, 246, 0.2) !important;
    background: rgba(59, 130, 246, 0.2) !important;
}

/* Status pill hardcoded backgrounds - yellow/amber */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#fef3c7"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #fef3c7"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fef3c7"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fef3c7"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#fffbeb"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #fffbeb"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fffbeb"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fffbeb"] {
    background-color: rgba(245, 158, 11, 0.2) !important;
    background: rgba(245, 158, 11, 0.2) !important;
}

/* Sky blue status backgrounds (#0EA5E9) */
/* Sky blue status backgrounds (#0EA5E9) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#0EA5E9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #0EA5E9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#0EA5E9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #0EA5E9"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #0EA5E9;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#0EA5E9;"] {
    background-color: #0284c7 !important;
    background: #0284c7 !important;
}

/* Teal status backgrounds (#14B8A6) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#14B8A6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #14B8A6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#14B8A6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #14B8A6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #14B8A6;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#14B8A6;"] {
    background-color: #0d9488 !important;
    background: #0d9488 !important;
}

/* Slate status backgrounds (#475569) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#475569"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #475569"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#475569"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #475569"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #475569;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#475569;"] {
    background-color: #334155 !important;
    background: #334155 !important;
}

/* Orange status backgrounds (#F97316) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#F97316"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #F97316"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#F97316"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #F97316"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #F97316;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#F97316;"] {
    background-color: #ea580c !important;
    background: #ea580c !important;
}

/* Indigo status backgrounds (#6366F1) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#6366F1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #6366F1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#6366F1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #6366F1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #6366F1;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#6366F1;"] {
    background-color: #4f46e5 !important;
    background: #4f46e5 !important;
}

/* Emerald status backgrounds (#10B981) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#10B981"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #10B981"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#10B981"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #10B981"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #10B981;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#10B981;"] {
    background-color: #059669 !important;
    background: #059669 !important;
}

/* Cyan/teal-600 (#0EA5A4) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#0EA5A4"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #0EA5A4"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#0EA5A4"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #0EA5A4"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #0EA5A4;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#0EA5A4;"] {
    background-color: #0891b2 !important;
    background: #0891b2 !important;
}

/* Purple (#8b5cf6) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#8b5cf6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #8b5cf6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#8b5cf6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #8b5cf6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #8b5cf6;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#8b5cf6;"] {
    background-color: #7c3aed !important;
    background: #7c3aed !important;
}

/* Teal status backgrounds (#14B8A6) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#14B8A6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #14B8A6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#14B8A6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #14B8A6"] {
    background-color: #0d9488 !important;
    background: #0d9488 !important;
}

/* Slate status backgrounds (#475569) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#475569"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #475569"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#475569"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #475569"] {
    background-color: #334155 !important;
    background: #334155 !important;
}

/* Orange status backgrounds (#F97316) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#F97316"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #F97316"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#F97316"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #F97316"] {
    background-color: #ea580c !important;
    background: #ea580c !important;
}

/* Indigo status backgrounds (#6366F1) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#6366F1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #6366F1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#6366F1"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #6366F1"] {
    background-color: #4f46e5 !important;
    background: #4f46e5 !important;
}

/* Emerald status backgrounds (#10B981) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#10B981"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #10B981"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#10B981"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #10B981"] {
    background-color: #059669 !important;
    background: #059669 !important;
}

/* Cyan/teal-600 (#0EA5A4) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#0EA5A4"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #0EA5A4"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#0EA5A4"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #0EA5A4"] {
    background-color: #0891b2 !important;
    background: #0891b2 !important;
}

/* Purple (#8b5cf6) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#8b5cf6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #8b5cf6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#8b5cf6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #8b5cf6"] {
    background-color: #7c3aed !important;
    background: #7c3aed !important;
}

/* Bootstrap Info cyan (#0DCAF0 / #20C997 / #40C9A2) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#0DCAF0"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #0DCAF0"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #0DCAF0;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#0DCAF0;"] {
    background-color: #0891b2 !important;
    background: #0891b2 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#20C997"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #20C997"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #20C997;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#20C997;"] {
    background-color: #0d9488 !important;
    background: #0d9488 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#40C9A2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #40C9A2"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #40C9A2;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#40C9A2;"] {
    background-color: #059669 !important;
    background: #059669 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#E5533D"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #E5533D"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #E5533D;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#E5533D;"] {
    background-color: #dc2626 !important;
    background: #dc2626 !important;
}

/* Gray #6C757D (summary/inactive) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#6C757D"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #6C757D"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #6C757D;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#6C757D;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#6C757D"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #6C757D"] {
    background-color: #374151 !important;
    background: #374151 !important;
}

/* Blue #3B82F6 (RAB in-process) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#3B82F6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #3B82F6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #3B82F6;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#3B82F6;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#3B82F6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #3B82F6"] {
    background-color: #2563eb !important;
    background: #2563eb !important;
}

/* Yellow #F6C90E (deviation/warning) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#F6C90E"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #F6C90E"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #F6C90E;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#F6C90E;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#F6C90E"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #F6C90E"] {
    background-color: #d97706 !important;
    background: #d97706 !important;
}

/* Slate #495057 as background */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#495057"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #495057"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #495057;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#495057;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#495057"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #495057"] {
    background-color: #374151 !important;
    background: #374151 !important;
}

/* Navy-dark custom var */
html.theme-dark :is(.app-main, .app-wrapper) [style*="--navy-dark"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="var(--navy-dark)"] {
    background: #0f172a !important;
}

/* ================================================
   BOOTSTRAP STATUS COLOR VARIANTS
   (success-subtle, danger-subtle, warning-subtle, secondary-subtle)
   ================================================ */

/* Green success light (#d1e7dd / #badbcc → dark bg) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#d1e7dd"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #d1e7dd"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#d1e7dd;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #d1e7dd;"] {
    background-color: rgba(22, 163, 74, 0.15) !important;
    color: #86efac !important;
}

/* Red danger light (#f8d7da / #f5c2c7 → dark bg) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f8d7da"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f8d7da"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#f8d7da;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #f8d7da;"] {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
}

/* Yellow warning light (#fff3cd / #ffecb5 → dark bg) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fff3cd"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fff3cd"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#fff3cd;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #fff3cd;"] {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fcd34d !important;
}

/* Gray secondary light (#e2e3e5 / #d3d6d8 → dark bg) */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#e2e3e5"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #e2e3e5"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#e2e3e5;"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #e2e3e5;"] {
    background-color: var(--csa-dark-surface-soft) !important;
    color: var(--csa-dark-text) !important;
}

/* ================================================
   TEXT COLOR OVERRIDES
   ================================================ */

/* Hardcoded text colors */
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#0f766e"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #0f766e"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#0f172a"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #0f172a"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#212529"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #212529"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#6c757d"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #6c757d"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#094480"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #094480"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#495057"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #495057"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#333"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #333"] {
    color: #94a3b8 !important;
}

/* Hardcoded dark text for light status */
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#166534"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #166534"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#15803d"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #15803d"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#166534"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #166534"] {
    color: #86efac !important;
}

/* Red status text */
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#991b1b"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #991b1b"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#dc2626"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #dc2626"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#dc2626"] {
    color: #fca5a5 !important;
}

/* Blue status text */
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#1e40af"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #1e40af"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#1d4ed8"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #1d4ed8"] {
    color: #93c5fd !important;
}

/* Amber text */
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#92400e"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #92400e"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#b45309"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #b45309"] {
    color: #fcd34d !important;
}

/* Gray text on light bg */
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#94a3b8"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #94a3b8"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#64748b"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #64748b"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#6b7a90"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color: #6b7a90"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="color:#94a3b8"] {
    color: #94a3b8 !important;
}

/* Border overrides for inline border colors */
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color:#6c757d"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color: #6c757d"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color:#dee2e6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color: #dee2e6"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color:#e7edf4"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color: #e7edf4"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color:#86b7fe"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color: #86b7fe"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color:#adb5bd"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color: #adb5bd"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color:#e9ecef"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="border-color: #e9ecef"] {
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) [style*="background:#e9ecef"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: #e9ecef"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color:#e9ecef"],
html.theme-dark :is(.app-main, .app-wrapper) [style*="background-color: #e9ecef"] {
    background-color: #1f2937 !important;
    background: #1f2937 !important;
}

/* ================================================
   EMPLOYEE / HR SHELL COMPONENTS
   ================================================ */
html.theme-dark :is(.app-main, .app-wrapper) .employee-shell {
    background: #111827 !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .employee-head {
    background: linear-gradient(180deg, #1f2937, #111827) !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .employee-eyebrow {
    color: #67e8f9 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .employee-title {
    color: #e2e8f0 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .employee-subtitle {
    color: #94a3b8 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .employee-stat {
    background: #111827 !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .employee-border {
    border-color: #334155 !important;
}

/* ================================================
   BOOTSTRAP MODAL HEADER FIXES
   ================================================ */
html.theme-dark :is(.app-main, .app-wrapper) .modal-header.bg-primary {
    background-color: #1e3a8a !important;
    color: #e2e8f0 !important;
    border-color: #1e3a8a !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-header.bg-danger {
    background-color: #991b1b !important;
    color: #fca5a5 !important;
    border-color: #991b1b !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-header.bg-success {
    background-color: #14532d !important;
    color: #bbf7d0 !important;
    border-color: #14532d !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-header.bg-info {
    background-color: #155e75 !important;
    color: #a5f3fc !important;
    border-color: #155e75 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-header.bg-warning {
    background-color: #78350f !important;
    color: #fde68a !important;
    border-color: #78350f !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-header.bg-secondary {
    background-color: #374151 !important;
    color: #d1d5db !important;
    border-color: #374151 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-header.bg-dark {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #111827 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-header.bg-light {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .modal-header.text-white-50 {
    color: rgba(229, 231, 235, 0.5) !important;
}

/* ================================================
   BOOTSTRAP BUTTON COLOR FIXES
   ================================================ */
html.theme-dark :is(.app-main, .app-wrapper) .btn.btn-success.text-white {
    color: #bbf7d0 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .btn.btn-info.text-white {
    color: #a5f3fc !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .btn.btn-warning.text-dark {
    color: #fde68a !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .btn.btn-danger.text-white {
    color: #fca5a5 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .btn.btn-link.text-white {
    color: #93c5fd !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .btn.btn-warning.px-4.text-white {
    color: #fde68a !important;
}

/* ================================================
   ADDITIONAL STATUS/INFO CARD COLORS
   ================================================ */
html.theme-dark :is(.app-main, .app-wrapper) .status-draft {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .status-approved,
html.theme-dark :is(.app-main, .app-wrapper) .status-approved-soft {
    background-color: rgba(22, 163, 74, 0.15) !important;
    color: #86efac !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .status-rejected,
html.theme-dark :is(.app-main, .app-wrapper) .status-rejected-soft {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .status-pending {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fcd34d !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .status-progress,
html.theme-dark :is(.app-main, .app-wrapper) .status-onprogress {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .status-completed,
html.theme-dark :is(.app-main, .app-wrapper) .status-done {
    background-color: rgba(22, 163, 74, 0.15) !important;
    color: #86efac !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .status-cancelled,
html.theme-dark :is(.app-main, .app-wrapper) .status-revision {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .status-revision {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fcd34d !important;
}

/* RAB create page special gradient */
html.theme-dark :is(.app-main, .app-wrapper) [style*="background: linear-gradient(120deg, #0f766e, #14b8a6)"] {
    background: linear-gradient(120deg, #0f766e, #0d9488) !important;
}

/* Loading overlay white bg */
html.theme-dark :is(.app-main, .app-wrapper) [style*="rgba(255,255,255,0.7)"] {
    background: rgba(17, 24, 39, 0.85) !important;
}

/* Info-box / small-box dark mode */
html.theme-dark :is(.app-main, .app-wrapper) .info-box-icon,
html.theme-dark :is(.app-main, .app-wrapper) .small-box .icon {
    filter: brightness(1.2);
}

/* Alert overrides */
html.theme-dark :is(.app-main, .app-wrapper) .alert-success {
    background-color: rgba(22, 163, 74, 0.12) !important;
    border-color: rgba(22, 163, 74, 0.3) !important;
    color: #86efac !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .alert-danger {
    background-color: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    color: #fca5a5 !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .alert-warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}

html.theme-dark :is(.app-main, .app-wrapper) .alert-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

/* ================================================
   PRINT STYLES — intentionally preserved
   ================================================ */
@media print {
    html.theme-dark :is(.app-main, .app-wrapper) .no-print {
        display: none !important;
    }
}