/* ==========================================================================
   Dark Mode Overrides for SEA.Hajj.Portal
   Scoped to [data-layout-mode="dark"] to override Theme1.css-Theme5.css
   and vendor light-only styles on dashboard/menu views.
   ========================================================================== */

/* --- 0. Browser-native widget theming (`color-scheme`) ---
   Root cause of a real regression: on the login page in LIGHT mode, the text inputs and the
   "الموسم" native <select> rendered with a BLACK background while the rest of the page was
   correctly light. None of this file's rules could be responsible — every rule here is gated
   on `[data-layout-mode="dark"]`, which wasn't set. The actual cause is that this app never
   tells the browser which color scheme the PAGE uses via the CSS `color-scheme` property /
   `<meta name="color-scheme">`. Without it, Chromium/Firefox style browser-native chrome
   (autofilled-field highlight, native <select> dropdowns, scrollbars, form-control focus
   rings) using the OPERATING SYSTEM's theme preference, completely independent of our own
   `data-layout-mode` toggle — so a user with an OS-level dark theme got black-native-styled
   inputs even while our page was deliberately in light mode (and the reverse mismatch is
   equally possible: light-native `<select>` chrome inside an otherwise dark page). Declaring
   `color-scheme` explicitly, kept in sync with `data-layout-mode`, tells the browser exactly
   which native rendering to use regardless of the OS setting. */
:root[data-layout-mode="light"] {
    color-scheme: light;
}

:root[data-layout-mode="dark"] {
    color-scheme: dark;
}

/* --- 1. SVG Icons in Icon Tiles (.iconbg svg) ---
   Counters Theme1.css-Theme5.css (.iconbg svg, .iconbg svg * { fill: [brand-color] !important })
   and app-rtl.min.css (.iconbg svg { fill: #F7790F !important }). */
[data-layout-mode="dark"] .iconbg svg,
[data-layout-mode="dark"] .iconbg svg * {
    fill: #ced4da !important;
}

[data-layout-mode="dark"] .nav-pills.systemsicon .nav-link:hover .iconbg svg,
[data-layout-mode="dark"] .nav-pills.systemsicon .nav-link:hover .iconbg svg *,
[data-layout-mode="dark"] .nav-pills.systemsicon .nav-link.active .iconbg svg,
[data-layout-mode="dark"] .nav-pills.systemsicon .nav-link.active .iconbg svg * {
    fill: #ffffff !important;
}

/* --- 2. Icon Background Circles (.iconbg) ---
   Counters app-rtl.min.css (.iconbg { background: #f9f9f9; }). */
[data-layout-mode="dark"] .iconbg {
    background: #2a2f34 !important;
}

[data-layout-mode="dark"] .nav-pills.systemsicon .nav-link.active .iconbg {
    background: transparent !important;
}

/* --- 3. System Menu Tiles (.systemsicon) ---
   Counters app-rtl.min.css:
   .systemsicon .nav-item a { border: 1px solid #f7f5f5; }
   .nav-pills.systemsicon .nav-link.active { background-color: #f5f6f8; box-shadow: inset 0 4px 25px 5px #dcdfe4; } */
[data-layout-mode="dark"] .systemsicon .nav-item a {
    border: 1px solid #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .systemsicon .nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}

[data-layout-mode="dark"] .nav-pills.systemsicon .nav-link.active,
[data-layout-mode="dark"] .nav-pills.systemsicon .show > .nav-link {
    background-color: #2a2f34 !important;
    box-shadow: inset 0 4px 25px 5px #1a1d21 !important;
    color: #ffffff !important;
}

/* Description paragraph text inside system tiles */
[data-layout-mode="dark"] .descpar {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .nav-link.active .descpar {
    color: #ffffff !important;
}

/* --- 4. Card Header (.bggrayhead) ---
   Counters app-rtl.min.css (.bggrayhead { background: #DEDEE0; }). */
[data-layout-mode="dark"] .bggrayhead {
    background: #2a2f34 !important;
    color: #ced4da !important;
    border-bottom: 1px solid #32383e !important;
}

[data-layout-mode="dark"] .bggrayhead .card-title {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .bggrayhead i {
    color: #ced4da !important;
}

/* --- 5. Left Sub-menu Sidebar (.bgmenu and .tabsleft) ---
   Counters app-rtl.min.css (.bgmenu { background: #F5F6F8; })
   and Theme1.css-Theme5.css (.tabsleft .nav-pills .nav-link.active). */
[data-layout-mode="dark"] .bgmenu {
    background: #1a1d21 !important;
    border-left: 1px solid #32383e !important;
}

[data-layout-mode="dark"] .tabsleft .nav-pills .nav-link {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .tabsleft .nav-pills .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-layout-mode="dark"] .tabsleft .nav-pills .nav-link.active,
[data-layout-mode="dark"] .tabsleft .nav-pills .show > .nav-link {
    color: #ffffff !important;
}

/* --- 6. Dashboard Link Tiles (.dummy-media-object) ---
   Counters app-rtl.min.css:
   .dummy-media-object { background: #ffffff; border: 1px solid #e7e7e7; }
   .dummy-media-object:hover { background: #fff4e9; }
   .dummy-media-object h3 { color: #000; }
   .dummy-media-object:hover h3 { color: rgba(0,0,0,1); } */
[data-layout-mode="dark"] .dummy-media-object {
    background: #212529 !important;
    border: 1px solid #32383e !important;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.3) !important;
}

[data-layout-mode="dark"] .dummy-media-object:hover,
[data-layout-mode="dark"] .dummy-media-object:focus {
    background: #2a2f34 !important;
    border-color: #495057 !important;
}

[data-layout-mode="dark"] .dummy-media-object h3 {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .dummy-media-object:hover h3 {
    color: #ffffff !important;
}

/* --- 7. Primary Brand Colors (.text-primary, .bg-primary, .bg-soft-primary) ---
   Counters Theme1.css-Theme5.css:
   .text-primary { color: [brand-hex] !important; }
   .bg-primary { background-color: [brand-hex] !important; }
   .bg-soft-primary { background-color: [pastel-light-hex] !important; color: [brand-hex] !important; } */
[data-layout-mode="dark"] .text-primary {
    color: #6ea8fe !important;
}

[data-layout-mode="dark"] .bg-primary {
    background-color: #3d78e3 !important;
    color: #ffffff !important;
}

[data-layout-mode="dark"] .bg-soft-primary {
    background-color: rgba(61, 120, 227, 0.2) !important;
    color: #6ea8fe !important;
}

/* --- 8. Profile Style Card Title (.profilestyle .card-title) ---
   Counters Theme1.css-Theme5.css:
   .profilestyle .card-title { background: #d8f4ff / #ffeaee / #f0f5f2 / #f8f5ea; color: ...; } */
[data-layout-mode="dark"] .profilestyle .card-title {
    background: #2a2f34 !important;
    color: #eff2f7 !important;
}

/* --- 9. DataTables Headers, Hover, and Buttons ---
   Counters Theme1.css-Theme5.css:
   table.dataTable.nowrap tr:hover { background: #d8f1f9 !important; }
   table.dataTable > thead > tr > th, table.dataTable > thead .sorting { background: [light-hex] !important; color: [dark-hex]; }
   .dt-buttons a.dt-button, ... { background: [light-hex]; border: 1px solid [brand-hex] !important; } */
[data-layout-mode="dark"] table.dataTable.nowrap tr:hover,
[data-layout-mode="dark"] table.dataTable.nowrap tr:focus {
    background: #2a2f34 !important;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1) !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] table.dataTable > thead > tr > th,
[data-layout-mode="dark"] table.dataTable > thead .sorting {
    background: #2a2f34 !important;
    color: #eff2f7 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .dt-buttons a.dt-button,
[data-layout-mode="dark"] .dt-buttons button.dt-button,
[data-layout-mode="dark"] .dt-buttons div.dt-button,
[data-layout-mode="dark"] .dt-buttons input.dt-button,
[data-layout-mode="dark"] dt-buttons a.dt-button,
[data-layout-mode="dark"] dt-buttons button.dt-button,
[data-layout-mode="dark"] dt-buttons div.dt-button,
[data-layout-mode="dark"] dt-buttons input.dt-button {
    border: 1px solid #32383e !important;
    background: #2a2f34 !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .dt-buttons a.dt-button:hover,
[data-layout-mode="dark"] .dt-buttons button.dt-button:hover,
[data-layout-mode="dark"] dt-buttons a.dt-button:hover,
[data-layout-mode="dark"] dt-buttons button.dt-button:hover {
    background: #32383e !important;
    color: #ffffff !important;
}

/* --- 10. Collapsible Navbar Active Item ---
   Counters Theme1.css-Theme5.css:
   .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true] { background: #d4eff9 / #fff1dd / #e1e3dd; } */
[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* --- 11. Form Floating Labels ---
   Counters Theme1.css-Theme5.css:
   .cardsearch .form-floating ... label { color: #040405; }
   .internalcontrol .form-floating ... label { color: #070707; }
   .loginbox .form-floating ... label { color: #000; } (app-rtl.min.css ~line 18094) */
[data-layout-mode="dark"] .cardsearch .form-floating > .form-control-plaintext ~ label,
[data-layout-mode="dark"] .cardsearch .form-floating > .form-control:focus ~ label,
[data-layout-mode="dark"] .cardsearch .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-layout-mode="dark"] .cardsearch .form-floating > .form-select ~ label,
[data-layout-mode="dark"] .form-floating > .form-control:focus ~ label,
[data-layout-mode="dark"] .internalcontrol .form-floating > .form-control-plaintext ~ label,
[data-layout-mode="dark"] .internalcontrol .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-layout-mode="dark"] .internalcontrol .form-floating > .form-select ~ label,
[data-layout-mode="dark"] .loginbox .form-floating > .form-control-plaintext ~ label,
[data-layout-mode="dark"] .loginbox .form-floating > .form-control:focus ~ label,
[data-layout-mode="dark"] .loginbox .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-layout-mode="dark"] .loginbox .form-floating > .form-select ~ label {
    color: #878a99 !important;
}

/* --- 12. Search Input in Headers (e.g. Index.cshtml) ---
   Counters hardcoded bg-white on search input */
[data-layout-mode="dark"] .app-search2 .bg-white {
    background-color: #262a2f !important;
    color: #ced4da !important;
    border-color: #32383e !important;
}

/* --- 13. Fieldset Style ---
   Counters Theme3.css: .filedsetstye { border: 1px solid #dbdbdb !important; } */
[data-layout-mode="dark"] .filedsetstye {
    border: 1px solid #32383e !important;
}

/* --- 14. Select2 Dropdowns & Widgets ---
   Counters select2.min.css.css and app-rtl.min.css (lines 18724-18770, 19049, 20768):
   .select2-container--default .select2-selection--single { background-color: #fbfbfb !important; }
   .card.cardsearch .select2-container--default .select2-selection--single { background: #fff !important / #fbfbfb !important; }
   and vendor dropdown/search/option rules. */
[data-layout-mode="dark"] .select2-container--default .select2-selection--single,
[data-layout-mode="dark"] .card.cardsearch .select2-container--default .select2-selection--single,
[data-layout-mode="dark"] .jsselectstyle .select2-container--default .select2-selection--single,
[data-layout-mode="dark"] .jsselectstyle .select2-container .select2-selection--single,
[data-layout-mode="dark"] .PageSizestyle .select2-container--default .select2-selection--single,
[data-layout-mode="dark"] .PageSizestyle .select2-container .select2-selection--single,
[data-layout-mode="dark"] #PageSizestyle .select2-container .select2-selection--single {
    background-color: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-layout-mode="dark"] .jsselectstyle .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-layout-mode="dark"] .jsselectstyle .select2-container .select2-selection--single .select2-selection__rendered,
[data-layout-mode="dark"] .PageSizestyle .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-layout-mode="dark"] #PageSizestyle .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #878a99 !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #ced4da transparent transparent transparent !important;
}

[data-layout-mode="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
[data-layout-mode="dark"] .select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #ced4da transparent !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #212529 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: #6c757d !important;
}

/* Select2 Multiple Selection */
[data-layout-mode="dark"] .select2-container--default .select2-selection--multiple,
[data-layout-mode="dark"] .select2-container .select2-selection--multiple {
    background-color: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
[data-layout-mode="dark"] .select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #32383e !important;
    border-color: #495057 !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
[data-layout-mode="dark"] .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
[data-layout-mode="dark"] .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff !important;
    background-color: #495057 !important;
}

/* Select2 Dropdown Menu */
[data-layout-mode="dark"] .select2-dropdown {
    background-color: #262a2f !important;
    border: 1px solid #32383e !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-search--dropdown {
    background-color: #262a2f !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
[data-layout-mode="dark"] .select2-search--dropdown .select2-search__field {
    background-color: #2a2f34 !important;
    border: 1px solid #32383e !important;
    color: #ced4da !important;
}

/* Vendor gives every option `border-bottom: 1px solid #e7e7e7` (app-rtl.min.css ~19512),
   which reads as a harsh white rule on a dark dropdown — soften to a subtle divider. */
[data-layout-mode="dark"] .select2-results__option {
    color: #ced4da !important;
    border-bottom: 1px solid #2f353b !important;
}

[data-layout-mode="dark"] .select2-results__option:last-child {
    border-bottom-color: transparent !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-results__option--selected,
[data-layout-mode="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #32383e !important;
    color: #ffffff !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
[data-layout-mode="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-layout-mode="dark"] .select2-container--default .select2-results__option[aria-selected="true"]:hover {
    background-color: #3d78e3 !important;
    color: #ffffff !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-results__option--disabled {
    color: #6c757d !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-results__group {
    color: #eff2f7 !important;
}

/* --- 15. Form Controls inside Search Cards (.cardsearch) ---
   Counters app-rtl.min.css:
   .cardsearch .form-floating > .form-control { background: #fbfbfb !important; }
   .cardsearch .form-floating > .form-control:focus { color: #777 !important; } */
[data-layout-mode="dark"] .cardsearch .form-floating > .form-control,
[data-layout-mode="dark"] .cardsearch .form-floating > .form-control-plaintext,
[data-layout-mode="dark"] .cardsearch .form-floating > .form-select {
    background: #262a2f !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .cardsearch .form-floating > .form-control:focus,
[data-layout-mode="dark"] .cardsearch .form-floating > .form-control:not(:placeholder-shown),
[data-layout-mode="dark"] .cardsearch .form-floating > .form-control-plaintext:focus,
[data-layout-mode="dark"] .cardsearch .form-floating > .form-control-plaintext:not(:placeholder-shown) {
    color: #ced4da !important;
    border-color: #495057 !important;
}

[data-layout-mode="dark"] .card.cardsearch {
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .cardsearch .text-black,
[data-layout-mode="dark"] #SearchTreeResult .text-black,
[data-layout-mode="dark"] #SearchResult .text-black {
    color: #eff2f7 !important;
}

/* --- 16. Header Tab Navigation (.bggrayheadtitl) ---
   Counters app-rtl.min.css: .bggrayheadtitl { background: #e7e7e7 !important; } */
[data-layout-mode="dark"] .bggrayheadtitl {
    background: #2a2f34 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .arrow-navtabs.bggrayheadtitl .nav-link:not(.active) {
    color: #ced4da !important;
}

/* --- 17. Tree Container & Nodes (ManageStrategyGoals & Similar Views) ---
   Counters hardcoded inline styles in ManageStrategyGoals/Index.cshtml:
   #SearchTreeContainer { background: radial-gradient(...), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
   #pillar-tree .jstree-anchor { background: #ffffff !important; color: var(--stg-dark) !important; } */
[data-layout-mode="dark"] #SearchTreeContainer {
    background: radial-gradient(circle at top right, rgba(249, 115, 22, 0.08), transparent 34%), #212529 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] #pillar-tree .jstree-anchor {
    background: #2a2f34 !important;
    border-color: #32383e !important;
    color: #ced4da !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25) !important;
}

[data-layout-mode="dark"] #pillar-tree .jstree-anchor:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
    border-color: #fed7aa !important;
}

[data-layout-mode="dark"] #pillar-tree .jstree-clicked {
    background: #342a23 !important;
    color: #fdba74 !important;
    border-color: #fdba74 !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-node-title {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] #pillar-tree .jstree-themeicon {
    background: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #pillar-tree .node-actions button {
    background: #262a2f !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #pillar-tree .node-actions button:hover {
    background: #32383e !important;
    color: #ffffff !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-badge,
[data-layout-mode="dark"] #pillar-tree .stg-badge-slate {
    background: #262a2f !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #pillar-tree .jstree-children > .jstree-node::before {
    background: #32383e !important;
}

[data-layout-mode="dark"] #pillar-tree .jstree-children > .jstree-node::after {
    border-bottom-color: #32383e !important;
    border-right-color: #32383e !important;
}

[data-layout-mode="dark"] #SearchTreeResult .border-bottom,
[data-layout-mode="dark"] #SearchResult .border-bottom {
    border-color: #32383e !important;
}

/* --- 18. Results Table, Striping, and Pagination ---
   Counters app-rtl.min.css:
   .table-striped > tbody > tr:nth-of-type(odd) > * { --vz-table-accent-bg: #f8f8f8 / #f6f6f6; }
   table.dataTable tr:hover { background: #fff !important; }
   table.dataTable > thead > tr > th { background: #dbdbdb !important; color: #000; }
   .pagimationthmem ul li { border: 1px solid #e7e7e7; color: #55627a; } */
[data-layout-mode="dark"] .table {
    --vz-table-bg: transparent;
    --vz-table-striped-bg: rgba(255, 255, 255, 0.025);
    --vz-table-hover-bg: rgba(255, 255, 255, 0.04);
    --vz-table-border-color: #32383e;
    color: #ced4da !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-layout-mode="dark"] table.dataTable.table-striped > tbody > tr.odd > * {
    --vz-table-accent-bg: rgba(255, 255, 255, 0.025) !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .table-striped > tbody > tr:nth-of-type(even) > *,
[data-layout-mode="dark"] table.dataTable.table-striped > tbody > tr.even > * {
    --vz-table-accent-bg: transparent !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] table.dataTable tbody tr:hover,
[data-layout-mode="dark"] table.dataTable tbody tr:focus,
[data-layout-mode="dark"] .table tbody tr:hover,
[data-layout-mode="dark"] .table-hover > tbody > tr:hover > * {
    background-color: #2a2f34 !important;
    color: #ffffff !important;
}

[data-layout-mode="dark"] .table > thead > tr > th,
[data-layout-mode="dark"] .table > thead > tr > td,
[data-layout-mode="dark"] table.dataTable > thead > tr > th,
[data-layout-mode="dark"] table.dataTable > thead > tr > td,
[data-layout-mode="dark"] table.dataTable > thead .sorting,
[data-layout-mode="dark"] table.dataTable > thead .sorting_disabled {
    background: #2a2f34 !important;
    color: #eff2f7 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .table > tbody > tr > td,
[data-layout-mode="dark"] .table > tbody > tr > th {
    border-color: #32383e !important;
    color: #ced4da;
}

[data-layout-mode="dark"] .table .badge.bg-light.text-dark {
    background-color: #262a2f !important;
    color: #ced4da !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .pagimationthmem ul li {
    border-color: #32383e !important;
    background-color: #262a2f !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .pagimationthmem ul li a {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .pagimationthmem ul li:hover {
    background-color: #32383e !important;
}

[data-layout-mode="dark"] .pagimationthmem ul li:hover a {
    color: #ffffff !important;
}

[data-layout-mode="dark"] .dataTables_info {
    color: #878a99 !important;
}

/* --- 19. Strategy Modals & Inputs ---
   Counters inline modal styles in ManageStrategyGoals/Index.cshtml */
[data-layout-mode="dark"] #detailsModal .modal-body,
[data-layout-mode="dark"] #detailsEditModal .modal-body,
[data-layout-mode="dark"] #strategyYearlyWeightsModal .modal-body,
[data-layout-mode="dark"] #goalPeriodsModal .modal-body,
[data-layout-mode="dark"] #yearWeightsModal .modal-body {
    background: #212529 !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #detailsModalContent .bg-light {
    background: #2a2f34 !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #yearWeightsActionButtonsRow {
    background-color: #2a2f34 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] #goalPeriodsModal thead th,
[data-layout-mode="dark"] #yearWeightsModal thead th,
[data-layout-mode="dark"] #detailsEditModal thead th,
[data-layout-mode="dark"] #strategyYearlyWeightsModal thead th {
    background: #2a2f34 !important;
    color: #eff2f7 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] #goalPeriodsModal table,
[data-layout-mode="dark"] #yearWeightsModal table,
[data-layout-mode="dark"] #detailsEditModal table,
[data-layout-mode="dark"] #strategyYearlyWeightsModal table {
    border-color: #32383e !important;
}

/* --- 20. Checkboxes & Checkbox Columns ---
   Counters unstyled native checkboxes emitted by ASP.NET MVC @Html.DisplayFor / @Html.CheckBoxFor
   (e.g., ManagePages/Search.cshtml lines 91, 95: item.SupportMobile and item.SupportAngular)
   and app-rtl.min.css lines 9160, 21417 which lack general dark checkbox styling.
   color-scheme: dark renders the native control using the browser's dark palette, and
   accent-color ensures checked states use the dark-mode primary blue (#3d78e3). */
[data-layout-mode="dark"] input[type="checkbox"],
[data-layout-mode="dark"] input[type="checkbox"].check-box,
[data-layout-mode="dark"] .check-box {
    color-scheme: dark;
    accent-color: #3d78e3;
}

[data-layout-mode="dark"] .form-check-input:checked {
    background-color: #3d78e3 !important;
    border-color: #3d78e3 !important;
}

/* --- 21. Right Sidebar & Vertical Navigation ---
   Counters app-rtl.min.css:
   - Line 225: [data-layout-mode=dark] { --vz-vertical-menu-bg: #fff; } (hardcoded white)
   - Lines 226-231: --vz-vertical-menu-item-color: #5f6270; --vz-vertical-menu-sub-item-color: #686b7b;
   - Line 940: [data-layout-mode=dark] .navbar-menu { background: rgba(30,32,37,.12); } (semi-transparent over light body)
   - Lines 1613-1745: Velzon dark sidebar rules require [data-sidebar=dark], but _LayoutMashareq.cshtml line 21
     hardcodes data-sidebar="light", preventing vendor dark rules from activating.
   - Also counters Theme1-Theme5 sidebar colors and ensures active leaf items (e.g. 'الصفحات') have clear dark styling. */
[data-layout-mode="dark"] .app-menu,
[data-layout-mode="dark"] .navbar-menu,
[data-layout-mode="dark"] #main-sidebar {
    background: #212529 !important;
    border-left: 1px solid #32383e !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link.active {
    color: #ffffff !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-sm .nav-link {
    color: #adb5bd !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-sm .nav-link:before {
    background-color: #878a99 !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-sm .nav-link:hover {
    color: #ffffff !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-sm .nav-link:hover:before {
    background-color: #ffffff !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-sm .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-radius: 4px;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-sm .nav-link.active:before {
    background-color: #3d78e3 !important;
}

/* Sidebar menu search input */
[data-layout-mode="dark"] .menu-search .search-text {
    background-color: #262a2f !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .menu-search .search-text:focus {
    border-color: #495057 !important;
    color: #ffffff !important;
}

/* --- 22. Page Container, Main Content, and Card Backgrounds ---
   Counters app-rtl.min.css:
   - Line 221: [data-layout-mode=dark] { --vz-body-bg: #F7F7F7; } (light off-white body background in dark mode)
   - Line 20708: .card { border: 1px solid #e7e7e7; } (hardcoded light border)
   and ensures page wrapper, content areas, and cards (e.g., ManagePages/Index.cshtml lines 51, 138:
   .card.cardsearch, #SearchResult .card) render with dark background surfaces and dark borders. */
[data-layout-mode="dark"] {
    --vz-body-bg: #1a1d21;
    --vz-vertical-menu-bg: #212529;
    color-scheme: dark;
}

[data-layout-mode="dark"] body {
    background-color: #1a1d21 !important;
}

[data-layout-mode="dark"] .main-content,
[data-layout-mode="dark"] .page-content {
    background-color: #1a1d21 !important;
}

[data-layout-mode="dark"] .page-title-box {
    background-color: #212529 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .page-title-box h4 {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .card,
[data-layout-mode="dark"] .card.cardsearch,
[data-layout-mode="dark"] #SearchResult .card {
    background-color: #212529 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .card-header {
    background-color: #212529 !important;
    border-bottom-color: #32383e !important;
}

[data-layout-mode="dark"] .card-body {
    background-color: transparent !important;
}

[data-layout-mode="dark"] .dropdown .btn.dropdown {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .dropdown-menu {
    background-color: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .dropdown-item {
    color: #ced4da !important;
}

[data-layout-mode="dark"] .dropdown-item:hover,
[data-layout-mode="dark"] .dropdown-item:focus {
    background-color: #32383e !important;
    color: #ffffff !important;
}

/* --- 23. Global Custom Scrollbars (WebKit & Firefox) ---
   Counters app-rtl.min.css:
   - Lines 6-29: unconditional ::-webkit-scrollbar rules with #cfd3de light thumb
   - Lines 79-95: body, html { scrollbar-color: #cfd3de #f6f5fb; } and body/html ::-webkit-scrollbar rules
     with light #f6f5fb track and #cfd3de thumb.
   Overrides to dark palette (#2a2f34 track, #495057 thumb) and color-scheme: dark for browser chrome. */
[data-layout-mode="dark"] {
    scrollbar-color: #495057 #2a2f34;
}

[data-layout-mode="dark"] body,
html[data-layout-mode="dark"] {
    scrollbar-color: #495057 #2a2f34;
}

[data-layout-mode="dark"]::-webkit-scrollbar-track,
[data-layout-mode="dark"] ::-webkit-scrollbar-track,
[data-layout-mode="dark"] body::-webkit-scrollbar-track,
html[data-layout-mode="dark"]::-webkit-scrollbar-track,
html[data-layout-mode="dark"] body::-webkit-scrollbar-track {
    background: #2a2f34 !important;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
}

[data-layout-mode="dark"]::-webkit-scrollbar-thumb,
[data-layout-mode="dark"] ::-webkit-scrollbar-thumb,
[data-layout-mode="dark"] body::-webkit-scrollbar-thumb,
html[data-layout-mode="dark"]::-webkit-scrollbar-thumb,
html[data-layout-mode="dark"] body::-webkit-scrollbar-thumb {
    background: #495057 !important;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
    border-radius: 3px !important;
}

[data-layout-mode="dark"]::-webkit-scrollbar-thumb:hover,
[data-layout-mode="dark"] ::-webkit-scrollbar-thumb:hover,
[data-layout-mode="dark"] body::-webkit-scrollbar-thumb:hover,
html[data-layout-mode="dark"]::-webkit-scrollbar-thumb:hover,
html[data-layout-mode="dark"] body::-webkit-scrollbar-thumb:hover {
    background: #5a626a !important;
}

[data-layout-mode="dark"]::-webkit-scrollbar-thumb:window-inactive,
[data-layout-mode="dark"] ::-webkit-scrollbar-thumb:window-inactive,
[data-layout-mode="dark"] body::-webkit-scrollbar-thumb:window-inactive,
html[data-layout-mode="dark"]::-webkit-scrollbar-thumb:window-inactive,
html[data-layout-mode="dark"] body::-webkit-scrollbar-thumb:window-inactive {
    background: #393e46 !important;
}

/* --- 24. Company Node Logo/Icon in Strategy Trees ---
   Counters ManageStrategyTree/Index.cshtml line 303:
   #pillar-tree .company-node .jstree-themeicon { background: #ffedd5 !important; color: var(--stg-primary-dark) !important; }
   and Tree2.cshtml line 395:
   .node-card.node-company .node-icon { background: rgba(249, 115, 22, 0.12) !important; color: #f97316 !important; }
   Underlying glyph is a Boxicons CSS font icon (bx bxs-building-house, per StrategyTreeService.cs line 232,
   manageStrategyTreeScript.js line 395, manageStrategyTree2Script.js line 305). In dark mode, turns the
   glyph white (#ffffff) on a dark-orange container (rgba(249, 115, 22, 0.28)), with defensive filter/fill
   support in case an img or svg is ever rendered. */
[data-layout-mode="dark"] #pillar-tree .company-node .jstree-themeicon,
[data-layout-mode="dark"] .custom-tree-container .node-card.node-company .node-icon,
[data-layout-mode="dark"] .node-card.node-company .node-icon {
    background: rgba(249, 115, 22, 0.28) !important;
    color: #ffffff !important;
}

[data-layout-mode="dark"] #pillar-tree .company-node .jstree-themeicon i,
[data-layout-mode="dark"] .custom-tree-container .node-card.node-company .node-icon i,
[data-layout-mode="dark"] .node-card.node-company .node-icon i {
    color: #ffffff !important;
}

[data-layout-mode="dark"] #pillar-tree .company-node .jstree-themeicon img,
[data-layout-mode="dark"] .custom-tree-container .node-card.node-company .node-icon img,
[data-layout-mode="dark"] .node-card.node-company .node-icon img {
    filter: brightness(0) invert(1) !important;
}

[data-layout-mode="dark"] #pillar-tree .company-node .jstree-themeicon svg,
[data-layout-mode="dark"] .custom-tree-container .node-card.node-company .node-icon svg,
[data-layout-mode="dark"] .node-card.node-company .node-icon svg {
    fill: #ffffff !important;
}

/* --- 25. Strategy Tree View (ManageStrategyTree/Index.cshtml) ---
   Counters hardcoded light inline styles:
   - Line 53: #SearchTreeContainer { background: radial-gradient(...), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #edf1f6; }
   - Lines 41-45: .tree-search-bar .form-floating > .form-control/.form-select { border: 1.5px solid var(--stg-border); }
   - Lines 222-225: #pillar-tree .jstree-anchor { background: #ffffff !important; color: var(--stg-dark) !important; }
   - Lines 242-244: #pillar-tree .jstree-clicked { background: #fff7ed !important; color: #9a3412 !important; border-color: #fdba74 !important; }
   - Lines 314-386: node theme icons:
     .strategy-node .jstree-themeicon { background: #f3f4f6 !important; color: #111827 !important; }
     .pillar-node .jstree-themeicon { background: #dbeafe !important; color: var(--stg-blue) !important; }
     .strategic-goal-node .jstree-themeicon { background: #fef3c7 !important; color: var(--stg-amber) !important; }
     .year-node .jstree-themeicon { background: #f1f5f9 !important; color: #334155 !important; }
     .goal-leaf-node .jstree-themeicon { background: #ede9fe !important; color: var(--stg-purple) !important; }
     .initiative-node .jstree-themeicon { background: #ccfbf1 !important; color: var(--stg-teal) !important; }
     .sub-goal-node .jstree-themeicon { background: #dcf5ff !important; color: #50cfff !important; }
   - Lines 418-477: #pillar-tree .stg-badge, .stg-badge-green, .stg-badge-amber, .stg-badge-purple, .stg-badge-slate, .stg-badge-teal, .stg-badge-cyan, .stg-badge-orange
   - Lines 502, 536-540: #pillar-tree .node-actions { background: rgba(255, 255, 255, 0.97); } and buttons { background: #f8fafc !important; }
   - Lines 597, 619: #pillar-tree tree connectors in #cbd5e1 / #d1d5db
   - Lines 661-722: #detailsModal / #valuesDetailsModal body (#ffffff), .bg-light (#f8fafc), thead th (#f8fafc / #111827), .values-goal-info-item (#f8fafc / #111827)
   - Lines 772-888, 1128-1186: percentage badges (.stg-pct-current-year, .stg-pct-same-year, .stg-pct-inline, .stg-pct-current-same-year) */

[data-layout-mode="dark"] .tree-search-bar .form-floating > .form-control,
[data-layout-mode="dark"] .tree-search-bar .form-floating > .form-select {
    background-color: #262a2f !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #pillar-tree .strategy-node .jstree-themeicon {
    background: rgba(206, 212, 218, 0.12) !important;
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] #pillar-tree .pillar-node .jstree-themeicon {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
}

[data-layout-mode="dark"] #pillar-tree .strategic-goal-node .jstree-themeicon {
    background: rgba(217, 119, 6, 0.2) !important;
    color: #fbbf24 !important;
}

[data-layout-mode="dark"] #pillar-tree .year-node .jstree-themeicon {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #cbd5e1 !important;
}

[data-layout-mode="dark"] #pillar-tree .goal-leaf-node .jstree-themeicon {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #c4b5fd !important;
}

[data-layout-mode="dark"] #pillar-tree .initiative-node .jstree-themeicon {
    background: rgba(13, 148, 136, 0.2) !important;
    color: #2dd4bf !important;
}

[data-layout-mode="dark"] #pillar-tree .sub-goal-node .jstree-themeicon {
    background: rgba(80, 207, 255, 0.2) !important;
    color: #50cfff !important;
}

/* Strategy tree badges */
[data-layout-mode="dark"] #pillar-tree .stg-badge {
    background: #262a2f !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-badge-green {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #86efac !important;
    border-color: rgba(22, 163, 74, 0.35) !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-badge-amber {
    background: rgba(217, 119, 6, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(217, 119, 6, 0.35) !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-badge-purple {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #d8b4fe !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-badge-slate {
    background: #2a2f34 !important;
    color: #ced4da !important;
    border-color: #495057 !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-badge-teal {
    background: rgba(13, 148, 136, 0.2) !important;
    color: #5eead4 !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-badge-cyan {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #67e8f9 !important;
    border-color: rgba(6, 182, 212, 0.35) !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-badge-orange {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
    border-color: rgba(249, 115, 22, 0.35) !important;
}

/* Action buttons container & buttons */
[data-layout-mode="dark"] #pillar-tree .node-actions {
    background: #212529 !important;
    border-color: #32383e !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}

/* Percentage Badges on Strategy Tree
   FIXED (round 7): the original version of this section set one flat `color`/`border-left-color`
   on each badge's base class, which — because `pctClass()` (manageStrategyTreeScript.js) actually
   assigns a SECOND, compound class (`.pct-good` / `.pct-warn` / `.pct-bad`) that the page's own
   `<style>` block (ManageStrategyTree/Index.cshtml lines ~792-833, 891-907, 1150-1187) uses to
   color-code achievement level red/amber/green — silently flattened every badge to the same single
   color regardless of its actual percentage, since an external `!important` rule beats the page's
   own non-`!important` compound-class rule regardless of specificity. Confirmed via a real user
   screenshot showing every badge rendered identically blue. Fix: only override what's NOT
   semantic (background, generic border-color) on the base class; set `color` and
   `border-left-color` per compound `.pct-good`/`.pct-warn`/`.pct-bad` variant instead, reusing
   the exact light-mode hex values the page itself defines for each status so the red/amber/green
   meaning survives in dark mode too (`.same-year-label`/`.strategy-age-label` are intentionally
   left non-semantic here — the page's own light-mode CSS for those is flat gray with no
   good/warn/bad variant either; only `.current-year-label`/`.current-same-year-label` have a real
   compound-colored light-mode counterpart, confirmed by reading the page's active (non-commented)
   CSS). */
[data-layout-mode="dark"] #pillar-tree .stg-pct-current-year,
[data-layout-mode="dark"] #pillar-tree .stg-pct-same-year,
[data-layout-mode="dark"] #pillar-tree .stg-pct-inline,
[data-layout-mode="dark"] #pillar-tree .stg-pct-current-same-year {
    background: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-pct-current-year.pct-good,
[data-layout-mode="dark"] #pillar-tree .stg-pct-same-year.pct-good,
[data-layout-mode="dark"] #pillar-tree .stg-pct-inline.pct-good,
[data-layout-mode="dark"] #pillar-tree .stg-pct-current-same-year.pct-good {
    color: #4ade80 !important;
    border-left-color: #16a34a !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-pct-current-year.pct-warn,
[data-layout-mode="dark"] #pillar-tree .stg-pct-same-year.pct-warn,
[data-layout-mode="dark"] #pillar-tree .stg-pct-inline.pct-warn,
[data-layout-mode="dark"] #pillar-tree .stg-pct-current-same-year.pct-warn {
    color: #fbbf24 !important;
    border-left-color: #d97706 !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-pct-current-year.pct-bad,
[data-layout-mode="dark"] #pillar-tree .stg-pct-same-year.pct-bad,
[data-layout-mode="dark"] #pillar-tree .stg-pct-inline.pct-bad,
[data-layout-mode="dark"] #pillar-tree .stg-pct-current-same-year.pct-bad {
    color: #f87171 !important;
    border-left-color: #dc2626 !important;
}

/* current-year-label / current-same-year-label DO have real compound-colored light-mode rules
   (unlike same-year-label/strategy-age-label, confirmed flat/non-semantic in the page's active
   CSS) — carry the same three-way color split onto their translucent dark background. */
[data-layout-mode="dark"] #pillar-tree .stg-pct-current-year.pct-good .current-year-label,
[data-layout-mode="dark"] #pillar-tree .stg-pct-current-same-year.pct-good .current-same-year-label {
    color: #4ade80 !important;
    background: rgba(22, 163, 74, 0.2) !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-pct-current-year.pct-warn .current-year-label,
[data-layout-mode="dark"] #pillar-tree .stg-pct-current-same-year.pct-warn .current-same-year-label {
    color: #fbbf24 !important;
    background: rgba(217, 119, 6, 0.2) !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-pct-current-year.pct-bad .current-year-label,
[data-layout-mode="dark"] #pillar-tree .stg-pct-current-same-year.pct-bad .current-same-year-label {
    color: #f87171 !important;
    background: rgba(220, 38, 38, 0.2) !important;
}

[data-layout-mode="dark"] #pillar-tree .stg-pct-same-year .same-year-label,
[data-layout-mode="dark"] #pillar-tree .stg-pct-inline .strategy-age-label {
    background: #32383e !important;
    color: #ced4da !important;
}

/* Values Details Modal elements in ManageStrategyTree */
[data-layout-mode="dark"] #valuesDetailsModal .modal-body,
[data-layout-mode="dark"] #detailsModal .modal-body {
    background: #212529 !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #valuesDetailsModal .modal-footer,
[data-layout-mode="dark"] #detailsModal .modal-footer {
    background: #212529 !important;
    border-top-color: #32383e !important;
}

/* FIXED (round 9): noted in this section's own citation comment above ("thead th (#f8fafc /
   #111827)") but never actually given a matching rule — the gap this whole round traced through
   a real user's DevTools inspection. `#valuesDetailsModal thead th { background: #f8fafc
   !important; ... }` (ManageStrategyTree/Index.cshtml line 680) is an ID selector + `!important`,
   which beats every class-based rule this file has for table headers (`.table-light`,
   `.table > thead > tr > th`, `.modal-body table th`) regardless of specificity stacking or
   `!important` on those, because an ID always outranks any number of classes. Match its exact
   selector shape so this one wins instead — the same technique already used correctly just above
   for `#goalPeriodsModal`/`#yearWeightsModal`/`#detailsEditModal`/`#strategyYearlyWeightsModal`
   thead th (this modal was simply missed that round). */
[data-layout-mode="dark"] #valuesDetailsModal thead th {
    background: #2a2f34 !important;
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .values-goal-info-item {
    background: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .values-goal-info-item .info-label {
    color: #878a99 !important;
}

[data-layout-mode="dark"] .values-goal-info-item .info-value {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] #valuesDetailsModal .col-same-year-weighted {
    background: rgba(99, 102, 241, 0.15) !important;
}

/* --- 26. Strategy Tree 2 View (ManageStrategyTree/Tree2.cshtml) ---
   Counters hardcoded light inline styles:
   - Lines 49, 1318: #SearchTreeContainer { background: #fffcf9 !important / #f8fafc !important; border: 1px solid #f1e4d3; }
   - Line 94: .node-card { background: #ffffff; border: 1px solid var(--stg-border); }
   - Line 162: .node-title { color: var(--stg-text) !important; } (#263238)
   - Line 152: .node-type { color: var(--stg-muted) !important; } (#b0783c)
   - Lines 401-504, 833-839: .node-card.node-[type] .node-type light backgrounds and dark text
   - Lines 412, 460: .node-card.node-strategy .node-icon, .node-card.node-year .node-icon dark slate colors
   - Lines 196-218, 874-896: achievement badges (.achievement-success, .achievement-warning, .achievement-danger, .achievement-neutral, .stg-pct-badge)
   - Lines 233, 250: .node-count, .toggle-button { color: #c66a17 !important; background: #ffffff !important; }
   - Line 521: .btn-action { color: #546e7a !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }
   - Lines 293, 309: .children::before, .children > .node-wrapper::before tree lines in var(--stg-border)
   - Lines 360-364: .badge.bg-light { background: #f8f9fa !important; color: #3c4043 !important; }
   - Lines 578-766: Modal styling (.modal-body, .modal-footer, .detail-item-card, .values-goal-info-grid-item, table, .btnmodal)
   - Line 1055: .node-left-actions mobile border-top */

[data-layout-mode="dark"] .custom-tree-container .node-card {
    background: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .custom-tree-container .node-card:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-layout-mode="dark"] .custom-tree-container .node-title {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .custom-tree-container .node-type {
    color: #adb5bd !important;
}

/* Node-type specific pills */
[data-layout-mode="dark"] .node-card.node-company .node-type {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
    border-color: rgba(249, 115, 22, 0.35) !important;
}

[data-layout-mode="dark"] .node-card.node-strategy .node-type {
    background: rgba(206, 212, 218, 0.12) !important;
    color: #ced4da !important;
    border-color: #495057 !important;
}

[data-layout-mode="dark"] .node-card.node-pillar .node-type {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
}

[data-layout-mode="dark"] .node-card.node-strategicgoal .node-type {
    background: rgba(217, 119, 6, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(217, 119, 6, 0.35) !important;
}

[data-layout-mode="dark"] .node-card.node-year .node-type {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #cbd5e1 !important;
    border-color: #495057 !important;
}

[data-layout-mode="dark"] .node-card.node-goal .node-type {
    background: rgba(109, 40, 217, 0.2) !important;
    color: #d8b4fe !important;
    border-color: rgba(109, 40, 217, 0.35) !important;
}

[data-layout-mode="dark"] .node-card.node-initiative .node-type {
    background: rgba(13, 148, 136, 0.2) !important;
    color: #5eead4 !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
}

[data-layout-mode="dark"] .node-card.node-subgoal .node-type {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #67e8f9 !important;
    border-color: rgba(6, 182, 212, 0.35) !important;
}

/* Node Icons with poor dark contrast */
[data-layout-mode="dark"] .node-card.node-strategy .node-icon {
    background: rgba(206, 212, 218, 0.15) !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .node-card.node-year .node-icon {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #94a3b8 !important;
}

/* Tree2 Count, Toggle, Action Buttons */
[data-layout-mode="dark"] .custom-tree-container .node-count {
    background-color: #212529 !important;
    border-color: #32383e !important;
    color: #fdba74 !important;
}

[data-layout-mode="dark"] .custom-tree-container .toggle-button {
    background: #212529 !important;
    border-color: #32383e !important;
    color: #fdba74 !important;
}

[data-layout-mode="dark"] .custom-tree-container .toggle-button:hover,
[data-layout-mode="dark"] .custom-tree-container .toggle-button.expanded {
    background: #f97316 !important;
    color: #ffffff !important;
}

[data-layout-mode="dark"] .custom-tree-container .btn-action {
    background: #212529 !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .custom-tree-container .btn-action:hover {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

/* Tree lines */
[data-layout-mode="dark"] .custom-tree-container .children::before,
[data-layout-mode="dark"] .custom-tree-container .children > .node-wrapper::before {
    background: #495057 !important;
}

[data-layout-mode="dark"] .custom-tree-container .node-left-actions {
    border-top-color: #32383e !important;
}

/* Achievement Badges */
[data-layout-mode="dark"] .achievement-success,
[data-layout-mode="dark"] .stg-pct-badge.pct-good {
    background-color: rgba(22, 163, 74, 0.2) !important;
    color: #86efac !important;
    border-color: rgba(22, 163, 74, 0.4) !important;
}

[data-layout-mode="dark"] .achievement-warning,
[data-layout-mode="dark"] .stg-pct-badge.pct-warn {
    background-color: rgba(217, 119, 6, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(217, 119, 6, 0.4) !important;
}

[data-layout-mode="dark"] .achievement-danger,
[data-layout-mode="dark"] .stg-pct-badge.pct-bad {
    background-color: rgba(220, 38, 38, 0.2) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}

[data-layout-mode="dark"] .achievement-neutral,
[data-layout-mode="dark"] .stg-pct-badge.pct-neutral {
    background-color: #212529 !important;
    color: #ced4da !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .custom-tree-container .badge.bg-light {
    background: #212529 !important;
    color: #ced4da !important;
    border-color: #32383e !important;
}

/* Tree2 Modals */
[data-layout-mode="dark"] .custom-tree-container ~ .modal .modal-body {
    background-color: #212529 !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .detail-item-card {
    background: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .detail-item-icon {
    background: rgba(249, 115, 22, 0.2) !important;
}

[data-layout-mode="dark"] .detail-item-label {
    color: #878a99 !important;
}

[data-layout-mode="dark"] .detail-item-value {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .values-goal-info-grid-item {
    background: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .values-goal-info-grid-item .info-label {
    color: #878a99 !important;
}

[data-layout-mode="dark"] .values-goal-info-grid-item .info-value {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .modal-body table th {
    background-color: #2a2f34 !important;
    color: #eff2f7 !important;
    border-bottom-color: #32383e !important;
}

[data-layout-mode="dark"] .modal-body table td {
    color: #ced4da !important;
    border-bottom-color: #32383e !important;
}

[data-layout-mode="dark"] .modal-body table tbody tr:hover {
    background-color: #2a2f34 !important;
}

[data-layout-mode="dark"] .modal-body table tfoot,
[data-layout-mode="dark"] .modal-body table tfoot td {
    background-color: #2a2f34 !important;
    color: #eff2f7 !important;
    border-top-color: #32383e !important;
}

/* --- 41. Plain inputs inside modal-body tables (weight/period-value edit grids) ---
   Section 26's `.modal-body table td` rule above makes the CELL dark, but a `<td>`'s dark
   background doesn't cascade onto an `<input>` inside it — Bootstrap's `.form-control` paints
   its own background regardless of its container. Several STG modals build their editable rows
   by string-concatenating `<td><input class="form-control form-control-sm ...">` in JS (not
   wrapped in `.form-floating`, so Section 15/39's floating-label rules don't match either):
   ManageStrategyGoals's `#detailsEditModal` (.weight-strategy-age), `#strategyYearlyWeightsModal`
   (.stg-yearly-weight-input), `#goalPeriodsModal` (.goal-period-target-input), and
   `#yearWeightsModal` (.year-weight-input). Scoped generically to any `.modal-body table
   .form-control` (mirrors Section 26's own scope) rather than per-class, so it also covers this
   same "input dropped into a modal's table row" pattern wherever else it already exists or gets
   reused later, instead of re-fixing it one class at a time. */
[data-layout-mode="dark"] .modal-body table .form-control {
    background-color: #262a2f !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .modal-body table .form-control:focus {
    border-color: #495057 !important;
    box-shadow: none !important;
}

/* --- 42. `.cusomstylecssform` floating labels (ManageQA_Models/Edit.cshtml) ---
   Same vendor-hardcoded-color-with-!important pattern as Sections 11/15/36/39/40/41, just for a
   5th wrapper class that had no dark-mode entry at all. Found by enumerating every wrapper class
   app-rtl.min.css gives special `.form-floating` treatment to: `.cardsearch` (11/15),
   `.internalcontrol` (11/39), `.loginbox` (36), `.registerdiv` (already covered per the note at
   Section 36) and this one. Unlike the others, app-rtl.min.css doesn't hardcode a background for
   `.cusomstylecssform .form-floating > .form-control` (only padding/height), so the input itself
   already follows the vendor's dark-aware `--vz-input-bg` variable — only the floating LABEL
   (`color: #000 !important`) needs countering here, the same way Section 11 counters it for the
   other four. */
[data-layout-mode="dark"] .cusomstylecssform .form-floating > label {
    color: #878a99 !important;
}

/* --- 42b. Modal action buttons (.btnmodal): keep Save/Cancel distinguishable ---
   The old blanket `.btnmodal` rule painted EVERY modal button the same #262a2f, which is
   nearly the modal's own background — so the red Cancel (`.btn-danger`) and the dark Save
   (`.btnmodal.btn-success`, vendor gradient #433E3C→#4F4F4F, invisible on a dark modal) both
   lost their identity. Now: the generic dark-surface look applies only to `.btnmodal` buttons
   that carry no semantic colour; Cancel keeps the vendor red; Save is a solid #495057
   slate button with white text (a lighter #6b6f75 gray and a #e9ecef light button were tried
   first; the gray read as disabled, so #495057 was chosen by the user). */
[data-layout-mode="dark"] .btnmodal:not(.btn-danger):not(.btn-success) {
    background: #262a2f !important;
    color: #ced4da !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .btnmodal:not(.btn-danger):not(.btn-success):hover {
    background: #32383e !important;
    color: #ffffff !important;
    border-color: #495057 !important;
}

[data-layout-mode="dark"] .btnmodal.btn-success {
    background: #495057 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #495057 !important;
}

[data-layout-mode="dark"] .btnmodal.btn-success:hover,
[data-layout-mode="dark"] .btnmodal.btn-success:focus {
    background: #5c636a !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #5c636a !important;
}

[data-layout-mode="dark"] .btnmodal.btn-danger {
    color: #ffffff !important;
}

/* --- 27. Initiative Tasks Visualizer & Tree (ManageInitiativeTasks/Index.cshtml) ---
   Counters hardcoded light inline styles:
   - Line 36: #TaskTreeContainer { background: radial-gradient(...), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #edf1f6; }
   - Lines 97-100: #task-tree .jstree-anchor { background: #ffffff !important; border: 1px solid var(--task-border) !important; color: var(--task-dark) !important; }
   - Line 107: #task-tree .jstree-anchor:hover { border-color: #99f6e4 !important; }
   - Lines 114-117: #task-tree .jstree-clicked { background: #f0fdfa !important; color: #115e59 !important; border-color: #5eead4 !important; }
   - Lines 128-157, 639-641: #task-tree .jstree-themeicon light backgrounds (.initiative-root-node, .task-parent, .task-last-level, .pillar-root-node)
   - Lines 219-287, 643-647: #task-tree .task-badge and variants (.task-badge-teal, .task-badge-blue, .task-badge-purple, .task-badge-green, .task-badge-red, .task-badge-amber, .task-badge-slate, .task-badge-dark, .task-badge-indigo, .task-badge-rose)
   - Lines 322-357: #task-tree .node-actions { background: rgba(255, 255, 255, 0.96); } and buttons { background: #f8fafc !important; }
   - Lines 401-432: tooltips with #ffffff background
   - Lines 500, 521: #task-tree connector lines in #cbd5e1 / #d1d5db
   - Line 544: #task-tree .stg-child-indicator { color: #475569 !important; }
   - Lines 589-603: #taskDetailsModal / #taskEditModal / #taskHistoryModal modal body (#ffffff), .bg-light (#f8fafc)
   - Lines 608-614: #taskHistoryModal table border and thead th (#f8fafc / #111827)
   - Lines 688, 828, 910: .text-black on search/results headings */

[data-layout-mode="dark"] #TaskTreeContainer {
    background: radial-gradient(circle at top right, rgba(13, 148, 136, 0.08), transparent 34%), #212529 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] #task-tree .jstree-anchor {
    background: #2a2f34 !important;
    border-color: #32383e !important;
    color: #ced4da !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25) !important;
}

[data-layout-mode="dark"] #task-tree .jstree-anchor:hover {
    border-color: #0d9488 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
}

[data-layout-mode="dark"] #task-tree .jstree-clicked {
    background: rgba(13, 148, 136, 0.2) !important;
    color: #5eead4 !important;
    border-color: #0d9488 !important;
}

[data-layout-mode="dark"] #task-tree .task-node-title {
    color: #eff2f7 !important;
}

/* Initiative Task Themeicons */
[data-layout-mode="dark"] #task-tree .jstree-themeicon {
    background: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #task-tree .initiative-root-node .jstree-themeicon {
    background: rgba(13, 148, 136, 0.25) !important;
    color: #2dd4bf !important;
}

[data-layout-mode="dark"] #task-tree .task-parent .jstree-themeicon {
    background: rgba(37, 99, 235, 0.25) !important;
    color: #93c5fd !important;
}

[data-layout-mode="dark"] #task-tree .task-last-level .jstree-themeicon {
    background: rgba(124, 58, 237, 0.25) !important;
    color: #d8b4fe !important;
}

[data-layout-mode="dark"] #task-tree .pillar-root-node .jstree-themeicon {
    background: rgba(217, 119, 6, 0.25) !important;
    color: #fcd34d !important;
}

/* Task Badges */
[data-layout-mode="dark"] #task-tree .task-badge {
    background: #212529 !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #task-tree .task-badge-teal {
    background: rgba(13, 148, 136, 0.2) !important;
    color: #5eead4 !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
}

[data-layout-mode="dark"] #task-tree .task-badge-blue {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
}

[data-layout-mode="dark"] #task-tree .task-badge-purple {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #d8b4fe !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
}

[data-layout-mode="dark"] #task-tree .task-badge-green {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #86efac !important;
    border-color: rgba(22, 163, 74, 0.35) !important;
}

[data-layout-mode="dark"] #task-tree .task-badge-red {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
}

[data-layout-mode="dark"] #task-tree .task-badge-amber {
    background: rgba(217, 119, 6, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(217, 119, 6, 0.35) !important;
}

[data-layout-mode="dark"] #task-tree .task-badge-slate {
    background: #2a2f34 !important;
    color: #ced4da !important;
    border-color: #495057 !important;
}

[data-layout-mode="dark"] #task-tree .task-badge-indigo {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}

[data-layout-mode="dark"] #task-tree .task-badge-rose {
    background: rgba(225, 29, 72, 0.2) !important;
    color: #fda4af !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
}

/* Task Tree Node Actions */
[data-layout-mode="dark"] #task-tree .node-actions {
    background: #212529 !important;
    border-color: #32383e !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}

[data-layout-mode="dark"] #task-tree .node-actions button {
    background: #262a2f !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #task-tree .node-actions button:hover {
    background: #32383e !important;
    color: #ffffff !important;
}

/* Tree Connectors & Indicators */
[data-layout-mode="dark"] #task-tree .jstree-children > .jstree-node::before {
    background: #495057 !important;
}

[data-layout-mode="dark"] #task-tree .jstree-children > .jstree-node::after {
    border-bottom-color: #495057 !important;
    border-right-color: #495057 !important;
}

[data-layout-mode="dark"] #task-tree .stg-child-indicator {
    color: #878a99 !important;
}

/* Tooltips in ManageInitiativeTasks */
[data-layout-mode="dark"] .tooltip-inner,
[data-layout-mode="dark"] .stg-fixed-tooltip .tooltip-inner {
    background-color: #212529 !important;
    color: #eff2f7 !important;
    border-color: #32383e !important;
    border-top-color: #0d9488 !important;
}

[data-layout-mode="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before,
[data-layout-mode="dark"] .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #212529 !important;
}

[data-layout-mode="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before,
[data-layout-mode="dark"] .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #212529 !important;
}

/* Modals in ManageInitiativeTasks */
[data-layout-mode="dark"] #taskDetailsModal .modal-body,
[data-layout-mode="dark"] #taskEditModal .modal-body,
[data-layout-mode="dark"] #taskHistoryModal .modal-body {
    background: #212529 !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] #taskDetailsModalContent .bg-light {
    background: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] #taskHistoryModal table {
    border-color: #32383e !important;
}

[data-layout-mode="dark"] #taskHistoryModal thead th {
    background: #2a2f34 !important;
    color: #eff2f7 !important;
    border-color: #32383e !important;
}

/* General text-black headers in cardsearch / search results across STG views */
[data-layout-mode="dark"] .text-black {
    color: #eff2f7 !important;
}

/* --- 28. Navbar Company Logo (Raster PNG, not text/font) ---
   `_LayoutMashareq.cshtml`'s navbar logo renders `<img src="@CompanyLogo">` (a session-driven,
   per-company PNG; defaults to `logo-dark.png` when no company-specific logo is set) inside a
   `.weblogo` wrapper. Since it's a real image, not CSS-colorable text, use a `filter` to flip
   it for dark mode. The logo is NOT purely monochrome black — it also has an orange mark —
   so `brightness(0) invert(1)` (which flattens the whole image to black, then to solid white)
   was wrong: it whited out the orange too. `invert(1) hue-rotate(180deg)` inverts lightness
   only (black -> white) while restoring the original hue for saturated colors, so the orange
   mark is left looking like the original orange instead of being flattened to white. */
[data-layout-mode="dark"] .weblogo img {
    filter: invert(1) hue-rotate(180deg);
}

/* --- 29. Navbar Company Logo (`_LayoutMashareqReport.cshtml` variant) ---
   This layout does not use the `.weblogo`/`@CompanyLogo` pattern above — it uses the vendor
   template's own built-in `.logo-dark` / `.logo-light` pair (with a real pre-made white asset,
   `logo-light.png`, already referenced in the markup). The vendor's own show/hide rule for that
   pair is gated on `[data-sidebar=dark]` / `[data-sidebar=light]` (app-rtl.min.css lines
   1746-1759), not on `data-layout-mode` — and `data-sidebar` is hardcoded to `"light"` on this
   layout's `<html>` tag (same root cause as round 3's sidebar fix), so `.logo-light` never showed
   regardless of the theme toggle. Re-point the same display values at `data-layout-mode` instead,
   reusing the vendor's own pre-made light logo asset rather than a CSS filter.

   Scoped with `:not(:has(.weblogo))` so this does NOT also apply inside `_LayoutMashareq.cshtml`'s
   navbar-brand-box, which reuses these same `.logo-dark`/`.logo-light` class names for the
   different `.weblogo`/`@CompanyLogo` pattern handled by Section 28 above — without this guard,
   this rule would hide Section 28's now-correctly-inverted logo and show a generic hardcoded
   light logo instead, breaking per-company branding on that layout. */
[data-layout-mode="dark"] .navbar-brand-box:not(:has(.weblogo)) .logo-dark {
    display: none !important;
}

[data-layout-mode="dark"] .navbar-brand-box:not(:has(.weblogo)) .logo-light {
    display: inline-block !important;
}

/* --- 30. Strategy Tree "Values" Popups — JS-generated inline-styled cells ---
   `Areas/STG/Scripts/manageStrategyTreeScript.js` and `manageStrategyTree2Script.js` build the
   "الهدف الإستراتيجي" / pillar / strategy weighted-achievement tables entirely by string-
   concatenating HTML with literal `style="background:#xxxxxx"` on <th>/<td> (no class at all —
   confirmed via grep, e.g. buildPillarValuesTable's `<td ... style="background:#eef2ff;">` /
   `style="background:#f0fdf4;">` cells, matching a real user's screenshot of this exact popup)
   plus a couple of `<span class="badge rounded-pill" style="background:#dcfce7; color:#166534;">`
   -style pills. An attribute selector on the literal inline-style substring lets these be
   overridden without touching the `.js` file — a same-specificity `!important` external rule
   still wins over a plain (non-!important) inline style. Every distinct pastel background these
   two scripts use (grepped `background:#[0-9a-f]{6}` across both files) is covered below; each
   pastel family keeps its original hue (purple/indigo, green, amber) as a translucent dark tint
   so the columns stay visually distinguishable, not flattened to one gray. `#7c3aed` (a solid,
   already-saturated purple header background/border, not a pastel) needs no override — it already
   has enough contrast in dark mode as-is. */
[data-layout-mode="dark"] [style*="background:#eef2ff"],
[data-layout-mode="dark"] [style*="background:#f5f3ff"] {
    background: rgba(124, 58, 237, 0.18) !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] [style*="background:#f0fdf4"],
[data-layout-mode="dark"] [style*="background:#dcfce7"] {
    background: rgba(22, 163, 74, 0.18) !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] [style*="background:#fef3c7"],
[data-layout-mode="dark"] [style*="background:#fefce8"] {
    background: rgba(202, 138, 4, 0.2) !important;
    color: #ced4da !important;
}

/* The two badge pills above also hardcode a matching dark text color inline
   (`color:#166534` / `color:#92400e`) — override those specifically so the override above's
   `color` isn't fighting the inline `color` at equal (inline) specificity. */
[data-layout-mode="dark"] [style*="color:#166534"] {
    color: #86efac !important;
}

[data-layout-mode="dark"] [style*="color:#92400e"] {
    color: #fde68a !important;
}

/* --- 31. Bootstrap `.table-light` popup table headers ---
   Confirmed via a real user screenshot: the "الهدف الإستراتيجي" popup's table header row stayed
   white. Traced to `buildStrategyValuesTable`/`buildPillarValuesTable`
   (manageStrategyTreeScript.js) generating `<thead class="table-light">` — a table color variant,
   not one of the specific pastel inline-style values Section 30 already covers (those target
   individual `<th>`/`<td>` cells that ALSO carry an inline style; a plain "السنة"/"الإنجاز %"
   `<th>` with no inline color only had `.table-light`'s own light background).

   CORRECTED after the first attempt used Bootstrap's stock `--bs-table-*` variable names and had
   no effect — a follow-up screenshot showed 3 of 4 header cells "fixed" (actually fixed by
   Section 30's inline-style match, unrelated) while the one bare `<th>` relying purely on
   `.table-light` stayed white, proving the fix wasn't really working. Checked
   `bootstrap-rtl.min.css` directly: this vendor bundle renames every Bootstrap table variable to
   a `--vz-` prefix (`.table-light { --vz-table-color: #000; --vz-table-bg: #f3f6f9;
   --vz-table-border-color: #dbdde0; ... }`), not the stock `--bs-table-*` names — overriding the
   wrong variable name is a silent no-op, not an error, which is why it built fine but did
   nothing. Fixed with the real variable names this vendor build actually uses. */
[data-layout-mode="dark"] .table-light {
    --vz-table-color: #eff2f7 !important;
    --vz-table-bg: #262a2f !important;
    --vz-table-border-color: #32383e !important;
    --vz-table-striped-bg: #2a2f34 !important;
    --vz-table-striped-color: #eff2f7 !important;
    --vz-table-active-bg: #32383e !important;
    --vz-table-active-color: #ffffff !important;
    --vz-table-hover-bg: #2a2f34 !important;
    --vz-table-hover-color: #ffffff !important;
    color: #eff2f7 !important;
    border-color: #32383e !important;
}

/* --- 32. STG/ManageInitiativeTasks/TimeSheet — bespoke Gantt-chart page ---
   This view (`Areas/STG/Views/ManageInitiativeTasks/TimeSheet.cshtml`) ships its own
   ~900-line `<style>` block with a page-local `:root { --ts-*: ... }` palette and a large
   number of raw hardcoded light hex colors (`#ffffff`, `#f8fafc`, `#e2e8f0`, etc.) for its
   custom Gantt/timeline UI (`.ts-*` classes) — none of it participates in the vendor's
   `--vz-*` dark-mode variables. Because that `<style>` block is rendered inside `<body>`,
   AFTER this stylesheet's `<link>` in `<head>`, a same-specificity, non-`!important`
   override here would lose the cascade tie-break to the page's own later rule — hence the
   `!important` on every declaration below (including the `--ts-*` variable redefinitions,
   which CSS custom properties support with `!important` too). Status colors (gray/amber/
   green for not-started/in-progress/done) and the teal/orange brand accents are left
   untouched since they're already readable in dark mode; only surfaces and near-black text
   are remapped. */
[data-layout-mode="dark"] {
    --ts-dark: #eff2f7 !important;
    --ts-muted: #adb5bd !important;
    --ts-border: #32383e !important;
    --ts-soft: #2a2f34 !important;
    --ts-orange-text: #fdba74 !important;
}

[data-layout-mode="dark"] .ts-search-card,
[data-layout-mode="dark"] .ts-summary-card,
[data-layout-mode="dark"] .ts-gantt-wrapper,
[data-layout-mode="dark"] .ts-gantt-sidebar-cell,
[data-layout-mode="dark"] .ts-detail-item,
[data-layout-mode="dark"] .ts-detail-close,
[data-layout-mode="dark"] .ts-initiative-count,
[data-layout-mode="dark"] .ts-initiative-toggle {
    background: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .ts-initiative-group {
    background: #1a1d21 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .ts-initiative-header {
    background: linear-gradient(90deg, #2a2f34 0%, #262a2f 100%) !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .ts-initiative-header:hover {
    background: linear-gradient(90deg, #32383e 0%, #262a2f 100%) !important;
}

[data-layout-mode="dark"] .ts-gantt-row:hover .ts-gantt-sidebar-cell,
[data-layout-mode="dark"] .ts-gantt-row:hover .ts-gantt-timeline-cell {
    background: #2a2f34 !important;
}

[data-layout-mode="dark"] .ts-expand-btn:hover {
    background: #32383e !important;
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .ts-month-grid-line {
    background: #32383e !important;
}

[data-layout-mode="dark"] .ts-gantt-detail-row,
[data-layout-mode="dark"] .ts-gantt-detail-sidebar,
[data-layout-mode="dark"] .ts-gantt-detail-timeline {
    background: #1a1d21 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .ts-gantt-scroll::-webkit-scrollbar-track {
    background: #1a1d21 !important;
}

[data-layout-mode="dark"] .ts-gantt-scroll::-webkit-scrollbar-thumb {
    background: #495057 !important;
}

[data-layout-mode="dark"] .ts-gantt-scroll::-webkit-scrollbar-thumb:hover {
    background: #6c757d !important;
}

[data-layout-mode="dark"] .ts-initiative-title-icon {
    background: #1c3d3a !important;
}

/* --- 33. STG Goal-Period-Value / -Confirm Index — shared "attachments" modal gallery ---
   `Areas/STG/Views/ManageViewSTG_GoalPeriodValue/Index.cshtml` and the parallel
   `.../ManageViewSTG_GoalPeriodValueConfirm/Index.cshtml` both embed an identical
   `<style>` block (same IDs/classes, copy-pasted between the two views) for an
   attachments-gallery modal (`#attachmentsModal`) and an image-preview lightbox
   (`.image-preview-modal`), all hardcoded to a light palette. One class-scoped override
   here fixes both pages. Same later-source-wins reasoning as Section 32 applies, hence
   `!important` throughout. */
[data-layout-mode="dark"] #attachmentsModal .modal-body {
    background: #1a1d21 !important;
}

[data-layout-mode="dark"] .attachment-box {
    background: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .attachment-preview {
    background: linear-gradient(145deg, #262a2f, #1a1d21) !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .attachment-name {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .attachment-type {
    color: #adb5bd !important;
    background: #32383e !important;
}

[data-layout-mode="dark"] .attachments-empty-state {
    color: #adb5bd !important;
    background: #1a1d21 !important;
    border-color: #495057 !important;
}

/* --- 34. Login page (`_LayoutLogin.cshtml` + `Areas/Securities/.../Login.cshtml`) ---
   The login layout previously had no dark-mode wiring at all (no toggle button, no
   anti-flash script, no `data-layout-mode` support) — added directly in the layout file.
   The child view `Login.cshtml` additionally ships its own `<style>` block that forces
   `body { background: #fff !important; }` and `.bg-gray { background: #ffffff; }`, which
   would otherwise keep the page permanently white regardless of the toggle. Both are
   overridden here with higher specificity + `!important` for the same later-source-wins
   reason as Sections 32-33 (the view's own `<style>` renders inside `<body>`, after this
   stylesheet's `<link>` in `<head>`). Generic elements on this page (`.card`, `.text-dark`,
   `.text-muted`, form controls) already pick up dark styling for free via the shared
   `.card`/vendor `--vz-*` overrides elsewhere in this file. */
[data-layout-mode="dark"] body {
    background: #1a1d21 !important;
}

[data-layout-mode="dark"] .bg-gray {
    background: #1a1d21 !important;
}

/* --- 35. STG Goal-Period-Value / -Confirm — "Card view" (owner-goals-view) ---
   Both `Areas/STG/Views/ManageViewSTG_GoalPeriodValue/SearchCard.cshtml` and the
   `...Confirm/SearchCard.cshtml` variant embed a near-identical ~1370-line `<style>` block
   (same class names/colors, confirmed via diff) rendering the card-based goal/axis/strategic
   grid seen in the "عرض الكروت" tab. It uses a page-local `:root { --go-*: ... }` palette
   plus a large amount of raw hardcoded light hex for the individual card surfaces
   (department box, progress panel, meta boxes, axis/strategic group headers, the goal
   details modal, etc.), and each `.goal-system-card` additionally sets its own PER-STATUS
   `--status-main/-dark/-soft/-border` variables (new/approved/rejected/review/canceled) that
   feed its top accent strip, state badge, and progress bar — none of it participates in the
   vendor's dark-mode variables. Same later-source-wins reasoning as Sections 32-34 applies
   (the `<style>` block renders inside `<body>`, after this stylesheet's `<link>`), hence
   `!important` throughout. Status hues are kept (just remapped to dark-safe tints) so
   approved/rejected/review/etc. stay visually distinguishable. */
[data-layout-mode="dark"] {
    --go-text: #eff2f7 !important;
    --go-heading: #ffffff !important;
    --go-muted: #adb5bd !important;
    --go-card: #262a2f !important;
    --go-line: #32383e !important;
    --go-line-dark: #495057 !important;
}

[data-layout-mode="dark"] .goals-section-head {
    background: linear-gradient(90deg, #262a2f 0%, #2a2320 100%) !important;
    border-color: #4a3a20 !important;
}

[data-layout-mode="dark"] .goals-count-badge,
[data-layout-mode="dark"] .goal-company-icon,
[data-layout-mode="dark"] .goal-action-btn,
[data-layout-mode="dark"] .goal-detail-box,
[data-layout-mode="dark"] .goal-history-card,
[data-layout-mode="dark"] .axis-goal-count,
[data-layout-mode="dark"] .axis-goal-toggle,
[data-layout-mode="dark"] .strategic-goal-count,
[data-layout-mode="dark"] .strategic-goal-toggle {
    background: #262a2f !important;
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .goal-action-btn:hover {
    border-color: #6c757d !important;
    color: #eff2f7 !important;
    background: #32383e !important;
}

[data-layout-mode="dark"] .goal-company {
    background: linear-gradient(135deg, #262a2f 0%, #1a1d21 100%) !important;
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .goal-progress-panel {
    background: linear-gradient(135deg, #2a2320 0%, #332a1a 100%) !important;
    border-color: #4a3a20 !important;
}

[data-layout-mode="dark"] .goal-progress-track {
    background: #32383e !important;
}

[data-layout-mode="dark"] .goal-meta-box {
    background: #1a1d21 !important;
}

[data-layout-mode="dark"] .goal-number-icon {
    background: #2a2340 !important;
}

[data-layout-mode="dark"] .initiative-number-icon {
    background: #1c3d3a !important;
}

[data-layout-mode="dark"] .goal-state {
    background: #332a1a !important;
    color: #fdba74 !important;
}

/* Modal (goal details popup) */
[data-layout-mode="dark"] .goal-modal .modal-header {
    background: linear-gradient(90deg, #262a2f 0%, #2a2320 100%) !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .goal-modal .close {
    color: #adb5bd !important;
}

[data-layout-mode="dark"] .goal-modal .modal-body {
    background: #1a1d21 !important;
}

[data-layout-mode="dark"] .goal-modal-progress {
    background: #2a2320 !important;
    border-color: #4a3a20 !important;
}

[data-layout-mode="dark"] .goal-history-list::before {
    background: #4a3a20 !important;
}

[data-layout-mode="dark"] .goal-history-item::before {
    border-color: #1a1d21 !important;
    box-shadow: 0 0 0 1px #4a3a20 !important;
}

/* Axis / strategic group wrappers */
[data-layout-mode="dark"] .axis-goal-group,
[data-layout-mode="dark"] .strategic-goal-group {
    background: #1a1d21 !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .axis-goal-header,
[data-layout-mode="dark"] .strategic-goal-header {
    background: linear-gradient(90deg, #2a2f34 0%, #262a2f 100%) !important;
    border-color: #4a3a20 !important;
}

[data-layout-mode="dark"] .axis-goal-header:hover,
[data-layout-mode="dark"] .strategic-goal-header:hover {
    background: linear-gradient(90deg, #332a1a 0%, #262a2f 100%) !important;
}

[data-layout-mode="dark"] .axis-goal-title-icon {
    background: #1e3a5f !important;
}

[data-layout-mode="dark"] .strategic-goal-title-icon {
    background: #3a2f10 !important;
}

[data-layout-mode="dark"] .axis-children-label {
    background: #2a2320 !important;
}

[data-layout-mode="dark"] .axis-empty-state {
    background: rgba(38, 42, 47, .72) !important;
    border-color: #495057 !important;
}

/* Per-status accent variables driving .goal-system-card's top strip / badge / progress bar */
[data-layout-mode="dark"] .goal-system-card {
    background: linear-gradient(180deg, var(--status-soft) 0, #262a2f 82px) !important;
}

[data-layout-mode="dark"] .goal-system-card .goal-progress-panel {
    background: linear-gradient(135deg, #262a2f 0%, var(--status-soft) 100%) !important;
}

[data-layout-mode="dark"] .goal-system-card,
[data-layout-mode="dark"] .goal-system-card.status-new {
    --status-main: #60a5fa !important;
    --status-dark: #bfdbfe !important;
    --status-soft: #1e3a5f !important;
    --status-border: #2c5a8a !important;
}

[data-layout-mode="dark"] .goal-system-card.status-approved {
    --status-main: #4ade80 !important;
    --status-dark: #bbf7d0 !important;
    --status-soft: #14532d !important;
    --status-border: #2f6a44 !important;
}

[data-layout-mode="dark"] .goal-system-card.status-rejected {
    --status-main: #f87171 !important;
    --status-dark: #fecaca !important;
    --status-soft: #4c1d1d !important;
    --status-border: #7a2e2e !important;
}

[data-layout-mode="dark"] .goal-system-card.status-review {
    --status-main: #fbbf24 !important;
    --status-dark: #fde68a !important;
    --status-soft: #4a3510 !important;
    --status-border: #7a5a1f !important;
}

[data-layout-mode="dark"] .goal-system-card.status-canceled,
[data-layout-mode="dark"] .goal-system-card.status-other {
    --status-main: #9ca3af !important;
    --status-dark: #d1d5db !important;
    --status-soft: #2a2f34 !important;
    --status-border: #495057 !important;
}

/* --- 36. Login page — form fields + navbar-less logo (follow-up to Section 34) ---
   Two things Section 34 missed, both flagged by the user against a real rendered page:

   1. `#Login-dialuge`'s inputs/select (`Areas/Securities/Views/ManageUserLogin/Login.cshtml`)
      stayed white. The generic `.form-control`/`.form-select` background DOES follow the
      vendor's `--vz-input-bg` dark-mode variable (confirmed in `app-rtl.min.css`), so the
      plain fields would have worked — but the two text inputs were browser-autofilled, and
      this view's own `<style>` block (lines ~25-33) uses the standard
      `box-shadow: inset 0 0 20px 20px #fff` autofill trick with no `!important`, which paints
      over ANY background color while a field is autofilled. Overridden with a dark inset
      shadow + light `-webkit-text-fill-color`, scoped to `.loginbox` and with `!important`
      (this view's rule has none) so it wins regardless of autofill state.

   2. The logo in `.bg-gray` (`<img class="logsize">`) is the same "logo has black + orange
      elements, not literally monochrome" case as the navbar logo in Section 28 — but it isn't
      wrapped in `.weblogo`, so that section's selector never matched it. Same
      `invert(1) hue-rotate(180deg)` fix, scoped to `.logsize` (unique to this layout). */
[data-layout-mode="dark"] .loginbox .form-control,
[data-layout-mode="dark"] .loginbox .form-select {
    background-color: #262a2f !important;
    border-color: #32383e !important;
    color: #eff2f7 !important;
}

/* Follow-up #1: after Section 0 added `color-scheme: dark`, Chromium started painting
   autofilled fields with its OWN native dark-mode autofill highlight (a gray shimmer/gradient)
   instead of the plain yellow highlight the box-shadow-only trick above was designed to mask —
   the box-shadow no longer fully covered it, so the field showed a gray gradient instead of a
   flat dark fill.

   Follow-up #2: bumping the dark rule's `transition` duration to mask that (600000s) then
   caused the OPPOSITE fault — toggling from dark back to LIGHT left the field stuck showing
   the dark fill, because the element went from matching a rule with an extremely long
   `background-color`/`color` transition to matching Login.cshtml's own separate, un-scoped,
   non-`!important` light rule (`transition: background-color 5000s`) with no explicit rule of
   ours to anchor it — an asymmetric handoff between two independently-authored rules.

   Fixed by making both sides fully explicit, self-contained, and identical in every property
   except the actual colors (same `!important`, same transition duration as the page's own
   original 5000s, both defined here) so switching modes is a clean swap between two complete
   rules rather than a partial handoff to a rule this file doesn't own. */
[data-layout-mode="light"] .loginbox input:-webkit-autofill,
[data-layout-mode="light"] .loginbox input:-webkit-autofill:hover,
[data-layout-mode="light"] .loginbox input:-webkit-autofill:focus,
[data-layout-mode="light"] .loginbox input:-webkit-autofill:active,
[data-layout-mode="light"] .lgoinbox input:-webkit-autofill,
[data-layout-mode="light"] .lgoinbox input:-webkit-autofill:hover,
[data-layout-mode="light"] .lgoinbox input:-webkit-autofill:focus,
[data-layout-mode="light"] .lgoinbox input:-webkit-autofill:active {
    -webkit-text-fill-color: #000000 !important;
    caret-color: #000000 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
}

[data-layout-mode="dark"] .loginbox input:-webkit-autofill,
[data-layout-mode="dark"] .loginbox input:-webkit-autofill:hover,
[data-layout-mode="dark"] .loginbox input:-webkit-autofill:focus,
[data-layout-mode="dark"] .loginbox input:-webkit-autofill:active,
[data-layout-mode="dark"] .lgoinbox input:-webkit-autofill,
[data-layout-mode="dark"] .lgoinbox input:-webkit-autofill:hover,
[data-layout-mode="dark"] .lgoinbox input:-webkit-autofill:focus,
[data-layout-mode="dark"] .lgoinbox input:-webkit-autofill:active {
    -webkit-text-fill-color: #eff2f7 !important;
    caret-color: #eff2f7 !important;
    background-color: #262a2f !important;
    box-shadow: 0 0 0 1000px #262a2f inset !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
}

[data-layout-mode="dark"] .logsize {
    filter: invert(1) hue-rotate(180deg);
}

/* --- 37. Login flow — full sweep (VerificationView, AvaibleSystems, and friends) ---
   User asked to check every login-related view, not just the ones already screenshotted.
   Swept `Areas/Securities/Views/ManageUserLogin/*.cshtml` and `.../ManageForgetPassword/*.cshtml`
   (excluding "-old"/" - Copy"/Mobile variants and dead/commented-out markup) for the same
   hardcoded-light-color patterns fixed elsewhere in this file. Findings:

   - `.text-black` and the `AvaibleSystems.cshtml` classes (`.bggrayhead`, `.iconbg`,
     `.systemsicon`, `.nav-pills.systemsicon .nav-link.active`, `.bgmenu`,
     `.dummy-media-object`) were already covered by Sections 1-5 and the general `.text-black`
     rule further up this file (from an earlier round on the main dashboard, which happens to
     share these vendor classes with the post-login "choose your system" screen) — re-checked
     directly against this file with grep before writing anything new here, no gap found.
   - `.radiobtnwrapper .option` (the OTP-method / admin-email picker card, `app-rtl.min.css`
     ~line 18367, re-declared locally with the same class names in `AdminVerification.cshtml`)
     is a white card in both the vendor CSS and the page's own copy and had no existing
     coverage — one `!important` rule below covers both sources regardless of which currently
     wins the light-mode cascade.
   - `ConfirmProfileData.cshtml` was checked and found to be a fully standalone legacy
     Metronic-family document (own `<!DOCTYPE html>`, `~/Content/Site.css`, `layout3/` logo
     assets, no `_LayoutLogin.cshtml`) — same documented out-of-scope Metronic-shell trade-off
     as the rest of this feature (see research.md), not touched here.
   - `InvestmentPortfolio.cshtml` and `MaintenanceSchedule.cshtml` each define their own
     `body { background-color: #ffffff; }` (no `!important`) and reuse `.loginbox`/
     `.registerdiv .form-floating > .form-control` — both already covered by Sections 34/36
     (`!important` there wins over the page's plain declaration), so no new rule needed. */
[data-layout-mode="dark"] .radiobtnwrapper .option {
    background: #262a2f !important;
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .radiobtnwrapper .option h5,
[data-layout-mode="dark"] .radiobtnwrapper .option span {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .radiobtnwrapper .option span.textstyle {
    color: #adb5bd !important;
}

/* --- 38. OTP digit-entry boxes (`.lgoinbox`, the typo'd sibling of `.loginbox`) ---
   Re-checked the OTP screens after being asked specifically whether they'd been looked at.
   `ManageUserLogin/OTP.cshtml` (the main login OTP) turned out to be a dead end on this point
   — its 4-box markup is HTML-commented out, replaced by a single live `.otp-input` field that
   isn't `bg-white` and was already fine. But three OTHER OTP screens still use the live 4-box
   version with `class="form-control bg-white form-control-lg bg-light border-light"` on each
   digit: `ManageUserLogin/ContactActivationOTP.cshtml` (email/mobile activation OTP, reached
   from ActivateEmail.cshtml/ActivateMobile.cshtml), `ManageForgetPassword/OTP.cshtml`
   (password reset OTP), and `ManageUserLogin/UpdatePasswordOTP.cshtml` (password update OTP)
   — all wrapped in `.lgoinbox`, a typo of `.loginbox` from Section 36 that therefore never
   matched it. `.bg-white`/`.bg-light` are both `!important` Bootstrap utilities, but a
   2-class selector beats their 1-class specificity even under `!important`, so this alone
   wins regardless of which utility class is declared last in the markup. */
[data-layout-mode="dark"] .lgoinbox .form-control,
[data-layout-mode="dark"] .lgoinbox .form-select {
    background-color: #262a2f !important;
    border-color: #32383e !important;
    color: #eff2f7 !important;
}

/* --- 39. Form Controls inside `.internalcontrol` (edit/add modals, e.g. ManageInitiativeTasks) ---
   Section 11 already covers the floating LABEL color for `.internalcontrol .form-floating`
   (same vendor counter-comment lists `.internalcontrol .form-floating ... label { color: #070707; }`
   right next to `.cardsearch`'s), but never got its own Section 15-equivalent for the INPUT
   background — so `#taskEditModal`'s plain text/textarea fields (`Edit.cshtml`'s
   `<div class="form-horizontal internalcontrol">`) stayed white while the modal header/body and
   the Status select2 field around them were already dark. Same vendor rule shape and same
   dark colors as Section 15's `.cardsearch` fix. */
[data-layout-mode="dark"] .internalcontrol .form-floating > .form-control,
[data-layout-mode="dark"] .internalcontrol .form-floating > .form-control-plaintext,
[data-layout-mode="dark"] .internalcontrol .form-floating > .form-select,
[data-layout-mode="dark"] .internalcontrol textarea.form-control {
    background: #262a2f !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .internalcontrol .form-floating > .form-control:focus,
[data-layout-mode="dark"] .internalcontrol .form-floating > .form-control:not(:placeholder-shown),
[data-layout-mode="dark"] .internalcontrol .form-floating > .form-control-plaintext:focus,
[data-layout-mode="dark"] .internalcontrol .form-floating > .form-control-plaintext:not(:placeholder-shown) {
    color: #ced4da !important;
    border-color: #495057 !important;
}

/* --- 40. Bootbox confirm/alert dialogs (site-wide) ---
   Counters Bootstrap's default light `.modal-content` used by bootbox.confirm()/.alert() (e.g.
   the delete-confirmation prompt in ManageInitiativeTasks and elsewhere). Unlike every other
   modal in this app — each covered individually above by its own ID/class — bootbox injects its
   modal markup at runtime with no theme awareness and had never been given a dark-mode rule at
   all, so it stayed white regardless of data-layout-mode. Scoped to `.bootbox` (bootbox's own
   marker class on the outer .modal) rather than a blanket `.modal-content` rule, so no other
   modal that already has its own deliberate override elsewhere in this file is touched. */
[data-layout-mode="dark"] .bootbox .modal-content {
    background-color: #212529 !important;
    border-color: #32383e !important;
    color: #ced4da !important;
}

[data-layout-mode="dark"] .bootbox .modal-header,
[data-layout-mode="dark"] .bootbox .modal-footer {
    border-color: #32383e !important;
}

[data-layout-mode="dark"] .bootbox .modal-title,
[data-layout-mode="dark"] .bootbox .bootbox-body {
    color: #eff2f7 !important;
}

[data-layout-mode="dark"] .bootbox .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}