/*
 * ISWM global dark theme (static part).
 * Covers third-party CDN stylesheets that the browser does not let JS rewrite
 * (Bootstrap 4/5, DataTables, Select2, Leaflet, SweetAlert2, datepicker, Plotly UI).
 * Page/local stylesheets and inline styles are converted by js/dark-theme.js.
 *
 * Rules are scoped with "html.iswm-dark" (higher specificity than the library
 * rules) instead of !important, so inline colours set by pages (status colours,
 * coloured KPI tiles, highlighted rows) still win and are then darkened by the JS.
 */
:root {
    --dt-page: #000000;
    --dt-surface: #0d0e12;
    --dt-surface-2: #15161c;
    --dt-surface-3: #1c1e26;
    --dt-border: rgba(255, 255, 255, 0.10);
    --dt-text: #ffffff;
    --dt-muted: #cbd5e1;
    --dt-accent: #4cc9f0;
    --dt-table-border: rgba(255, 255, 255, 0.16);
    color-scheme: dark;
    --iswm-cal-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3crect x='3' y='4.5' width='18' height='16.5' rx='2.5' fill='%234cc9f0' fill-opacity='.18' stroke='%234cc9f0' stroke-width='2'/%3e%3cpath d='M3 9.5h18' stroke='%234cc9f0' stroke-width='2'/%3e%3cpath d='M8 2.5v4M16 2.5v4' stroke='%234cc9f0' stroke-width='2.2' stroke-linecap='round'/%3e%3cg fill='%234cc9f0'%3e%3crect x='6.5' y='12' width='3' height='2.6' rx='.6'/%3e%3crect x='10.5' y='12' width='3' height='2.6' rx='.6'/%3e%3crect x='14.5' y='12' width='3' height='2.6' rx='.6'/%3e%3crect x='6.5' y='16' width='3' height='2.6' rx='.6'/%3e%3crect x='10.5' y='16' width='3' height='2.6' rx='.6'/%3e%3c/g%3e%3c/svg%3e");
    --iswm-clock-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234cc9f0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9' fill='%234cc9f0' fill-opacity='.18'/%3e%3cpolyline points='12 7 12 12 15.5 14'/%3e%3c/svg%3e");
}

html.iswm-dark,
html.iswm-dark[data-bs-theme=dark] {
    /* Bootstrap 5 variables (in addition to data-bs-theme="dark") */
    --bs-body-bg: var(--dt-page);
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: var(--dt-text);
    --bs-body-color-rgb: 255, 255, 255;
    --bs-emphasis-color: var(--dt-text);
    --bs-secondary-color: var(--dt-muted);
    --bs-tertiary-bg: var(--dt-surface-2);
    --bs-secondary-bg: var(--dt-surface-3);
    --bs-border-color: var(--dt-border);
    --bs-heading-color: var(--dt-text);
    --bs-link-color: #7cc4ff;
    --bs-link-color-rgb: 124, 196, 255;
    --bs-link-hover-color: #a9d8ff;
    --bs-card-bg: var(--dt-surface);
}

/* The app's own colour variables (global.css / styles.css / sweeperAttendance.css) */
html.iswm-dark {
    --color-accent-1: rgba(255, 255, 255, 0.16); /* used for ~345 borders: thin light-white instead of thick near-white */
    --color-primary-1: #ffffff; /* used as text colour */
    --color-secondary-1: var(--dt-surface);
    --color-accent: #e2e8f0; /* icon colour */
}

    html.iswm-dark, html.iswm-dark body {
        background-color: var(--dt-page);
        color: var(--dt-text);
    }

        html.iswm-dark hr {
            border-color: var(--dt-border);
            opacity: 1;
        }

        html.iswm-dark ::selection {
            background: rgba(76, 201, 240, .35);
            color: #fff;
        }

        /* Scrollbars */
        html.iswm-dark * {
            scrollbar-color: #3b475e var(--dt-page);
        }

        html.iswm-dark ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        html.iswm-dark ::-webkit-scrollbar-track {
            background: var(--dt-page);
        }

        html.iswm-dark ::-webkit-scrollbar-thumb {
            background: #3b475e;
            border-radius: 6px;
            border: 2px solid var(--dt-page);
        }

            html.iswm-dark ::-webkit-scrollbar-thumb:hover {
                background: #4b5a75;
            }

        /* ---------- Bootstrap utility classes (these are !important in Bootstrap itself) ---------- */
        html.iswm-dark .bg-white, html.iswm-dark .bg-light, html.iswm-dark .bg-body,
        html.iswm-dark .bg-body-tertiary, html.iswm-dark .bg-body-secondary {
            background-color: var(--dt-surface) !important;
            color: var(--dt-text);
        }

        html.iswm-dark .text-dark, html.iswm-dark .text-black, html.iswm-dark .text-body,
        html.iswm-dark .text-body-emphasis, html.iswm-dark .link-dark {
            color: var(--dt-text) !important;
        }

        html.iswm-dark .text-muted, html.iswm-dark .text-secondary, html.iswm-dark .text-body-secondary,
        html.iswm-dark .form-text, html.iswm-dark .blockquote-footer {
            color: var(--dt-muted) !important;
        }

        html.iswm-dark .border, html.iswm-dark .border-top, html.iswm-dark .border-bottom, html.iswm-dark .border-start,
        html.iswm-dark .border-end, html.iswm-dark .border-left, html.iswm-dark .border-right {
            border-color: var(--dt-border) !important;
        }

        html.iswm-dark .border-dark {
            border-color: #475569 !important;
        }

        /* ---------- Bootstrap components ---------- */
        html.iswm-dark .card, html.iswm-dark .modal-content, html.iswm-dark .popover, html.iswm-dark .toast,
        html.iswm-dark .offcanvas, html.iswm-dark .list-group-item, html.iswm-dark .dropdown-menu,
        html.iswm-dark .accordion-item, html.iswm-dark .accordion-button, html.iswm-dark .jumbotron,
        html.iswm-dark .well, html.iswm-dark .panel {
            background-color: var(--dt-surface);
            color: var(--dt-text);
            border-color: var(--dt-border);
        }

        html.iswm-dark .card-header, html.iswm-dark .card-footer, html.iswm-dark .modal-header, html.iswm-dark .modal-footer,
        html.iswm-dark .popover-header, html.iswm-dark .toast-header, html.iswm-dark .offcanvas-header,
        html.iswm-dark .panel-heading, html.iswm-dark .panel-footer {
            background-color: var(--dt-surface-2);
            color: var(--dt-text);
            border-color: var(--dt-border);
        }

        html.iswm-dark .accordion-button:not(.collapsed) {
            background-color: var(--dt-surface-3);
            color: #fff;
        }

        html.iswm-dark .accordion-button::after, html.iswm-dark .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

        html.iswm-dark .close {
            color: #fff;
            text-shadow: none;
            opacity: .8;
        }

        html.iswm-dark .dropdown-item, html.iswm-dark .dropdown-header, html.iswm-dark .dropdown-item-text {
            color: var(--dt-text);
        }

            html.iswm-dark .dropdown-item:hover, html.iswm-dark .dropdown-item:focus {
                background-color: var(--dt-surface-3);
                color: #fff;
            }

        html.iswm-dark .dropdown-divider {
            border-color: var(--dt-border);
        }

        html.iswm-dark .list-group-item-action:hover, html.iswm-dark .list-group-item-action:focus {
            background-color: var(--dt-surface-3);
            color: #fff;
        }

        html.iswm-dark .list-group-item.active, html.iswm-dark .page-item.active .page-link,
        html.iswm-dark .nav-pills .nav-link.active, html.iswm-dark .nav-pills .show > .nav-link {
            background-color: #2563eb;
            border-color: #2563eb;
            color: #fff;
        }

        html.iswm-dark .nav-tabs {
            border-color: var(--dt-border);
        }

            html.iswm-dark .nav-tabs .nav-link {
                color: var(--dt-muted);
            }

                html.iswm-dark .nav-tabs .nav-link:hover {
                    border-color: var(--dt-border);
                    color: #fff;
                }

                html.iswm-dark .nav-tabs .nav-link.active, html.iswm-dark .nav-tabs .nav-item.show .nav-link {
                    background-color: var(--dt-surface);
                    color: #fff;
                    border-color: var(--dt-border) var(--dt-border) var(--dt-surface);
                }

        html.iswm-dark .page-link {
            background-color: var(--dt-surface);
            border-color: var(--dt-border);
            color: #9fd3ff;
        }

            html.iswm-dark .page-link:hover {
                background-color: var(--dt-surface-3);
                color: #fff;
            }

        html.iswm-dark .page-item.disabled .page-link {
            color: #64748b;
            background-color: var(--dt-surface);
        }

        html.iswm-dark .breadcrumb {
            background-color: var(--dt-surface-2);
        }

        html.iswm-dark .breadcrumb-item, html.iswm-dark .breadcrumb-item.active {
            color: var(--dt-muted);
        }

        html.iswm-dark .progress {
            background-color: var(--dt-surface-3);
        }

        html.iswm-dark .btn-light {
            background-color: var(--dt-surface-3);
            border-color: var(--dt-border);
            color: #fff;
        }

            html.iswm-dark .btn-light:hover {
                background-color: #2a2c35;
                color: #fff;
            }

        html.iswm-dark .btn-outline-dark {
            color: #e2e8f0;
            border-color: #94a3b8;
        }

            html.iswm-dark .btn-outline-dark:hover {
                background-color: #334155;
                color: #fff;
            }

        html.iswm-dark .btn-outline-secondary {
            color: #cbd5e1;
            border-color: #64748b;
        }

        html.iswm-dark .btn-link {
            color: #7cc4ff;
        }

        html.iswm-dark .badge.bg-light, html.iswm-dark .badge-light {
            background-color: var(--dt-surface-3) !important;
            color: #fff;
        }
        /* Bootstrap 5 "text-bg-light" (e.g. CTPT GIS "ALL" count): its black text is turned white by
           js/dark-theme.js but its light background is a CSS variable the JS can't map ->
           white on white. Dark badge + white text, like .badge.bg-light. */
        html.iswm-dark .text-bg-light, html.iswm-dark .badge.text-bg-light {
            background-color: var(--dt-surface-3) !important;
            color: #ffffff !important;
        }

        html.iswm-dark .alert-light {
            background-color: var(--dt-surface-2);
            color: #fff;
            border-color: var(--dt-border);
        }

        /* ---------- Tables ---------- */
        html.iswm-dark .table {
            --bs-table-bg: transparent;
            --bs-table-color: var(--dt-text);
            --bs-table-striped-bg: rgba(255, 255, 255, .04);
            --bs-table-striped-color: var(--dt-text);
            --bs-table-hover-bg: rgba(255, 255, 255, .07);
            --bs-table-hover-color: var(--dt-text);
            --bs-table-active-bg: rgba(255, 255, 255, .08);
            --bs-table-active-color: var(--dt-text);
            --bs-table-border-color: var(--dt-border);
            color: var(--dt-text);
            border-color: var(--dt-border);
        }

        html.iswm-dark table {
            border-color: var(--dt-border);
        }

        html.iswm-dark .table td, html.iswm-dark .table th, html.iswm-dark .table thead th,
        html.iswm-dark .table-bordered, html.iswm-dark .table-bordered td, html.iswm-dark .table-bordered th {
            border-color: var(--dt-border);
        }

        html.iswm-dark .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(255, 255, 255, .04);
        }

        html.iswm-dark .table-hover tbody tr:hover {
            background-color: rgba(255, 255, 255, .07);
            color: #fff;
        }

        html.iswm-dark .table-light, html.iswm-dark .thead-light th, html.iswm-dark .table .thead-light th {
            --bs-table-bg: var(--dt-surface-3);
            --bs-table-color: #fff;
            background-color: var(--dt-surface-3);
            color: #fff;
            border-color: var(--dt-border);
        }

        html.iswm-dark .table-secondary {
            --bs-table-bg: #1a1b21;
            --bs-table-color: #fff;
            background-color: #1a1b21;
            color: #fff;
        }

        html.iswm-dark .table-active {
            background-color: rgba(255, 255, 255, .08);
        }

        /* ---------- One table style for every data table in the application ----------
   Applies to any table that has header cells (Bootstrap tables, DataTables, GridViews,
   custom report tables). Layout-only tables (no <th>) and calendar pickers are left alone.
   Cells/rows that carry their own inline background (status highlighting) keep it. */
        html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) {
            --bs-table-bg: transparent;
            --bs-table-striped-bg: transparent;
            --bs-table-hover-bg: transparent;
            --bs-table-color: #ffffff;
            border-color: var(--dt-table-border) !important;
            color: #ffffff;
            background-color: var(--dt-surface) !important;
        }

            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > thead > tr > th,
            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > thead > tr > td,
            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tbody > tr > th,
            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tr > th,
            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tfoot > tr > th,
            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tfoot > tr > td {
                background: #16171d !important;
                color: #ffffff !important;
                border-color: var(--dt-table-border) !important;
                box-shadow: none !important;
                font-weight: 600;
            }

                html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > thead > tr > th *,
                html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tbody > tr > th * {
                    color: #ffffff !important;
                }

            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tbody > tr:not([style*="background"]) > td:not([style*="background"]),
            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tr:not([style*="background"]) > td:not([style*="background"]) {
                background-color: var(--dt-surface) !important;
                border-color: var(--dt-table-border) !important;
                box-shadow: none !important;
            }

            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tbody > tr:nth-child(even):not([style*="background"]) > td:not([style*="background"]) {
                background-color: #101116 !important;
            }

            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tbody > tr:hover:not([style*="background"]) > td:not([style*="background"]) {
                background-color: #202229 !important;
            }

            html.iswm-dark table:has(th):not(.ui-datepicker-calendar):not(.table-condensed) > tbody > tr > td {
                border-color: var(--dt-table-border) !important;
            }

        /* Several buttons in one table cell (e.g. Ad-hoc "Complete" / "Incomplete"):
           spaced apart and off the cell borders */
        html.iswm-dark td:has(> .btn + .btn) {
            padding: 8px 10px !important;
        }

            html.iswm-dark td:has(> .btn + .btn) > .btn {
                margin: 3px 4px !important;
            }

        html.iswm-dark table.dataTable > tbody > tr.selected > td {
            background-color: #1e3a8a !important;
        }
        /* Thin, light white borders on every table (no thick white lines) */
        html.iswm-dark table, html.iswm-dark table > thead > tr > th, html.iswm-dark table > thead > tr > td,
        html.iswm-dark table > tbody > tr > th, html.iswm-dark table > tbody > tr > td, html.iswm-dark table > tr > td,
        html.iswm-dark table > tr > th, html.iswm-dark table > tfoot > tr > th, html.iswm-dark table > tfoot > tr > td {
            border-color: var(--dt-table-border) !important;
            border-width: 1px !important;
        }

            html.iswm-dark table.dataTable.no-footer {
                border-bottom: 1px solid var(--dt-table-border) !important;
            }

        html.iswm-dark .dataTables_wrapper, html.iswm-dark .table-responsive,
        html.iswm-dark .dataTables_scrollHead, html.iswm-dark .dataTables_scrollBody {
            border-color: var(--dt-table-border) !important;
        }
        /* Sort arrows in table headers: white */
        html.iswm-dark table.dataTable thead > tr > th.sorting:before, html.iswm-dark table.dataTable thead > tr > th.sorting:after,
        html.iswm-dark table.dataTable thead > tr > th.sorting_asc:before, html.iswm-dark table.dataTable thead > tr > th.sorting_asc:after,
        html.iswm-dark table.dataTable thead > tr > th.sorting_desc:before, html.iswm-dark table.dataTable thead > tr > th.sorting_desc:after {
            color: #ffffff !important;
            opacity: 0.45;
        }

        html.iswm-dark table.dataTable thead > tr > th.sorting_asc:before,
        html.iswm-dark table.dataTable thead > tr > th.sorting_desc:after {
            opacity: 1 !important;
        }

        html.iswm-dark .dataTables_scrollHead, html.iswm-dark .dataTables_scrollBody, html.iswm-dark .dataTables_scrollFoot,
        html.iswm-dark .table-responsive {
            background-color: transparent !important;
            border-color: var(--dt-table-border) !important;
        }

        /* ---------- Forms ---------- */
        html.iswm-dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]):not([type=file]),
        html.iswm-dark select, html.iswm-dark textarea, html.iswm-dark .form-control, html.iswm-dark .form-select,
        html.iswm-dark .custom-select, html.iswm-dark .input-group-text {
            background-color: var(--dt-surface-2);
            color: var(--dt-text);
            border-color: var(--dt-border);
        }

        html.iswm-dark input[type=file] {
            color: var(--dt-text);
        }
        /* No glow around text boxes / dropdowns when clicked (Bootstrap, page CSS, browser outline) */
        html.iswm-dark input:focus, html.iswm-dark select:focus, html.iswm-dark textarea:focus,
        html.iswm-dark input:focus-visible, html.iswm-dark select:focus-visible, html.iswm-dark textarea:focus-visible,
        html.iswm-dark .form-control:focus, html.iswm-dark .form-select:focus, html.iswm-dark .custom-select:focus,
        html.iswm-dark .form-check-input:focus, html.iswm-dark .select2-container--focus .select2-selection,
        html.iswm-dark .select2-container--open .select2-selection, html.iswm-dark .chosen-container-active .chosen-single,
        html.iswm-dark .chosen-container-active .chosen-choices, html.iswm-dark .dataTables_wrapper input:focus,
        html.iswm-dark .dataTables_wrapper select:focus, html.iswm-dark .swal2-input:focus, html.iswm-dark .swal2-textarea:focus {
            background-color: var(--dt-surface-2);
            color: var(--dt-text);
            border-color: #475569 !important;
            box-shadow: none !important;
            outline: none !important;
        }

        html.iswm-dark input:disabled:not([type=submit]):not([type=button]):not([type=reset]):not([type=image]), html.iswm-dark select:disabled, html.iswm-dark textarea:disabled,
        html.iswm-dark .form-control:disabled, html.iswm-dark .form-control[readonly], html.iswm-dark .form-select:disabled {
            background-color: #0a0a0d;
            color: #b6c2d4;
        }

        html.iswm-dark ::placeholder {
            color: #8b98ad;
            opacity: 1;
        }

        html.iswm-dark option, html.iswm-dark optgroup {
            background-color: var(--dt-surface-2);
            color: var(--dt-text);
        }
        /* Calendar / clock icons in date & time boxes: clear accent-blue icon (explicit SVG, so page
   CSS or the browser colour-scheme can't turn it into a faint white/grey glyph) */
        html.iswm-dark input[type=date], html.iswm-dark input[type=datetime-local], html.iswm-dark input[type=month],
        html.iswm-dark input[type=week], html.iswm-dark input[type=time] {
            color-scheme: dark;
        }

            html.iswm-dark input[type=date]::-webkit-calendar-picker-indicator,
            html.iswm-dark input[type=datetime-local]::-webkit-calendar-picker-indicator,
            html.iswm-dark input[type=month]::-webkit-calendar-picker-indicator,
            html.iswm-dark input[type=week]::-webkit-calendar-picker-indicator,
            html.iswm-dark input[type=time]::-webkit-calendar-picker-indicator {
                filter: none !important;
                opacity: 1 !important;
                cursor: pointer;
                width: 18px !important;
                height: 18px !important;
                padding: 2px !important;
                margin-left: 4px !important;
                border-radius: 4px;
                color: transparent !important;
                background: var(--iswm-cal-svg) center / 18px 18px no-repeat !important;
            }

            html.iswm-dark input[type=time]::-webkit-calendar-picker-indicator {
                background-image: var(--iswm-clock-svg) !important;
            }

                html.iswm-dark input[type=date]::-webkit-calendar-picker-indicator:hover,
                html.iswm-dark input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
                html.iswm-dark input[type=month]::-webkit-calendar-picker-indicator:hover,
                html.iswm-dark input[type=week]::-webkit-calendar-picker-indicator:hover,
                html.iswm-dark input[type=time]::-webkit-calendar-picker-indicator:hover {
                    background-color: rgba(76, 201, 240, 0.18) !important;
                }
        /* Calendar icons from icon fonts next to date boxes */
        html.iswm-dark .fa-calendar, html.iswm-dark .fa-calendar-days, html.iswm-dark .fa-calendar-alt,
        html.iswm-dark .fa-calendar-day, html.iswm-dark .fa-calendar-check, html.iswm-dark .fa-calendar-week,
        html.iswm-dark .bx-calendar, html.iswm-dark .bxs-calendar, html.iswm-dark .bi-calendar, html.iswm-dark .bi-calendar3,
        html.iswm-dark .bi-calendar-event, html.iswm-dark .glyphicon-calendar {
            color: #4cc9f0 !important;
        }
        /* ...but not the menu icons in the sidebar / top bar (e.g. "Daily Duty Allocation"):
           those stay the same colour as every other menu icon. The active menu item still
           gets its accent colour from the ".main_sidebar div.iswm-active i" rule. */
        html.iswm-dark .main_sidebar [class*="calendar"], html.iswm-dark .main_nav [class*="calendar"],
        html.iswm-dark .offcanvas [class*="calendar"] {
            color: inherit !important;
        }
        /* Dashboard header date box: the calendar emoji (a washed-out white blob in dark mode) is
   replaced by the same accent calendar icon. js/dark-theme.js tags every calendar-emoji
   span with .iswm-cal-icon; the attribute selector covers the dashboard markup directly. */
        html.iswm-dark .iswm-cal-icon,
        html.iswm-dark .date-picker-wrapper span[style*="margin-left"] {
            display: inline-block !important;
            width: 20px !important;
            height: 20px !important;
            font-size: 0 !important;
            line-height: 0 !important;
            color: transparent !important;
            vertical-align: middle;
            filter: none !important;
            background: var(--iswm-cal-svg) center / 20px 20px no-repeat !important;
        }

        /* White dropdown arrows */
        html.iswm-dark select:not([multiple]):not([size]),
        html.iswm-dark .form-select, html.iswm-dark .custom-select {
            -webkit-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right .6rem center !important;
            background-size: 14px 10px !important;
            padding-right: 2rem !important;
        }

        html.iswm-dark .fstdropdown > .fstselected::after {
            border-color: #ffffff transparent transparent !important;
        }

        html.iswm-dark .fstdropdown.open > .fstselected::after {
            border-color: transparent transparent #ffffff !important;
        }

        html.iswm-dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #ffffff transparent transparent transparent !important;
        }

        html.iswm-dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
            border-color: transparent transparent #ffffff transparent !important;
        }

        html.iswm-dark .dropdown-toggle::after {
            color: #ffffff;
        }

        /* Search bars (DataTables search, custom search boxes).
           Text boxes only: <asp:Button ID="btnSearch"> renders as <input type="submit" id="..btnSearch">,
           which must keep its green button colour. */
        html.iswm-dark input[type=search],
        html.iswm-dark .dataTables_wrapper .dataTables_filter input,
        html.iswm-dark input[placeholder*="earch"]:not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),
        html.iswm-dark input[id*="earch"]:not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),
        html.iswm-dark input[class*="earch"]:not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),
        html.iswm-dark input[name*="earch"]:not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),
        html.iswm-dark .search-box, html.iswm-dark .searchbox, html.iswm-dark .search-input {
            background-color: transparent !important;
            border-radius: 6px !important;
            color: #ffffff !important;
            border: 1px solid var(--dt-border) !important;
            box-shadow: none !important;
            outline: none !important;
        }

        /* Search / Show buttons: the same green on every page (asp:Button renders as input[type=submit]) */
        html.iswm-dark input[type=submit][id$="btnSearch"], html.iswm-dark input[type=button][id$="btnSearch"],
        html.iswm-dark button[id$="btnSearch"], html.iswm-dark input[type=submit][id$="btnSerch"],
        html.iswm-dark input[type=submit][value="Search"], html.iswm-dark input[type=button][value="Search"],
        html.iswm-dark input[type=submit][value="Search Records"] {
            background-color: #198754 !important;
            background-image: none !important;
            border: 1px solid #198754 !important;
            color: #ffffff !important;
            box-shadow: none !important;
        }

            html.iswm-dark input[type=submit][id$="btnSearch"]:hover, html.iswm-dark input[type=button][id$="btnSearch"]:hover,
            html.iswm-dark button[id$="btnSearch"]:hover, html.iswm-dark input[type=submit][id$="btnSerch"]:hover,
            html.iswm-dark input[type=submit][value="Search"]:hover, html.iswm-dark input[type=button][value="Search"]:hover,
            html.iswm-dark input[type=submit][value="Search Records"]:hover {
                background-color: #157347 !important;
                border-color: #146c43 !important;
            }

        html.iswm-dark .dataTables_wrapper .dataTables_filter label, html.iswm-dark .dataTables_wrapper .dataTables_length label {
            color: #ffffff;
        }

        html.iswm-dark input[type=search]::-webkit-search-cancel-button {
            filter: invert(1);
        }

        html.iswm-dark .form-check-input {
            background-color: var(--dt-surface-3);
            border-color: #64748b;
        }

            html.iswm-dark .form-check-input:checked {
                background-color: #2563eb;
                border-color: #2563eb;
            }

        /* Radio / checkbox lists (asp:RadioButtonList, CheckBoxList, plain radio + label):
           gap between the circle and its text, and between the options.
           Bootstrap .form-check-input / .btn-check already have their own spacing. */
        html.iswm-dark input[type=radio]:not(.form-check-input):not(.btn-check) + label,
        html.iswm-dark input[type=checkbox]:not(.form-check-input):not(.btn-check) + label {
            margin-left: 6px !important;
            margin-right: 16px !important;
            margin-bottom: 0;
            vertical-align: middle;
        }

        html.iswm-dark input[type=radio]:not(.form-check-input):not(.btn-check),
        html.iswm-dark input[type=checkbox]:not(.form-check-input):not(.btn-check) {
            vertical-align: middle;
        }
        /* The list is rendered as a layout table: no cell borders / grid lines around the options */
        html.iswm-dark table:not(:has(th)):has(> tbody > tr > td > input[type=radio]),
        html.iswm-dark table:not(:has(th)):has(> tbody > tr > td > input[type=radio]) > tbody > tr > td,
        html.iswm-dark table:not(:has(th)):has(> tbody > tr > td > input[type=checkbox]),
        html.iswm-dark table:not(:has(th)):has(> tbody > tr > td > input[type=checkbox]) > tbody > tr > td {
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

            html.iswm-dark table:not(:has(th)):has(> tbody > tr > td > input[type=radio]) > tbody > tr > td,
            html.iswm-dark table:not(:has(th)):has(> tbody > tr > td > input[type=checkbox]) > tbody > tr > td {
                padding: 4px 0 !important;
                white-space: nowrap;
            }

        html.iswm-dark fieldset {
            border-color: var(--dt-border);
        }

        /* ---------- DataTables ---------- */
        html.iswm-dark .dataTables_wrapper .dataTables_length, html.iswm-dark .dataTables_wrapper .dataTables_filter,
        html.iswm-dark .dataTables_wrapper .dataTables_info, html.iswm-dark .dataTables_wrapper .dataTables_processing,
        html.iswm-dark .dataTables_wrapper .dataTables_paginate {
            color: var(--dt-text);
        }

        html.iswm-dark table.dataTable tbody tr {
            background-color: var(--dt-surface);
            color: var(--dt-text);
        }

        html.iswm-dark table.dataTable.stripe tbody tr.odd, html.iswm-dark table.dataTable.display tbody tr.odd {
            background-color: #101116;
        }

        html.iswm-dark table.dataTable.hover tbody tr:hover, html.iswm-dark table.dataTable.display tbody tr:hover {
            background-color: #202229;
        }

        html.iswm-dark table.dataTable.display tbody tr > .sorting_1, html.iswm-dark table.dataTable.order-column tbody tr > .sorting_1,
        html.iswm-dark table.dataTable.display tbody tr.odd > .sorting_1, html.iswm-dark table.dataTable.display tbody tr.even > .sorting_1 {
            background-color: rgba(255, 255, 255, .03);
        }

        html.iswm-dark table.dataTable thead th, html.iswm-dark table.dataTable thead td,
        html.iswm-dark table.dataTable tfoot th, html.iswm-dark table.dataTable tfoot td {
            border-color: var(--dt-border);
        }

        html.iswm-dark table.dataTable.no-footer, html.iswm-dark table.dataTable.row-border tbody th,
        html.iswm-dark table.dataTable.row-border tbody td, html.iswm-dark table.dataTable.display tbody th,
        html.iswm-dark table.dataTable.display tbody td, html.iswm-dark table.dataTable.cell-border tbody td,
        html.iswm-dark table.dataTable.cell-border tbody th {
            border-color: var(--dt-border);
        }

        html.iswm-dark .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: var(--dt-text) !important;
        }

            html.iswm-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
            html.iswm-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
                background: #2563eb;
                border-color: #2563eb;
                color: #fff !important;
            }

            html.iswm-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
                background: var(--dt-surface-3);
                border-color: var(--dt-border);
                color: #fff !important;
            }

            html.iswm-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
            html.iswm-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
                color: #64748b !important;
                background: transparent;
                border-color: transparent;
            }

        html.iswm-dark .dataTables_wrapper .dataTables_processing {
            background: var(--dt-surface-2);
        }

        html.iswm-dark .dataTables_wrapper .dataTables_filter input, html.iswm-dark .dataTables_wrapper .dataTables_length select {
            background-color: var(--dt-surface-2);
            color: var(--dt-text);
            border: 1px solid var(--dt-border);
        }

        html.iswm-dark button.dt-button, html.iswm-dark a.dt-button, html.iswm-dark div.dt-button {
            background: var(--dt-surface-3);
            color: #fff;
            border-color: var(--dt-border);
        }

            html.iswm-dark button.dt-button:hover:not(.disabled), html.iswm-dark a.dt-button:hover:not(.disabled) {
                background: #2a2c35;
                border-color: #475569;
            }

        html.iswm-dark div.dt-button-collection {
            background: var(--dt-surface-2);
        }

        /* ---------- Select2 ---------- */
        html.iswm-dark .select2-container--default .select2-selection--single,
        html.iswm-dark .select2-container--default .select2-selection--multiple,
        html.iswm-dark .select2-dropdown, html.iswm-dark .select2-search__field,
        html.iswm-dark .select2-container--default .select2-search--dropdown .select2-search__field {
            background-color: var(--dt-surface-2);
            color: var(--dt-text);
            border-color: var(--dt-border);
        }

            html.iswm-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
                color: var(--dt-text);
            }

            html.iswm-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
                background-color: var(--dt-surface-3);
                border-color: var(--dt-border);
                color: #fff;
            }

        html.iswm-dark .select2-results__option {
            color: var(--dt-text);
        }

        html.iswm-dark .select2-container--default .select2-results__option--highlighted[aria-selected],
        html.iswm-dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #2563eb;
            color: #fff;
        }

        html.iswm-dark .select2-container--default .select2-results__option[aria-selected=true],
        html.iswm-dark .select2-container--default .select2-results__option--selected {
            background-color: var(--dt-surface-3);
        }

        /* ---------- SweetAlert2 ---------- */
        html.iswm-dark .swal2-popup {
            background: var(--dt-surface);
            color: var(--dt-text);
        }

        html.iswm-dark .swal2-title, html.iswm-dark .swal2-html-container, html.iswm-dark .swal2-content {
            color: var(--dt-text);
        }

        html.iswm-dark .swal2-input, html.iswm-dark .swal2-textarea, html.iswm-dark .swal2-select {
            background: var(--dt-surface-2);
            color: #fff;
            border-color: var(--dt-border);
        }

        /* ---------- Datepickers ---------- */
        html.iswm-dark .datepicker, html.iswm-dark .datepicker-dropdown, html.iswm-dark .ui-datepicker,
        html.iswm-dark .ui-widget-content, html.iswm-dark .flatpickr-calendar {
            background: var(--dt-surface-2);
            color: var(--dt-text);
            border-color: var(--dt-border);
        }

            html.iswm-dark .datepicker table tr td, html.iswm-dark .datepicker table tr th {
                color: var(--dt-text);
            }

                html.iswm-dark .datepicker table tr td.day:hover, html.iswm-dark .datepicker table tr td.focused,
                html.iswm-dark .datepicker .datepicker-switch:hover, html.iswm-dark .datepicker .prev:hover,
                html.iswm-dark .datepicker .next:hover, html.iswm-dark .datepicker tfoot tr th:hover {
                    background: var(--dt-surface-3);
                }

                html.iswm-dark .datepicker table tr td.old, html.iswm-dark .datepicker table tr td.new {
                    color: #64748b;
                }

            html.iswm-dark .datepicker-dropdown:after {
                border-bottom-color: var(--dt-surface-2);
            }

        html.iswm-dark .ui-widget-header {
            background: var(--dt-surface-3);
            color: #fff;
            border-color: var(--dt-border);
        }

        html.iswm-dark .ui-state-default, html.iswm-dark .ui-widget-content .ui-state-default {
            background: var(--dt-surface);
            color: #fff;
            border-color: var(--dt-border);
        }

        /* ---------- Leaflet ---------- */
        html.iswm-dark .leaflet-container {
            background: #050506;
        }
        /* Dark map: base-map tiles are inverted + hue-rotated (roads/water/parks keep their
   colour family, land becomes dark). Only the tile images are filtered, so markers,
   routes, polygons and popups keep their original colours. Satellite imagery is left as is. */
        html.iswm-dark .leaflet-tile-pane img.leaflet-tile {
            filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.6);
        }

            html.iswm-dark .leaflet-tile-pane img.leaflet-tile[src*="World_Imagery"],
            html.iswm-dark .leaflet-tile-pane img.leaflet-tile[src*="lyrs=s"],
            html.iswm-dark .leaflet-tile-pane img.leaflet-tile[src*="lyrs=y"],
            html.iswm-dark .leaflet-tile-pane img.leaflet-tile[src*="satellite"],
            html.iswm-dark .leaflet-tile-pane img.leaflet-tile[src*="dark_all"],
            html.iswm-dark .leaflet-tile-pane img.leaflet-tile[src*="dark-v"] {
                filter: none;
            }

        html.iswm-dark .leaflet-popup-content-wrapper, html.iswm-dark .leaflet-popup-tip, html.iswm-dark .leaflet-tooltip {
            background: var(--dt-surface-2);
            color: var(--dt-text);
            border-color: var(--dt-border);
        }

        html.iswm-dark .leaflet-tooltip-top:before {
            border-top-color: var(--dt-surface-2);
        }

        html.iswm-dark .leaflet-tooltip-bottom:before {
            border-bottom-color: var(--dt-surface-2);
        }

        html.iswm-dark .leaflet-tooltip-left:before {
            border-left-color: var(--dt-surface-2);
        }

        html.iswm-dark .leaflet-tooltip-right:before {
            border-right-color: var(--dt-surface-2);
        }

        html.iswm-dark .leaflet-container a.leaflet-popup-close-button {
            color: #cbd5e1;
        }

        html.iswm-dark .leaflet-bar a, html.iswm-dark .leaflet-control-layers, html.iswm-dark .leaflet-control-zoom a,
        html.iswm-dark .leaflet-control-geocoder, html.iswm-dark .leaflet-control-geocoder-form input,
        html.iswm-dark .leaflet-control-geocoder-alternatives {
            background-color: var(--dt-surface-2);
            color: var(--dt-text);
            border-color: var(--dt-border);
        }

            html.iswm-dark .leaflet-bar a:hover {
                background-color: var(--dt-surface-3);
                color: #fff;
            }

        html.iswm-dark .leaflet-control-attribution {
            background: rgba(10, 10, 12, .8);
            color: #cbd5e1;
        }

            html.iswm-dark .leaflet-control-attribution a {
                color: #7cc4ff;
            }
        /* All map buttons (zoom, fullscreen, print, draw): same dark button, same hover, on every map */
        html.iswm-dark .leaflet-bar a, html.iswm-dark .leaflet-control-zoom a,
        html.iswm-dark .leaflet-bar a:focus, html.iswm-dark .leaflet-control-zoom a:focus {
            background-color: var(--dt-surface-2) !important;
            color: #ffffff !important;
            border-color: var(--dt-border) !important;
            filter: none !important;
        }

            html.iswm-dark .leaflet-bar a:hover, html.iswm-dark .leaflet-control-zoom a:hover,
            html.iswm-dark .leaflet-bar a:active, html.iswm-dark .leaflet-control-zoom a:active {
                background-color: #2a2c35 !important;
                color: #ffffff !important;
                filter: none !important;
            }

            html.iswm-dark .leaflet-bar a.leaflet-disabled {
                background-color: #0a0a0d !important;
                color: #64748b !important;
            }

        html.iswm-dark .leaflet-bar, html.iswm-dark .leaflet-control-layers, html.iswm-dark .leaflet-control-browser-print {
            border-color: rgba(255,255,255,0.18) !important;
            box-shadow: none !important;
        }
        /* Fullscreen button: white icon (replaces the black image sprite, no colour inversion) */
        html.iswm-dark .leaflet-control-fullscreen a {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3e%3c/svg%3e") !important;
            background-size: 16px 16px !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        html.iswm-dark .leaflet-fullscreen-on .leaflet-control-fullscreen a {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3e%3c/svg%3e") !important;
        }
        /* Map print button: white printer icon */
        html.iswm-dark .leaflet-control-browser-print a.leaflet-browser-print,
        html.iswm-dark a.leaflet-browser-print {
            background-color: var(--dt-surface-2) !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9V3h12v6'/%3e%3crect x='3' y='9' width='18' height='8' rx='2'/%3e%3cpath d='M6 14h12v7H6z'/%3e%3c/svg%3e") !important;
            background-size: 16px 16px !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            filter: none !important;
        }

            html.iswm-dark .leaflet-control-browser-print a.leaflet-browser-print:hover,
            html.iswm-dark a.leaflet-browser-print:hover {
                background-color: #2a2c35 !important;
            }

        html.iswm-dark .browser-print-mode, html.iswm-dark .leaflet-browser-print-content,
        html.iswm-dark .leaflet-control-browser-print ul, html.iswm-dark .leaflet-control-browser-print li {
            background-color: var(--dt-surface-2) !important;
            color: #ffffff !important;
        }
        /* Map labels (permanent tooltips) : white text with a dark outline for readability */
        html.iswm-dark .leaflet-tooltip.transparent-label, html.iswm-dark .leaflet-tooltip.transparent-tooltip {
            color: #ffffff !important;
            text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
        }

        html.iswm-dark .transparent-popup .leaflet-popup-content-wrapper,
        html.iswm-dark .transparent-popup .leaflet-popup-content-wrapper * {
            color: #ffffff !important;
            text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
        }

        html.iswm-dark .leaflet-popup-content, html.iswm-dark .leaflet-popup-content b,
        html.iswm-dark .leaflet-popup-content strong, html.iswm-dark .leaflet-popup-content span {
            color: #ffffff;
        }

        /* ---------- Plotly UI chrome ---------- */
        html.iswm-dark .js-plotly-plot .plotly .modebar {
            background: transparent;
        }

        html.iswm-dark .js-plotly-plot .plotly .modebar-group {
            background: transparent !important;
        }

        html.iswm-dark .js-plotly-plot .plotly .modebar-btn path {
            fill: rgba(255, 255, 255, .55) !important;
        }

        html.iswm-dark .js-plotly-plot .plotly .modebar-btn:hover path,
        html.iswm-dark .js-plotly-plot .plotly .modebar-btn.active path {
            fill: #ffffff !important;
        }

        /* ---------- Searchable dropdowns (fstdropdown): no glow / blue border when open or hovered ---------- */
        html.iswm-dark .fstdropdown,
        html.iswm-dark .fstdropdown:hover,
        html.iswm-dark .fstdropdown.open,
        html.iswm-dark .fstdropdown.open:hover,
        html.iswm-dark .fstdropdown > .fstselected,
        html.iswm-dark .fstsearchinput,
        html.iswm-dark .fstsearchinput:focus {
            border-color: var(--dt-border) !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            outline: none !important;
        }

        html.iswm-dark .fstdropdown {
            background: var(--dt-surface-2);
        }

        html.iswm-dark .fstlist > div {
            border-bottom-color: var(--dt-border);
        }

        /* Select2 / Chosen open state: no glow */
        html.iswm-dark .select2-container--default.select2-container--focus .select2-selection--multiple,
        html.iswm-dark .select2-container--default.select2-container--open .select2-selection--single,
        html.iswm-dark .select2-dropdown,
        html.iswm-dark .chosen-container-active .chosen-single,
        html.iswm-dark .chosen-container-active.chosen-with-drop .chosen-single,
        html.iswm-dark .chosen-container .chosen-drop {
            box-shadow: none !important;
            border-color: var(--dt-border) !important;
        }

        /* ---------- Collapse (chevron) buttons in panel header bars ----------
   They were full height (h-100) and sat on top of the bar's border lines.
   Now: vertically centred inside the bar with a small gap, bar borders untouched. */
        html.iswm-dark .toggler__btn,
        html.iswm-dark .toggler__btn1,
        html.iswm-dark button[data-toggle="collapse"].btn-light,
        html.iswm-dark button[data-bs-toggle="collapse"].btn-light {
            height: auto !important;
            min-height: 0 !important;
            align-self: center !important;
            margin: 4px 6px 4px 4px !important;
            padding: 4px 12px !important;
            line-height: 1.2 !important;
            border-radius: 6px !important;
            background-color: var(--dt-surface-3) !important;
            border: 1px solid rgba(255, 255, 255, 0.16) !important;
            color: #ffffff !important;
            box-shadow: none !important;
        }

            html.iswm-dark .toggler__btn:hover,
            html.iswm-dark .toggler__btn1:hover,
            html.iswm-dark button[data-toggle="collapse"].btn-light:hover,
            html.iswm-dark button[data-bs-toggle="collapse"].btn-light:hover {
                background-color: #2a2c35 !important;
            }

            html.iswm-dark .toggler__btn i, html.iswm-dark .toggler__btn1 i,
            html.iswm-dark button[data-toggle="collapse"].btn-light i {
                color: #ffffff !important;
            }

        /* Any other full-height chevron button in a header bar (e.g. Fleet "Live Tracking" / "History"):
   centred in the bar, bar borders untouched */
        html.iswm-dark .btn.h-100:has(> i[class*="fa-chevron"]),
        html.iswm-dark .btn.h-100:has(> i[class*="fa-angle"]),
        html.iswm-dark .btn-light:has(> i.fa-chevron-down),
        html.iswm-dark .btn-light:has(> i.fa-chevron-up) {
            height: auto !important;
            min-height: 0 !important;
            align-self: center !important;
            margin: 4px 6px 4px 4px !important;
            padding: 4px 12px !important;
            line-height: 1.2 !important;
            border-radius: 6px !important;
            background-color: var(--dt-surface-3) !important;
            border: 1px solid rgba(255, 255, 255, 0.16) !important;
            color: #ffffff !important;
            box-shadow: none !important;
        }

            html.iswm-dark .btn.h-100:has(> i[class*="fa-chevron"]):hover,
            html.iswm-dark .btn-light:has(> i.fa-chevron-down):hover,
            html.iswm-dark .btn-light:has(> i.fa-chevron-up):hover {
                background-color: #2a2c35 !important;
            }

        /* ---------- Chart toolbar (maximize / restore icon) ---------- */
        html.iswm-dark .js-plotly-plot .plotly .modebar,
        html.iswm-dark .js-plotly-plot .show-controlpanel .modebar,
        html.iswm-dark .js-plotly-plot .plotly .modebar-group {
            background: transparent !important;
        }

        html.iswm-dark .js-plotly-plot .plotly .modebar-btn path,
        html.iswm-dark .js-plotly-plot .plotly .modebar-btn svg,
        html.iswm-dark .js-plotly-plot .modebar-btn svg {
            fill: #ffffff !important;
            opacity: 1 !important;
        }
        /* ---------- Table search: white icon, dark box ---------- */
        html.iswm-dark .dataTables_wrapper .dataTables_filter img,
        html.iswm-dark .dataTables_filter label img {
            filter: brightness(0) invert(1) !important;
        }

        html.iswm-dark .dataTables_wrapper .dataTables_filter label {
            background: transparent !important;
            color: #ffffff !important;
        }

        html.iswm-dark .dataTables_wrapper .dataTables_filter .fa-search,
        html.iswm-dark .dataTables_wrapper .dataTables_filter .fa-magnifying-glass,
        html.iswm-dark .input-group .fa-search, html.iswm-dark .input-group .fa-magnifying-glass,
        html.iswm-dark .search-icon, html.iswm-dark i.bx-search {
            color: #ffffff !important;
        }

        /* ---------- Map search box (leaflet-control-geocoder): dark background, white icon ---------- */
        html.iswm-dark .leaflet-control-geocoder {
            background: var(--dt-surface-2) !important;
            border: 1px solid rgba(255, 255, 255, 0.18) !important;
            box-shadow: none !important;
            color: #ffffff !important;
        }

            html.iswm-dark .leaflet-control-geocoder-icon,
            html.iswm-dark .leaflet-control-geocoder .leaflet-control-geocoder-icon {
                background-color: var(--dt-surface-2) !important;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cline x1='21' y1='21' x2='16.65' y2='16.65'/%3e%3c/svg%3e") !important;
                background-size: 18px 18px !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                border: none !important;
                filter: none !important;
            }

                html.iswm-dark .leaflet-control-geocoder-icon:hover {
                    background-color: #2a2c35 !important;
                }

        html.iswm-dark .leaflet-control-geocoder-form input,
        html.iswm-dark .leaflet-control-geocoder-form input:focus {
            background: var(--dt-surface-2) !important;
            color: #ffffff !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }

            html.iswm-dark .leaflet-control-geocoder-form input::placeholder {
                color: #94a3b8 !important;
            }

        html.iswm-dark .leaflet-control-geocoder-alternatives, html.iswm-dark .leaflet-control-geocoder-alternatives li,
        html.iswm-dark .leaflet-control-geocoder-alternatives a {
            background: var(--dt-surface-2) !important;
            color: #ffffff !important;
            border-color: rgba(255,255,255,0.12) !important;
        }

            html.iswm-dark .leaflet-control-geocoder-alternatives li:hover,
            html.iswm-dark .leaflet-control-geocoder-selected {
                background: #2a2c35 !important;
            }

        html.iswm-dark .leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
            background-image: none !important;
        }

        /* ---------- Chosen (its local CSS is also converted by the JS) ---------- */
        html.iswm-dark .chosen-container .chosen-single, html.iswm-dark .chosen-container .chosen-drop,
        html.iswm-dark .chosen-container-multi .chosen-choices, html.iswm-dark .chosen-container .chosen-search input[type=text] {
            background: var(--dt-surface-2);
            color: var(--dt-text);
            border-color: var(--dt-border);
            box-shadow: none;
        }

        html.iswm-dark .chosen-container .chosen-results li {
            color: var(--dt-text);
        }

            html.iswm-dark .chosen-container .chosen-results li.highlighted {
                background: #2563eb;
                color: #fff;
            }

/* =====================================================================
   PURE BLACK + GLASS THEME
   ===================================================================== */
@keyframes iswmGlassIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Pure black page with a very faint ambient glow so glass panels read as glass */
html.iswm-dark, html.iswm-dark body {
    background-color: #000000 !important;
}

    html.iswm-dark body {
        background-image: radial-gradient(1100px 600px at 12% -8%, rgba(76, 201, 240, 0.055), transparent 60%), radial-gradient(900px 520px at 105% 8%, rgba(155, 93, 229, 0.045), transparent 60%), radial-gradient(900px 600px at 50% 115%, rgba(0, 245, 212, 0.03), transparent 60%) !important;
        background-attachment: fixed !important;
    }

    /* Glass panels: Bootstrap / common containers
   (opaque near-black base + soft sheen, thin light edge, deep shadow; no blur/transform
    so fixed-position children such as fullscreen charts and modals keep working) */
    html.iswm-dark .card:not([class*="bg-"]):not([class*="text-bg-"]):not([style*="background"]),
    html.iswm-dark .chart-card:not([style*="background"]),
    html.iswm-dark .panel:not([style*="background"]), html.iswm-dark .well:not([style*="background"]),
    html.iswm-dark .jumbotron:not([style*="background"]), html.iswm-dark .accordion-item,
    html.iswm-dark .filters-container, html.iswm-dark .sweeper-coverage-report {
        background-color: #0d0e12 !important;
        background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.01) 100%) !important;
        border-color: rgba(255, 255, 255, 0.09) !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        transition: box-shadow .35s ease, border-color .35s ease !important;
        animation: iswmGlassIn .6s ease-out;
    }

        html.iswm-dark .card:hover, html.iswm-dark .chart-card:hover, html.iswm-dark .panel:hover,
        html.iswm-dark .filters-container:hover, html.iswm-dark .sweeper-coverage-report:hover {
            border-color: rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 22px rgba(76, 201, 240, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        }
    /* card sub-parts stay transparent so the glass shows through */
    html.iswm-dark .card-body, html.iswm-dark .card-footer {
        background-color: transparent !important;
    }

    html.iswm-dark .card-header {
        background-color: rgba(255, 255, 255, 0.03) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
    /* Popups / menus / modals: same glass look but fully opaque for readability */
    html.iswm-dark .modal-content, html.iswm-dark .dropdown-menu, html.iswm-dark .popover, html.iswm-dark .swal2-popup,
    html.iswm-dark .leaflet-popup-content-wrapper, html.iswm-dark .offcanvas {
        background-color: #111217 !important;
        background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }

    html.iswm-dark .modal-content {
        animation: iswmGlassIn .35s ease-out;
    }

    html.iswm-dark .modal-backdrop.show {
        opacity: .75 !important;
    }

    /* Top bar & sidebar in the same black glass */
    html.iswm-dark .main_nav {
        background-color: rgba(0, 0, 0, 0.92) !important;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    html.iswm-dark .main_sidebar, html.iswm-dark .offcanvas.offcanvas-start {
        background-color: #050506 !important;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

        html.iswm-dark .main_sidebar li {
            border-color: rgba(255, 255, 255, 0.07) !important;
            transition: background-color .25s ease;
        }

            html.iswm-dark .main_sidebar li:hover {
                background-color: rgba(255, 255, 255, 0.05) !important;
            }

    /* Buttons: smooth hover */
    html.iswm-dark .btn {
        transition: filter .2s ease, box-shadow .2s ease, background-color .2s ease !important;
    }

        html.iswm-dark .btn:hover {
            filter: brightness(1.12);
        }

    html.iswm-dark .js-plotly-plot .plotly .modebar-btn path,
    html.iswm-dark .js-plotly-plot .plotly .modebar-btn:hover path,
    html.iswm-dark .js-plotly-plot .plotly .modebar-btn.active path,
    html.iswm-dark .js-plotly-plot .modebar-btn svg,
    html.iswm-dark .js-plotly-plot .modebar-btn:hover svg {
        fill: #ffffff !important;
        opacity: 1 !important;
    }

    html.iswm-dark .js-plotly-plot .plotly .modebar-btn {
        transition: transform .2s ease, filter .2s ease;
    }

        html.iswm-dark .js-plotly-plot .plotly .modebar-btn:hover {
            transform: scale(1.18);
            filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
        }
    /* Dashboard title strips (".header-bar" on every dashboard) and tab bars: black glass */
    html.iswm-dark .header-bar {
        background-color: #07080a !important;
        background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-bottom: 1px solid rgba(76, 201, 240, 0.35) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        animation: iswmGlassIn .5s ease-out;
    }

        html.iswm-dark .header-bar h1, html.iswm-dark .header-bar h2, html.iswm-dark .header-bar h3 {
            color: #ffffff !important;
        }

        html.iswm-dark .header-bar input, html.iswm-dark .header-bar .btn, html.iswm-dark .header-bar .date-picker,
        html.iswm-dark .header-bar [class*="date"] {
            background-color: rgba(255, 255, 255, 0.06) !important;
            border: 1px solid rgba(255, 255, 255, 0.14) !important;
            color: #ffffff !important;
        }

    html.iswm-dark .tab-nav {
        background: transparent !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

        html.iswm-dark .tab-nav .tab {
            background-color: rgba(255, 255, 255, 0.04) !important;
            background-image: none !important;
            color: #cbd5e1 !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            transition: background-color .25s ease, color .25s ease, box-shadow .25s ease !important;
        }

            html.iswm-dark .tab-nav .tab:hover {
                background-color: rgba(255, 255, 255, 0.08) !important;
                color: #ffffff !important;
            }

            html.iswm-dark .tab-nav .tab.active {
                background-color: rgba(255, 255, 255, 0.10) !important;
                color: #ffffff !important;
                box-shadow: inset 0 -2px 0 #4cc9f0, 0 0 18px rgba(76, 201, 240, 0.12) !important;
            }

    /* =====================================================================
   v10 fixes
   ===================================================================== */
    /* Table controls ("Show 10 entries", "Search:", "Showing 1 to 10", pagination): off the borders */
    html.iswm-dark .dataTables_wrapper .dataTables_length,
    html.iswm-dark .dataTables_wrapper .dataTables_filter,
    html.iswm-dark .dataTables_wrapper .dataTables_info,
    html.iswm-dark .dataTables_wrapper .dataTables_paginate {
        padding: 10px 14px !important;
    }

        html.iswm-dark .dataTables_wrapper .dataTables_length select {
            margin: 0 6px !important;
        }

    /* Active page in the sidebar: dark-theme highlight */
    html.iswm-dark .main_sidebar a.iswm-active {
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    html.iswm-dark .main_sidebar div.iswm-active {
        background-color: rgba(76, 201, 240, 0.14) !important;
        background-image: linear-gradient(90deg, rgba(76, 201, 240, 0.22), rgba(76, 201, 240, 0.04)) !important;
        box-shadow: inset 3px 0 0 #4cc9f0 !important;
    }

        html.iswm-dark .main_sidebar div.iswm-active i {
            color: #4cc9f0 !important;
        }

    /* Dashboard date box (header strip): black, white calendar icon; the calendar pop-up uses the
   browser's dark picker */
    html.iswm-dark .date-picker-wrapper, html.iswm-dark .header-bar .date-picker-wrapper {
        background-color: #000000 !important;
        background-image: none !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    html.iswm-dark input[type=date], html.iswm-dark input[type=datetime-local], html.iswm-dark input[type=month],
    html.iswm-dark input[type=time], html.iswm-dark input[type=week] {
        color-scheme: dark !important;
    }

    /* Chart maximize/restore icon: white, no glow on hover, top-right corner */
    html.iswm-dark .js-plotly-plot .plotly .modebar-btn:hover {
        filter: none !important;
        transform: none !important;
    }

        html.iswm-dark .js-plotly-plot .plotly .modebar-btn:hover path {
            fill: #ffffff !important;
            opacity: 1 !important;
        }

    html.iswm-dark .js-plotly-plot .plotly .modebar {
        box-shadow: none !important;
    }

    /* Search icons white on every page (image icons, font icons) */
    html.iswm-dark img[src*="search" i], html.iswm-dark input[type=image][src*="search" i] {
        filter: brightness(0) invert(1) !important;
    }

    html.iswm-dark .fa-search, html.iswm-dark .fa-magnifying-glass, html.iswm-dark .bi-search,
    html.iswm-dark .bx-search, html.iswm-dark .ti-search, html.iswm-dark .glyphicon-search {
        color: #ffffff !important;
    }

    /* One background for every dropdown (selects, searchable dropdowns, Select2, Chosen, menus) */
    html.iswm-dark select, html.iswm-dark select option, html.iswm-dark select optgroup,
    html.iswm-dark .form-select, html.iswm-dark .custom-select,
    html.iswm-dark .fstdropdown, html.iswm-dark .fstdropdown > .fstselected, html.iswm-dark .fstlist,
    html.iswm-dark .fstlist > div, html.iswm-dark .fstsearch, html.iswm-dark .fstsearchinput,
    html.iswm-dark .select2-container--default .select2-selection--single,
    html.iswm-dark .select2-container--default .select2-selection--multiple,
    html.iswm-dark .select2-dropdown, html.iswm-dark .select2-results__option, html.iswm-dark .select2-search__field,
    html.iswm-dark .chosen-container .chosen-single, html.iswm-dark .chosen-container .chosen-drop,
    html.iswm-dark .chosen-container .chosen-results li, html.iswm-dark .chosen-container-multi .chosen-choices,
    html.iswm-dark .dropdown-menu, html.iswm-dark .dropdown-item,
    html.iswm-dark .dataTables_wrapper .dataTables_length select {
        background-color: #111217 !important;
        color: #ffffff !important;
    }

    html.iswm-dark .fstdropdown, html.iswm-dark .fstlist, html.iswm-dark .select2-dropdown,
    html.iswm-dark .chosen-container .chosen-drop, html.iswm-dark .dropdown-menu {
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    html.iswm-dark .dropdown-menu {
        background-image: none !important;
    }
    /* hover / selected item: same everywhere */
    html.iswm-dark .fstlist > div:hover, html.iswm-dark .dropdown-item:hover, html.iswm-dark .dropdown-item:focus,
    html.iswm-dark .select2-container--default .select2-results__option--highlighted[aria-selected],
    html.iswm-dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
    html.iswm-dark .chosen-container .chosen-results li.highlighted {
        background-color: #2563eb !important;
        color: #ffffff !important;
    }

    html.iswm-dark .fstlist > div.selected, html.iswm-dark .select2-results__option--selected,
    html.iswm-dark .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: #1f2128 !important;
        color: #ffffff !important;
    }

    /* Dropdown lists: scrollbar hidden (still scrollable with wheel / touch / keys) */
    html.iswm-dark .fstlist, html.iswm-dark .select2-results__options, html.iswm-dark .select2-results > .select2-results__options,
    html.iswm-dark .chosen-container .chosen-results, html.iswm-dark .dropdown-menu, html.iswm-dark select[multiple],
    html.iswm-dark select[size], html.iswm-dark .leaflet-control-geocoder-alternatives, html.iswm-dark .ui-autocomplete {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

        html.iswm-dark .fstlist::-webkit-scrollbar, html.iswm-dark .select2-results__options::-webkit-scrollbar,
        html.iswm-dark .chosen-container .chosen-results::-webkit-scrollbar, html.iswm-dark .dropdown-menu::-webkit-scrollbar,
        html.iswm-dark select[multiple]::-webkit-scrollbar, html.iswm-dark select[size]::-webkit-scrollbar,
        html.iswm-dark .leaflet-control-geocoder-alternatives::-webkit-scrollbar, html.iswm-dark .ui-autocomplete::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

    /* ---------- Login page (Default.aspx) text boxes ----------
       The field wrapper (.border-green) holds the icon / captcha + a borderless input. Its light-theme
       dark-green border is invisible on black and the transparent wrapper vs. filled input looked like
       two mismatched boxes. Make the wrapper the single visible field and the input transparent inside it. */
    html.iswm-dark .login_page .border-green {
        background-color: var(--dt-surface-2);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 8px !important;
        min-height: 46px;
        padding-top: 4px;
        padding-bottom: 4px;
        gap: 6px;
        padding-right: 4px;
        overflow: hidden;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        html.iswm-dark .login_page .border-green:hover {
            border-color: rgba(255, 255, 255, 0.35);
        }

        html.iswm-dark .login_page .border-green:focus-within {
            border-color: var(--dt-accent);
            box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.18);
        }

        html.iswm-dark .login_page .border-green .form-control,
        html.iswm-dark .login_page .border-green input:focus {
            background-color: transparent !important;
            color: var(--dt-text);
            border: 0 !important;
            height: 36px;
            font-size: 15px;
        }

        html.iswm-dark .login_page .border-green i {
            color: var(--dt-accent);
            width: 18px;
            text-align: center;
            flex-shrink: 0;
        }

        html.iswm-dark .login_page .border-green a {
            text-decoration: none;
        }

    /* Captcha code: readable chip next to its input */
    html.iswm-dark .login_page #captchaContainer {
        color: #ffffff;
        background-color: var(--dt-surface-3);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 6px;
        padding: 3px 8px;
        letter-spacing: 2px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Browser autofill would otherwise paint the saved username/password light blue/white */
    html.iswm-dark .login_page .border-green input:-webkit-autofill,
    html.iswm-dark .login_page .border-green input:-webkit-autofill:hover,
    html.iswm-dark .login_page .border-green input:-webkit-autofill:focus {
        -webkit-text-fill-color: #ffffff;
        -webkit-box-shadow: 0 0 0 1000px var(--dt-surface-2) inset !important;
        box-shadow: 0 0 0 1000px var(--dt-surface-2) inset !important;
        caret-color: #ffffff;
        transition: background-color 9999s ease-out 0s;
    }

    /* Inputs inside a login field: no own box (the theme script turns them into glass panels with a
           sheen + drop shadow), so the text sits flat inside the field and never touches its outer border */
    html.iswm-dark .login_page .border-green input,
    html.iswm-dark .login_page .border-green input:focus,
    html.iswm-dark .login_page .border-green input:hover {
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 0 !important;
        margin: 0;
        animation: none !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    html.iswm-dark .login_page .border-green > a {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    /* Small gap between the captcha field and the "Forgot Password?" link below it */
    html.iswm-dark .login_page .border-green + .d-flex {
        margin-top: 8px;
    }

    /* =====================================================================
   Table search box: one clean box on every page
   (page CSS such as adhocform.css / by.css / date.css draws a border around the whole
   filter AND this theme borders the input -> double box with "Search:" text inside).
   Result: a single rounded box = white magnifier icon + input, aligned right.
   ===================================================================== */
    html.iswm-dark:not(#_) .dataTables_filter,
    html.iswm-dark:not(#_) .dt-search {
        float: right !important;
        width: auto !important;
        height: auto !important;
        border: none !important;
        background: transparent !important;
        margin: 10px 0 !important;
        text-align: right !important;
    }

        html.iswm-dark:not(#_) .dataTables_filter label,
        html.iswm-dark:not(#_) .dt-search {
            display: inline-flex !important;
            align-items: center !important;
            width: 280px !important;
            max-width: 100% !important;
            height: 38px !important;
            margin: 0 !important;
            padding: 0 10px !important;
            font-size: 0 !important; /* hides the "Search:" text */
            background: transparent !important;
            border: 1px solid var(--dt-border) !important;
            border-radius: 6px !important;
        }

            html.iswm-dark:not(#_) .dt-search label {
                font-size: 0 !important;
                margin: 0 !important;
            }

            html.iswm-dark:not(#_) .dataTables_filter label:focus-within,
            html.iswm-dark:not(#_) .dt-search:focus-within {
                border-color: #64748b !important;
            }

            /* one icon for all pages (hide the per-page img / font icons so none are doubled) */
            html.iswm-dark:not(#_) .dataTables_filter label img,
            html.iswm-dark:not(#_) .dataTables_filter label i,
            html.iswm-dark:not(#_) .dataTables_filter label svg {
                display: none !important;
            }

            html.iswm-dark:not(#_) .dataTables_filter label::before,
            html.iswm-dark:not(#_) .dt-search::before {
                content: "";
                flex: 0 0 16px;
                width: 16px;
                height: 16px;
                margin-right: 8px;
                background-color: #ffffff;
                -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cline x1='16' y1='16' x2='21' y2='21'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cline x1='16' y1='16' x2='21' y2='21'/%3E%3C/svg%3E") center / contain no-repeat;
            }

            html.iswm-dark:not(#_) .dataTables_filter label input,
            html.iswm-dark:not(#_) .dt-search input {
                flex: 1 1 auto !important;
                width: 100% !important;
                min-width: 0 !important;
                height: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                font-size: 15px !important;
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                outline: none !important;
                color: #ffffff !important;
            }

@media (max-width: 576px) {
    html.iswm-dark:not(#_) .dataTables_filter,
    html.iswm-dark:not(#_) .dt-search {
        float: none !important;
        text-align: left !important;
    }

        html.iswm-dark:not(#_) .dataTables_filter label,
        html.iswm-dark:not(#_) .dt-search {
            width: 100% !important;
        }
}

/* Custom search boxes with an icon in front (input-group): transparent icon part, joined corners */
html.iswm-dark .input-group:has(input[placeholder*="earch"]) .input-group-text,
html.iswm-dark .input-group:has(input[id*="earch"]) .input-group-text {
    background-color: transparent !important;
    border-color: var(--dt-border) !important;
    color: #ffffff !important;
}

html.iswm-dark .input-group > .input-group-text + input[placeholder*="earch"],
html.iswm-dark .input-group > .input-group-text + input[id*="earch"] {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* =====================================================================
   v11 fixes
   ===================================================================== */
:root {
    --iswm-dd-border: rgba(255, 255, 255, 0.16); /* dropdown border */
    --iswm-dd-border-hover: rgba(255, 255, 255, 0.40); /* dropdown border on hover / open */
    --iswm-dd-item-hover: #2563eb; /* list item under the mouse */
    --iswm-dd-item-selected: #1f2128; /* selected list item */
    --iswm-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------- One dropdown look on every page ----------
   Native selects, searchable dropdowns (fstdropdown), Select2 and Chosen: same border in the
   normal, hover and open state on every page. Page CSS used its own hover colours (dark blue
   #0d47a1 on the dashboards, purple #7E57C2 on the Vehicle dashboard, light-blue #66afe9 glow on
   fstdropdown) and the theme script added a cyan "glass card" glow on hover. */
html.iswm-dark:not(#_) select,
html.iswm-dark:not(#_) .form-select,
html.iswm-dark:not(#_) .custom-select,
html.iswm-dark:not(#_) .fstdropdown,
html.iswm-dark:not(#_) .select2-container .select2-selection,
html.iswm-dark:not(#_) .chosen-container .chosen-single,
html.iswm-dark:not(#_) .chosen-container-multi .chosen-choices {
    border-color: var(--iswm-dd-border) !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    animation: none !important;
    transition: border-color .15s ease !important;
}

    html.iswm-dark:not(#_) select:hover, html.iswm-dark:not(#_) select:focus, html.iswm-dark:not(#_) select:focus-visible,
    html.iswm-dark:not(#_) .form-select:hover, html.iswm-dark:not(#_) .form-select:focus,
    html.iswm-dark:not(#_) .custom-select:hover, html.iswm-dark:not(#_) .custom-select:focus,
    html.iswm-dark:not(#_) .fstdropdown:hover, html.iswm-dark:not(#_) .fstdropdown:focus,
    html.iswm-dark:not(#_) .fstdropdown.open, html.iswm-dark:not(#_) .fstdropdown.open:hover,
    html.iswm-dark:not(#_) .select2-container:hover .select2-selection,
    html.iswm-dark:not(#_) .select2-container--open .select2-selection,
    html.iswm-dark:not(#_) .select2-container--focus .select2-selection,
    html.iswm-dark:not(#_) .chosen-container:hover .chosen-single,
    html.iswm-dark:not(#_) .chosen-container-active .chosen-single,
    html.iswm-dark:not(#_) .chosen-container-active .chosen-choices {
        border-color: var(--iswm-dd-border-hover) !important;
        box-shadow: none !important;
        outline: none !important;
    }

/* Open lists: same item hover and selected colours everywhere */
html.iswm-dark:not(#_) .fstlist > div:hover,
html.iswm-dark:not(#_) .select2-container--default .select2-results__option--highlighted,
html.iswm-dark:not(#_) .chosen-container .chosen-results li.highlighted,
html.iswm-dark:not(#_) .dropdown-item:hover, html.iswm-dark:not(#_) .dropdown-item:focus {
    background-color: var(--iswm-dd-item-hover) !important;
    background-image: none !important;
    color: #ffffff !important;
}

html.iswm-dark:not(#_) .fstlist > div.selected:not(:hover),
html.iswm-dark:not(#_) .select2-container--default .select2-results__option--selected:not(.select2-results__option--highlighted),
html.iswm-dark:not(#_) .select2-container--default .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--iswm-dd-item-selected) !important;
    color: #ffffff !important;
}

html.iswm-dark:not(#_) .fstAll {
    background-color: var(--dt-surface-3) !important;
    color: #ffffff !important;
    border-top: 1px solid var(--iswm-dd-border) !important;
}

    html.iswm-dark:not(#_) .fstAll:hover {
        background-color: var(--iswm-dd-item-hover) !important;
    }

/* ---------- One dropdown arrow on every page ----------
   Searchable dropdowns drew a tiny grey/white triangle (e.g. Performance Report) and collapsed
   to a thin strip when empty; Select2 / Chosen used their own sprites; native selects a chevron.
   All now use the same white chevron (turned upwards while the list is open) and the same height. */
html.iswm-dark:not(#_) .fstdropdown > .fstselected {
    min-height: 33px; /* + 1px border top / bottom = 35px, the same height as the text / date boxes */
    line-height: 1.5;
    padding: 6px 2rem 6px 12px !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

    html.iswm-dark:not(#_) .fstdropdown > .fstselected::after {
        border: 0 !important;
        width: 14px;
        height: 10px;
        margin-top: -5px;
        right: .6rem;
        background: var(--iswm-chevron) center / 14px 10px no-repeat !important;
        transition: transform .15s ease;
    }

html.iswm-dark:not(#_) .fstdropdown.open > .fstselected::after {
    transform: rotate(180deg);
}

html.iswm-dark:not(#_) .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: 0 !important;
    width: 14px;
    height: 10px;
    margin-left: -10px;
    margin-top: -5px;
    background: var(--iswm-chevron) center / 14px 10px no-repeat !important;
    transition: transform .15s ease;
}

html.iswm-dark:not(#_) .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg);
}

html.iswm-dark:not(#_) .chosen-container-single .chosen-single div b {
    background: var(--iswm-chevron) center / 14px 10px no-repeat !important;
    transition: transform .15s ease;
}

html.iswm-dark:not(#_) .chosen-container-active.chosen-with-drop .chosen-single div b {
    transform: rotate(180deg);
}

/* ---------- Collapse arrow buttons: arrow shows open / closed ----------
   js/dark-theme.js (iswmToggle) marks a closed panel's button with .iswm-collapsed:
   chevron points left like the closed sidebar menu groups, down when open. */
html.iswm-dark .toggler__btn > i, html.iswm-dark .toggler__btn1 > i {
    transition: transform .2s ease;
}

html.iswm-dark .iswm-collapsed > i.fa-chevron-down,
html.iswm-dark .iswm-collapsed > i.fa-angle-down {
    transform: rotate(90deg);
}

/* ---------- Map text labels: text only, no box behind it ----------
   Labels drawn as "transparent" Leaflet popups / tooltips (GIS Dashboard Ramp & Plant names,
   feeder names, Fleet / C.W. map labels) were given the dark popup background + shadow by the
   generic popup rule, and transparent tooltips kept a small dark pointer triangle. */
html.iswm-dark:not(#_) .transparent-popup .leaflet-popup-content-wrapper,
html.iswm-dark:not(#_) .transparent-popup .leaflet-popup-tip,
html.iswm-dark:not(#_) .leaflet-tooltip.transparent-tooltip,
html.iswm-dark:not(#_) .leaflet-tooltip.transparent-label {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

    html.iswm-dark:not(#_) .transparent-popup .leaflet-popup-tip-container,
    html.iswm-dark:not(#_) .leaflet-tooltip.transparent-tooltip::before,
    html.iswm-dark:not(#_) .leaflet-tooltip.transparent-label::before {
        display: none !important;
    }

    html.iswm-dark:not(#_) .transparent-popup .leaflet-popup-content-wrapper,
    html.iswm-dark:not(#_) .transparent-popup .leaflet-popup-content-wrapper * {
        color: #ffffff !important;
        text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
    }

/* =====================================================================
   v12 fixes
   ===================================================================== */

/* ---------- Table search bar: on the same line as "records per page" ----------
   The search wrapper had an extra 10px top/bottom margin on top of its padding, so the search
   box sat lower than the "Show 10 entries / records per page" control in the same header row.
   Both controls now use the same height and are vertically centred in that row. */
html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_filter,
html.iswm-dark:not(#_) .dataTables_wrapper .dt-search {
    margin: 0 !important;
    padding: 10px 14px !important;
}

html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_length label {
    display: inline-flex !important;
    align-items: center;
    min-height: 38px;
    margin: 0 !important;
}

/* ---------- Map print button (GIS Dashboard and every map with a print button) ----------
   Light-grey background on hover for the print button and for its Portrait / Landscape /
   Auto / Custom options; the icon / text turn dark so they stay readable on the light grey. */
html.iswm-dark:not(#_) .leaflet-control-browser-print a.leaflet-browser-print:hover,
html.iswm-dark:not(#_) a.leaflet-browser-print:hover {
    background-color: #d9d9d9 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9V3h12v6'/%3e%3crect x='3' y='9' width='18' height='8' rx='2'/%3e%3cpath d='M6 14h12v7H6z'/%3e%3c/svg%3e") !important;
}

html.iswm-dark:not(#_) .leaflet-control-browser-print li.browser-print-mode,
html.iswm-dark:not(#_) .browser-print-mode {
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    html.iswm-dark:not(#_) .leaflet-control-browser-print li.browser-print-mode:hover,
    html.iswm-dark:not(#_) .browser-print-mode:hover {
        background-color: #d9d9d9 !important;
        color: #111111 !important;
    }

/* ---------- Dropdowns stay inside their field box ----------
   A dropdown never grows wider than the column / field it sits in (long names are cut with
   "..." in the closed box); the open searchable list is exactly as wide as its box. */
html.iswm-dark:not(#_) select:not([multiple]):not([size]) {
    max-width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
}

html.iswm-dark:not(#_) .fstdiv,
html.iswm-dark:not(#_) .fstdropdown {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    html.iswm-dark:not(#_) .fstdiv.open > .fstdropdown {
        width: 100% !important;
        left: 0;
        right: 0;
    }

    html.iswm-dark:not(#_) .fstdropdown .fstlist > div {
        overflow-wrap: anywhere;
    }

    html.iswm-dark:not(#_) .fstdropdown .fstsearch,
    html.iswm-dark:not(#_) .fstdropdown .fstsearchinput {
        box-sizing: border-box;
        max-width: 100%;
    }

html.iswm-dark:not(#_) .select2-container {
    max-width: 100%;
}

html.iswm-dark:not(#_) .chosen-container {
    max-width: 100%;
}

/* =====================================================================
   v13 fixes
   ===================================================================== */

/* ---------- One pagination style on every table ----------
   Some pages (e.g. Plant Summary, Ramp Summary) styled their own white / green page buttons.
   Every table now uses the theme's buttons: dark, white text, blue current page. */
html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate .paginate_button,
html.iswm-dark:not(#_) .dt-container .dt-paging .dt-paging-button {
    padding: 5px 12px !important;
    margin: 0 2px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

    html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
    html.iswm-dark:not(#_) .dt-container .dt-paging .dt-paging-button:hover {
        background: var(--dt-surface-3) !important;
        border-color: var(--dt-border) !important;
        color: #ffffff !important;
    }

    html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    html.iswm-dark:not(#_) .dt-container .dt-paging .dt-paging-button.current,
    html.iswm-dark:not(#_) .dt-container .dt-paging .dt-paging-button.current:hover {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #ffffff !important;
    }

    html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    html.iswm-dark:not(#_) .dt-container .dt-paging .dt-paging-button.disabled,
    html.iswm-dark:not(#_) .dt-container .dt-paging .dt-paging-button.disabled:hover {
        background: transparent !important;
        border-color: transparent !important;
        color: #64748b !important;
    }

/* ---------- Table headers: sort arrows never touch the column name ----------
   The arrows sit 10px from the right edge of a sortable header; some pages squeeze the header
   padding to 4px, so the arrows overlapped the text (e.g. "SR. NO", "Garden", "Dry/Wet"). */
html.iswm-dark:not(#_) table.dataTable thead > tr > th.sorting,
html.iswm-dark:not(#_) table.dataTable thead > tr > th.sorting_asc,
html.iswm-dark:not(#_) table.dataTable thead > tr > th.sorting_desc,
html.iswm-dark:not(#_) table.dataTable thead > tr > th.sorting_asc_disabled,
html.iswm-dark:not(#_) table.dataTable thead > tr > th.sorting_desc_disabled,
html.iswm-dark:not(#_) table.dataTable thead > tr > td.sorting,
html.iswm-dark:not(#_) table.dataTable thead > tr > td.sorting_asc,
html.iswm-dark:not(#_) table.dataTable thead > tr > td.sorting_desc,
html.iswm-dark:not(#_) table.dataTable thead > tr > th.dt-orderable-asc,
html.iswm-dark:not(#_) table.dataTable thead > tr > th.dt-orderable-desc,
html.iswm-dark:not(#_) table.dataTable thead > tr > th.dt-ordering-asc,
html.iswm-dark:not(#_) table.dataTable thead > tr > th.dt-ordering-desc {
    padding-right: 28px !important;
}

/* ---------- Map drawing tools (Create Geofence, Add Route, ...) ----------
   Leaflet.draw buttons (marker / location pin, polygon, rectangle, circle, edit, delete) use a
   black icon sprite that was hard to see on the dark buttons: icons are now white. The button
   colours are pre-inverted so after the invert filter they look the same as every other map button. */
html.iswm-dark:not(#_) .leaflet-draw-toolbar a,
html.iswm-dark:not(#_) .leaflet-draw-toolbar a:focus {
    background-color: #eae9e3 !important; /* shows as the dark map-button colour after invert */
    border-color: rgba(0, 0, 0, 0.12) !important;
    filter: invert(1) !important;
}

    html.iswm-dark:not(#_) .leaflet-draw-toolbar a:hover,
    html.iswm-dark:not(#_) .leaflet-draw-toolbar a:active {
        background-color: #d5d3ca !important; /* = #2a2c35 hover colour after invert */
        filter: invert(1) !important;
    }

    html.iswm-dark:not(#_) .leaflet-draw-toolbar a.leaflet-disabled {
        background-color: #f5f5f2 !important;
        filter: invert(1) !important;
        opacity: .6;
    }

/* ---------- Same corner radius on every card / panel ----------
   Cards were square on the report pages and 5px / 8px / 10px / 12px / 14px elsewhere. */
html.iswm-dark:not(#_) .card,
html.iswm-dark:not(#_) .chart-card,
html.iswm-dark:not(#_) .table-card,
html.iswm-dark:not(#_) .filters-container,
html.iswm-dark:not(#_) .sweeper-coverage-report,
html.iswm-dark:not(#_) .attendance-report,
html.iswm-dark:not(#_) .vdd-card,
html.iswm-dark:not(#_) .vdd-table-card,
html.iswm-dark:not(#_) .map-card,
html.iswm-dark:not(#_) .summary-card,
html.iswm-dark:not(#_) .panel,
html.iswm-dark:not(#_) .well,
html.iswm-dark:not(#_) .header-bar {
    border-radius: 8px !important;
    --bs-card-border-radius: 8px;
    --bs-card-inner-border-radius: 7px;
}

    /* title strips inside rounded panels follow the panel's top corners */
    html.iswm-dark:not(#_) .filters-container > .title:first-child,
    html.iswm-dark:not(#_) .sweeper-coverage-report > .title:first-child,
    html.iswm-dark:not(#_) .attendance-report > .title:first-child {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

/* =====================================================================
   v14 fixes
   ===================================================================== */
/* Table search box moved out of the table (e.g. CT PT / Feeder dashboards put it in a header
   "#searchContainer" whose CSS lets it wrap): the icon and the text box always stay on one line,
   vertically centred in the box. */
html.iswm-dark:not(#_) .dataTables_filter label,
html.iswm-dark:not(#_) .dt-search {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

    html.iswm-dark:not(#_) .dataTables_filter label::before,
    html.iswm-dark:not(#_) .dt-search::before {
        align-self: center !important;
    }

    html.iswm-dark:not(#_) .dataTables_filter label input,
    html.iswm-dark:not(#_) .dt-search input {
        min-width: 0 !important;
        align-self: center !important;
    }

/* =====================================================================
   v15 fixes
   ===================================================================== */
/* Table headings and their sort arrows on the same line: the arrows are drawn in the vertical
   middle of a sortable heading, but heading text sat at the bottom (Bootstrap thead default), so
   on multi-line headings (e.g. Email Management "Desk Engineer Name") the arrows floated above
   the text. Headings are now vertically centred, like their arrows. */
html.iswm-dark:not(#_) table.dataTable > thead > tr > th,
html.iswm-dark:not(#_) table.dataTable > thead > tr > td,
html.iswm-dark:not(#_) .dataTables_scrollHead table > thead > tr > th {
    vertical-align: middle !important;
}

/* =====================================================================
   v16 fixes
   ===================================================================== */
/* Filter labels that must stay on one line (e.g. "Quarterly/Half Yearly/Yearly" on 20 report
   pages wrapped onto two lines and pushed its dropdown lower than the others in the row). */
html:not(#_) .iswm-nowrap {
    white-space: nowrap !important;
}

/* =====================================================================
   v17 fixes
   ===================================================================== */
/* ---------- Same pagination on every page (all pagination types) ----------
   Pages using the Bootstrap 4 / 5 DataTables styling (Assign ZoneWard To Vehicle, Vehicle Driver
   Report, Daily Duty Allocation, ...) drew bordered Bootstrap page boxes with larger text, and
   Edit Device Info (MyVehicles) builds its own buttons. They now look exactly like the standard
   pagination: dark buttons, white 14px text, blue current page, grey disabled. */
html.iswm-dark:not(#_) .dataTables_paginate .paginate_button,
html.iswm-dark:not(#_) .dataTables_paginate .page-link,
html.iswm-dark:not(#_) .dt-paging .dt-paging-button,
html.iswm-dark:not(#_) .dt-paging .page-link,
html.iswm-dark:not(#_) #paginationWrapper button {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Bootstrap styling: the <li> is only a holder, the <a class="page-link"> is the button */
html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate li.paginate_button,
html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate li.paginate_button:hover,
html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate li.paginate_button.current,
html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate li.paginate_button.disabled,
html.iswm-dark:not(#_) .dataTables_wrapper .dataTables_paginate li.page-item,
html.iswm-dark:not(#_) .dt-container .dt-paging li.dt-paging-button,
html.iswm-dark:not(#_) .dt-container .dt-paging li.dt-paging-button:hover,
html.iswm-dark:not(#_) .dt-container .dt-paging li.page-item {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.iswm-dark:not(#_) .dataTables_paginate .pagination,
html.iswm-dark:not(#_) .dt-paging .pagination {
    margin: 0 !important;
    gap: 0;
    flex-wrap: wrap;
}

html.iswm-dark:not(#_) .dataTables_paginate .page-link,
html.iswm-dark:not(#_) .dt-paging .page-link,
html.iswm-dark:not(#_) #paginationWrapper button {
    padding: 5px 12px !important;
    margin: 0 2px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

    html.iswm-dark:not(#_) .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
    html.iswm-dark:not(#_) .dt-paging .page-item:not(.active):not(.disabled) .page-link:hover,
    html.iswm-dark:not(#_) #paginationWrapper button:hover:not(:disabled):not(.active) {
        background: var(--dt-surface-3) !important;
        border-color: var(--dt-border) !important;
        color: #ffffff !important;
    }

    html.iswm-dark:not(#_) .dataTables_paginate .page-item.active .page-link,
    html.iswm-dark:not(#_) .dt-paging .page-item.active .page-link,
    html.iswm-dark:not(#_) #paginationWrapper button.active {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #ffffff !important;
    }

    html.iswm-dark:not(#_) .dataTables_paginate .page-item.disabled .page-link,
    html.iswm-dark:not(#_) .dt-paging .page-item.disabled .page-link,
    html.iswm-dark:not(#_) #paginationWrapper button:disabled {
        background: transparent !important;
        border-color: transparent !important;
        color: #64748b !important;
        cursor: not-allowed;
    }

/* ---------- "records per page" / "Show entries" number dropdown ----------
   The number sat against the box's left border (e.g. Create Campaign): same inner spacing as
   every other dropdown, and the same height on every page. */
html.iswm-dark:not(#_) .dataTables_length select,
html.iswm-dark:not(#_) .dt-length select {
    padding: 4px 2rem 4px 10px !important;
    min-width: 72px;
    height: 34px;
    border-radius: 6px !important;
    font-size: 14px !important;
    line-height: 1.5;
}