/*
    Dark mode theme.

    Applied by putting class "dark-mode" on <html> (see Content/Js/Layout/DarkMode.js).
    Light mode is the app's existing CSS untouched - nothing here applies without the class,
    so removing the class is a complete revert.

    This file is rendered LAST in _Layout.cshtml (after RenderSection("styles")) so it wins
    over the shell and page bundles. Page views that call @Styles.Render inside <body> still
    land after this, which is why selectors are prefixed with html.dark-mode and colour rules
    carry !important - the legacy CSS uses !important heavily and would otherwise win.

    Brand green (#2ca01c) is deliberately kept in both themes; it reads fine on dark.
*/

html.dark-mode {
    /* Surfaces, from furthest back to closest */
    --dm-bg: #17191c;           /* app background */
    --dm-surface: #1f2225;      /* panels, cards, sidebar, navbar */
    --dm-elevated: #282c30;     /* dropdowns, modals, hover states */
    --dm-input: #212427;        /* form fields */

    /* Title bar of a panel / box ("Customer Information", "Notes Overview", ...).
       Deliberately lighter than --dm-elevated so a box header separates clearly from
       the panel body. Kept as its own token because --dm-elevated is also used for
       dropdowns, modals and table headers, which should not all move with it. */
    --dm-header-bar: #343a42;
    --dm-header-bar-text: #f2f4f6;

    --dm-border: #383d42;
    --dm-border-soft: #2c3034;

    --dm-text: #e3e5e8;
    --dm-text-muted: #9aa0a6;
    --dm-text-heading: #f2f4f6;

    --dm-link: #5aa9f8;
    --dm-link-hover: #8cc3fa;

    --dm-brand: #2ca01c;
    --dm-danger: #e05260;
    --dm-warning: #d99b2f;
    --dm-info: #3f9ac4;

    --dm-shadow: rgba(0, 0, 0, .55);

    color-scheme: dark;
}
html.dark-mode .cu {
    min-height:100dvh;
}
/* Native widgets (scrollbars, date pickers, autofill) follow the theme */
html.dark-mode body {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------- shell */

html.dark-mode .HSBodyContents,
html.dark-mode #page-wrapper,
html.dark-mode .page-wrapper-contents,
html.dark-mode .PrivateLayoutContents,
html.dark-mode .content-wrap,
html.dark-mode .container-fluid,
html.dark-mode .custom_body_style {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text);
}

/* Top bar */
html.dark-mode .navbar-inverse,
html.dark-mode .navbar.navbar-fixed-top {
    background-color: var(--dm-surface) !important;
    background-image: none !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .navbar-top-links > li > a,
html.dark-mode .navbar-inverse .navbar-nav > li > a,
html.dark-mode .navbar-inverse .navbar-brand {
    color: var(--dm-text) !important;
}

html.dark-mode .navbar-top-links:not(.layout_top_menu_bar) > li > a:hover,
html.dark-mode .navbar-inverse .navbar-nav:not(.layout_top_menu_bar) > li > a:hover,
html.dark-mode .navbar-inverse .navbar-nav:not(.layout_top_menu_bar) > .open > a {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

/* Top bar icons hover & active in dark mode */
html.dark-mode .layout_top_menu_bar > li > a {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--dm-text-muted, #94a3b8) !important;
}

html.dark-mode .layout_top_menu_bar > li > a:hover,
html.dark-mode .layout_top_menu_bar > li > a:focus,
html.dark-mode .layout_top_menu_bar > li.open > a {
    background-color: transparent !important;
    background-image: none !important;
}

html.dark-mode .layout_top_menu_bar > li > a:hover::before,
html.dark-mode .layout_top_menu_bar > li > a:focus::before {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .layout_top_menu_bar > li.open > a::before {
    background: rgba(44, 160, 28, 0.25) !important;
    border-color: rgba(44, 160, 28, 0.5) !important;
    box-shadow: 0 2px 8px rgba(44, 160, 28, 0.3) !important;
}

/* Navbar dropdown carets match icon color */
html.dark-mode .layout_top_menu_bar > li > a .caret {
    color: var(--dm-text-muted, #94a3b8) !important;
    border-top-color: currentColor !important;
    border-bottom-color: currentColor !important;
}

html.dark-mode .layout_top_menu_bar > li > a:hover .caret,
html.dark-mode .layout_top_menu_bar > li > a:focus .caret {
    color: #ffffff !important;
    border-top-color: currentColor !important;
    border-bottom-color: currentColor !important;
}

html.dark-mode .layout_top_menu_bar a:hover .fa-life-saver ~ .caret,
html.dark-mode .layout_top_menu_bar a:focus .fa-life-saver ~ .caret,
html.dark-mode .layout_top_menu_bar > li.open > a .fa-life-saver ~ .caret {
    color: #38bdf8 !important;
}

html.dark-mode .layout_top_menu_bar a:hover .fa-cogs ~ .caret,
html.dark-mode .layout_top_menu_bar a:focus .fa-cogs ~ .caret,
html.dark-mode .layout_top_menu_bar > li.open > a .fa-cogs ~ .caret {
    color: #2ca01c !important;
}

html.dark-mode .layout_top_menu_bar a:hover .fa-bell ~ .caret,
html.dark-mode .layout_top_menu_bar a:focus .fa-bell ~ .caret,
html.dark-mode .layout_top_menu_bar > li.open > a .fa-bell ~ .caret {
    color: #f59e0b !important;
}

html.dark-mode .layout_top_menu_bar a:hover .fa-question-circle-o ~ .caret,
html.dark-mode .layout_top_menu_bar a:focus .fa-question-circle-o ~ .caret,
html.dark-mode .layout_top_menu_bar > li.open > a .fa-question-circle-o ~ .caret {
    color: #60a5fa !important;
}

/* Hide top menu dropdown arrows */
html.dark-mode .arrow_top_support,
html.dark-mode .arrow_top_settings,
html.dark-mode .arrow_top_help,
html.dark-mode .arrow_top_create,
html.dark-mode .arrow_top_search,
html.dark-mode [class*="arrow_top_"] {
    display: none !important;
}

/* Global search & autocomplete suggestions */
html.dark-mode .GlobalSearchInp {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .GlobalSearchInp:focus {
    border-color: var(--dm-link) !important;
    outline: none;
}

html.dark-mode #GlobalSearchButton.main_search {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-muted) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode #GlobalSearchButton.main_search:hover {
    background: linear-gradient(135deg, #2ca01c 0%, #238316 100%) !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(44, 160, 28, 0.45) !important;
}

html.dark-mode .GlobalEstInvCustSearchDiv .tt-menu,
html.dark-mode .SuggestionTab {
    background-color: var(--dm-elevated) !important;
    background: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 8px 24px var(--dm-shadow) !important;
    border-radius: 0 0 6px 6px !important;
}

html.dark-mode .NewGlobalSuggestion,
html.dark-mode .GlobalEstInvCustSearchDiv .tt-dataset-autocomplete {
    background-color: transparent !important;
}

html.dark-mode .NewGlobalSuggestion .ps-scrollbar-y-rail {
    background-color: transparent !important;
}

html.dark-mode .NewGlobalSuggestion .ps-scrollbar-y {
    background-color: #4c545c !important;
}

/* ------------------------------------------------ Typeahead & Autocomplete dropdowns */

html.dark-mode .tt-menu,
html.dark-mode .tt-dropdown-menu,
html.dark-mode .NewProjectSuggestion,
html.dark-mode .NewGlobalSuggestion,
html.dark-mode .tt-dataset,
html.dark-mode .tt-dataset-autocomplete {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 4px 16px var(--dm-shadow) !important;
}

html.dark-mode .NewProjectSuggestion .ps-scrollbar-y,
html.dark-mode .NewGlobalSuggestion .ps-scrollbar-y {
    background-color: #4c545c !important;
}

/* "Add New Equipment" / "Add New Service" headers inside suggestion menus */
html.dark-mode .AddNewEqp,
html.dark-mode .AddNewSrvc,
html.dark-mode .NewProjectSuggestion .AddNewEqp,
html.dark-mode .NewProjectSuggestion .AddNewSrvc,
html.dark-mode .estimator_container .AddNewEqp {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #58d68d !important;
    border-bottom: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode .AddNewEqp:hover,
html.dark-mode .AddNewSrvc:hover,
html.dark-mode .NewProjectSuggestion .AddNewEqp:hover,
html.dark-mode .NewProjectSuggestion .AddNewSrvc:hover,
html.dark-mode .estimator_container .AddNewEqp:hover {
    background-color: #353c45 !important;
    color: #7ee7a8 !important;
}

/* Base suggestion row */
html.dark-mode .tt-suggestion,
html.dark-mode .GlobalEstInvCustSearchDiv .tt-suggestion,
html.dark-mode .customer_name_insert_div .tt-suggestion,
html.dark-mode .receive_payment_top .tt-suggestion,
html.dark-mode .add-invoice-container .tt-suggestion,
html.dark-mode .estimator_container .tt-suggestion,
html.dark-mode .CustomerEstimateTab .tt-suggestion,
html.dark-mode tbody td .tt-suggestion {
    border-bottom: 1px solid var(--dm-border-soft) !important;
    color: var(--dm-text) !important;
    background-color: transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html.dark-mode .tt-suggestion .tt-sug-text,
html.dark-mode .tt-suggestion p {
    color: var(--dm-text) !important;
}

html.dark-mode .tt-suggestion .tt-sug-type {
    color: var(--dm-link) !important;
    font-style: normal !important;
    font-weight: 500;
}

html.dark-mode .tt-suggestion .tt_sug_manufac,
html.dark-mode .tt-suggestion .tt-sug-desc,
html.dark-mode .tt-suggestion div {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .tt-suggestion .tt-eq-price {
    color: #58d68d !important;
    font-style: normal !important;
}

html.dark-mode .tt-suggestion .tt-eq-sku {
    color: var(--dm-text-muted) !important;
    font-style: italic !important;
}

html.dark-mode .tt-suggestion .editEquipmentsug {
    color: #58d68d !important;
    background-color: transparent !important;
    border: none !important;
}

html.dark-mode .tt-suggestion .editEquipmentsug:hover {
    color: #7ee7a8 !important;
}

html.dark-mode .tt-suggestion u {
    color: #ff9b50 !important;
    font-weight: bold;
    text-decoration: none !important;
}

html.dark-mode .tt-suggestion .EquipmentImage {
    color: var(--dm-text-heading) !important;
    font-weight: 600;
}

/* Hover, Active & Cursor states for suggestion rows */
html.dark-mode .tt-suggestion:hover,
html.dark-mode .tt-suggestion.active,
html.dark-mode .tt-suggestion.tt-cursor,
html.dark-mode .tt-selectable:hover,
html.dark-mode .tt-selectable.active,
html.dark-mode .GlobalEstInvCustSearchDiv .tt-suggestion:hover,
html.dark-mode .GlobalEstInvCustSearchDiv .tt-suggestion.active,
html.dark-mode .customer_name_insert_div .tt-suggestion:hover,
html.dark-mode .customer_name_insert_div .tt-suggestion.tt-cursor,
html.dark-mode .customer_name_insert_div .tt-suggestion.active,
html.dark-mode .receive_payment_top .tt-suggestion:hover,
html.dark-mode .receive_payment_top .tt-suggestion.tt-cursor,
html.dark-mode .receive_payment_top .tt-suggestion.active,
html.dark-mode .add-invoice-container .tt-suggestion:hover,
html.dark-mode .add-invoice-container .tt-suggestion.active,
html.dark-mode .add-invoice-container .tt-suggestion.tt-cursor,
html.dark-mode .estimator_container .tt-suggestion:hover,
html.dark-mode .estimator_container .tt-suggestion.active,
html.dark-mode .estimator_container .tt-suggestion.tt-cursor,
html.dark-mode .CustomerEstimateTab .tt-suggestion:hover,
html.dark-mode .CustomerEstimateTab .tt-suggestion.active,
html.dark-mode .CustomerEstimateTab .tt-suggestion.tt-cursor,
html.dark-mode tbody td .tt-suggestion:hover,
html.dark-mode tbody td .tt-suggestion.active,
html.dark-mode tbody td .tt-suggestion.tt-cursor {
    background-color: #353c45 !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .tt-suggestion:hover .tt-sug-text,
html.dark-mode .tt-suggestion.active .tt-sug-text,
html.dark-mode .tt-suggestion.tt-cursor .tt-sug-text,
html.dark-mode .tt-selectable:hover .tt-sug-text,
html.dark-mode .tt-selectable.active .tt-sug-text,
html.dark-mode .tt-suggestion:hover p,
html.dark-mode .tt-suggestion.active p,
html.dark-mode .tt-suggestion.tt-cursor p,
html.dark-mode .add-invoice-container .tt-suggestion:hover .tt-sug-text,
html.dark-mode .add-invoice-container .tt-suggestion.active .tt-sug-text,
html.dark-mode .estimator_container .tt-suggestion:hover .tt-sug-text,
html.dark-mode .estimator_container .tt-suggestion.active .tt-sug-text,
html.dark-mode .CustomerEstimateTab .tt-suggestion:hover .tt-sug-text,
html.dark-mode .CustomerEstimateTab .tt-suggestion.active .tt-sug-text {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .tt-suggestion:hover .tt_sug_manufac,
html.dark-mode .tt-suggestion.active .tt_sug_manufac,
html.dark-mode .tt-suggestion.tt-cursor .tt_sug_manufac,
html.dark-mode .tt-suggestion:hover .tt-sug-desc,
html.dark-mode .tt-suggestion.active .tt-sug-desc,
html.dark-mode .tt-suggestion.tt-cursor .tt-sug-desc,
html.dark-mode .tt-suggestion:hover .tt-eq-sku,
html.dark-mode .tt-suggestion.active .tt-eq-sku,
html.dark-mode .tt-suggestion.tt-cursor .tt-eq-sku {
    color: #c0c6cc !important;
}

html.dark-mode .tt-suggestion:hover .tt-sug-type,
html.dark-mode .tt-suggestion.active .tt-sug-type,
html.dark-mode .tt-suggestion.tt-cursor .tt-sug-type {
    color: #8cc3fa !important;
}

html.dark-mode .tt-suggestion:hover .tt-eq-price,
html.dark-mode .tt-suggestion.active .tt-eq-price,
html.dark-mode .tt-suggestion.tt-cursor .tt-eq-price {
    color: #7ee7a8 !important;
}

html.dark-mode .tt-suggestion:hover .editEquipmentsug,
html.dark-mode .tt-suggestion.active .editEquipmentsug,
html.dark-mode .tt-suggestion.tt-cursor .editEquipmentsug {
    color: #7ee7a8 !important;
}

/* Sidebar */
html.dark-mode .navbar-default.sidebar,
html.dark-mode .sidebar,
html.dark-mode .sidebar-nav,
html.dark-mode .navbar-default .navbar-collapse {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .sidebar .nav > li > a,
html.dark-mode .sidebar ul li a,
html.dark-mode .navbar-default .navbar-nav > li > a {
    color: var(--dm-text) !important;
}

html.dark-mode .sidebar .nav > li > a:hover,
html.dark-mode .sidebar .nav > li > a:focus,
html.dark-mode .sidebar ul li a:hover,
html.dark-mode .navbar-default .navbar-nav > .active > a {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .sidebar .nav-second-level li a,
html.dark-mode .sidebar .nav-third-level li a {
    background-color: transparent !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .sidebar .nav-second-level li a:hover {
    color: var(--dm-text-heading) !important;
}

/*
    Left menu items carry class "custom_color", which sets its own light background
    (Layout.css: background-color #f4f5f8). The generic sidebar rules above only set
    colour, so without this the menu items stayed light grey.
*/
html.dark-mode .custom_color,
html.dark-mode a.custom_color,
html.dark-mode .sidebar .nav > li > a.custom_color {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .custom_color:hover,
html.dark-mode .custom_color:focus,
html.dark-mode .sidebar .nav > li > a.custom_color:hover {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

/* startmin gives every menu row a light divider and a light active state */
html.dark-mode .sidebar ul li {
    border-bottom-color: var(--dm-border-soft) !important;
}

html.dark-mode .sidebar ul li a.active,
html.dark-mode .sidebar ul li a.custom_color.active {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .sidebar .nav-second-level,
html.dark-mode .sidebar .nav-third-level {
    background-color: var(--dm-bg) !important;
}

/* ----------------------------------------------------------- containers */

html.dark-mode .panel,
html.dark-mode .well,
html.dark-mode .card,
html.dark-mode .thumbnail,
html.dark-mode .jumbotron,
html.dark-mode .list-group-item,
html.dark-mode .login-panel {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .panel-default > .panel-heading,
html.dark-mode .panel-heading,
html.dark-mode .panel-footer {
    background-color: var(--dm-header-bar) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode .panel-body {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* --------------------------------------------------------------- typography */

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode label, html.dark-mode legend, html.dark-mode b, html.dark-mode strong {
    color: var(--dm-text-heading) !important;
}

html.dark-mode p, html.dark-mode span, html.dark-mode div,
html.dark-mode td, html.dark-mode li, html.dark-mode dd, html.dark-mode dt {
    color: inherit;
}

html.dark-mode .text-muted,
html.dark-mode small,
html.dark-mode .help-block {
    color: var(--dm-text-muted) !important;
}

html.dark-mode a {
    color: var(--dm-link);
}

html.dark-mode a:hover,
html.dark-mode a:focus {
    color: var(--dm-link-hover);
}

html.dark-mode hr {
    border-color: var(--dm-border) !important;
}

/* -------------------------------------------------------------------- tables */

html.dark-mode .table,
html.dark-mode table {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .table > thead > tr > th,
html.dark-mode table > thead > tr > th,
html.dark-mode .table > thead > tr > td {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tbody > tr > th,
html.dark-mode .table > tfoot > tr > td,
html.dark-mode table > tbody > tr > td {
    border-color: var(--dm-border-soft) !important;
    color: var(--dm-text) !important;
}

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

html.dark-mode .table-hover > tbody > tr:hover,
html.dark-mode .table-hover > tbody > tr:hover > td,
html.dark-mode table:not(.pika-table):not(.ui-datepicker-calendar):not(.ci_table):not(.Billing-Histories) tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .05) !important;
}

html.dark-mode .table > tbody > tr.active > td,
html.dark-mode .table > tbody > tr.selected > td {
    background-color: rgba(44, 160, 28, .16) !important;
}

/* --------------------------------------------------------------------- forms */

html.dark-mode .form-control,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="number"],
html.dark-mode input[type="search"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="url"],
html.dark-mode input[type="date"],
html.dark-mode input[type="datetime-local"],
html.dark-mode textarea,
html.dark-mode select {
    background-color: var(--dm-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .form-control:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    border-color: var(--dm-brand) !important;
    box-shadow: 0 0 0 2px rgba(44, 160, 28, .2) !important;
}

html.dark-mode .form-control::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: var(--dm-text-muted) !important; opacity: 1; }
html.dark-mode .form-control::-webkit-input-placeholder { color: var(--dm-text-muted) !important; }
html.dark-mode .form-control:-ms-input-placeholder { color: var(--dm-text-muted) !important; }

html.dark-mode .form-control[readonly],
html.dark-mode .form-control[disabled],
html.dark-mode fieldset[disabled] .form-control {
    background-color: #191c1f !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .input-group-addon {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* Chrome autofill paints its own near-white background */
html.dark-mode input:-webkit-autofill,
html.dark-mode input:-webkit-autofill:hover,
html.dark-mode input:-webkit-autofill:focus,
html.dark-mode textarea:-webkit-autofill,
html.dark-mode select:-webkit-autofill {
    -webkit-text-fill-color: var(--dm-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--dm-input) inset !important;
    caret-color: var(--dm-text);
}



/* Brand and semantic buttons keep their colour in both themes */
html.dark-mode .btn_cf,
html.dark-mode .add_customer_file,
html.dark-mode .btn.btn_cf,
html.dark-mode button.btn_cf,
html.dark-mode .btn.add_customer_file,
html.dark-mode button.add_customer_file,
html.dark-mode .ticket_table_header button,
html.dark-mode .ticket_table_header .btn,
html.dark-mode #AddServiceWithOptions,

html.dark-mode .create_ticket_btn,
html.dark-mode .btn.create_ticket_btn,
html.dark-mode button.create_ticket_btn,
html.dark-mode .btnAddNewTicket,
html.dark-mode .btnAgemniTickets,
html.dark-mode #TicketReport,
html.dark-mode .create_tkt_div_custom .btn,
html.dark-mode .create_tkt_div_custom button,
html.dark-mode .create_tkt_button .btn,
html.dark-mode .create_tkt_button button,
html.dark-mode .download_btn,
html.dark-mode .btn.download_btn,
html.dark-mode button.download_btn,
html.dark-mode .btnAddCorrespondence,
html.dark-mode .btn.btnAddCorrespondence,
html.dark-mode button.btnAddCorrespondence,
html.dark-mode .green_button,
html.dark-mode .btn-green,
html.dark-mode .addView_button,
html.dark-mode #btnPayNow,
html.dark-mode #btnsendEcontract,
html.dark-mode #btnsendIsPccontract,
html.dark-mode .btn-success,
html.dark-mode .btn_file,
html.dark-mode .btn-verify,
html.dark-mode .customer-new,
html.dark-mode .customer-btn-dropdown,
html.dark-mode .equipment-new:not([style*="#ff2c2c"]),
html.dark-mode .eqipment-btn-dropdown,
html.dark-mode .mass-stockbutton,
html.dark-mode .AddNewEquipment:not([style*="#ff2c2c"]),
html.dark-mode .btnPO,
html.dark-mode .btnBI,
html.dark-mode .btn-add-tech-inventory-equipment,
html.dark-mode .btn-save-Inventory-product,
html.dark-mode .btnAddRequest,
html.dark-mode #AddNewService,
html.dark-mode #AddNewPO,
html.dark-mode #AddNewPOTranslog,
html.dark-mode #TechAddNewBI,
html.dark-mode #AddNewBI,
html.dark-mode .lead_report_btn,
html.dark-mode .customer_report_btn,
html.dark-mode .btn-apply-filter,
html.dark-mode .btn-reset-filter,
html.dark-mode .btn_reset_cus_filter_active,
html.dark-mode .btn_apply_cus_filter,
html.dark-mode .btn-apply-Datefilter,
html.dark-mode .DateFilterContents .btn-apply-Datefilter,
html.dark-mode .btn-leadnote,
html.dark-mode .btn-leadnoteLeadform,
html.dark-mode .btn-snote,
html.dark-mode #btn-AddLeadNote,
html.dark-mode #btn-AddLeadNoteLeadform,
html.dark-mode .lead_add_note_btn,
html.dark-mode #SaveNotes,
html.dark-mode #SaveCreditCheck,
html.dark-mode .footer_sec_filter button,
html.dark-mode .footer_sec_filter .btn,
html.dark-mode #btnVerifyOnly,
html.dark-mode #btnVerifyOnly1,
html.dark-mode #btnVerifyOnly2,
html.dark-mode #btnVerify,
html.dark-mode #btnVerifyLead,
html.dark-mode .create_lead_form,
html.dark-mode .edit_lead_form,
html.dark-mode .lead_detail_bottom_btn .btn:not(.btn-danger):not(.red_button):not(.btn-grey):not(.btn-cancel),
html.dark-mode .add_verify_info_btn_container .btn:not(.btn-danger):not(.red_button):not(.btn-grey):not(.btn-cancel),
html.dark-mode .file-upload-save-btn,
html.dark-mode #SaveAssignedTo,
html.dark-mode #SaveCustomerFiles,
html.dark-mode #btnUploadCustomerFile,
html.dark-mode #btn-AddFollowUpReminder,
html.dark-mode #btn-copymenu,
html.dark-mode #btn_tech_receive,
html.dark-mode #btn_tech_approve,
html.dark-mode #btn-update-permission,
html.dark-mode #SaveTransferFromTechnician,
html.dark-mode #btnCustomerAddNewEmgContact,
html.dark-mode #btnAddNewEmgContact,
html.dark-mode #btnSaveEmgContact,
html.dark-mode #btnSaveEmgContactDraft,
html.dark-mode #btnSaveEmgContactAndClose,
html.dark-mode #btnSaveEmgContactAndNew,
html.dark-mode #btnSaveEmgContact_edititem,
html.dark-mode #btn_addachpaymentcustomer,
html.dark-mode #btn_addccpaymentcustomer,
html.dark-mode .btn_addachpaymentcustomer,
html.dark-mode .btn_addccpaymentcustomer,
html.dark-mode #btn_addachpaymentcustomerQA,
html.dark-mode #btn_addccpaymentcustomerQA,
html.dark-mode button[style*="2ca01c"],
html.dark-mode a.btn[style*="2ca01c"],
html.dark-mode input[type="button"][style*="2ca01c"],
html.dark-mode input[type="submit"][style*="2ca01c"],
html.dark-mode .footer-section .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .footer-section button:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .SaveCancelDiv .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .SaveCancelDiv button:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .acl_footer .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .followUp_SaveCancelDiv .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .Survey_SaveCancelDiv .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .manual_inventory_footer .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .manual_inventory_footer button:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .SaveaButtonsDivMass .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .SaveaButtonsDivMass button:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button) {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
}

html.dark-mode .btn_cf:hover,
html.dark-mode .add_customer_file:hover,
html.dark-mode .btn.btn_cf:hover,
html.dark-mode button.btn_cf:hover,
html.dark-mode .btn.add_customer_file:hover,
html.dark-mode button.add_customer_file:hover,
html.dark-mode #AddServiceWithOptions:hover,
html.dark-mode .create_ticket_btn:hover,
html.dark-mode .btn.create_ticket_btn:hover,
html.dark-mode button.create_ticket_btn:hover,
html.dark-mode .btnAddNewTicket:hover,
html.dark-mode .btnAgemniTickets:hover,
html.dark-mode #TicketReport:hover,
html.dark-mode .create_tkt_div_custom .btn:hover,
html.dark-mode .create_tkt_div_custom button:hover,
html.dark-mode .create_tkt_button .btn:hover,
html.dark-mode .create_tkt_button button:hover,
html.dark-mode .download_btn:hover,
html.dark-mode .btn.download_btn:hover,
html.dark-mode button.download_btn:hover,
html.dark-mode .btnAddCorrespondence:hover,
html.dark-mode .btn.btnAddCorrespondence:hover,
html.dark-mode button.btnAddCorrespondence:hover,
html.dark-mode .green_button:hover,
html.dark-mode .btn-green:hover,
html.dark-mode .addView_button:hover,
html.dark-mode .addView_button:focus,
html.dark-mode #btnPayNow:hover,
html.dark-mode #btnsendEcontract:hover,
html.dark-mode #btnsendIsPccontract:hover,
html.dark-mode .btn-success:hover,
html.dark-mode .btn_file:hover,
html.dark-mode .btn-verify:hover,
html.dark-mode .customer-new:hover,
html.dark-mode .customer-btn-dropdown:hover,
html.dark-mode .equipment-new:not([style*="#ff2c2c"]):hover,
html.dark-mode .eqipment-btn-dropdown:hover,
html.dark-mode .mass-stockbutton:hover,
html.dark-mode .AddNewEquipment:not([style*="#ff2c2c"]):hover,
html.dark-mode .btnPO:hover,
html.dark-mode .btnBI:hover,
html.dark-mode .btn-add-tech-inventory-equipment:hover,
html.dark-mode .btn-save-Inventory-product:hover,
html.dark-mode .btnAddRequest:hover,
html.dark-mode #AddNewService:hover,
html.dark-mode #AddNewPO:hover,
html.dark-mode #AddNewPOTranslog:hover,
html.dark-mode #TechAddNewBI:hover,
html.dark-mode #AddNewBI:hover,
html.dark-mode .lead_report_btn:hover,
html.dark-mode .customer_report_btn:hover,
html.dark-mode .btn-apply-filter:hover,
html.dark-mode .btn-reset-filter:hover,
html.dark-mode .btn_reset_cus_filter_active:hover,
html.dark-mode .btn_apply_cus_filter:hover,
html.dark-mode .btn-apply-Datefilter:hover,
html.dark-mode .DateFilterContents .btn-apply-Datefilter:hover,
html.dark-mode .btn-leadnote:hover,
html.dark-mode .btn-leadnoteLeadform:hover,
html.dark-mode .btn-snote:hover,
html.dark-mode #btn-AddLeadNote:hover,
html.dark-mode #btn-AddLeadNoteLeadform:hover,
html.dark-mode .lead_add_note_btn:hover,
html.dark-mode #SaveNotes:hover,
html.dark-mode #SaveCreditCheck:hover,
html.dark-mode .footer_sec_filter button:hover,
html.dark-mode .footer_sec_filter .btn:hover,
html.dark-mode #btnVerifyOnly:hover,
html.dark-mode #btnVerifyOnly1:hover,
html.dark-mode #btnVerifyOnly2:hover,
html.dark-mode #btnVerify:hover,
html.dark-mode #btnVerifyLead:hover,
html.dark-mode .create_lead_form:hover,
html.dark-mode .edit_lead_form:hover,
html.dark-mode .lead_detail_bottom_btn .btn:not(.btn-danger):not(.red_button):not(.btn-grey):not(.btn-cancel):hover,
html.dark-mode .add_verify_info_btn_container .btn:not(.btn-danger):not(.red_button):not(.btn-grey):not(.btn-cancel):hover,
html.dark-mode .file-upload-save-btn:hover,
html.dark-mode #SaveAssignedTo:hover,
html.dark-mode #SaveCustomerFiles:hover,
html.dark-mode #btnUploadCustomerFile:hover,
html.dark-mode #btn-AddFollowUpReminder:hover,
html.dark-mode #btn-copymenu:hover,
html.dark-mode #btn_tech_receive:hover,
html.dark-mode #btn_tech_approve:hover,
html.dark-mode #btn-update-permission:hover,
html.dark-mode #SaveTransferFromTechnician:hover,
html.dark-mode #btnCustomerAddNewEmgContact:hover,
html.dark-mode #btnAddNewEmgContact:hover,
html.dark-mode #btnSaveEmgContact:hover,
html.dark-mode #btnSaveEmgContactDraft:hover,
html.dark-mode #btnSaveEmgContactAndClose:hover,
html.dark-mode #btnSaveEmgContactAndNew:hover,
html.dark-mode #btnSaveEmgContact_edititem:hover,
html.dark-mode #btn_addachpaymentcustomer:hover,
html.dark-mode #btn_addccpaymentcustomer:hover,
html.dark-mode .btn_addachpaymentcustomer:hover,
html.dark-mode .btn_addccpaymentcustomer:hover,
html.dark-mode #btn_addachpaymentcustomerQA:hover,
html.dark-mode #btn_addccpaymentcustomerQA:hover,
html.dark-mode button[style*="2ca01c"]:hover,
html.dark-mode a.btn[style*="2ca01c"]:hover,
html.dark-mode input[type="button"][style*="2ca01c"]:hover,
html.dark-mode input[type="submit"][style*="2ca01c"]:hover,
html.dark-mode .footer-section .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .footer-section button:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .SaveCancelDiv .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .SaveCancelDiv button:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .acl_footer .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .followUp_SaveCancelDiv .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .Survey_SaveCancelDiv .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .manual_inventory_footer .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .manual_inventory_footer button:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .SaveaButtonsDivMass .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .SaveaButtonsDivMass button:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #fff !important;
}

html.dark-mode .btn_cf i,
html.dark-mode .add_customer_file i,
html.dark-mode .btn_cf:hover i,
html.dark-mode .add_customer_file:hover i,
html.dark-mode #AddServiceWithOptions i,
html.dark-mode #AddServiceWithOptions:hover i,
html.dark-mode #TicketReport i,
html.dark-mode #TicketReport:hover i,
html.dark-mode .create_ticket_btn i,
html.dark-mode .create_ticket_btn:hover i {
    color: #ffffff !important;
}

html.dark-mode .ui_delete_btn,
html.dark-mode .red_button,
html.dark-mode .btn-danger {
    background-color: var(--dm-danger) !important;
    border-color: var(--dm-danger) !important;
    color: #fff !important;
}

html.dark-mode .close,
html.dark-mode .closenew,
html.dark-mode .close:hover,
html.dark-mode .closenew:hover {
    color: var(--dm-text) !important;
    text-shadow: none !important;
    opacity: .8;
}

/* ----------------------------------------------------- dropdowns and modals */

html.dark-mode .dropdown-menu,
html.dark-mode .dropdown-user,
html.dark-mode .dropdown_help,
html.dark-mode .popup_helptype {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 6px 18px var(--dm-shadow) !important;
    color: var(--dm-text) !important;
}

/* Support Ticket / Help image for Dark Mode */
html.dark-mode .help_image_light {
    display: none !important;
}

html.dark-mode .help_image_dark {
    display: block !important;
}

html.dark-mode .help_image:not(.help_image_light) {
    content: url('/Content/img/help_dark.png') !important;
}

html.dark-mode .dropdown-menu > li > a,
html.dark-mode .dropdown-menu li a {
    color: var(--dm-text) !important;
}

html.dark-mode .dropdown-menu > li > a:hover,
html.dark-mode .dropdown-menu > li > a:focus,
html.dark-mode .dropdown-menu > .active > a {
    background-color: #343a40 !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .dropdown-menu .divider {
    background-color: var(--dm-border) !important;
}

html.dark-mode .modal-content,
html.dark-mode .modal-body,
html.dark-mode .modal-footer {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* Dialog title bars follow the same treatment as panel/box headers */
html.dark-mode .modal-header {
    background-color: var(--dm-header-bar) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode .modal-backdrop {
    background-color: #000 !important;
}

html.dark-mode .modal-title,
html.dark-mode .modal-header h1,
html.dark-mode .modal-header h2,
html.dark-mode .modal-header h3,
html.dark-mode .modal-header h4,
html.dark-mode .modal-header h5,
html.dark-mode .modal-header h6,
html.dark-mode .modal-header span,
html.dark-mode .modal-header p,
html.dark-mode .modal-header label {
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode .modal-header .close,
html.dark-mode .modal-header .closenew,
html.dark-mode .modal-content .closenew,
html.dark-mode .closenew,
html.dark-mode button.closenew {
    color: var(--dm-header-bar-text) !important;
    opacity: 0.85 !important;
    text-shadow: none !important;
}

html.dark-mode .modal-header .close:hover,
html.dark-mode .modal-header .close:focus,
html.dark-mode .modal-header .closenew:hover,
html.dark-mode .modal-header .closenew:focus,
html.dark-mode .modal-content .closenew:hover,
html.dark-mode .modal-content .closenew:focus,
html.dark-mode .closenew:hover,
html.dark-mode .closenew:focus,
html.dark-mode button.closenew:hover,
html.dark-mode button.closenew:focus {
    color: #ffffff !important;
    opacity: 1 !important;
}

/*
    Modal Buttons: In modals, neutral/default buttons (.btn-default) keep their normal (light)
    appearance (white with grey border) instead of turning black.
    Green buttons (.btn_file, .btn-green, .green_button, .btn-success, etc.) remain green.
*/
html.dark-mode .modal .btn-default,
html.dark-mode .modal-dialog .btn-default,
html.dark-mode .modal-content .btn-default,
html.dark-mode .modal-footer .btn-default,
html.dark-mode .TopToBottomModal .btn-default,
html.dark-mode .top_to_bottom_modal_container .btn-default,
html.dark-mode .RightToLeftModal .btn-default,
html.dark-mode .right_to_left_modal_container .btn-default,
html.dark-mode .FullScreenLoginModal .btn-default,
html.dark-mode .white-popup-block .btn-default,
html.dark-mode .mfp-content .btn-default {
    background-color: #ffffff !important;
    border-color: #cccccc !important;
    color: #333333 !important;
}

html.dark-mode .modal .btn-default:hover,
html.dark-mode .modal-dialog .btn-default:hover,
html.dark-mode .modal-content .btn-default:hover,
html.dark-mode .modal-footer .btn-default:hover,
html.dark-mode .TopToBottomModal .btn-default:hover,
html.dark-mode .top_to_bottom_modal_container .btn-default:hover,
html.dark-mode .RightToLeftModal .btn-default:hover,
html.dark-mode .right_to_left_modal_container .btn-default:hover,
html.dark-mode .FullScreenLoginModal .btn-default:hover,
html.dark-mode .white-popup-block .btn-default:hover,
html.dark-mode .mfp-content .btn-default:hover {
    background-color: #e6e6e6 !important;
    border-color: #adadad !important;
    color: #333333 !important;
}

/* Primary buttons in modals */
html.dark-mode .modal .btn-primary,
html.dark-mode .TopToBottomModal .btn-primary,
html.dark-mode .top_to_bottom_modal_container .btn-primary,
html.dark-mode .RightToLeftModal .btn-primary,
html.dark-mode .right_to_left_modal_container .btn-primary,
html.dark-mode .white-popup-block .btn-primary,
html.dark-mode .mfp-content .btn-primary {
    background-color: #337ab7 !important;
    border-color: #2e6da4 !important;
    color: #ffffff !important;
}

html.dark-mode .modal .btn-primary:hover,
html.dark-mode .TopToBottomModal .btn-primary:hover,
html.dark-mode .top_to_bottom_modal_container .btn-primary:hover,
html.dark-mode .RightToLeftModal .btn-primary:hover,
html.dark-mode .right_to_left_modal_container .btn-primary:hover,
html.dark-mode .white-popup-block .btn-primary:hover,
html.dark-mode .mfp-content .btn-primary:hover {
    background-color: #286090 !important;
    border-color: #204d74 !important;
    color: #ffffff !important;
}

/* Success / Green buttons in modals - explicitly ensure they stay green (#2ca01c) */
html.dark-mode .download_btn,
html.dark-mode .btn.download_btn,
html.dark-mode button.download_btn,
html.dark-mode .modal .download_btn,
html.dark-mode .RightToLeftModal .download_btn,
html.dark-mode .right_to_left_modal_container .download_btn,
html.dark-mode .TopToBottomModal .download_btn,
html.dark-mode .top_to_bottom_modal_container .download_btn,
html.dark-mode .modal .btn-success,
html.dark-mode .modal .green_button,
html.dark-mode .modal .btn-green,
html.dark-mode .modal .btn_file,
html.dark-mode .modal .file-upload-save-btn,
html.dark-mode .modal #SaveCustomerFiles,
html.dark-mode .modal #btnUploadCustomerFile,
html.dark-mode .modal #btn_yes,
html.dark-mode .TopToBottomModal .btn-success,
html.dark-mode .TopToBottomModal .green_button,
html.dark-mode .TopToBottomModal .btn-green,
html.dark-mode .TopToBottomModal .btnSendEmailServiceOrder,
html.dark-mode .TopToBottomModal .InvoiceSaveButton,
html.dark-mode .RightToLeftModal .btn-success,
html.dark-mode .RightToLeftModal .green_button,
html.dark-mode .RightToLeftModal .btn-green,
html.dark-mode .RightToLeftModal .btn_file,
html.dark-mode .top_to_bottom_modal_container .btn-success,
html.dark-mode .top_to_bottom_modal_container .green_button,
html.dark-mode .top_to_bottom_modal_container .btn-green,
html.dark-mode .right_to_left_modal_container .btn-success,
html.dark-mode .right_to_left_modal_container .green_button,
html.dark-mode .right_to_left_modal_container .btn-green,
html.dark-mode .right_to_left_modal_container .btn_file,
html.dark-mode .white-popup-block .btn-success,
html.dark-mode .white-popup-block .green_button,
html.dark-mode .white-popup-block .btn-green,
html.dark-mode .mfp-content .btn-success,
html.dark-mode .mfp-content .green_button,
html.dark-mode .mfp-content .btn-green,
html.dark-mode .footer-section .btn_file,
html.dark-mode .footer-section .btn-green,
html.dark-mode .footer-section .file-upload-save-btn,
html.dark-mode .footer-section #SaveCustomerFiles,
html.dark-mode .footer-section #SaveAssignedTo,
html.dark-mode .modal #SaveAssignedTo,
html.dark-mode .footer-section .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button),
html.dark-mode .SaveCancelDiv .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button) {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #ffffff !important;
}

html.dark-mode .download_btn:hover,
html.dark-mode .btn.download_btn:hover,
html.dark-mode button.download_btn:hover,
html.dark-mode .modal .download_btn:hover,
html.dark-mode .RightToLeftModal .download_btn:hover,
html.dark-mode .right_to_left_modal_container .download_btn:hover,
html.dark-mode .TopToBottomModal .download_btn:hover,
html.dark-mode .top_to_bottom_modal_container .download_btn:hover,
html.dark-mode .modal .btn-success:hover,
html.dark-mode .modal .green_button:hover,
html.dark-mode .modal .btn-green:hover,
html.dark-mode .modal .btn_file:hover,
html.dark-mode .modal .file-upload-save-btn:hover,
html.dark-mode .modal #SaveCustomerFiles:hover,
html.dark-mode .modal #btnUploadCustomerFile:hover,
html.dark-mode .modal #SaveAssignedTo:hover,
html.dark-mode .modal #btn_yes:hover,
html.dark-mode .TopToBottomModal .btn-success:hover,
html.dark-mode .TopToBottomModal .green_button:hover,
html.dark-mode .TopToBottomModal .btn-green:hover,
html.dark-mode .TopToBottomModal .btnSendEmailServiceOrder:hover,
html.dark-mode .TopToBottomModal .InvoiceSaveButton:hover,
html.dark-mode .RightToLeftModal .btn-success:hover,
html.dark-mode .RightToLeftModal .green_button:hover,
html.dark-mode .RightToLeftModal .btn-green:hover,
html.dark-mode .RightToLeftModal .btn_file:hover,
html.dark-mode .top_to_bottom_modal_container .btn-success:hover,
html.dark-mode .top_to_bottom_modal_container .green_button:hover,
html.dark-mode .top_to_bottom_modal_container .btn-green:hover,
html.dark-mode .right_to_left_modal_container .btn-success:hover,
html.dark-mode .right_to_left_modal_container .green_button:hover,
html.dark-mode .right_to_left_modal_container .btn-green:hover,
html.dark-mode .right_to_left_modal_container .btn_file:hover,
html.dark-mode .white-popup-block .btn-success:hover,
html.dark-mode .white-popup-block .green_button:hover,
html.dark-mode .white-popup-block .btn-green:hover,
html.dark-mode .mfp-content .btn-success:hover,
html.dark-mode .mfp-content .green_button:hover,
html.dark-mode .mfp-content .btn-green:hover,
html.dark-mode .footer-section .btn_file:hover,
html.dark-mode .footer-section .btn-green:hover,
html.dark-mode .footer-section .file-upload-save-btn:hover,
html.dark-mode .footer-section #SaveCustomerFiles:hover,
html.dark-mode .footer-section #SaveAssignedTo:hover,
html.dark-mode .footer-section .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover,
html.dark-mode .SaveCancelDiv .btn:not(.btn-default):not(.btn-grey):not(.btn-cancel):not(.close):not(.btn-no):not(.btn-danger):not(.red_button):hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #ffffff !important;
}

/* Download button in dark mode - ensure it always stays green (#2ca01c) */
html.dark-mode .download_btn,
html.dark-mode .btn.download_btn,
html.dark-mode button.download_btn,
html.dark-mode a.download_btn,
html.dark-mode .modal .download_btn,
html.dark-mode .RightToLeftModal .download_btn,
html.dark-mode .right_to_left_modal_container .download_btn,
html.dark-mode .TopToBottomModal .download_btn,
html.dark-mode .top_to_bottom_modal_container .download_btn {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
}

html.dark-mode .download_btn:hover,
html.dark-mode .btn.download_btn:hover,
html.dark-mode button.download_btn:hover,
html.dark-mode a.download_btn:hover,
html.dark-mode .modal .download_btn:hover,
html.dark-mode .RightToLeftModal .download_btn:hover,
html.dark-mode .right_to_left_modal_container .download_btn:hover,
html.dark-mode .TopToBottomModal .download_btn:hover,
html.dark-mode .top_to_bottom_modal_container .download_btn:hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #ffffff !important;
}

html.dark-mode .download_btn i,
html.dark-mode .download_btn .glyphicon,
html.dark-mode .download_btn .glyphicon-download-alt {
    color: #ffffff !important;
}

/* =========================================================
   ESTIMATE / INVOICE / WORK ORDER / BILLING AMOUNT DISPLAY
   ========================================================= */

html.dark-mode .amount-span-style,
html.dark-mode .amount-big,
html.dark-mode .big-amount-top,
html.dark-mode .balance-info .amount,
html.dark-mode .balance-info .amount-span-style,
html.dark-mode .balance-info .amount-big,
html.dark-mode .balance_info_for_desktop .amount,
html.dark-mode .balance_info_for_mobile .amount,
html.dark-mode .balance-info .amount *,
html.dark-mode .balance_info_for_desktop .amount *,
html.dark-mode .balance_info_for_mobile .amount *,
html.dark-mode .mp_amount_right,
html.dark-mode ._subtotal_amount_po {
    color: var(--dm-text-heading, #ffffff) !important;
}

html.dark-mode .balance-info .span-style,
html.dark-mode .balance_info_for_desktop .span-style,
html.dark-mode .balance_info_for_mobile .span-style {
    color: var(--dm-text-heading, #ffffff) !important;
}

/* =========================================================
   SETUP PAYMENT TERMS MODAL / DRAWER
   ========================================================= */

html.dark-mode .invoice-block {
    background: var(--dm-surface, #1e2328) !important;
    border: 1px solid var(--dm-border, #3a424a) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .invoice-block h4 {
    color: #38bdf8 !important;
    border-bottom: 1px solid var(--dm-border, #3a424a) !important;
}

html.dark-mode .invoice-block .input-row label,
html.dark-mode .input-row label {
    color: var(--dm-text, #e2e8f0) !important;
}

html.dark-mode .headline span {
    color: var(--dm-text-heading, #ffffff) !important;
}

html.dark-mode .spt_height_inner,
html.dark-mode .spt_height {
    background-color: transparent !important;
}

/* Danger / Red buttons in modals */
html.dark-mode .modal .btn-danger,
html.dark-mode .modal .red_button,
html.dark-mode .modal .btn-no,
html.dark-mode .modal .ui_delete_btn,
html.dark-mode .TopToBottomModal .btn-danger,
html.dark-mode .TopToBottomModal .red_button,
html.dark-mode .TopToBottomModal .btn-no,
html.dark-mode .top_to_bottom_modal_container .btn-danger,
html.dark-mode .top_to_bottom_modal_container .red_button,
html.dark-mode .top_to_bottom_modal_container .btn-no,
html.dark-mode .RightToLeftModal .btn-danger,
html.dark-mode .RightToLeftModal .red_button,
html.dark-mode .RightToLeftModal .btn-no,
html.dark-mode .right_to_left_modal_container .btn-danger,
html.dark-mode .right_to_left_modal_container .red_button,
html.dark-mode .right_to_left_modal_container .btn-no,
html.dark-mode .white-popup-block .btn-danger,
html.dark-mode .white-popup-block .red_button,
html.dark-mode .white-popup-block .btn-no,
html.dark-mode .mfp-content .btn-danger,
html.dark-mode .mfp-content .red_button,
html.dark-mode .mfp-content .btn-no {
    background-color: #d71920 !important;
    border-color: #d71920 !important;
    color: #ffffff !important;
}

html.dark-mode .modal .btn-danger:hover,
html.dark-mode .modal .red_button:hover,
html.dark-mode .modal .btn-no:hover,
html.dark-mode .modal .ui_delete_btn:hover,
html.dark-mode .TopToBottomModal .btn-danger:hover,
html.dark-mode .TopToBottomModal .red_button:hover,
html.dark-mode .TopToBottomModal .btn-no:hover,
html.dark-mode .top_to_bottom_modal_container .btn-danger:hover,
html.dark-mode .top_to_bottom_modal_container .red_button:hover,
html.dark-mode .top_to_bottom_modal_container .btn-no:hover,
html.dark-mode .RightToLeftModal .btn-danger:hover,
html.dark-mode .RightToLeftModal .red_button:hover,
html.dark-mode .RightToLeftModal .btn-no:hover,
html.dark-mode .right_to_left_modal_container .btn-danger:hover,
html.dark-mode .right_to_left_modal_container .red_button:hover,
html.dark-mode .right_to_left_modal_container .btn-no:hover,
html.dark-mode .white-popup-block .btn-danger:hover,
html.dark-mode .white-popup-block .red_button:hover,
html.dark-mode .white-popup-block .btn-no:hover,
html.dark-mode .mfp-content .btn-danger:hover,
html.dark-mode .mfp-content .red_button:hover,
html.dark-mode .mfp-content .btn-no:hover {
    background-color: #b3141a !important;
    border-color: #b3141a !important;
    color: #ffffff !important;
}

/* Grey buttons in modals */
html.dark-mode .modal .btn-grey,
html.dark-mode .TopToBottomModal .btn-grey,
html.dark-mode .top_to_bottom_modal_container .btn-grey,
html.dark-mode .RightToLeftModal .btn-grey,
html.dark-mode .right_to_left_modal_container .btn-grey,
html.dark-mode .white-popup-block .btn-grey,
html.dark-mode .mfp-content .btn-grey {
    background-color: gray !important;
    border-color: gray !important;
    color: #ffffff !important;
}

html.dark-mode .modal .btn-grey:hover,
html.dark-mode .TopToBottomModal .btn-grey:hover,
html.dark-mode .top_to_bottom_modal_container .btn-grey:hover,
html.dark-mode .RightToLeftModal .btn-grey:hover,
html.dark-mode .right_to_left_modal_container .btn-grey:hover,
html.dark-mode .white-popup-block .btn-grey:hover,
html.dark-mode .mfp-content .btn-grey:hover {
    background-color: #666666 !important;
    border-color: #666666 !important;
    color: #ffffff !important;
}

/* Info and Warning buttons in modals */
html.dark-mode .modal .btn-info,
html.dark-mode .TopToBottomModal .btn-info,
html.dark-mode .RightToLeftModal .btn-info,
html.dark-mode .top_to_bottom_modal_container .btn-info,
html.dark-mode .right_to_left_modal_container .btn-info,
html.dark-mode .white-popup-block .btn-info,
html.dark-mode .mfp-content .btn-info {
    background-color: #5bc0de !important;
    border-color: #46b8da !important;
    color: #ffffff !important;
}

html.dark-mode .modal .btn-info:hover,
html.dark-mode .TopToBottomModal .btn-info:hover,
html.dark-mode .RightToLeftModal .btn-info:hover,
html.dark-mode .top_to_bottom_modal_container .btn-info:hover,
html.dark-mode .right_to_left_modal_container .btn-info:hover,
html.dark-mode .white-popup-block .btn-info:hover,
html.dark-mode .mfp-content .btn-info:hover {
    background-color: #31b0d5 !important;
    border-color: #269abc !important;
    color: #ffffff !important;
}

html.dark-mode .modal .btn-warning,
html.dark-mode .TopToBottomModal .btn-warning,
html.dark-mode .RightToLeftModal .btn-warning,
html.dark-mode .top_to_bottom_modal_container .btn-warning,
html.dark-mode .right_to_left_modal_container .btn-warning,
html.dark-mode .white-popup-block .btn-warning,
html.dark-mode .mfp-content .btn-warning {
    background-color: #f0ad4e !important;
    border-color: #eea236 !important;
    color: #ffffff !important;
}

html.dark-mode .modal .btn-warning:hover,
html.dark-mode .TopToBottomModal .btn-warning:hover,
html.dark-mode .RightToLeftModal .btn-warning:hover,
html.dark-mode .top_to_bottom_modal_container .btn-warning:hover,
html.dark-mode .right_to_left_modal_container .btn-warning:hover,
html.dark-mode .white-popup-block .btn-warning:hover,
html.dark-mode .mfp-content .btn-warning:hover {
    background-color: #ec971f !important;
    border-color: #d58512 !important;
    color: #ffffff !important;
}

/* ---------------------------------- file upload & right-to-left drawer modals */
/*
    Views rendered in right-side drawer (#Right-To-Left-Modal-Body, #Right-To-Left-Modal-Body-MMR,
    #Right-To-Left-big-Modal-Body, etc.) and top-to-bottom drawers.
*/
html.dark-mode .add_customer_follow_up_header,
html.dark-mode .add_file_header,
html.dark-mode .add_file_header_lead,
html.dark-mode .add_lead_note_header,
html.dark-mode .add_lead_note_header_container,
html.dark-mode .add_note_header,
html.dark-mode .add_note_header_container,
html.dark-mode .acl_header,
html.dark-mode .add_tracking_header,
html.dark-mode .add_site_location_header,
html.dark-mode .add_site_config_header,
html.dark-mode .add_hoursopt_header,
html.dark-mode .hoursofopt_header,
html.dark-mode .add_expense_header,
html.dark-mode .add_ticket_noti_header,
html.dark-mode .add_seo_content_header,
html.dark-mode .social_media_header,
html.dark-mode .track_number_header_container,
html.dark-mode .pi_work_order_div_header,
html.dark-mode .pi_header_title,
html.dark-mode .resch_ticket_header,
html.dark-mode .rug_condition_pop_header,
html.dark-mode .add_system_setting_header,
html.dark-mode .add_invoice_header,
html.dark-mode .modal.right .modal-body > div:first-child[class*="header"],
html.dark-mode .modal.right .modal-body [class*="_header"],
html.dark-mode .modal.right .modal-body [class$="_header"],
html.dark-mode #Right-To-Left-Modal-Body .modal-body [class*="_header"],
html.dark-mode #Right-To-Left-Modal-Body-MMR .modal-body [class*="_header"],
html.dark-mode #Right-To-Left-big-Modal-Body .modal-body [class*="_header"],
html.dark-mode .TopToBottomModal [class*="_header"],
html.dark-mode .top_to_bottom_modal_container [class*="_header"],
html.dark-mode .RightToLeftModal [class*="_header"],
html.dark-mode .right_to_left_modal_container [class*="_header"],
html.dark-mode .alarm_head_container,
html.dark-mode .modal.right .alarm_head_container,
html.dark-mode #Right-To-Left-Modal-Body .alarm_head_container,
html.dark-mode #Right-To-Left-Modal-Body-MMR .alarm_head_container,
html.dark-mode #Right-To-Left-big-Modal-Body .alarm_head_container {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .add_customer_follow_up_header span,
html.dark-mode .add_customer_follow_up_header h1,
html.dark-mode .add_customer_follow_up_header h2,
html.dark-mode .add_customer_follow_up_header h3,
html.dark-mode .add_customer_follow_up_header h4,
html.dark-mode .add_customer_follow_up_header h5,
html.dark-mode .add_customer_follow_up_header h6,
html.dark-mode .add_customer_follow_up_header p,
html.dark-mode .add_customer_follow_up_header label,
html.dark-mode .add_lead_note_header span,
html.dark-mode .add_lead_note_header_container span,
html.dark-mode .add_note_header span,
html.dark-mode .add_note_header_container span,
html.dark-mode .add_file_header span,
html.dark-mode .add_file_header_lead span,
html.dark-mode .acl_header span,
html.dark-mode .add_tracking_header span,
html.dark-mode .add_site_location_header span,
html.dark-mode .add_site_config_header span,
html.dark-mode .add_hoursopt_header span,
html.dark-mode .hoursofopt_header span,
html.dark-mode .add_expense_header span,
html.dark-mode .add_ticket_noti_header span,
html.dark-mode .add_seo_content_header span,
html.dark-mode .social_media_header span,
html.dark-mode .track_number_header_container span,
html.dark-mode .pi_work_order_div_header span,
html.dark-mode .resch_ticket_header span,
html.dark-mode .rug_condition_pop_header span,
html.dark-mode .modal.right .modal-body [class*="_header"] span,
html.dark-mode .modal.right .modal-body [class*="_header"] h1,
html.dark-mode .modal.right .modal-body [class*="_header"] h2,
html.dark-mode .modal.right .modal-body [class*="_header"] h3,
html.dark-mode .modal.right .modal-body [class*="_header"] h4,
html.dark-mode .modal.right .modal-body [class*="_header"] h5,
html.dark-mode .modal.right .modal-body [class*="_header"] h6,
html.dark-mode .modal.right .modal-body [class*="_header"] p,
html.dark-mode .modal.right .modal-body [class*="_header"] label,
html.dark-mode #Right-To-Left-Modal-Body .modal-body [class*="_header"] span,
html.dark-mode #Right-To-Left-Modal-Body-MMR .modal-body [class*="_header"] span,
html.dark-mode #Right-To-Left-big-Modal-Body .modal-body [class*="_header"] span,
html.dark-mode .TopToBottomModal [class*="_header"] span,
html.dark-mode .top_to_bottom_modal_container [class*="_header"] span,
html.dark-mode .RightToLeftModal [class*="_header"] span,
html.dark-mode .right_to_left_modal_container [class*="_header"] span,
html.dark-mode .alarm_head_container span,
html.dark-mode .alarm_head_text,
html.dark-mode .header_txt_style_ERP {
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode .add_followup_reminder_container_custom,
html.dark-mode .add_followup_reminder_container_custom span,
html.dark-mode .add_followup_reminder_container_custom label,
html.dark-mode .add_followup_reminder_container_custom .text-custom,
html.dark-mode .add_followup_reminder_container_custom .span-style,
html.dark-mode .modal.right .text-custom,
html.dark-mode .modal.right .span-style,
html.dark-mode #Right-To-Left-Modal-Body .text-custom,
html.dark-mode #Right-To-Left-Modal-Body .span-style,
html.dark-mode .style-span {
    color: var(--dm-text) !important;
}

html.dark-mode .footer-section,
html.dark-mode .footer_section_public,
html.dark-mode .acl_footer {
    background-color: var(--dm-surface) !important;
    background: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
}

html.dark-mode .input-group-addon {
    background-color: var(--dm-header-bar) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .tblBINDetails tr {
    border-color: var(--dm-border) !important;
}

html.dark-mode .tblBINDetails tr td {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .InvoiceNote {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .NoteAddedByDiv {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .add_site_location_container,
html.dark-mode .add_site_config_container,
html.dark-mode .add_seo_content_container,
html.dark-mode .add_site_location_inner_height,
html.dark-mode .add_site_config_inner_height,
html.dark-mode .add_seo_content_inner_height,
html.dark-mode .add_system_setting_inner_height,
html.dark-mode .add_site_location_inner,
html.dark-mode .add_site_config_inner,
html.dark-mode .add_seo_content_inner {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .add_site_location_inner .span-style,
html.dark-mode .add_site_config_inner .span-style,
html.dark-mode .add_seo_content_inner .span-style,
html.dark-mode .add_site_location_inner label,
html.dark-mode .add_site_location_inner b,
html.dark-mode .add_site_location_inner span {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .add_site_location_footer,
html.dark-mode .add_site_config_footer,
html.dark-mode .add_seo_content_footer {
    background-color: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
}

html.dark-mode .modal.right .modal-content {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .modal.right .modal-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

html.dark-mode .modal.right .modal-header .close,
html.dark-mode #Right-To-Left-Modal-Body .close,
html.dark-mode #Right-To-Left-Modal-Body-MMR .close,
html.dark-mode #Right-To-Left-big-Modal-Body .close,
html.dark-mode .modal.right .close {
    color: var(--dm-header-bar-text) !important;
    opacity: 0.85 !important;
    text-shadow: none !important;
    padding: 10px 15px;
    position: relative;
    z-index: 1000;
}

html.dark-mode .modal.right .modal-header .close:hover,
html.dark-mode #Right-To-Left-Modal-Body .close:hover,
html.dark-mode #Right-To-Left-Modal-Body-MMR .close:hover,
html.dark-mode #Right-To-Left-big-Modal-Body .close:hover,
html.dark-mode .modal.right .close:hover {
    color: #fff !important;
    opacity: 1 !important;
}

html.dark-mode .add_lead_note_height,
html.dark-mode .modal.right .modal-body {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .Ltxt-style,
html.dark-mode .txtnote-style {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .fileborder {
    border-color: var(--dm-border) !important;
}

html.dark-mode img[src*="blank_thumb_file"] {
    filter: invert(0.88) hue-rotate(180deg);
    border-radius: 4px;
}

html.dark-mode .change-picture-logo,
html.dark-mode .change-picture-logo_cover {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .content-type {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .content-text {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* --------------------------------------------------------------------- tabs */

html.dark-mode .nav-tabs {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .nav-tabs {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .nav-tabs > li {
    border-color: var(--dm-border) !important;
    border-right-color: var(--dm-border) !important;
}

html.dark-mode .nav-tabs > li > a {
    color: var(--dm-text-muted) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

html.dark-mode .nav-tabs > li > a:hover {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs > li.active > a:hover,
html.dark-mode .nav-tabs > li.active > a:focus {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) var(--dm-border) transparent !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .tab-content {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

/* ------------------------------------------------------------ alerts, badges */

html.dark-mode .alert-success { background-color: rgba(44,160,28,.14) !important; border-color: rgba(44,160,28,.4) !important; color: #8fe07f !important; }
html.dark-mode .alert-danger  { background-color: rgba(224,82,96,.14) !important; border-color: rgba(224,82,96,.4) !important; color: #f2a0a8 !important; }
html.dark-mode .alert-warning { background-color: rgba(217,155,47,.14) !important; border-color: rgba(217,155,47,.4) !important; color: #f0c988 !important; }
html.dark-mode .alert-info    { background-color: rgba(63,154,196,.14) !important; border-color: rgba(63,154,196,.4) !important; color: #9ad2ea !important; }

html.dark-mode .badge,
html.dark-mode .label-default {
    background-color: #3a4046 !important;
    color: var(--dm-text) !important;
}

/* ------------------------------------------------- dashboard and report cards */

/* "Last logged in - ..." pill (Dashboard.css: #f7f7f7 on #908f8f) */
html.dark-mode .log_style {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-muted) !important;
    border: 1px solid var(--dm-border) !important;
}

/*
    The pale bars that head each report section - these are the white stripes running
    across the dashboard. Kept one step lighter than the card so they still read as a
    header band rather than disappearing into it.
*/
html.dark-mode .DashboardReport_header,
html.dark-mode .dash_report_block_header,
html.dark-mode .get_update_det_header {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .dash_report_block,
html.dark-mode .DashboardReport_inner,
html.dark-mode .dash_report_block_info {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* Leads / Removed / Good Leads / Sales cards. The coloured title chip and the
   green/red trend arrows are deliberately left alone - they carry meaning. */
html.dark-mode .salesreportcart_container {
    background-color: var(--dm-surface) !important;
}

html.dark-mode .salesreportcart tr th {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .salesreportcart tr td {
    color: var(--dm-text) !important;
}

/* Alternating bands so the rows stay readable without a white fill.

   These cards render inside .AllAssignSurveyUser_table, and ShowAllAssignSurveyUser.css
   stripes the odd <tr> #f8f8f8 - so the fill lands on the row, not the cell. This block
   used to clear only the <td>, which made the cell transparent and let that white band
   show straight through, hence the band is reset on the <tr> itself. */
html.dark-mode .salesreportcart tbody tr:nth-child(odd),
html.dark-mode .AllAssignSurveyUser_table table tbody tr:nth-child(odd) {
    background-color: #555 !important;
}

html.dark-mode .salesreportcart tbody tr:nth-child(even),
html.dark-mode .AllAssignSurveyUser_table table tbody tr:nth-child(even) {
    background-color: transparent !important;
}

/* Cells stay clear so the band painted on the row is what shows through */
html.dark-mode .salesreportcart tr td,
html.dark-mode .AllAssignSurveyUser_table table tbody tr td {
    background-color: transparent !important;
}

/* The same table's hover is #f4f5f8, which would flash near-white over the new band */
html.dark-mode .AllAssignSurveyUser_table table tbody tr:hover,
html.dark-mode .AllAssignSurveyUser_table table tbody tr:hover > td {
    background-color: #616161 !important;
}

/* Other light-grey surfaces from the shell that share the #f4f5f8 token */
html.dark-mode .rect_block_green,
html.dark-mode .table_total_bg {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .dfw_table tbody tr:hover,
html.dark-mode .dfw_table tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .05) !important;
}

html.dark-mode .dfw_table tbody tr:nth-child(odd),
html.dark-mode .dfw_table tbody tr:nth-child(odd) > td {
    background-color: rgba(255, 255, 255, .022) !important;
}

html.dark-mode .navbar-top-links li .sup_tick a:focus {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

/* Quick Menu Header and Subheaders in dark mode */
html.dark-mode .top_menu_custom_style .popup_text_header .top_menu_text_head {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .top_menu_custom_style .popup_text_header svg {
    filter: invert(1) brightness(1.8) !important;
}

html.dark-mode .top_menu_custom_style .popup_text_header .buildversion,
html.dark-mode .top_menu_custom_style .popup_text_header .buildversion span {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .top_menu_custom_style .popup_text_header .buildversion #spanbuildversion {
    color: var(--dm-link) !important;
}

html.dark-mode .top_menu_custom_style .popup_text_subHeader {
    color: var(--dm-text-heading) !important;
    border-color: #2ca01c !important;
}

/* Quick Menu items in dark mode: white by default, green on hover */
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement:hover {
    background: transparent !important;
}

html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a span {
    color: #ffffff !important;
    transition: color 0.2s ease;
}

html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a i {
    color: #ffffff !important;
    transition: color 0.2s ease;
}

html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a svg g[fill="#2ca01c"],
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a svg g[fill="#2ca01c"] path,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a svg path:not([fill="none"]) {
    fill: #ffffff !important;
    transition: fill 0.2s ease;
}

/* Hover & Focus states: turn green */
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:hover,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:focus,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement:hover a {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #2ca01c !important;
    border-radius: 4px;
}

html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:hover span,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:focus span,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement:hover a span {
    color: #2ca01c !important;
    margin-left: 10px !important;
}

html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:hover i,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:focus i,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement:hover a i {
    color: #2ca01c !important;
}

html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:hover svg g[fill="#2ca01c"],
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:hover svg g[fill="#2ca01c"] path,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:hover svg path:not([fill="none"]),
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:focus svg g[fill="#2ca01c"],
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:focus svg g[fill="#2ca01c"] path,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement a:focus svg path:not([fill="none"]),
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement:hover a svg g[fill="#2ca01c"],
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement:hover a svg g[fill="#2ca01c"] path,
html.dark-mode .top_menu_custom_style .menu .submenu .submenuelement:hover a svg path:not([fill="none"]) {
    fill: #2ca01c !important;
}

html.dark-mode .top_menu_custom_style .element_mobile a:hover span::after,
html.dark-mode .top_menu_custom_style .element_mobile a:focus span::after {
    border-right: 3px solid #2ca01c !important;
    border-bottom: 3px solid #2ca01c !important;
}

/* ------------------------------------------------------------------- Notifications dropdown & list */
html.dark-mode .dropdown_notification {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .dropdown_notification .not_setting_dv {
    border-bottom: 1px solid var(--dm-border-soft) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .dropdown_notification .not_setting_dv b {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .dropdown_notification .LoadNotification_div {
    border: 2px dashed var(--dm-border) !important;
}

html.dark-mode .notification_item {
    color: var(--dm-text) !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--dm-border-soft) !important;
    transition: background-color 0.15s ease;
}

html.dark-mode .notification_item div:nth-child(1) {
    color: var(--dm-text) !important;
}

html.dark-mode .notification_item .log_info,
html.dark-mode .notification_item div:nth-child(2) {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .notification_item svg path,
html.dark-mode .notification_item svg polyline,
html.dark-mode .notification_item svg line {
    stroke: var(--dm-text) !important;
}

html.dark-mode .notification_item:hover,
html.dark-mode .notification_item:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .notification_item:hover div:nth-child(1),
html.dark-mode .notification_item:focus div:nth-child(1) {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .notification_item:hover .log_info,
html.dark-mode .notification_item:focus .log_info {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .dropdown_notification .not_show_all_dv {
    border-top: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode .dropdown_notification .cus-anchor {
    color: var(--dm-brand) !important;
}

html.dark-mode .dropdown_notification .cus-anchor:hover {
    color: #38c824 !important;
}

/* All Notifications page */
html.dark-mode .AllNotificationsDiv .Notification_head {
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .AllNotificationsDiv .notification_item_full {
    border-bottom: 1px solid var(--dm-border-soft) !important;
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .AllNotificationsDiv .notification_item_full:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.025) !important;
}

html.dark-mode .AllNotificationsDiv .notification_item_full:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .AllNotificationsDiv .notification_item_full:hover div:nth-child(1) {
    color: var(--dm-text-heading) !important;
}

/* Tasks / Reminders widget on Dashboard (_DashBoardCurrentUserFollowupReminder, _DashBoardFollowupReminder) */
html.dark-mode .currentuserreminder-followup-div .panel,
html.dark-mode .reminder-followup-div .panel {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .reminder-contents,
html.dark-mode .reminder-contents-even {
    border-bottom: 1px solid var(--dm-border-soft) !important;
    color: var(--dm-text) !important;
    transition: background-color 0.15s ease;
}

html.dark-mode .reminder-contents {
    background-color: var(--dm-surface) !important;
}

html.dark-mode .reminder-contents-even {
    background-color: rgba(255, 255, 255, 0.035) !important;
}

html.dark-mode .reminder-contents:hover,
html.dark-mode .reminder-contents-even:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark-mode .customertab_click,
html.dark-mode .leadtab_click {
    color: var(--dm-link) !important;
    font-weight: 600;
}

html.dark-mode .customertab_click:hover,
html.dark-mode .leadtab_click:hover {
    color: var(--dm-link-hover) !important;
    text-decoration: underline !important;
}

html.dark-mode .reminder-important,
html.dark-mode .reminder-important-lead {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .reminder-important b,
html.dark-mode .reminder-important-lead b {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .reminder-important .fa,
html.dark-mode .reminder-important-lead .fa {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .dashboard-note {
    color: var(--dm-text) !important;
}

html.dark-mode .dashboard-note.note-style {
    color: var(--dm-danger) !important;
}

/* ---------------------------------------------------------------- list pages */
/*
    Customer / Equipment / Supplier / User list screens. The shells come from
    Shared/ListsCommon.css and Customer/CustomerList.css, so these selectors cover
    all of them rather than just /Customer.
*/

/* Sticky page header - customer.css sets background #fff, which left the page
   title white-on-white. Shared with the Inventory, Leads and Ticket screens. */
html.dark-mode .fixed_header {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .header_text_position,
html.dark-mode .customer_header_left_custom h2,
html.dark-mode .leads_header_left h2 {
    color: var(--dm-text-heading) !important;
}

/* The list panel itself (CustomerList.css: #ffffff) */
html.dark-mode .customer_lite_container,
html.dark-mode .scroll-div,
html.dark-mode .customer_list_search,
html.dark-mode .customer_view_list_container,
html.dark-mode .filter-customer-container,
html.dark-mode .filter-list-customer,
html.dark-mode .header-content,
html.dark-mode .custom-table,
html.dark-mode .filter-customer-container .header-content,
html.dark-mode .filter-customer-container .custom-table,
html.dark-mode .tbody-container {
    background-color: var(--dm-surface) !important;
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* Leads page toolbar and outer wrapper - transparent like light mode so it blends seamlessly with page */
html.dark-mode .leads_container,
html.dark-mode .leads_lite,
html.dark-mode .leads_container .ListContents,
html.dark-mode .leads_container .ListContents > .header-content,
html.dark-mode .leads_container .modify_row,
html.dark-mode .leads_container .lead_list_search_filter,
html.dark-mode .leads_container .bulk-assign-container,
html.dark-mode .leads_container .lead_list_print_div {
    background-color: transparent !important;
    background: transparent !important;
}

html.dark-mode .lead_list_print_div .ActionsDivLeads .btn-group.black-border {
    border: none !important;
    background: transparent !important;
}

/* Ensure Leads table container maintains its dark surface card background */
html.dark-mode .filter-Lead-List,
html.dark-mode .filter-Lead-List .header-content,
html.dark-mode .lead_list_view,
html.dark-mode #tblCustomerList {
    background-color: var(--dm-surface) !important;
    background: var(--dm-surface) !important;
}

html.dark-mode .filter-customer-container {
    border: 1px solid var(--dm-border) !important;
}

/* Shimmer / Skeleton loader (#boxshiner, .shine) */
html.dark-mode .shine,
html.dark-mode box,
html.dark-mode #boxshiner,
html.dark-mode div.box,
html.dark-mode lines,
html.dark-mode photo {
    background: #23272b !important;
    background-color: #23272b !important;
    background-image: linear-gradient(to right, #23272b 0%, #343a40 20%, #23272b 40%, #23272b 100%) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 6px !important;
}

/* Row striping & table body rows */
html.dark-mode .even-row-style,
html.dark-mode .even-row-style > td,
html.dark-mode .lead_list_view > tbody > tr:nth-child(even),
html.dark-mode .lead_list_view > tbody > tr:nth-child(even) > td,
html.dark-mode .filter-customer-container .tbody-container:nth-child(even),
html.dark-mode .filter-customer-container .tbody-container:nth-child(even) .tr-style {
    background-color: rgba(255, 255, 255, .025) !important;
    background: rgba(255, 255, 255, .025) !important;
}

html.dark-mode .tr-style,
html.dark-mode .custom-row,
html.dark-mode .lead_list_view > tbody > tr > td {
    color: var(--dm-text) !important;
    border-color: var(--dm-border-soft) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .filter-customer-container .tr-style {
    background-color: transparent !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .custom-row:hover > td,
html.dark-mode .tr-style:hover,
html.dark-mode .tr-style:hover > td,
html.dark-mode .filter-customer-container .tbody-container:hover,
html.dark-mode .filter-customer-container .tbody-container:hover .tr-style,
html.dark-mode .lead_list_view > tbody > tr:nth-child(even):hover,
html.dark-mode .lead_list_view > tbody > tr:nth-child(even):hover > td,
html.dark-mode .lead_action_btn:hover {
    background-color: rgba(255, 255, 255, .06) !important;
    background: rgba(255, 255, 255, .06) !important;
    color: var(--dm-text-heading) !important;
}

/* Table body cell text & icons */
html.dark-mode .filter-customer-container .table-body-td-style,
html.dark-mode .filter-customer-container .table-body-td-style span,
html.dark-mode .filter-customer-container .table-body-td-style div,
html.dark-mode .filter-customer-container .table-body-td-style p,
html.dark-mode .filter-customer-container .content_for_mobile {
    color: var(--dm-text) !important;
}

html.dark-mode .filter-customer-container .table-body-td-style b,
html.dark-mode .filter-customer-container .table-body-td-style strong,
html.dark-mode .filter-customer-container .table-body-td-style .cl_heading_for_mobile {
    color: var(--dm-text-heading) !important;
}


html.dark-mode .filter-customer-container .status {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .name-anchor-style {
    color: #2ca01c !important;
}

html.dark-mode .name-anchor-style:hover {
    color: #38c824 !important;
}

html.dark-mode .name-anchor-style span {
    color: inherit !important;
}

/* Custom SVG Checkbox in table & forms */
html.dark-mode .label-cbx .checkbox {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-input) !important;
}

html.dark-mode .label-cbx .checkbox svg path {
    fill: none !important;
    stroke: #2ca01c !important;
}

html.dark-mode .label-cbx .checkbox svg polyline {
    fill: none !important;
    stroke: #2ca01c !important;
}

html.dark-mode .label-cbx input:checked + .checkbox {
    border-color: #2ca01c !important;
    background-color: var(--dm-input) !important;
}

html.dark-mode .label-cbx:hover .checkbox svg path {
    stroke-dashoffset: 0 !important;
}

/* Summary Money Bar */
html.dark-mode .money-bar-contents .invoice {
    background-color: #475569 !important;
    color: #ffffff !important;
}

html.dark-mode .money-bar-contents .invoice .cl_amount,
html.dark-mode .money-bar-contents .invoice .sub-content {
    color: #ffffff !important;
}

/* Column headers - .table-head draws a light bottom rule, DataTables paints #f1f1f2 */
html.dark-mode .table-head,
html.dark-mode .thead-th-style,
html.dark-mode table.dataTable thead > tr > th {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .customer-header-icon i.icon_sort_customer,
html.dark-mode .table-head .customer-header-icon i {
    color: var(--dm-text-muted) !important;
}

/* Paging */
html.dark-mode .PaginationButtons,
html.dark-mode .PaginationrightButtons,
html.dark-mode .NavigationButton {
    background: var(--dm-elevated) !important;
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .PaginationButtons:hover,
html.dark-mode .PaginationrightButtons:hover,
html.dark-mode .NavigationButton:hover {
    background: #32373c !important;
    background-color: #32373c !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .PaginationButtons.disabledBtn,
html.dark-mode .PaginationButtons[disabled],
html.dark-mode .NavigationButton.disabledBtn {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
    opacity: 0.6;
}

/* Must come after .PaginationButtons above and repeat the background: the rule above
   is more specific than .activeBtn's own, so it would otherwise flatten the brand
   green and leave the current page indistinguishable. */
html.dark-mode .PaginationButtons.activeBtn,
html.dark-mode .NavigationButton.activeBtn,
html.dark-mode .NavigatonButtonsDiv .activeBtn,
html.dark-mode .activeBtn,
html.dark-mode .PaginationButtons.activeBtn:hover,
html.dark-mode .NavigationButton.activeBtn:hover {
    background: var(--dm-brand) !important;
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
}

html.dark-mode .paginationtextdv,
html.dark-mode .paginationtextdv span {
    color: var(--dm-text-muted) !important;
}

/* Filter panel and assorted light utility surfaces on these screens */
html.dark-mode .customer-fliter-list_Toggle,
html.dark-mode .fliter-list,
html.dark-mode .lead_list_filter,
html.dark-mode .info_style_div,
html.dark-mode .head2,
html.dark-mode .dropbtn,
html.dark-mode .focus:focus {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .footer_sec_filter button,
html.dark-mode .footer_sec_filter .btn,
html.dark-mode .btn_reset_cus_filter_active,
html.dark-mode .btn_apply_cus_filter,
html.dark-mode .btn-reset-filter,
html.dark-mode .btn-apply-filter {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
}

html.dark-mode .footer_sec_filter button:hover,
html.dark-mode .footer_sec_filter .btn:hover,
html.dark-mode .btn_reset_cus_filter_active:hover,
html.dark-mode .btn_apply_cus_filter:hover,
html.dark-mode .btn-reset-filter:hover,
html.dark-mode .btn-apply-filter:hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #fff !important;
}

/* Date range filter dropdown & Apply button */
html.dark-mode .dateviewed {
    background: var(--dm-elevated) !important;
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 4px !important;
    color: var(--dm-text-heading) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

html.dark-mode .dateviewed:hover {
    background: #32373c !important;
    background-color: #32373c !important;
    border-color: #4e555e !important;
}

html.dark-mode .DateFilterContents,
html.dark-mode .DateFilterContents .dateTable,
html.dark-mode .DateFilterContents .dateTable tbody,
html.dark-mode .DateFilterContents .dateTable tr,
html.dark-mode .DateFilterContents .dateTable tr td {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

html.dark-mode .DateFilterContents .dateTable tr td {
    padding: 6px 10px !important;
    color: var(--dm-text-heading) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

html.dark-mode .DateFilterContents .date-start,
html.dark-mode .DateFilterContents .date-end {
    color: var(--dm-text-heading) !important;
    font-weight: 500 !important;
}

html.dark-mode .DateFilterContents ._GAjo {
    color: var(--dm-text-muted) !important;
    margin: 0 3px !important;
}

html.dark-mode .DateFilterContents .caret_style {
    padding-left: 8px !important;
    vertical-align: middle !important;
}

html.dark-mode .DateFilterContents .caret_style i {
    color: var(--dm-text-muted) !important;
    font-size: 12px !important;
    transition: color 0.15s ease !important;
}

html.dark-mode .dateviewed:hover .DateFilterContents .caret_style i {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .DateFilterContents .dropdown-filter {
    background: var(--dm-elevated) !important;
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    color: var(--dm-text) !important;
    padding: 12px 14px !important;
    top: 36px !important;
}

html.dark-mode .DateFilterContents .sub-list {
    margin-bottom: 10px !important;
    padding-bottom: 0px !important;
}

html.dark-mode .DateFilterContents .sub-list span {
    color: var(--dm-text-heading) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    margin-bottom: 5px !important;
    display: block !important;
}

html.dark-mode .DateFilterContents select.daterangeList,
html.dark-mode .DateFilterContents .select_leaduser,
html.dark-mode #DateRange {
    background-color: var(--dm-input) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 4px !important;
    color: var(--dm-text-heading) !important;
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
}

html.dark-mode .DateFilterContents select.daterangeList option,
html.dark-mode #DateRange option {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .DateFilterContents input.date-range-filter,
html.dark-mode #PayrollFilterStartDate,
html.dark-mode #PayrollFilterEndDate {
    background-color: var(--dm-input) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 4px !important;
    color: var(--dm-text-heading) !important;
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

html.dark-mode .DateFilterContents .input-group-addon {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

html.dark-mode .DateFilterContents .btn-apply-Datefilter,
html.dark-mode .btn-apply-Datefilter {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 5px 16px !important;
    margin-top: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    transition: background-color 0.15s ease !important;
}

html.dark-mode .DateFilterContents .btn-apply-Datefilter:hover,
html.dark-mode .btn-apply-Datefilter:hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #fff !important;
}

html.dark-mode .down_arrow_custom img {
    filter: invert(0.85);
}

html.dark-mode .import_leads_dropdown,
html.dark-mode .customer-dropdown-ul-style {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .customer-dropdown-ul-style li a {
    color: var(--dm-text) !important;
}

html.dark-mode .customer-dropdown-ul-style li a:hover {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .label-cbx .checkbox {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-input) !important;
}

html.dark-mode .label-cbx input:checked + .checkbox {
    border-color: var(--dm-brand) !important;
    background-color: var(--dm-brand) !important;
}

html.dark-mode .label-cbx input:checked + .checkbox svg polyline {
    stroke: #fff !important;
}

html.dark-mode .customer-table {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .background-color-ffffff,
html.dark-mode .background-color-ffffff:focus {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .btn-filter,
html.dark-mode .down_style,
html.dark-mode .no-history-div {
    color: var(--dm-text-muted) !important;
}

/* Recently-viewed customer chips */
html.dark-mode .customer-log {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 4px !important;
    padding-right: 22px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

html.dark-mode .customer-log:hover {
    background-color: #33383f !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .customer-log .viewlist-anchor,
html.dark-mode .customer-log .viewlist-anchor:link,
html.dark-mode .customer-log .viewlist-anchor:visited,
html.dark-mode .customer-log .viewlist-anchor span {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dm-text-heading) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

html.dark-mode .customer-log .viewlist-anchor:hover,
html.dark-mode .customer-log .viewlist-anchor:hover span {
    color: #4ade80 !important;
    text-decoration: underline !important;
}

html.dark-mode .customer-log .viewlist-snap {
    background: transparent !important;
    background-color: transparent !important;
    color: #9aa0a6 !important;
    font-size: 11px !important;
}

/* ------------------------------------------------------------- inventory list */
/*
    Every tab under /Inventory stripes its list on the <tr> rather than the cells
    (#f8f8f8 band, #f4f5f8 hover), so clearing the <td> alone cannot mask it - the
    band has to be reset on the row itself.

    Tables, by tab:
      Bad Inventory       #tblBI                              (BadInventoryPartial.css)
      Purchase Order      .purchase_order_list_partial_table   (PurchaseOrderPartial.css)
                          #AllRouteTable
      Demand Order        #tblPO_techDemand                    (BranchDemandOrderListPartial.css)
      Tech Receive        #tblPO_tech                          (TechPurchaseOrderListPartial.css)
      Equipment History   .DetailDiv/.HistoryDiv table,        (EquipmentDetailPage.css)
                          .tedp_table
      Transfer Log,       reuse PurchaseOrderPartial.css and BadInventoryPartial.css,
      Warehouse History   so they are covered by the selectors above.

    EquipmentDetailPage.css stripes the EVEN row where the rest stripe the ODD one,
    so its parity is inverted here to match.
*/
html.dark-mode #tblBI tbody tr:nth-child(odd),
html.dark-mode .purchase_order_list_partial_table tbody tr:nth-child(odd),
html.dark-mode #AllRouteTable tbody tr:nth-child(odd),
html.dark-mode #tblPO_techDemand tbody tr:nth-child(odd),
html.dark-mode #tblPO_tech tbody tr:nth-child(odd),
html.dark-mode #tblPaidCommissionReport tbody tr:nth-child(odd),
html.dark-mode #tblPRReport tbody tr:nth-child(odd),
html.dark-mode .report_upload_table tbody tr:nth-child(odd),
html.dark-mode .tedp_table tbody tr:nth-child(odd),
html.dark-mode .service_option_list_table table tbody tr:nth-child(odd),
html.dark-mode .show_combination_list_table table tbody tr:nth-child(odd),
html.dark-mode .vendor_list_table tbody tr:nth-child(odd),
html.dark-mode .load_bill_files_table tbody tr:nth-child(odd),
html.dark-mode .DetailDiv table tr:nth-child(even),
html.dark-mode .HistoryDiv table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, .035) !important;
}

/* The unstriped row keeps the panel colour behind it */
html.dark-mode #tblBI tbody tr:nth-child(even),
html.dark-mode .purchase_order_list_partial_table tbody tr:nth-child(even),
html.dark-mode #AllRouteTable tbody tr:nth-child(even),
html.dark-mode #tblPO_techDemand tbody tr:nth-child(even),
html.dark-mode #tblPO_tech tbody tr:nth-child(even),
html.dark-mode #tblPaidCommissionReport tbody tr:nth-child(even),
html.dark-mode #tblPRReport tbody tr:nth-child(even),
html.dark-mode .report_upload_table tbody tr:nth-child(even),
html.dark-mode .tedp_table tbody tr:nth-child(even),
html.dark-mode .service_option_list_table table tbody tr:nth-child(even),
html.dark-mode .show_combination_list_table table tbody tr:nth-child(even),
html.dark-mode .vendor_list_table tbody tr:nth-child(even),
html.dark-mode .load_bill_files_table tbody tr:nth-child(even),
html.dark-mode .DetailDiv table tr:nth-child(odd),
html.dark-mode .HistoryDiv table tbody tr:nth-child(odd) {
    background-color: transparent !important;
}


/* Cells stay clear so the band painted on the row is what shows through */
html.dark-mode #tblBI tbody tr td,
html.dark-mode .purchase_order_list_partial_table tbody tr td,
html.dark-mode #AllRouteTable tbody tr td,
html.dark-mode #tblPO_techDemand tbody tr td,
html.dark-mode #tblPO_tech tbody tr td,
html.dark-mode #tblPaidCommissionReport tbody tr td,
html.dark-mode #tblPRReport tbody tr td,
html.dark-mode .report_upload_table tbody tr td,
html.dark-mode .tedp_table tbody tr td,
html.dark-mode .service_option_list_table table tbody tr td,
html.dark-mode .show_combination_list_table table tbody tr td,
html.dark-mode .vendor_list_table tbody tr td,
html.dark-mode .load_bill_files_table tbody tr td,
html.dark-mode .DetailDiv table tr td,
html.dark-mode .HistoryDiv table tbody tr td {
    background-color: transparent !important;
}

/* Hover is #f4f5f8 (#eaeaea on .vendor_list_table) and would flash near-white */
html.dark-mode #tblBI tbody tr:hover,
html.dark-mode #tblBI tbody tr:hover > td,
html.dark-mode .purchase_order_list_partial_table tbody tr:hover,
html.dark-mode .purchase_order_list_partial_table tbody tr:hover > td,
html.dark-mode #AllRouteTable tbody tr:hover,
html.dark-mode #AllRouteTable tbody tr:hover > td,
html.dark-mode #tblPO_techDemand tbody tr:hover,
html.dark-mode #tblPO_techDemand tbody tr:hover > td,
html.dark-mode #tblPO_tech tbody tr:hover,
html.dark-mode #tblPO_tech tbody tr:hover > td,
html.dark-mode #tblPaidCommissionReport tbody tr:hover,
html.dark-mode #tblPaidCommissionReport tbody tr:hover > td,
html.dark-mode #tblPRReport tbody tr:hover,
html.dark-mode #tblPRReport tbody tr:hover > td,
html.dark-mode .report_upload_table tbody tr:hover,
html.dark-mode .report_upload_table tbody tr:hover > td,
html.dark-mode .tedp_table tbody tr:hover,
html.dark-mode .tedp_table tbody tr:hover > td,
html.dark-mode .service_option_list_table table tbody tr:hover,
html.dark-mode .service_option_list_table table tbody tr:hover > td,
html.dark-mode .show_combination_list_table table tbody tr:hover,
html.dark-mode .show_combination_list_table table tbody tr:hover > td,
html.dark-mode .vendor_list_table tbody tr:hover,
html.dark-mode .vendor_list_table tbody tr:hover > td,
html.dark-mode .load_bill_files_table tbody tr:hover,
html.dark-mode .load_bill_files_table tbody tr:hover > td,
html.dark-mode .DetailDiv table tr:hover,
html.dark-mode .DetailDiv table tr:hover > td,
html.dark-mode .HistoryDiv table tbody tr:hover,
html.dark-mode .HistoryDiv table tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .08) !important;
}

/* -------------------------------------------- sales / estimates / report lists */
/*
    Same pattern as the inventory tabs: the band is painted on the <tr>, so it has
    to be reset there rather than on the cells.

      /sales  (All Sales)          .sales_invoice_table          AllFundingData.css
      /sales  (ARB > ACH/CC Returns)
                                   .all_returns_by_filter_table  AllSalesPartial.css
      /sales  (Account Receivable) #tblAllRcvPayments            AllReceivePayments.css
      /estimates (+ #approved,
       #declined)                  .tblEstimate, #tblEstimate,
                                   #EstimateReportTable          Estimate.css,
                                                                 EstimateReportListPartial.css
      /CustomerReports
       #CustomerFinancedReportTab  .loadHudsonleadsReportTable   LeadsReportPartial.css

    .sales_invoice_table and .loadHudsonleadsReportTable stripe the EVEN row;
    the rest stripe the ODD one. Both parities are listed explicitly below.
*/
html.dark-mode .sales_invoice_table > tbody > tr:nth-child(even),
html.dark-mode .loadHudsonleadsReportTable > tbody > tr:nth-child(even),
html.dark-mode .all_returns_by_filter_table table tbody tr:nth-child(odd),
html.dark-mode #tblAllRcvPayments > tbody > tr:nth-child(odd),
html.dark-mode .tblEstimate tbody tr:nth-child(odd),
html.dark-mode #tblEstimate > tbody > tr:nth-child(odd),
html.dark-mode #EstimateReportTable > tbody > tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode .sales_invoice_table > tbody > tr:nth-child(odd),
html.dark-mode .loadHudsonleadsReportTable > tbody > tr:nth-child(odd),
html.dark-mode .all_returns_by_filter_table table tbody tr:nth-child(even),
html.dark-mode #tblAllRcvPayments > tbody > tr:nth-child(even),
html.dark-mode .tblEstimate tbody tr:nth-child(even),
html.dark-mode #tblEstimate > tbody > tr:nth-child(even),
html.dark-mode #EstimateReportTable > tbody > tr:nth-child(even) {
    background-color: transparent !important;
}

/* Cells stay clear so the band painted on the row is what shows through */
html.dark-mode .sales_invoice_table > tbody > tr > td,
html.dark-mode .loadHudsonleadsReportTable > tbody > tr > td,
html.dark-mode .all_returns_by_filter_table table tbody tr td,
html.dark-mode #tblAllRcvPayments > tbody > tr > td,
html.dark-mode .tblEstimate tbody tr td,
html.dark-mode #tblEstimate > tbody > tr > td,
html.dark-mode #EstimateReportTable > tbody > tr > td {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

/* Hover is #f4f5f8 on all of these (and !important on #tblAllRcvPayments) */
html.dark-mode .sales_invoice_table > tbody > tr:hover,
html.dark-mode .sales_invoice_table > tbody > tr:hover > td,
html.dark-mode .loadHudsonleadsReportTable > tbody > tr:hover,
html.dark-mode .loadHudsonleadsReportTable > tbody > tr:hover > td,
html.dark-mode .all_returns_by_filter_table table tbody tr:hover,
html.dark-mode .all_returns_by_filter_table table tbody tr:hover > td,
html.dark-mode #tblAllRcvPayments > tbody > tr:hover,
html.dark-mode #tblAllRcvPayments > tbody > tr:hover > td,
html.dark-mode .tblEstimate tbody tr:hover,
html.dark-mode .tblEstimate tbody tr:hover > td,
html.dark-mode #tblEstimate > tbody > tr:hover,
html.dark-mode #tblEstimate > tbody > tr:hover > td,
html.dark-mode #EstimateReportTable > tbody > tr:hover,
html.dark-mode #EstimateReportTable > tbody > tr:hover > td {
    background-color: rgba(255, 255, 255, .08) !important;
}

/* Column headers on these lists carry their own light fills */
html.dark-mode #EstimateReportTable > thead > tr > th,
html.dark-mode #tblAllRcvPayments > thead > tr > th,
html.dark-mode .all_returns_by_filter_table table thead tr th,
html.dark-mode .sales_invoice_table > thead > tr > th,
html.dark-mode .loadHudsonleadsReportTable > thead > tr > th {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
    border-color: var(--dm-border-soft) !important;
}

/*
    /estimates (#pending, #approved, #declined) renders its list as
    <table class="loadticketreportlist_table upsellsreportlist_table"> and the band
    comes from TicketListPartial.css, not from either sheet the view links directly -
    which is why the estimate-specific selectors above do not reach it. The same
    class backs the ticket list and several report lists, so this covers those too.
    Note the hover here is #f8f8f8 and the band #f4f5f8 - the reverse of most screens.
*/
html.dark-mode .loadticketreportlist_table > tbody > tr:nth-child(odd),
html.dark-mode .loadticketreportlist_table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode .loadticketreportlist_table > tbody > tr:nth-child(even),
html.dark-mode .loadticketreportlist_table tbody tr:nth-child(even) {
    background-color: transparent !important;
}

html.dark-mode .loadticketreportlist_table tbody tr td {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .loadticketreportlist_table tbody tr:hover,
html.dark-mode .loadticketreportlist_table tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .08) !important;
}

/* ------------------------------------------------------- customer detail page */
/*
    /Customer/Customerdetail. Two things fight us here:
      - CustomerDetailsCustom.css paints the tab strip and every box header #f4f5f8
      - _CustomerDetails.cshtml carries an inline <style> block that re-declares
        .nav-tabs rules. Inline <style> in the body renders after this file, so these
        selectors are written long enough to out-specify it rather than relying on order.
*/

/* Tab strip */
html.dark-mode .customer_detail_tab_style,
html.dark-mode .customer-options-tabs,
html.dark-mode .customer_detail_tab_list {
    background-color: var(--dm-surface) !important;
}

html.dark-mode .customer_detail_tab_style > li,
html.dark-mode .customer-options-tabs > li,
html.dark-mode .customer_detail_tab_list > li,
html.dark-mode .contact_detail_tab_list > li {
    background-color: transparent !important;
    border-right: 1px solid var(--dm-border) !important;
    border-right-color: var(--dm-border) !important;
}

html.dark-mode .customer_detail_tab_style > li > a,
html.dark-mode .customer-options-tabs > li > a,
html.dark-mode .customer_detail_tab_list > li > a {
    background-color: transparent !important;
    color: var(--dm-text) !important;
    border: none !important;
}

html.dark-mode .customer_detail_tab_style > li:not(.active) > a:hover,
html.dark-mode .customer-options-tabs > li:not(.active) > a:hover,
html.dark-mode .customer_detail_tab_list > li:not(.active) > a:hover,
html.dark-mode .contact_detail_tab_list > li:not(.active) > a:hover {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

/* Active tab: the view wants brand green on the li, but Bootstrap paints the anchor
   #fff on top, which is what made the selected tab read as a white block. Colour both. */
html.dark-mode .customer_detail_tab_style > li.active,
html.dark-mode .customer_detail_tab_style > li.active > a,
html.dark-mode .customer_detail_tab_style > li.active > a:hover,
html.dark-mode .customer_detail_tab_style > li.active > a:focus,
html.dark-mode .customer-options-tabs > li.active,
html.dark-mode .customer-options-tabs > li.active > a,
html.dark-mode .customer-options-tabs > li.active > a:hover,
html.dark-mode .customer-options-tabs > li.active > a:focus,
html.dark-mode .customer_detail_tab_list > li.active,
html.dark-mode .customer_detail_tab_list > li.active > a,
html.dark-mode .customer_detail_tab_list > li.active > a:hover,
html.dark-mode .customer_detail_tab_list > li.active > a:focus,
html.dark-mode .contact_detail_tab_list > li.active,
html.dark-mode .contact_detail_tab_list > li.active > a,
html.dark-mode .contact_detail_tab_list > li.active > a:hover,
html.dark-mode .contact_detail_tab_list > li.active > a:focus {
    background-color: var(--dm-brand, #2ca01c) !important;
    color: #fff !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    border-right: 1px solid var(--dm-border) !important;
    border-right-color: var(--dm-border) !important;
}

/* Top customer tab bar in Customer Detail (e.g. "Robert Brown [x]") */
html.dark-mode .customer_tabs_container {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .customer_details_main_nav {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .customer_details_main_nav > li {
    border-right: 1px solid var(--dm-border) !important;
}

html.dark-mode .customer_details_main_nav > li > a {
    background-color: transparent !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .customer_details_main_nav > li > a:hover {
    color: var(--dm-brand) !important;
}

html.dark-mode .customer_details_main_nav > li.active > a,
html.dark-mode .customer_details_main_nav > li.active > a:hover,
html.dark-mode .customer_details_main_nav > li.active > a:focus {
    background-color: var(--dm-surface) !important;
    color: var(--dm-brand) !important;
    border: none !important;
}

html.dark-mode .customer_details_main_nav > li.active > a > i {
    color: var(--dm-brand) !important;
}

/* Box headers - "Customer Information", "Notes Overview", "System Information",
   "Payment Methods", "ACH" are all .ci_header inside .ci_block */
html.dark-mode .ci_header {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .ci_block {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .ci_info,
html.dark-mode .ci_info_for_payment,
html.dark-mode .customer-subTab-left-content,
html.dark-mode .customer-subTab-right-content {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

/* Detail tables on this page carry their own odd-row and hover fills */
html.dark-mode .customer_note_box_table tbody tr:nth-child(odd),
html.dark-mode .customer_note_box_table tbody tr:nth-child(odd) > td,
html.dark-mode .customer_equipments_list table tbody tr:nth-child(odd),
html.dark-mode .customer_equipments_list table tbody tr:nth-child(odd) > td,
html.dark-mode #CreditCheck table tbody tr:nth-child(odd),
html.dark-mode #CreditCheck table tbody tr:nth-child(odd) > td,
html.dark-mode .note_text_color {
    background-color: rgba(255, 255, 255, .035) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .customer_note_box_table tbody tr:hover,
html.dark-mode .customer_note_box_table tbody tr:hover > td,
html.dark-mode .customer_equipments_list table tbody tr:hover,
html.dark-mode .customer_equipments_list table tbody tr:hover > td,
html.dark-mode #CreditCheck table tbody tr:hover,
html.dark-mode #CreditCheck table tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--dm-text-heading) !important;
}

/* Static customer info & billing histories are key-value metadata, not interactive tables - disable hover background */
html.dark-mode .ci_table tbody tr:hover,
html.dark-mode .ci_table tbody tr:hover > td,
html.dark-mode .Billing-Histories tbody tr:hover,
html.dark-mode .Billing-Histories tbody tr:hover > td,
html.dark-mode .Billing-Histories tr:hover,
html.dark-mode .Billing-Histories tr:hover > td,
html.dark-mode .ci_info table tbody tr:hover,
html.dark-mode .ci_info table tbody tr:hover > td,
html.dark-mode tr.info-table-tr:hover,
html.dark-mode tr.info-table-tr:hover > td,
html.dark-mode .info-table-tr:hover > .tr-title,
html.dark-mode .info-table-tr:hover > .tr-data {
    background-color: transparent !important;
}

/* ------------------------------------------------------------- popup shells */
/*
    Modals.css paints every slide-in popup shell white. These are shared containers -
    OpenTopToBottomModal, OpenRightToLeftModal and friends all land in them - so this
    block covers the Edit Customer popup and every other modal built the same way.
*/
html.dark-mode .TopToBottomModal,
html.dark-mode .top_to_bottom_modal_container,
html.dark-mode .RightToLeftModal,
html.dark-mode .right_to_left_modal_container,
html.dark-mode .FullScreenLoginModal,
html.dark-mode .ContentsDiv {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .message_header_title,
html.dark-mode .message_header_title_credit {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .header-other-right-menu {
    background-color: transparent !important;
}

/* The close button is a dark cross image on what is now a dark ground */
html.dark-mode .close-div .close_btn_size,
html.dark-mode .ticketCloseDiv .close_btn_size,
html.dark-mode .ticketCloseDiv img,
html.dark-mode .close_btn_size,
html.dark-mode img.close_btn_size,
html.dark-mode img[src*="cross_update.png"] {
    filter: invert(1) brightness(1.6);
    transition: filter 0.15s ease, transform 0.15s ease;
}

html.dark-mode .close-div:hover .close_btn_size,
html.dark-mode .ticketCloseDiv:hover .close_btn_size,
html.dark-mode .ticketCloseDiv:hover img,
html.dark-mode .close_btn_size:hover,
html.dark-mode img.close_btn_size:hover,
html.dark-mode img[src*="cross_update.png"]:hover {
    filter: invert(1) brightness(2.2);
    transform: scale(1.08);
}

/* Mail / SMS correspondence slide-in drawers */
html.dark-mode .mail_to_sp_container,
html.dark-mode .mail_to_sp_inner {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .mail_to_sp_header,
html.dark-mode .correspondence-header {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .mail_to_sp_header .heder-txt,
html.dark-mode .correspondence-header .heder-txt,
html.dark-mode .heder-txt {
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode .mail_to_sp_footer,
html.dark-mode .smstosalesfooter_section,
html.dark-mode .RightToLeftModal .footer-section,
html.dark-mode .right_to_left_modal_container .footer-section {
    background-color: var(--dm-surface) !important;
    background: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
}

html.dark-mode .mail_to_sp_inner .span-style,
html.dark-mode .mail_to_sp_inner .txtsubject,
html.dark-mode .span_style {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .mail_to_sp_inner textarea.txtAreaMailBody,
html.dark-mode .mail_to_sp_inner input.form-control {
    background-color: var(--dm-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .btn-sms,
html.dark-mode .btn-mail {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #ffffff !important;
}

html.dark-mode .btn-sms:hover,
html.dark-mode .btn-mail:hover {
    background-color: var(--dm-brand-hover) !important;
    border-color: var(--dm-brand-hover) !important;
    color: #ffffff !important;
}

/* Modal header settings/cog icon (.Settingin, .cus-setting) */
html.dark-mode .Settingin,
html.dark-mode #setting.Settingin,
html.dark-mode #Recurringsetting.Settingin {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    color: var(--dm-text-muted) !important;
    transition: color 0.15s ease !important;
}

html.dark-mode .Settingin i,
html.dark-mode .Settingin .cus-setting,
html.dark-mode .cus-setting {
    color: var(--dm-text-muted) !important;
    transition: color 0.15s ease, transform 0.2s ease !important;
}

html.dark-mode .Settingin:hover,
html.dark-mode .Settingin:focus,
html.dark-mode #setting.Settingin:hover,
html.dark-mode #setting.Settingin:focus,
html.dark-mode #Recurringsetting.Settingin:hover,
html.dark-mode #Recurringsetting.Settingin:focus {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--dm-brand) !important;
    cursor: pointer !important;
}

html.dark-mode .Settingin:hover i,
html.dark-mode .Settingin:hover .cus-setting,
html.dark-mode .Settingin:focus i,
html.dark-mode .Settingin:focus .cus-setting,
html.dark-mode .cus-setting:hover {
    color: var(--dm-brand) !important;
    transform: rotate(30deg) scale(1.1) !important;
}

/* ------------------------------------------------- add / edit customer popup */

html.dark-mode .add_customer_wrapper_custom,
html.dark-mode .add_customer_wrapper_custom .contents,
html.dark-mode .add_system_setting_inner_height {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .cus-section {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    border: none !important;
}

html.dark-mode .ac_top_border {
    border-top: 1px solid var(--dm-border) !important;
}

/* Footer action buttons in add/edit customer popup */
html.dark-mode .TopToBottomModal #Cancel,
html.dark-mode .top_to_bottom_modal_container #Cancel,
html.dark-mode .addCustomerPopupFooter #Cancel,
html.dark-mode #Cancel.acButton_for_desktop,
html.dark-mode #Cancel.acButton_for_mobile {
    background-color: #867e7e !important;
    border-color: #867e7e !important;
    color: #ffffff !important;
}

html.dark-mode .TopToBottomModal #Cancel:hover,
html.dark-mode .top_to_bottom_modal_container #Cancel:hover,
html.dark-mode .addCustomerPopupFooter #Cancel:hover,
html.dark-mode #Cancel.acButton_for_desktop:hover,
html.dark-mode #Cancel.acButton_for_mobile:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

html.dark-mode .DeleteThisCustomer,
html.dark-mode #DeleteThisCustomer,
html.dark-mode .TopToBottomModal .DeleteThisCustomer,
html.dark-mode .TopToBottomModal #DeleteThisCustomer,
html.dark-mode .top_to_bottom_modal_container .DeleteThisCustomer,
html.dark-mode .top_to_bottom_modal_container #DeleteThisCustomer,
html.dark-mode .addCustomerPopupFooter .DeleteThisCustomer,
html.dark-mode .addCustomerPopupFooter #DeleteThisCustomer {
    background-color: #d9534f !important;
    border-color: #d9534f !important;
    color: #ffffff !important;
}

html.dark-mode .DeleteThisCustomer:hover,
html.dark-mode .DeleteThisCustomer:focus,
html.dark-mode #DeleteThisCustomer:hover,
html.dark-mode #DeleteThisCustomer:focus,
html.dark-mode .TopToBottomModal .DeleteThisCustomer:hover,
html.dark-mode .TopToBottomModal .DeleteThisCustomer:focus,
html.dark-mode .TopToBottomModal #DeleteThisCustomer:hover,
html.dark-mode .TopToBottomModal #DeleteThisCustomer:focus {
    background-color: #c9302c !important;
    border-color: #ac2925 !important;
    color: #ffffff !important;
}

html.dark-mode .InActive,
html.dark-mode #InorActivebtn.InActive,
html.dark-mode .SaveCancelDiv .InActive,
html.dark-mode .addCustomerPopupFooter .InActive {
    background-color: #d9534f !important;
    border-color: #d9534f !important;
    color: #ffffff !important;
}

html.dark-mode .InActive:hover,
html.dark-mode .InActive:focus,
html.dark-mode #InorActivebtn.InActive:hover,
html.dark-mode #InorActivebtn.InActive:focus {
    background-color: #c9302c !important;
    border-color: #ac2925 !important;
    color: #ffffff !important;
}

/* Section panels (AddCustomer_custom.css: #f4f5f8) */
html.dark-mode .customer_info_container {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/*
    Section headings inside the popup. AddCustomerPopup.css paints .sub-header #cfcfcf
    and .sub_header_inner #e8e6e6 - both light greys that stayed light in dark mode.
    #555 here is a deliberate choice for this popup; scoped to the popup wrapper so the
    same two classes on other screens keep the standard --dm-header-bar treatment.
*/
html.dark-mode .add_customer_wrapper_custom .sub-header,
html.dark-mode .add_customer_wrapper_custom .sub_header_inner {
    background: #555 !important;
    background-color: #555 !important;
    color: var(--dm-header-bar-text) !important;
    border-color: var(--dm-border) !important;
}

/* .add_seo_content_header belongs to Views/Website/SeoContent.cshtml, not this popup -
   it shares AddCustomerPopup.css but is rendered on the SEO screen. */
html.dark-mode .add_seo_content_header {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom-color: var(--dm-border) !important;
}

/* Field labels - AddCustomerPopup.css sets #615b5b, near-black on a dark panel */
html.dark-mode .span-style {
    color: var(--dm-text) !important;
}

/* Required-field asterisks stay red, just lifted for contrast */
html.dark-mode .span-style .red,
html.dark-mode .red {
    color: #f2707d !important;
}

/* The popup's own jump menu */
html.dark-mode .add_customer_top_menu_device,
html.dark-mode .add_customer_pop_up_top_menu_container,
html.dark-mode .add_customer_pop_up_top_menu,
html.dark-mode .add_customer_top_menu_btn,
html.dark-mode .add_customer_top_menu_drop {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .add_customer_top_menu_drop div a {
    color: var(--dm-text) !important;
}

html.dark-mode .add_customer_top_menu_drop div:hover,
html.dark-mode .add_customer_top_menu_drop div:hover a {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .add_customer_wrapper_custom .navbar-nav li a:hover,
html.dark-mode .add_customer_wrapper_custom .navbar-nav li.active a {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

/* Typeahead suggestion popups */
html.dark-mode .customerNoSuggestion_style,
html.dark-mode .add_ac_no .customerNoSuggestion3,
html.dark-mode .customerNoSuggestion,
html.dark-mode .customerNoSuggestion2 {
    background: var(--dm-elevated) !important;
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* Currency / unit adornments sitting beside inputs */
html.dark-mode .input-group-text,
html.dark-mode .input-group-prepend .input-group-text,
html.dark-mode .add-on {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* ---------------------------------------------------------- lead detail page */
/*
    /Lead/Leadsdetail. Same shape as the customer detail screen but its own class
    names: .li_info_block boxes with .li_header title bars, and .li_info_details_row
    for each label/value line.
*/

/* Tab / nav strip (LeadDetails.css: #f4f5f8) */
html.dark-mode .ld_nav > ul,
html.dark-mode .ld_nav ul {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    border-top-color: var(--dm-border) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .ld_nav > ul > li,
html.dark-mode .ld_nav ul li,
html.dark-mode .lead_detail_tab_list > li,
html.dark-mode .lead_details_tabs .nav-tabs > li {
    background-color: transparent !important;
    border-right: 1px solid var(--dm-border) !important;
    border-right-color: var(--dm-border) !important;
}

html.dark-mode .ld_nav > ul > li > a,
html.dark-mode .ld_nav ul li a,
html.dark-mode .lead_detail_tab_list > li > a {
    color: var(--dm-text) !important;
}

html.dark-mode .ld_nav > ul > li:not(.active) > a:hover,
html.dark-mode .ld_nav ul li:not(.active) a:hover,
html.dark-mode .lead_detail_tab_list > li:not(.active) > a:hover,
html.dark-mode .lead_details_tabs .nav-tabs > li:not(.active) > a:hover {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .ld_nav > ul > li.active,
html.dark-mode .ld_nav > ul > li.active > a,
html.dark-mode .ld_nav > ul > li.active > a:hover,
html.dark-mode .ld_nav > ul > li.active > a:focus,
html.dark-mode .ld_nav ul li.active,
html.dark-mode .ld_nav ul li.active a,
html.dark-mode .ld_nav ul li.active a:hover,
html.dark-mode .ld_nav ul li.active a:focus,
html.dark-mode .lead_detail_tab_list > li.active,
html.dark-mode .lead_detail_tab_list > li.active > a,
html.dark-mode .lead_detail_tab_list > li.active > a:hover,
html.dark-mode .lead_detail_tab_list > li.active > a:focus,
html.dark-mode .lead_details_tabs .nav-tabs > li.active,
html.dark-mode .lead_details_tabs .nav-tabs > li.active > a,
html.dark-mode .lead_details_tabs .nav-tabs > li.active > a:hover,
html.dark-mode .lead_details_tabs .nav-tabs > li.active > a:focus {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}

html.dark-mode .ld_nav > ul > li.active span,
html.dark-mode .ld_nav ul li.active span,
html.dark-mode .lead_detail_tab_list > li.active span,
html.dark-mode .lead_details_tabs .nav-tabs > li.active span {
    color: #ffffff !important;
}

html.dark-mode .tr-title-custom {
    border-right-color: var(--dm-border) !important;
}

html.dark-mode .convertToCustomerTable {
    border-top-color: var(--dm-border) !important;
}

/* Follow-up notes / reminders table action icons */
html.dark-mode .lead-note-delete,
html.dark-mode .follow-up-delete,
html.dark-mode .lead-note-delete i,
html.dark-mode .follow-up-delete i,
html.dark-mode .lead_note_reminder_table .fa-trash-o,
html.dark-mode #tblFollowUpNotes .fa-trash-o {
    color: var(--dm-danger, #e05260) !important;
}

html.dark-mode .lead-note-delete:hover,
html.dark-mode .follow-up-delete:hover,
html.dark-mode .lead-note-delete:hover i,
html.dark-mode .follow-up-delete:hover i,
html.dark-mode .lead_note_reminder_table .fa-trash-o:hover,
html.dark-mode #tblFollowUpNotes .fa-trash-o:hover {
    color: #ff7b88 !important;
}

html.dark-mode .nt_text_btn {
    color: var(--dm-link, #5aa9f8) !important;
}

/* Box title bars - same treatment as .ci_header on the customer screen */
html.dark-mode .li_header {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .li_info_block {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .li_info_details_block,
html.dark-mode .li_info_details_row,
html.dark-mode .li_info_details_left,
html.dark-mode .li_info_details_right,
html.dark-mode .li_info_details_left label {
    background-color: transparent !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border-soft) !important;
}

/* Page title block - LeadDetailsCustom.css sets colour #393a3d, near-black on dark */
html.dark-mode .lead_detail_name_title,
html.dark-mode .lead_detail_title_address,
html.dark-mode .test_acc_style {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text-heading) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .cus_name_style {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text-heading) !important;
}

/* Assorted light panels and sub-headers on this page */
html.dark-mode .table-sub-header,
html.dark-mode #btnPackage {
    background: var(--dm-elevated) !important;
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .lead_details_info_container_Credit_report,
html.dark-mode .lead_details_info_container_Credit_report .margin-0 {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* Credit score table carries its own odd-row and hover fills */
html.dark-mode #creditscorecheck table tbody tr:nth-child(odd),
html.dark-mode #creditscorecheck table tbody tr:nth-child(odd) > td {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode #creditscorecheck table tbody tr:hover,
html.dark-mode #creditscorecheck table tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .08) !important;
}

/* techSchedule.css marks this one !important, so match it */
html.dark-mode .thead-th-style:hover {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

/* Notes Overview cards on Lead & Customer details */
html.dark-mode .lead_note_box_details,
html.dark-mode .customer_note_box_details {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .lead_note_box_details .note_text_color,
html.dark-mode .customer_note_box_details .note_text_color {
    background-color: rgba(255, 255, 255, .04) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .lead_note_box_row,
html.dark-mode .lead_note_box_title,
html.dark-mode .lead_note_box_data,
html.dark-mode .notes_padd {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .lead_note_box_data .ld_note_profile {
    color: var(--dm-text) !important;
}

/* System Information tab & content */
html.dark-mode .lead_additional_info_table .tab,
html.dark-mode .tab {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .lead_additional_info_table .tab button,
html.dark-mode .tab button {
    background-color: transparent !important;
    color: var(--dm-text) !important;
    border-right-color: var(--dm-border) !important;
}

html.dark-mode .lead_additional_info_table .tab button:hover,
html.dark-mode .tab button:hover {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .lead_additional_info_table .tab button.active,
html.dark-mode .tab button.active {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
}

html.dark-mode .lead_additional_info_table .tabcontent,
html.dark-mode .tabcontent {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .aba_header,
html.dark-mode .PGDetails .aba_header,
html.dark-mode .TopToBottomModal .aba_header,
html.dark-mode .top_to_bottom_modal_container .aba_header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    color: var(--dm-text-heading) !important;
}

/* ----------------------------------------------------- create agreement popup */
html.dark-mode .sews_container,
html.dark-mode .sews_inner_height {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .sews_header {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .sews_footer {
    background-color: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
}

html.dark-mode .PGDetails {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .PGDetails_header {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .smart_agreementDetails_container {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--dm-border) !important;
    border-top: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .em_con_list_header_container {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
}

html.dark-mode .em_con_list_header {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .emerg_cont_table {
    border-color: var(--dm-border) !important;
}

html.dark-mode .emerg_cont_table thead tr {
    background-color: var(--dm-header-bar) !important;
}

html.dark-mode .emerg_cont_table thead tr th,
html.dark-mode .emerg_cont_table tbody tr td {
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode #TblEmergencyContactList tbody tr:nth-child(odd) {
    background-color: var(--dm-elevated) !important;
}

html.dark-mode #TblEmergencyContactList tbody tr:nth-child(even) {
    background-color: var(--dm-surface) !important;
}

html.dark-mode .smart_add_emerg_contact {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .smart_add_emerg_footer {
    border-top: 1px solid var(--dm-border) !important;
}

html.dark-mode #btnCancelEmgContact {
    background-color: #867e7e !important;
    border-color: #867e7e !important;
    color: #ffffff !important;
}

html.dark-mode #btnCancelEmgContact:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

html.dark-mode .text-custom {
    color: var(--dm-text) !important;
}

/* -------------------------------------------------- send email invoice popup */
html.dark-mode,
html.dark-mode body {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .send_email_invoice_partial_container,
html.dark-mode .send_mail_invoice_container {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .send_email_invoice_partial_header,
html.dark-mode .send_mail_invoice_header {
    color: var(--dm-text-heading) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
}

html.dark-mode .send_email_invoice_partial_header .CloseButtonDiv img,
html.dark-mode .send_mail_invoice_header .CloseButtonDiv img {
    filter: invert(1) brightness(1.6);
}

html.dark-mode .send_email_invoice_partial_container label,
html.dark-mode .send_mail_invoice_container label,
html.dark-mode .send_email_invoice_partial_container .emailbody,
html.dark-mode .send_mail_invoice_container .emailbody,
html.dark-mode .send_mail_invoice_container h4 {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .send_email_invoice_partial_container .EmailSubject,
html.dark-mode .send_mail_invoice_container .EmailSubject,
html.dark-mode .send_mail_invoice_container .ContactNumber,
html.dark-mode .send_mail_invoice_container textarea#SMSDescription {
    background-color: var(--dm-input-bg) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .send_email_invoice_partial_container .EmailSubject:focus,
html.dark-mode .send_mail_invoice_container .EmailSubject:focus,
html.dark-mode .send_mail_invoice_container .ContactNumber:focus,
html.dark-mode .send_mail_invoice_container textarea#SMSDescription:focus {
    border-color: var(--dm-focus-ring) !important;
}

html.dark-mode .send_email_invoice_partial_footerContents,
html.dark-mode .send_email_invoice_footerContents {
    background-color: var(--dm-bg) !important;
    border-top: 1px solid var(--dm-border) !important;
    padding-top: 10px !important;
}

html.dark-mode .btnCancel {
    background-color: #867e7e !important;
    border: 1px solid #867e7e !important;
    color: #ffffff !important;
}

html.dark-mode .btnCancel:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

html.dark-mode .btnSaveAndClose,
html.dark-mode .btnSendMailAndClose {
    background-color: var(--dm-brand, #2ca01c) !important;
    border: 1px solid var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}

html.dark-mode .btnSaveAndClose:hover,
html.dark-mode .btnSendMailAndClose:hover {
    background-color: #248216 !important;
    border-color: #248216 !important;
    color: #ffffff !important;
}

html.dark-mode .send_email_invoice_partial_container .width_50p_pdf,
html.dark-mode .send_mail_invoice_container .width_50p_pdf {
    background-color: var(--dm-surface) !important;
    border-radius: 4px;
}

html.dark-mode .send_email_invoice_partial_container .width_50p_pdf iframe,
html.dark-mode .send_mail_invoice_container .width_50p_pdf iframe {
    border: 1px solid var(--dm-border) !important;
    border-radius: 4px;
}

/* Additional Contact & table in lead_additional_info_table */
html.dark-mode .lead_additional_info_table,
html.dark-mode .additionalBlock {
    background-color: transparent !important;
}

html.dark-mode .lead_additional_info_table table,
html.dark-mode .lead_additional_info_table table thead tr th,
html.dark-mode .lead_additional_info_table table tbody tr td {
    background-color: transparent !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .lead_additional_info_table table thead tr th label {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .lead_additional_info_table table tbody tr {
    background-color: var(--dm-surface) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .lead_additional_info_table table tbody tr:nth-child(odd),
html.dark-mode .lead_additional_info_table table tbody tr:nth-child(odd) > td {
    background-color: rgba(255, 255, 255, .035) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .lead_additional_info_table table tbody tr:hover,
html.dark-mode .lead_additional_info_table table tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .edit-additional-contact,
html.dark-mode .delete-smart-package-include {
    color: var(--dm-brand) !important;
}

/* Payment overview & history */
html.dark-mode .payment_info_overview_container {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .Custom_account_history_content {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* ---------------------------------- lead verification / edit screen (/LeadsVerificationDetail) */
/*
    /LeadsVerificationDetail/?id=0 (and other ids) renders LeadVerificationPartial.
    The section header (.lead_acc_info_header) was defaulting to #f4f5f8 with light text in dark mode.
*/
html.dark-mode .lead_acc_info_header,
html.dark-mode .add_lead_info_header,
html.dark-mode .lead_info_partial_new_header,
html.dark-mode .customer_info_content_block_header,
html.dark-mode .verify_lead_header {
    background: var(--dm-header-bar) !important;
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .lead_acc_info_container,
html.dark-mode .add_lead_info_container {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .lead_acc_info_details_block,
html.dark-mode .add_lead_info_details_block {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode fieldset.custom-fieldset,
html.dark-mode .custom-fieldset {
    border-color: var(--dm-border) !important;
    background-color: transparent !important;
}

html.dark-mode legend.custom-legend-border {
    color: var(--dm-text-heading) !important;
    background-color: transparent !important;
}

html.dark-mode #CreditScore table thead tr,
html.dark-mode #CreditScore table tbody tr {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode #CreditScore table thead tr th {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode #CreditScore table tbody tr td {
    color: var(--dm-text) !important;
}

html.dark-mode .lead_detail_bottom_btn #btnVerifyOnly,
html.dark-mode .lead_detail_bottom_btn #btnVerifyOnly2,
html.dark-mode .add_verify_info_btn_container #btnVerifyOnly,
html.dark-mode .add_verify_info_btn_container #btnVerifyOnly2 {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
}

html.dark-mode .lead_detail_bottom_btn #btnVerifyOnly:hover,
html.dark-mode .lead_detail_bottom_btn #btnVerifyOnly2:hover,
html.dark-mode .add_verify_info_btn_container #btnVerifyOnly:hover,
html.dark-mode .add_verify_info_btn_container #btnVerifyOnly2:hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #fff !important;
}

/* ---------------------------------- global search results screen (/Search/?key=...) */
/*
    Global search results page renders _GlobalSearchResult.cshtml and _GetGlobalSearchResultAll.cshtml.
    Section headers (.gsr_header) like "Customer result", "Lead result", "Ticket result", etc.,
    were defaulting to background-color: #fff with light text in dark mode.
*/
html.dark-mode .GlobalSearchResults {
    background-color: transparent !important;
}

html.dark-mode .gsr_header {
    background: var(--dm-header-bar) !important;
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    border-top: 1px solid var(--dm-border) !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 12px !important;
    border-radius: 4px;
}

html.dark-mode .gsr_header:empty {
    display: none !important;
}

html.dark-mode .global_search_row {
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .global_search_row:nth-child(even),
html.dark-mode .global_lead_result_table tbody tr:nth-child(even),
html.dark-mode .Contacts_table tbody tr:nth-child(even),
html.dark-mode .opportunities_table tbody tr:nth-child(even) {
    background: var(--dm-surface) !important;
    background-color: var(--dm-surface) !important;
}

html.dark-mode .global_search_row:nth-child(odd),
html.dark-mode .global_lead_result_table tbody tr:nth-child(odd),
html.dark-mode .Contacts_table tbody tr:nth-child(odd),
html.dark-mode .opportunities_table tbody tr:nth-child(odd) {
    background: var(--dm-elevated) !important;
    background-color: var(--dm-elevated) !important;
}

html.dark-mode .global_search_row:hover,
html.dark-mode .global_search_row:nth-child(even):hover,
html.dark-mode .global_search_row:nth-child(odd):hover,
html.dark-mode .global_lead_result_table tbody tr:hover,
html.dark-mode .global_lead_result_table tbody tr:nth-child(even):hover,
html.dark-mode .global_lead_result_table tbody tr:nth-child(odd):hover,
html.dark-mode .Contacts_table tbody tr:hover,
html.dark-mode .Contacts_table tbody tr:nth-child(odd):hover,
html.dark-mode .Contacts_table tbody tr:nth-child(even):hover,
html.dark-mode .opportunities_table tbody tr:hover,
html.dark-mode .opportunities_table tbody tr:nth-child(odd):hover,
html.dark-mode .opportunities_table tbody tr:nth-child(even):hover {
    background-color: rgba(255, 255, 255, .07) !important;
}

html.dark-mode .Contacts_table thead,
html.dark-mode .Contacts_table thead tr,
html.dark-mode .opportunities_table thead,
html.dark-mode .opportunities_table thead tr,
html.dark-mode .table-head-border {
    background-color: var(--dm-header-bar) !important;
    border-bottom: 2px solid var(--dm-border) !important;
}

html.dark-mode .Contacts_table thead tr th,
html.dark-mode .opportunities_table thead tr th {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .Contacts_table tbody tr,
html.dark-mode .Contacts_table tbody tr td,
html.dark-mode .Report-Tabs table tr td,
html.dark-mode .Report-Tabs table tr th,
html.dark-mode .opportunities_table tbody tr,
html.dark-mode .opportunities_table tbody tr td,
html.dark-mode .gsr_device_row {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .invoice_result,
html.dark-mode .lead_result,
html.dark-mode .customer_result,
html.dark-mode .estimate_result,
html.dark-mode .Ticket_result {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

/* -------------------------------------------------------------- ticket popup */
/*
    /Ticket/AddTicket, opened from a ticket id on the Tickets tab.
    Requested: #555 for the header bars. The coloured event headers further down
    (file blue, attached blue-grey, removed pink) are left alone - they encode the
    kind of ticket event, so flattening them would lose information.
*/
html.dark-mode .header-title,
html.dark-mode .ticket_table_header,
html.dark-mode .ticke_info_header,
html.dark-mode .tick_info_header_mobile,
html.dark-mode .ticket_created_header,
html.dark-mode .ticket_itemsadded_style td .ticke_info_header,
html.dark-mode .ticket_reply_style td .ticke_info_header {
    background: #555 !important;
    background-color: #555 !important;
    color: var(--dm-header-bar-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .ticket_table_header button,
html.dark-mode .ticket_table_header button.btn,
html.dark-mode .ticket_table_header .btn {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #fff !important;
}

html.dark-mode .ticket_table_header button:hover,
html.dark-mode .ticket_table_header button:focus,
html.dark-mode .ticket_table_header button.btn:hover,
html.dark-mode .ticket_table_header button.btn:focus,
html.dark-mode .ticket_table_header .btn:hover,
html.dark-mode .ticket_table_header .btn:focus {
    background-color: #238316 !important;
    border-color: #238316 !important;
    color: #fff !important;
}


/*
    Re-assert the event-type headers. The rule above carries !important, which beats
    these more-specific-but-plain rules in AddTicket.css and would otherwise flatten
    file / attached / removed into the same grey and lose the colour coding.
    Backgrounds stay as designed; only the text is darkened for contrast on the pastel.
*/
html.dark-mode .ticket_file_style td .ticke_info_header {
    background-color: #75cef9 !important;
    color: #10222b !important;
}

html.dark-mode .ticket_attached_style td .ticke_info_header {
    background-color: #b3cde2 !important;
    color: #16232b !important;
}

html.dark-mode .ticket_itemremoved_style td .ticke_info_header {
    background-color: #fbcccc !important;
    color: #3b1414 !important;
}

/* Ticket body surfaces */
html.dark-mode .ticketLoaderFade {
    background: var(--dm-bg) !important;
}

html.dark-mode .ticket_created_info_right,
html.dark-mode .ticket_created_profile_pic,
html.dark-mode .add_ticktet_btn_footer,
html.dark-mode .ld_add_member_table,
html.dark-mode .bad_inventory_equipment,
html.dark-mode .ticket_reply_box,
html.dark-mode .ticket_reply_box_add {
    background: var(--dm-surface) !important;
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* Ticket Activity Tabs (Note / Log) */
html.dark-mode #TicketActivityTabs,
html.dark-mode .ticket_reply_box .nav-tabs {
    border-bottom: 1px solid var(--dm-border) !important;
    background: transparent !important;
}

html.dark-mode #TicketActivityTabs > li,
html.dark-mode .ticket_reply_box .nav-tabs > li {
    background-color: transparent !important;
    border-right: 1px solid var(--dm-border) !important;
    border-bottom: none !important;
}

html.dark-mode #TicketActivityTabs > li > a,
html.dark-mode .ticket_reply_box .nav-tabs > li > a {
    color: var(--dm-text) !important;
    background-color: var(--dm-elevated) !important;
    border: none !important;
    font-weight: 500;
}

html.dark-mode #TicketActivityTabs > li:not(.active) > a:hover,
html.dark-mode .ticket_reply_box .nav-tabs > li:not(.active) > a:hover {
    background-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode #TicketActivityTabs > li.active,
html.dark-mode #TicketActivityTabs > li.active > a,
html.dark-mode #TicketActivityTabs > li.active > a:hover,
html.dark-mode #TicketActivityTabs > li.active > a:focus,
html.dark-mode .ticket_reply_box .nav-tabs > li.active,
html.dark-mode .ticket_reply_box .nav-tabs > li.active > a,
html.dark-mode .ticket_reply_box .nav-tabs > li.active > a:hover,
html.dark-mode .ticket_reply_box .nav-tabs > li.active > a:focus {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}


html.dark-mode .Customerdetail_addresss_for_ticket,
html.dark-mode .UserSuggestionDiv:hover {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .Customerdetail_addresss_for_ticket:empty {
    display: none !important;
}

/* Amber "ticket type" highlight - kept as a highlight, just re-tinted for dark */
html.dark-mode .ticket_type_info_bg {
    background-color: rgba(217, 155, 47, .16) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .add_ticket_info_table tbody tr:nth-child(odd),
html.dark-mode .add_ticket_info_table tbody tr:nth-child(odd) > td,
html.dark-mode .ticketTable tbody tr:nth-child(odd),
html.dark-mode .ticketTable tbody tr:nth-child(odd) > td {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode .ticketTable td,
html.dark-mode .ticketTable th,
html.dark-mode .ticket_td_height,
html.dark-mode .ticket_profile_time,
html.dark-mode .ticket_profile_credit {
    color: var(--dm-text) !important;
    border-color: var(--dm-border-soft) !important;
}

/* Ticket equipment / service tables & reference list white border removal */
html.dark-mode .InvoiceTableBorderTop {
    border-top: none !important;
}

html.dark-mode .CustomerInvoiceTab tr,
html.dark-mode #CustomerInvoiceTab tr,
html.dark-mode #CustomerServiceTable tr {
    border-left: none !important;
}

html.dark-mode .CustomerInvoiceTab,
html.dark-mode #CustomerInvoiceTab,
html.dark-mode #CustomerServiceTable {
    border: none !important;
}

html.dark-mode .CustomerInvoiceTab thead tr th,
html.dark-mode .CustomerInvoiceTab tbody tr td,
html.dark-mode #CustomerInvoiceTab thead tr th,
html.dark-mode #CustomerInvoiceTab tbody tr td,
html.dark-mode #CustomerServiceTable thead tr th,
html.dark-mode #CustomerServiceTable tbody tr td {
    border-left: none !important;
    border-top: none !important;
    border-right-color: transparent !important;
    border-bottom-color: var(--dm-border) !important;
}

.LoadReferenceTicketList:empty,
html.dark-mode .LoadReferenceTicketList:empty {
    display: none !important;
    border: none !important;
}

html.dark-mode .LoadReferenceTicketList {
    border: none !important;
}

html.dark-mode .LoadReferenceTicketList td {
    border: none !important;
}


/* --------------------------------------------- reports / cancellation queue */
/*
    /CancellationCue, and the rest of the Reports screens that share
    ReportsPartial.css + LeadsReportPartial.css.

    Two separate causes here. The tab strip paints #f4f5f8 on the <ul> itself,
    so the strip *and the empty space beside the last tab* stayed light. The row
    striping paints #f8f8f8 on the odd <tr> rather than on the <td>, which is
    why the generic table rules further up - they target cells - never reached
    it and the columns kept reading as white bands.
*/

html.dark-mode .reports-tabs,
html.dark-mode .payroll_report_top_nav {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .reports-tabs > li > a,
html.dark-mode .payroll_report_top_nav > li > a {
    background-color: transparent !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .reports-tabs > li > a:hover,
html.dark-mode .payroll_report_top_nav > li > a:hover {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
}

/*
    The active tab is brand green in light mode. The generic .nav-tabs block
    above is more specific than the page's own .reports-tabs rule, so it was
    winning and painting the active tab a plain surface colour - which left it
    nearly indistinguishable from the inactive one once the strip went dark.
    Re-assert the green so the two themes agree.
*/
html.dark-mode .reports-tabs > li.active > a,
html.dark-mode .reports-tabs > li.active > a:hover,
html.dark-mode .reports-tabs > li.active > a:focus,
html.dark-mode .payroll_report_top_nav > li.active > a,
html.dark-mode .payroll_report_top_nav > li.active > a:hover {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
}

/* ------------------------------------------------ Sub-tabs (Estimates, Invoices, Files, Funding, Equipment) */
html.dark-mode ul.invoices-tabs,
html.dark-mode #myEstimatorTab,
html.dark-mode #myEstimateTab,
html.dark-mode #myInvoicesTab,
html.dark-mode #myFileTab,
html.dark-mode #myFundingTab,
html.dark-mode #myEquipmentTab,
html.dark-mode #myTransfferLogTab {
    border-bottom: 1px solid var(--dm-border) !important;
    background: transparent !important;
    margin-bottom: 15px !important;
    padding-left: 0 !important;
}

html.dark-mode div.invoices-tabs {
    border: none !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

html.dark-mode ul.invoices-tabs > li,
html.dark-mode #myEstimatorTab > li,
html.dark-mode #myEstimateTab > li,
html.dark-mode #myInvoicesTab > li,
html.dark-mode #myFileTab > li,
html.dark-mode #myFundingTab > li,
html.dark-mode #myEquipmentTab > li,
html.dark-mode #myTransfferLogTab > li {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 4px 4px 0 0 !important;
    margin-right: 4px !important;
    margin-bottom: -1px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

html.dark-mode ul.invoices-tabs > li > a,
html.dark-mode #myEstimatorTab > li > a,
html.dark-mode #myEstimateTab > li > a,
html.dark-mode #myInvoicesTab > li > a,
html.dark-mode #myFileTab > li > a,
html.dark-mode #myFundingTab > li > a,
html.dark-mode #myEquipmentTab > li > a,
html.dark-mode #myTransfferLogTab > li > a {
    background-color: transparent !important;
    color: var(--dm-text-muted) !important;
    border: none !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: block !important;
    border-radius: 4px 4px 0 0 !important;
}

html.dark-mode ul.invoices-tabs > li > a span,
html.dark-mode #myEstimatorTab > li > a span,
html.dark-mode #myEstimateTab > li > a span,
html.dark-mode #myInvoicesTab > li > a span,
html.dark-mode #myFileTab > li > a span,
html.dark-mode #myFundingTab > li > a span,
html.dark-mode #myEquipmentTab > li > a span,
html.dark-mode #myTransfferLogTab > li > a span {
    color: inherit !important;
    font-weight: inherit !important;
}

/* Hover on inactive sub-tabs */
html.dark-mode ul.invoices-tabs > li:not(.active):hover,
html.dark-mode #myEstimatorTab > li:not(.active):hover,
html.dark-mode #myEstimateTab > li:not(.active):hover,
html.dark-mode #myInvoicesTab > li:not(.active):hover,
html.dark-mode #myFileTab > li:not(.active):hover,
html.dark-mode #myFundingTab > li:not(.active):hover,
html.dark-mode #myEquipmentTab > li:not(.active):hover,
html.dark-mode #myTransfferLogTab > li:not(.active):hover {
    background-color: var(--dm-elevated) !important;
    border-color: #4e555e !important;
}

html.dark-mode ul.invoices-tabs > li:not(.active) > a:hover,
html.dark-mode #myEstimatorTab > li:not(.active) > a:hover,
html.dark-mode #myEstimateTab > li:not(.active) > a:hover,
html.dark-mode #myInvoicesTab > li:not(.active) > a:hover,
html.dark-mode #myFileTab > li:not(.active) > a:hover,
html.dark-mode #myFundingTab > li:not(.active) > a:hover,
html.dark-mode #myEquipmentTab > li:not(.active) > a:hover,
html.dark-mode #myTransfferLogTab > li:not(.active) > a:hover {
    background-color: transparent !important;
    color: var(--dm-text-heading) !important;
}

/* Active sub-tab */
html.dark-mode ul.invoices-tabs > li.active,
html.dark-mode #myEstimatorTab > li.active,
html.dark-mode #myEstimateTab > li.active,
html.dark-mode #myInvoicesTab > li.active,
html.dark-mode #myFileTab > li.active,
html.dark-mode #myFundingTab > li.active,
html.dark-mode #myEquipmentTab > li.active,
html.dark-mode #myTransfferLogTab > li.active,
html.dark-mode ul.invoices-tabs > li.active > a,
html.dark-mode ul.invoices-tabs > li.active > a:hover,
html.dark-mode ul.invoices-tabs > li.active > a:focus,
html.dark-mode #myEstimatorTab > li.active > a,
html.dark-mode #myEstimatorTab > li.active > a:hover,
html.dark-mode #myEstimatorTab > li.active > a:focus,
html.dark-mode #myEstimateTab > li.active > a,
html.dark-mode #myEstimateTab > li.active > a:hover,
html.dark-mode #myEstimateTab > li.active > a:focus,
html.dark-mode #myInvoicesTab > li.active > a,
html.dark-mode #myInvoicesTab > li.active > a:hover,
html.dark-mode #myInvoicesTab > li.active > a:focus,
html.dark-mode #myFileTab > li.active > a,
html.dark-mode #myFileTab > li.active > a:hover,
html.dark-mode #myFileTab > li.active > a:focus,
html.dark-mode #myFundingTab > li.active > a,
html.dark-mode #myFundingTab > li.active > a:hover,
html.dark-mode #myFundingTab > li.active > a:focus,
html.dark-mode #myEquipmentTab > li.active > a,
html.dark-mode #myEquipmentTab > li.active > a:hover,
html.dark-mode #myEquipmentTab > li.active > a:focus,
html.dark-mode #myTransfferLogTab > li.active > a,
html.dark-mode #myTransfferLogTab > li.active > a:hover,
html.dark-mode #myTransfferLogTab > li.active > a:focus {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ------------------------------------------------- Smart Lead Setup / Wizard Breadcrumbs */
html.dark-mode .breadcrumbs {
    background-color: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    height: 56px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode .breadcrumbs ul,
html.dark-mode .breadcrumbs .cd-breadcrumb {
    border-left: 1px solid var(--dm-border) !important;
    border-right: 1px solid var(--dm-border) !important;
    background: transparent !important;
}

html.dark-mode .breadcrumbs li {
    background-color: var(--dm-surface) !important;
}

html.dark-mode .breadcrumbs a {
    color: var(--dm-text-muted) !important;
    background-color: var(--dm-surface) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

html.dark-mode .breadcrumbs a span {
    color: inherit !important;
}

/* Number circle inside breadcrumb */
html.dark-mode .breadcrumbs a span:first-child {
    border: 2px solid var(--dm-border) !important;
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
    transition: border-color 0.15s ease, color 0.15s ease !important;
}

/* Inactive step hover */
html.dark-mode .breadcrumbs li:not(.current):not(.activeli) a:hover {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
    text-decoration: none !important;
}

html.dark-mode .breadcrumbs li:not(.current):not(.activeli) a:hover span:first-child {
    border-color: var(--dm-text-muted) !important;
    color: #ffffff !important;
}

/* Chevron arrow dividers */
html.dark-mode .breadcrumbs a:before {
    border-left-color: var(--dm-border) !important;
}

html.dark-mode .breadcrumbs a:after {
    border-left-color: var(--dm-surface) !important;
}

html.dark-mode .breadcrumbs li:not(.current):not(.activeli) a:hover:after {
    border-left-color: var(--dm-elevated) !important;
}

/* Active / Current step */
html.dark-mode .breadcrumbs li.current,
html.dark-mode .breadcrumbs li.current a {
    background-color: var(--dm-brand) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

html.dark-mode .breadcrumbs li.current a:hover {
    background-color: #238016 !important;
    color: #ffffff !important;
}

html.dark-mode .breadcrumbs li.current a span:first-child {
    border-color: #ffffff !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

html.dark-mode .breadcrumbs li.current a:before {
    border-left-color: var(--dm-border) !important;
}

html.dark-mode .breadcrumbs li.current a:after {
    border-left-color: var(--dm-brand) !important;
}

html.dark-mode .breadcrumbs li.current a:hover:after {
    border-left-color: #238016 !important;
}

/* Completed / Visited step (activeli) */
html.dark-mode .breadcrumbs li.activeli,
html.dark-mode .breadcrumbs li.activeli a {
    background-color: #238016 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

html.dark-mode .breadcrumbs li.activeli a:hover {
    background-color: var(--dm-brand) !important;
    color: #ffffff !important;
}

html.dark-mode .breadcrumbs li.activeli a span:first-child {
    border-color: #ffffff !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

html.dark-mode .breadcrumbs li.activeli a:before {
    border-left-color: var(--dm-border) !important;
}

html.dark-mode .breadcrumbs li.activeli a:after {
    border-left-color: #238016 !important;
}

html.dark-mode .breadcrumbs li.activeli a:hover:after {
    border-left-color: var(--dm-brand) !important;
}

/* Hide arrow on the last step */
html.dark-mode .breadcrumbs li:last-child a:before,
html.dark-mode .breadcrumbs li:last-child a:after {
    display: none !important;
}

/* ------------------------------------------------- Smart Lead Setup - Agreement Details / Summary */
/* Package / System info banner */
html.dark-mode .smart_agree_package_info {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .smart_agree_package_info > div:nth-child(1) {
    color: var(--dm-brand) !important;
}

html.dark-mode .smart_agree_package_info span,
html.dark-mode .smart_agree_package_info label {
    color: var(--dm-text) !important;
}

/* Setup Equipments and Package tables */
html.dark-mode .Setup-Equipments-Table {
    border-color: var(--dm-border) !important;
}

html.dark-mode .Setup-Equipments-Table thead tr {
    background-color: var(--dm-elevated) !important;
    border-bottom: 2px solid var(--dm-border) !important;
}

html.dark-mode .Setup-Equipments-Table thead tr th {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .Setup-Equipments-Table tbody tr td {
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
    background-color: transparent !important;
}

html.dark-mode .Setup-Equipments-Table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Package fee table (Right side of Package section) */
html.dark-mode .package_table tbody tr td label {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .package_table tbody tr td span {
    color: var(--dm-text) !important;
}

html.dark-mode .package_table tbody tr td .fa-edit {
    color: var(--dm-brand) !important;
}

/* Last Total row in Setup-Equipments-Table / package_table (was hardcoded #fbfbfb) */
html.dark-mode .Setup-Equipments-Table tbody tr:last-child td {
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .Setup-Equipments-Table tbody tr:last-child td:nth-last-child(-n+3) {
    border: 1px solid var(--dm-border) !important;
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .Setup-Equipments-Table tbody tr:last-child td label,
html.dark-mode .Setup-Equipments-Table tbody tr:last-child td span,
html.dark-mode .Setup-Equipments-Table tbody tr:last-child td .ActivationTotalAmount {
    color: var(--dm-text-heading) !important;
    font-weight: bold !important;
}

/* Bottom summary total rows in Services & Equipment tables */
html.dark-mode .BottomTotalTr td,
html.dark-mode .BottomTotalTr_style td {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background-color: transparent !important;
}

html.dark-mode .BottomTotalTr td:nth-last-child(-n+4),
html.dark-mode .BottomTotalTr_style td:nth-last-child(-n+3) {
    border: 1px solid var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .retail-total,
html.dark-mode .sub-total,
html.dark-mode .Setup-Equipments-Table .retail-total,
html.dark-mode .Setup-Equipments-Table .sub-total {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
    font-weight: 600 !important;
}

html.dark-mode .BottomTotalTr_style:hover,
html.dark-mode .BottomTotalTr:hover {
    background-color: transparent !important;
}

/* SmartLead Equipment & Service Entry Tables (.LeadEquipmentTab) */
html.dark-mode .LeadEquipmentTab,
html.dark-mode #LeadEquipmentTab {
    border-color: var(--dm-border) !important;
}

html.dark-mode .LeadEquipmentTab thead tr th,
html.dark-mode #LeadEquipmentTab thead tr th {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .LeadEquipmentTab tbody tr td,
html.dark-mode #LeadEquipmentTab tbody tr td {
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
    background-color: transparent !important;
}

html.dark-mode .LeadEquipmentTab tbody tr:hover,
html.dark-mode #LeadEquipmentTab tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark-mode .LeadEquipmentTab tbody tr td span,
html.dark-mode .LeadEquipmentTab tbody tr td p,
html.dark-mode .LeadEquipmentTab .spnProductName,
html.dark-mode .LeadEquipmentTab .spnProductQuantity,
html.dark-mode .LeadEquipmentTab .spnProductRate,
html.dark-mode .LeadEquipmentTab .spnProductDiscountRate,
html.dark-mode .LeadEquipmentTab .spnProductPackageDiscount,
html.dark-mode .LeadEquipmentTab .spnTotalAmount,
html.dark-mode .LeadEquipmentTab .rowindex {
    color: var(--dm-text) !important;
}

html.dark-mode .LeadEquipmentTab tbody tr td input,
html.dark-mode .LeadEquipmentTab tbody tr td input[type="text"],
html.dark-mode .LeadEquipmentTab tbody tr td input[type="number"],
html.dark-mode #LeadEquipmentTab input,
html.dark-mode .LeadEquipmentTab .ProductName,
html.dark-mode .LeadEquipmentTab .txtProductQuantity,
html.dark-mode .LeadEquipmentTab .txtProductRate,
html.dark-mode .LeadEquipmentTab .txtProductDiscountRate,
html.dark-mode .LeadEquipmentTab .txtProductPackageDiscount,
html.dark-mode .LeadEquipmentTab .txtTotalAmount {
    background-color: var(--dm-input) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
    outline: none !important;
    box-shadow: none !important;
}

html.dark-mode .LeadEquipmentTab tbody tr.focusedItem input,
html.dark-mode .LeadEquipmentTab tbody tr td input:focus,
html.dark-mode #LeadEquipmentTab tr.focusedItem input {
    border-color: var(--dm-brand) !important;
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 0 0 1px var(--dm-brand) !important;
}

html.dark-mode .C_S .input-group-text,
html.dark-mode .LeadEquipmentTab .C_S .input-group-text {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .LeadEquipmentTab .tableActions i.fa,
html.dark-mode #LeadEquipmentTab .tableActions i.fa {
    color: var(--dm-text-muted) !important;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

html.dark-mode .LeadEquipmentTab .tableActions i.fa:hover,
html.dark-mode #LeadEquipmentTab .tableActions i.fa:hover {
    color: #ff6b6b !important;
}

/* Typeahead Autocomplete dropdown in Equipment/Service tables */
html.dark-mode .LeadEquipmentTab .tt-menu,
html.dark-mode #LeadEquipmentTab .tt-menu,
html.dark-mode tbody td .tt-menu {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .LeadEquipmentTab .tt-suggestion,
html.dark-mode tbody td .tt-suggestion {
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .LeadEquipmentTab .tt-suggestion:hover,
html.dark-mode .LeadEquipmentTab .tt-suggestion.active,
html.dark-mode tbody td .tt-suggestion:hover,
html.dark-mode tbody td .tt-suggestion.active {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .LeadEquipmentTab .tt-sug-text,
html.dark-mode tbody td .tt-sug-text,
html.dark-mode tbody td .tt-sug-text div {
    color: var(--dm-text) !important;
}

html.dark-mode .LeadEquipmentTab .tt-sug-desc,
html.dark-mode .LeadEquipmentTab .tt-sug-type,
html.dark-mode .LeadEquipmentTab .tt_sug_manufac,
html.dark-mode tbody td .tt-sug-desc,
html.dark-mode tbody td .tt-sug-type,
html.dark-mode tbody td .tt_sug_manufac {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .LeadEquipmentTab .tt-eq-price,
html.dark-mode tbody td .tt-eq-price {
    color: var(--dm-brand) !important;
}

/* Save Equipment & Edit buttons and headers */
html.dark-mode .leadsetup_equip_header {
    color: var(--dm-text-heading) !important;
}

html.dark-mode #SaveEquipments,
html.dark-mode .SaveEquipmentButtonDiv #SaveEquipments {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode #SaveEquipments:hover,
html.dark-mode .SaveEquipmentButtonDiv #SaveEquipments:hover {
    background-color: var(--dm-hover) !important;
    border-color: var(--dm-border-focus) !important;
    color: #ffffff !important;
}

html.dark-mode #btnEditAllEquipments {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode #btnEditAllEquipments:hover {
    background-color: var(--dm-hover) !important;
    border-color: var(--dm-border-focus) !important;
    color: #ffffff !important;
}

/* Setup Equipment Table actions and checkboxes */
html.dark-mode .Setup-Equipments-Table .tableActions i.fa,
html.dark-mode .Setup-Equipments-Table i.fa-trash-o {
    color: var(--dm-text-muted) !important;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

html.dark-mode .Setup-Equipments-Table .tableActions i.fa:hover,
html.dark-mode .Setup-Equipments-Table i.fa-trash-o:hover {
    color: #ff6b6b !important;
}

html.dark-mode .Setup-Equipments-Table input[type="checkbox"],
html.dark-mode .chk_non_commission_eqp {
    accent-color: var(--dm-brand);
}

/* Payment Profile table */
html.dark-mode #tbl_paymentprofilecustomer thead tr {
    background-color: var(--dm-elevated) !important;
    border-bottom: 2px solid var(--dm-border) !important;
}

html.dark-mode #tbl_paymentprofilecustomer thead tr th {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode #tbl_paymentprofilecustomer tbody tr td {
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
    background-color: transparent !important;
}

html.dark-mode #tbl_paymentprofilecustomer tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Additional Info section */
html.dark-mode .smart_agree_additional_info {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .smart_agree_additional_info label,
html.dark-mode .smart_agree_additional_info span {
    color: var(--dm-text-heading) !important;
}

/* Add Payment Profile dropdown menu */
html.dark-mode .SaveBtnDiv .dropdown-menu {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .SaveBtnDiv .dropdown-menu li button {
    background-color: transparent !important;
    color: var(--dm-text) !important;
    border: none !important;
}

html.dark-mode .SaveBtnDiv .dropdown-menu li button:hover {
    background-color: var(--dm-brand) !important;
    color: #ffffff !important;
}

html.dark-mode .smart_add_payment label {
    color: var(--dm-text) !important;
}

/* Add Payment Method & Capture Payment buttons in SmartLeadSetup */
html.dark-mode .smart_add_payment .addView_button,
html.dark-mode .SaveBtnDiv .addView_button,
html.dark-mode .addView_button,
html.dark-mode #btnPayNow,
html.dark-mode #btnsendEcontract,
html.dark-mode #btnsendIsPccontract {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #ffffff !important;
}

html.dark-mode .smart_add_payment .addView_button:hover,
html.dark-mode .smart_add_payment .addView_button:focus,
html.dark-mode .SaveBtnDiv .addView_button:hover,
html.dark-mode .SaveBtnDiv .addView_button:focus,
html.dark-mode .addView_button:hover,
html.dark-mode .addView_button:focus,
html.dark-mode #btnPayNow:hover,
html.dark-mode #btnsendEcontract:hover,
html.dark-mode #btnsendIsPccontract:hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #ffffff !important;
}

/* Inputs, dropdowns, and comment notes in SmartAgreementSummary */
html.dark-mode .ServiceMonthCount {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode #edit-activatio-fee input,
html.dark-mode #edit-labour-fee input,
html.dark-mode #edit-nonconformin-fee input,
html.dark-mode #discountAmount {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .sas_comment {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .sas_comment .inv_created {
    color: var(--dm-text) !important;
}

html.dark-mode .sas_comment .cus-anchor {
    color: var(--dm-brand) !important;
}

html.dark-mode .discount_text_custom {
    color: var(--dm-text-heading) !important;
}

/* Scrollbars */
html.dark-mode .existing-equipments::-webkit-scrollbar-track,
html.dark-mode .smart_agree_summery_table_container::-webkit-scrollbar-track {
    background: var(--dm-surface) !important;
}

html.dark-mode .existing-equipments::-webkit-scrollbar-thumb,
html.dark-mode .smart_agree_summery_table_container::-webkit-scrollbar-thumb {
    background: var(--dm-border) !important;
}

/* Agreement Summary Loader */
html.dark-mode .AgreementSummaryLoader .loader-background {
    background: var(--dm-bg) !important;
    opacity: 0.6 !important;
}



/* The panel around the tab body - ReportsPartial.css draws it in #ddd */
html.dark-mode .reports_tab_content {
    border-color: var(--dm-border) !important;
}

html.dark-mode .lead_despo_rept thead,
html.dark-mode .Report-Tabs table.lead_despo_rept thead {
    border: none !important;
}

html.dark-mode .lead_despo_rept thead tr th,
html.dark-mode .Report-Tabs table.lead_despo_rept thead tr th {
    border: 2px solid var(--dm-border) !important;
}

html.dark-mode .lead_dispo_top_bar,
html.dark-mode .lead_dispo_filter_left,
html.dark-mode .lead_dispo_select_wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

html.dark-mode .lead_dispo_label {
    color: var(--dm-text-heading) !important;
}

/*
    Row striping. Both tabs on /CancellationCue render #LeadsReportTable, so the
    one selector covers the Cancellation Queue and the Cancelled Customer table.
    #AllRecordTable has the same #f8f8f8 / #f4f5f8 pair in the same stylesheet.
*/
html.dark-mode #LeadsReportTable > tbody > tr:nth-child(odd),
html.dark-mode #LeadsReportTable > tbody > tr:nth-child(odd) > td,
html.dark-mode #AllRecordTable tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode #LeadsReportTable > tbody > tr:hover,
html.dark-mode #LeadsReportTable > tbody > tr:hover > td,
html.dark-mode #AllRecordTable tbody tr:hover {
    background-color: rgba(255, 255, 255, .08) !important;
}

/* #ccc is set on the <tr>, which the generic cell rules never reach */
html.dark-mode #LeadsReportTable > thead > tr,
html.dark-mode #LeadsReportTable > tbody > tr,
html.dark-mode .table_total_bg {
    border-color: var(--dm-border) !important;
}

/* Report headers pinned with position:sticky carry an explicit #fff so the rows
   do not show through as they scroll under them */
html.dark-mode .report_data_ref_table thead tr th,
html.dark-mode .app_date_table .loadticketreportlist_table thead tr th,
html.dark-mode .go_back_table .loadticketreportlist_table thead tr th,
html.dark-mode .install_equip_table .loadticketreportlist_table thead tr th {
    background-color: var(--dm-elevated) !important;
    box-shadow: 0 1px 1px -1px var(--dm-border) !important;
}

/*
    "Select All" is brand green inside .cancel_cue_search and a plain button on
    the Customer / Leads / TimeClock screens that also use the class. It sets the
    green without !important, so the neutral .btn rule was flattening it - and
    that rule's long :not() chain outspecifies anything scoped, so .SelectAll had
    to be excluded there and given both of its appearances explicitly here.
*/
html.dark-mode .SelectAll,
html.dark-mode .SelectAll:hover {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .cancel_cue_search .SelectAll,
html.dark-mode .cancel_cue_search .SelectAll:hover,
html.dark-mode .cancel_cue_search .SelectAll:focus {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
}

/* Date-range picker in the page header. See lines 1826+ for the complete styling. */
html.dark-mode .dateviewed {
    background: var(--dm-elevated) !important;
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .DateFilterContents .dropdown-filter {
    background: var(--dm-elevated) !important;
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .DateFilterContents .dateTable tr td {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dm-text-heading) !important;
}

/* Column sort chevrons: #bdbdbd reads as a bright speck on a dark header */
html.dark-mode .icon_sort_bi {
    color: var(--dm-text-muted) !important;
}

/* ------------------------------------------------ TinyMCE 4 (the note field) */
/*
    Editor chrome only. The typing area is an <iframe> with its own document, which
    page CSS cannot reach - that half is handled by content_style in Content/Tiny/tiny.js
    and re-applied on theme toggle by DarkMode.js.
*/
html.dark-mode .mce-tinymce,
html.dark-mode .mce-panel,
html.dark-mode .mce-toolbar-grp,
html.dark-mode .mce-statusbar,
html.dark-mode .mce-menubar,
html.dark-mode .mce-edit-area {
    background-color: var(--dm-elevated) !important;
    background-image: none !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .mce-btn,
html.dark-mode .mce-btn button,
html.dark-mode .mce-menubtn button {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .mce-btn:hover,
html.dark-mode .mce-btn.mce-active {
    background-color: #3a4046 !important;
    color: var(--dm-text-heading) !important;
}

/* Toolbar glyphs are a dark icon font */
html.dark-mode .mce-ico {
    color: var(--dm-text) !important;
}

html.dark-mode .mce-statusbar .mce-path,
html.dark-mode .mce-statusbar .mce-path-item,
html.dark-mode .mce-widget {
    color: var(--dm-text-muted) !important;
}

/* Dropdown menus the editor renders at body level */
html.dark-mode .mce-menu,
html.dark-mode .mce-floatpanel {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .mce-menu-item,
html.dark-mode .mce-menu-item span {
    color: var(--dm-text) !important;
}

html.dark-mode .mce-menu-item:hover,
html.dark-mode .mce-menu-item.mce-selected {
    background-color: var(--dm-brand) !important;
}

html.dark-mode .mce-menu-item:hover span {
    color: #fff !important;
}

/* ------------------------------------------------------------------- calendar */
/*
    /calendar (Views/Calendar/Index.cshtml -> ~/styles/CalendarPartial).
    CalendarPartial.css had no dark treatment at all, so the whole grid came
    through on white: the technician column, the alternating row bands and the
    page header were all light, which left the names and the date field unreadable.

    Event blocks are deliberately NOT re-coloured. Their fill comes from the
    ticket's own colour (set inline, per event) and carries meaning, so they stay
    as they are - but because those fills are pale, text inside them is pinned
    dark rather than inheriting the theme's light body colour.
*/
html.dark-mode .calendar_header_top,
html.dark-mode .footer_table_style,
html.dark-mode .LoadSchedule .cal_ticket_type,
html.dark-mode .LoadSchedule .cal_user_select,
html.dark-mode #detailspopup1,
html.dark-mode #detailspopup2 {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* The grid itself - CalendarPartial.css sets #fff with #024457 text */
html.dark-mode .responstable {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .responstable tr {
    border-color: var(--dm-border-soft) !important;
}

/* Row banding (#f4f5f8 on the odd row) */
html.dark-mode .responstable tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode .responstable tr:nth-child(even) {
    background-color: transparent !important;
}

/* Sticky technician column: #fff on the even row, #eaf3f3 on the odd one.
   It has to keep an opaque fill of its own - the grid scrolls underneath it. */
html.dark-mode .my-daily tbody tr:nth-child(even) td:nth-child(1),
html.dark-mode .my-weekly tbody tr:nth-child(even) td:nth-child(1),
html.dark-mode .vertical-my-daily tbody tr:nth-child(even) td:nth-child(1) {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .my-daily tbody tr:nth-child(odd) td:nth-child(1),
html.dark-mode .my-weekly tbody tr:nth-child(odd) td:nth-child(1),
html.dark-mode .vertical-my-daily tbody tr:nth-child(odd) td:nth-child(1) {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .my-daily td,
html.dark-mode .my-weekly td,
html.dark-mode .my-daily th,
html.dark-mode .my-weekly th {
    border-color: var(--dm-border-soft) !important;
}

html.dark-mode .topclass > div {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* Event blocks keep their ticket colour, so their text stays dark to suit it */
html.dark-mode .colorfull_div,
html.dark-mode .colorfull_div *,
html.dark-mode .event .my-td,
html.dark-mode .event .my-td * {
    color: #1a1a1a !important;
}

/* ------------------------------------------------------------- estimate popup */
/*
    The estimate editor (OpenEstimatorById -> AddEstimate.css). Everything inside the
    popup had already picked up the theme - the inputs, the line-item grid and the
    totals were all dark - but AddEstimate.css paints the whole top panel
    .div-body-contents #f4f5f8, and that one rule was never overridden. The result was
    light-on-light: the field labels (.span-style, .text-custom, #PaymentTermsSummary)
    were landing at 1.16:1 against it, which is why they read as blank.
*/
html.dark-mode .div-body-contents,
html.dark-mode .header-title {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .tab_close_style {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transition: transform .25s ease-in-out, background-color .15s ease, border-color .15s ease !important;
}

html.dark-mode .tab_close_style:hover {
    background-color: var(--dm-danger, #e05260) !important;
    border-color: var(--dm-danger, #e05260) !important;
}

html.dark-mode .tab_close_style:before,
html.dark-mode .tab_close_style:after {
    border-top: 1.5px solid rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .tab_close_style:hover:before,
html.dark-mode .tab_close_style:hover:after {
    border-top-color: #ffffff !important;
}

/* Row hovers inside the popup: #ffffff on .tr-style, #f4f5f8 on the two grids */
    html.dark-mode .div-body-contents .tr-style:hover,
    html.dark-mode .CustomerEstimateTab tbody tr:hover,
    html.dark-mode .CustomerOneTimeServiceInvoiceTab tbody tr:hover,
    html.dark-mode .CustomerEstimateTab tbody tr:hover > td,
    html.dark-mode .CustomerEstimateServiceTab tbody tr:hover,
    html.dark-mode .CustomerEstimateServiceTab tbody tr:hover > td {
        background-color: rgba(255, 255, 255, .08) !important;
    }

/* Recurring billing grid inside the popup */
html.dark-mode .Recurring_BillingTab tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode .Recurring_BillingTab tbody tr:nth-child(even) {
    background-color: transparent !important;
}

html.dark-mode .Recurring_BillingTab tbody tr td {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .Recurring_BillingTab tbody tr:hover,
html.dark-mode .Recurring_BillingTab tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .08) !important;
}

/* Typeahead menu and the recurring-bill sub-popup are both plain white */
html.dark-mode .add-invoice-container .tt-menu,
html.dark-mode .recurring_bill_container .popup {
    background: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/*
    The invoice editor (OpenInvById -> AddInvoice.css) repeats the estimate popup's
    problem with its own class: .invoice_info_container is the #f4f5f8 top panel, and
    the same .span-style labels were landing on it at 1.16:1.
*/
html.dark-mode .invoice_info_container {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .CustomerInvoiceTab tbody tr:hover,
html.dark-mode .CustomerInvoiceTab tbody tr:hover > td,
html.dark-mode .CustomerInvoiceTab thead tr:hover,
html.dark-mode .CustomerInvoiceTab thead tr:hover > th {
    background-color: rgba(255, 255, 255, .08) !important;
}

html.dark-mode .DeleteInvoiceNoteBtn,
html.dark-mode .AddInvoiceLoader {
    background: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
}

/*
    Customer detail > Logs tab (_LoadLogPartial.css). Bands the odd <tr> #f8f8f8 and
    defines no hover of its own, so only the band needs resetting here.
*/
html.dark-mode .load_log_partial_table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode .load_log_partial_table tbody tr:nth-child(even) {
    background-color: transparent !important;
}

html.dark-mode .load_log_partial_table tbody tr td {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .load_log_partial_table tbody tr:hover,
html.dark-mode .load_log_partial_table tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .08) !important;
}

/* --------------------------------------------------- schedule (FullCalendar 3) */
/*
    /ScheduleInfo runs FullCalendar 3 (Content/FullCalendar/fullcalendar.css, minified)
    plus Scheduler.css. The library ships a light theme only, so nothing here was
    themed. The striking one: .fc-unthemed td.fc-today paints #fcf8e3, and because the
    resource day view marks every column as today, that cream fill covered the whole grid.

    Event blocks are left with their own colour - it comes from the ticket type and
    carries meaning. The app sets explicit text colours inside them, so they do not
    inherit the theme body colour and are deliberately not touched here.
*/
html.dark-mode .fc {
    color: var(--dm-text) !important;
}

html.dark-mode .fc-unthemed th,
html.dark-mode .fc-unthemed td,
html.dark-mode .fc-unthemed thead,
html.dark-mode .fc-unthemed tbody,
html.dark-mode .fc-unthemed .fc-row,
html.dark-mode .fc-unthemed .fc-content,
html.dark-mode .fc-unthemed .fc-divider,
html.dark-mode .fc-unthemed .fc-popover,
html.dark-mode .fc-unthemed .fc-list-view,
html.dark-mode .fc-unthemed .fc-list-heading td {
    border-color: var(--dm-border-soft) !important;
}

html.dark-mode .fc-view,
html.dark-mode .fc-view > table,
html.dark-mode .fc-unthemed td,
html.dark-mode .fc-unthemed th {
    background-color: transparent !important;
}

/* The day view marks every column "today", so this fill covered the entire grid */
html.dark-mode .fc-unthemed td.fc-today {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode .fc-unthemed .fc-divider,
html.dark-mode .fc-unthemed .fc-popover .fc-header,
html.dark-mode .fc-unthemed .fc-list-heading td,
html.dark-mode .fc .fc-widget-header {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .fc-unthemed .fc-popover,
html.dark-mode .fc-list-view {
    background-color: var(--dm-surface) !important;
}

html.dark-mode .fc-list-item:hover td {
    background-color: rgba(255, 255, 255, .08) !important;
}

html.dark-mode .fc-nonbusiness {
    background-color: rgba(0, 0, 0, .3) !important;
}

/* Toolbar buttons - a #f5f5f5-to-#e6e6e6 gradient with #333 text and a white text-shadow */
html.dark-mode .fc button.fc-state-default,
html.dark-mode .fc .fc-state-default {
    background-color: var(--dm-elevated) !important;
    background-image: none !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html.dark-mode .fc .fc-state-active,
html.dark-mode .fc .fc-state-down,
html.dark-mode .fc .fc-state-hover {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .fc .fc-state-disabled {
    color: var(--dm-text-muted) !important;
}

html.dark-mode a.fc-more {
    color: var(--dm-link) !important;
}

/* Scheduler.css draws this over the grid in #eee */
html.dark-mode .fc-license-message {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-muted) !important;
}

/* ------------------------------------------------------- third-party widgets */

/* DataTables */
html.dark-mode .dataTables_wrapper,
html.dark-mode .dataTables_info,
html.dark-mode .dataTables_length,
html.dark-mode .dataTables_filter,
html.dark-mode .dataTables_paginate {
    color: var(--dm-text) !important;
}

html.dark-mode .dataTables_paginate ul.pagination,
html.dark-mode .dataTables_paginate ul.pagination > li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

html.dark-mode .paginate_button,
html.dark-mode .pagination > li > a,
html.dark-mode .pagination > li > span {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
    outline: none !important;
}

html.dark-mode .pagination > li > a:hover,
html.dark-mode .pagination > li > span:hover,
html.dark-mode .pagination > li > a:focus,
html.dark-mode .pagination > li > span:focus {
    background-color: #32373c !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
    box-shadow: none !important;
    outline: none !important;
}

html.dark-mode .pagination > .active > a,
html.dark-mode .pagination > .active > span,
html.dark-mode .pagination > .active > a:hover,
html.dark-mode .pagination > .active > span:hover,
html.dark-mode .pagination > .active > a:focus,
html.dark-mode .pagination > .active > span:focus {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

html.dark-mode .pagination > .disabled > a,
html.dark-mode .pagination > .disabled > a:hover,
html.dark-mode .pagination > .disabled > a:focus,
html.dark-mode .pagination > .disabled > span,
html.dark-mode .pagination > .disabled > span:hover,
html.dark-mode .pagination > .disabled > span:focus {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    outline: none !important;
}

html.dark-mode .pagination > li.next > a,
html.dark-mode .pagination > li:last-child > a,
html.dark-mode .pagination > li.next > span,
html.dark-mode .pagination > li:last-child > span {
    border-right: 1px solid var(--dm-border) !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Document Center / Lead Files & Documents Table */
html.dark-mode .document_center_container,
html.dark-mode .dcp_table_container,
html.dark-mode #tblinfo,
html.dark-mode .document_center_partial_table {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode #tblinfo thead th,
html.dark-mode .document_center_partial_table thead th,
html.dark-mode .table-head-border {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode #tblinfo tbody tr,
html.dark-mode #tblinfo tbody tr:nth-child(odd),
html.dark-mode #tblinfo tbody tr:nth-child(even),
html.dark-mode .document_center_partial_table tbody tr {
    background-color: transparent !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode #tblinfo tbody tr:hover,
html.dark-mode .document_center_partial_table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode #tblinfo tbody td,
html.dark-mode .document_center_partial_table tbody td,
html.dark-mode .table-body-td-style,
html.dark-mode .tr-style,
html.dark-mode .lacf_info,
html.dark-mode .lacf_info span {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .fileDownloadCustom {
    color: var(--dm-text) !important;
}

html.dark-mode .fileDownloadCustom:hover {
    color: var(--dm-brand) !important;
}

html.dark-mode .document_center_partial_table .item-send {
    color: var(--dm-brand) !important;
}

html.dark-mode .document_center_partial_table .item-delete,
html.dark-mode .document_center_partial_table .item-delete i {
    color: var(--dm-danger) !important;
}

/* Correspondence Tab & Table (Customer / Lead Details) */
html.dark-mode .correspondence_list_container {
    background-color: transparent !important;
}

html.dark-mode .btnAddCorrespondence {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #ffffff !important;
}

html.dark-mode .btnAddCorrespondence:hover,
html.dark-mode .btnAddCorrespondence:focus {
    background-color: var(--dm-brand-hover) !important;
    border-color: var(--dm-brand-hover) !important;
    color: #ffffff !important;
}

html.dark-mode #tblCorrespondence {
    background-color: transparent !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode #tblCorrespondence thead tr th,
html.dark-mode #tblCorrespondence .thead-th-style {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--dm-border) !important;
    border-left: none !important;
    border-right: none !important;
}

html.dark-mode #tblCorrespondence tbody tr,
html.dark-mode #tblCorrespondence tbody tr.even,
html.dark-mode #tblCorrespondence.dataTable.display tbody tr.even,
html.dark-mode #tblCorrespondence.dataTable.stripe tbody tr.even {
    background-color: transparent !important;
}

html.dark-mode #tblCorrespondence tbody tr:nth-child(odd),
html.dark-mode #tblCorrespondence tbody tr.odd,
html.dark-mode #tblCorrespondence.dataTable.display tbody tr.odd,
html.dark-mode #tblCorrespondence.dataTable.stripe tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.025) !important;
}

html.dark-mode #tblCorrespondence.dataTable.display tbody tr.odd > .sorting_1,
html.dark-mode #tblCorrespondence.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: rgba(255, 255, 255, 0.035) !important;
}

html.dark-mode #tblCorrespondence.dataTable.display tbody tr.even > .sorting_1,
html.dark-mode #tblCorrespondence.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
    background-color: rgba(255, 255, 255, 0.015) !important;
}

html.dark-mode #tblCorrespondence tbody tr:hover,
html.dark-mode #tblCorrespondence tbody tr:hover > td,
html.dark-mode #tblCorrespondence.dataTable tbody tr:hover,
html.dark-mode #tblCorrespondence.dataTable tbody tr:hover > .sorting_1 {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode #tblCorrespondence tbody tr td,
html.dark-mode #tblCorrespondence .table-body-td-style {
    color: var(--dm-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

html.dark-mode #tblCorrespondence tbody tr td span,
html.dark-mode #tblCorrespondence tbody tr td div {
    color: inherit;
}

html.dark-mode #tblCorrespondence tbody tr td div:nth-child(3) {
    color: var(--dm-text-muted) !important;
    font-size: 11px;
    margin-top: 3px;
}

html.dark-mode #tblCorrespondence a.LoadMailOrSms {
    color: #5cd04a !important;
}

html.dark-mode #tblCorrespondence a.LoadMailOrSms:hover {
    color: #87e878 !important;
}

html.dark-mode #tblCorrespondence tbody td.dataTables_empty {
    color: var(--dm-text-muted) !important;
    background-color: transparent !important;
}

@media (max-width: 768px) {
    html.dark-mode #tblCorrespondence tbody tr td {
        border-bottom-color: var(--dm-border) !important;
    }
}

/* Email & SMS Templates / File Templates / Agreement Templates */
html.dark-mode .templates_container {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .templates_header {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .templates_nav_bar {
    background-color: var(--dm-surface) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .templates_nav_bar li {
    border: 1px solid var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
}

html.dark-mode .templates_nav_bar li a {
    color: var(--dm-text) !important;
    background-color: transparent !important;
}

html.dark-mode .templates_nav_bar > li.active > a,
html.dark-mode .templates_nav_bar > li.active > a:hover,
html.dark-mode .templates_nav_bar > li.active > a:focus {
    background-color: var(--dm-brand) !important;
    color: #fff !important;
    border-color: var(--dm-brand) !important;
}

html.dark-mode .templates_nav_bar > li:not(.active) > a:hover {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .templates_container .tab-content {
    border: 1px solid var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .templates_container table,
html.dark-mode .EmailTemplateTable,
html.dark-mode .FileTemplateTable {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .templates_container table thead tr th,
html.dark-mode .EmailTemplateTable thead tr th,
html.dark-mode .FileTemplateTable thead tr th {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .templates_container table thead tr,
html.dark-mode .EmailTemplateTable thead tr,
html.dark-mode .FileTemplateTable thead tr {
    border-bottom: 2px solid var(--dm-border) !important;
}

html.dark-mode .templates_container table tbody tr,
html.dark-mode .templates_container table tbody tr:nth-child(odd),
html.dark-mode .templates_container table tbody tr:nth-child(even),
html.dark-mode .EmailTemplateTable tbody tr,
html.dark-mode .EmailTemplateTable tbody tr:nth-child(odd),
html.dark-mode .EmailTemplateTable tbody tr:nth-child(even),
html.dark-mode .FileTemplateTable tbody tr,
html.dark-mode .FileTemplateTable tbody tr:nth-child(odd),
html.dark-mode .FileTemplateTable tbody tr:nth-child(even) {
    background-color: transparent !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .templates_container table tbody tr:hover,
html.dark-mode .EmailTemplateTable tbody tr:hover,
html.dark-mode .FileTemplateTable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .templates_container table tbody tr td,
html.dark-mode .EmailTemplateTable tbody tr td,
html.dark-mode .FileTemplateTable tbody tr td {
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .templates_container table tbody tr td div,
html.dark-mode .EmailTemplateTable tbody tr td div,
html.dark-mode .FileTemplateTable tbody tr td div {
    color: var(--dm-text) !important;
}

html.dark-mode .templates_container .cus-anchor,
html.dark-mode .EmailTemplateTable .cus-anchor,
html.dark-mode .FileTemplateTable .cus-anchor {
    color: var(--dm-brand) !important;
}

html.dark-mode .templates_container .cus-anchor:hover,
html.dark-mode .EmailTemplateTable .cus-anchor:hover,
html.dark-mode .FileTemplateTable .cus-anchor:hover {
    color: #238016 !important;
    text-decoration: underline;
}

/* Template edit modals / editor */
html.dark-mode .TopToBottomModal .top_to_bottom_modal_container {
    overflow: hidden !important;
}

html.dark-mode .TopToBottomModal .top_to_bottom_modal_container .ContentsDiv {
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

html.dark-mode .addFileTemplateHeader {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    flex-shrink: 0 !important;
}

html.dark-mode .addFileTemplateHeader div {
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode .add_file_template_inner {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    flex: 1 1 auto !important;
    height: calc(100vh - 105px) !important;
    max-height: calc(100vh - 105px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    float: none !important;
    padding-bottom: 25px !important;
}

html.dark-mode .add_file_template_inner .form-group,
html.dark-mode .add_file_template_inner .form-group span {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .change-picture-logo {
    background-color: var(--dm-surface-secondary) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .change-picture-logo:hover {
    background-color: var(--dm-surface-hover) !important;
    border-color: var(--dm-border-hover) !important;
}

html.dark-mode .fileborder {
    border-color: var(--dm-border) !important;
}

html.dark-mode .TemplateEditorMainDiv {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 4px;
    padding: 15px;
}

html.dark-mode .EditEmailTemplate h3,
html.dark-mode .EditFileTemplate h3 {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .EditEmailTemplate label,
html.dark-mode .EditFileTemplate label {
    color: var(--dm-text) !important;
}

html.dark-mode .EditEmailTemplate input[type="text"],
html.dark-mode .EditEmailTemplate textarea,
html.dark-mode .EditFileTemplate input[type="text"],
html.dark-mode .EditFileTemplate textarea {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .EditEmailTemplate input[type="text"]:focus,
html.dark-mode .EditEmailTemplate textarea:focus,
html.dark-mode .EditFileTemplate input[type="text"]:focus,
html.dark-mode .EditFileTemplate textarea:focus {
    border-color: var(--dm-focus-ring) !important;
    outline: none;
}

html.dark-mode .EditEmailTemplate input[type="checkbox"],
html.dark-mode .EditFileTemplate input[type="checkbox"] {
    accent-color: var(--dm-brand);
}

html.dark-mode .SaveChangesDiv,
html.dark-mode .TopToBottomModal .SaveChangesDiv,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    float: none !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    background-color: var(--dm-header-bar) !important;
    border-top: 1px solid var(--dm-border) !important;
}

/* Danger buttons in SaveChangesDiv stay red (e.g. Reset) */
html.dark-mode .SaveChangesDiv .btn-danger,
html.dark-mode .SaveChangesDiv .red_button,
html.dark-mode .SaveChangesDiv #RefreshTemplateChange,
html.dark-mode .TopToBottomModal .SaveChangesDiv .btn-danger,
html.dark-mode .TopToBottomModal .SaveChangesDiv .red_button,
html.dark-mode .TopToBottomModal .SaveChangesDiv #RefreshTemplateChange,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .btn-danger,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .red_button,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv #RefreshTemplateChange {
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
    color: #ffffff !important;
}

html.dark-mode .SaveChangesDiv .btn-danger:hover,
html.dark-mode .SaveChangesDiv .red_button:hover,
html.dark-mode .SaveChangesDiv #RefreshTemplateChange:hover,
html.dark-mode .TopToBottomModal .SaveChangesDiv .btn-danger:hover,
html.dark-mode .TopToBottomModal .SaveChangesDiv .red_button:hover,
html.dark-mode .TopToBottomModal .SaveChangesDiv #RefreshTemplateChange:hover,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .btn-danger:hover,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .red_button:hover,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv #RefreshTemplateChange:hover {
    background-color: #c9302c !important;
    border-color: #ac2925 !important;
    color: #ffffff !important;
}

/* Green buttons in SaveChangesDiv stay green (e.g. Save & Review) */
html.dark-mode .SaveChangesDiv .green_button,
html.dark-mode .SaveChangesDiv .btn-success,
html.dark-mode .SaveChangesDiv .btn-green,
html.dark-mode .SaveChangesDiv #SaveAndReview,
html.dark-mode .TopToBottomModal .SaveChangesDiv .green_button,
html.dark-mode .TopToBottomModal .SaveChangesDiv .btn-success,
html.dark-mode .TopToBottomModal .SaveChangesDiv .btn-green,
html.dark-mode .TopToBottomModal .SaveChangesDiv #SaveAndReview,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .green_button,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .btn-success,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .btn-green,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv #SaveAndReview {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
}

html.dark-mode .SaveChangesDiv .green_button:hover,
html.dark-mode .SaveChangesDiv .btn-success:hover,
html.dark-mode .SaveChangesDiv .btn-green:hover,
html.dark-mode .SaveChangesDiv #SaveAndReview:hover,
html.dark-mode .TopToBottomModal .SaveChangesDiv .green_button:hover,
html.dark-mode .TopToBottomModal .SaveChangesDiv .btn-success:hover,
html.dark-mode .TopToBottomModal .SaveChangesDiv .btn-green:hover,
html.dark-mode .TopToBottomModal .SaveChangesDiv #SaveAndReview:hover,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .green_button:hover,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .btn-success:hover,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .btn-green:hover,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv #SaveAndReview:hover {
    background-color: #248b17 !important;
    border-color: #248b17 !important;
    color: #ffffff !important;
}

/* Default buttons in SaveChangesDiv (e.g. Restore Default, Save Changes in AddFiletemplate) */
html.dark-mode .SaveChangesDiv .btn-default,
html.dark-mode .TopToBottomModal .SaveChangesDiv .btn-default,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .btn-default {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
}

html.dark-mode .SaveChangesDiv .btn-default:hover,
html.dark-mode .TopToBottomModal .SaveChangesDiv .btn-default:hover,
html.dark-mode .top_to_bottom_modal_container .SaveChangesDiv .btn-default:hover {
    background-color: #e6e6e6 !important;
    color: #333333 !important;
    border-color: #adadad !important;
}


/* Select2 */
html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple,
html.dark-mode .select2-dropdown,
html.dark-mode .select2-search__field {
    background-color: var(--dm-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-mode .select2-results__option {
    color: var(--dm-text) !important;
}

html.dark-mode .select2-results__option[aria-selected=true] {
    background-color: #343a40 !important;
}

html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark-mode .select2-container--classic .select2-results__option--highlighted[aria-selected],
html.dark-mode .select2-results__option--highlighted,
html.dark-mode .select2-results__option--highlighted[aria-selected] {
    background-color: #5897fb !important;
    color: #fff !important;
}

html.dark-mode .select2-search--dropdown .select2-search__field:focus {
    border-color: #5897fb !important;
    box-shadow: 0 0 0 1px #5897fb !important;
}

/* bootstrap-select */
html.dark-mode .bootstrap-select > .dropdown-toggle,
html.dark-mode .bootstrap-select .dropdown-menu {
    background-color: var(--dm-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .bootstrap-select .dropdown-menu > li > a:hover,
html.dark-mode .bootstrap-select .dropdown-menu > li > a:focus,
html.dark-mode .bootstrap-select .dropdown-menu > .active > a,
html.dark-mode .bootstrap-select .dropdown-menu > .selected > a,
html.dark-mode .bootstrap-select .dropdown-menu li.active a,
html.dark-mode .bootstrap-select .dropdown-menu li.selected a {
    background-color: #5897fb !important;
    color: #fff !important;
}

/* --------------------------------------------------- Pikaday & jQuery UI date pickers */

/* Pikaday container */
html.dark-mode .pika-single {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    color: var(--dm-text) !important;
    font-family: inherit !important;
    padding: 8px 10px 10px 10px !important;
    z-index: 999999 !important;
}

html.dark-mode .pika-lendar {
    float: left !important;
    margin: 4px !important;
    width: 240px !important;
}

/* Pikaday Title & Month/Year Header */
html.dark-mode .pika-title {
    position: relative !important;
    text-align: center !important;
    padding: 4px 0 8px 0 !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode .pika-label {
    background-color: transparent !important;
    color: var(--dm-text-heading) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    padding: 3px 6px !important;
    display: inline-block !important;
}

html.dark-mode .pika-title select,
html.dark-mode .pika-select {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
}

/* Pikaday Prev / Next Navigation Arrows */
html.dark-mode .pika-prev,
html.dark-mode .pika-next {
    filter: invert(1) brightness(1.8) !important;
    opacity: 0.75 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease, background-color 0.15s ease !important;
}

html.dark-mode .pika-prev:hover,
html.dark-mode .pika-next:hover {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-mode .pika-prev.is-disabled,
html.dark-mode .pika-next.is-disabled {
    opacity: 0.2 !important;
    cursor: default !important;
}

/* Pikaday Table & Weekday Column Headers */
html.dark-mode .pika-table,
html.dark-mode .pika-table tbody,
html.dark-mode .pika-table tr,
html.dark-mode .pika-table td,
html.dark-mode .pika-row,
html.dark-mode .pika-table tbody tr:hover,
html.dark-mode .pika-table tbody tr:hover > td,
html.dark-mode .pika-row:hover,
html.dark-mode .pika-row:hover > td,
html.dark-mode .ui-datepicker table tbody tr:hover,
html.dark-mode .ui-datepicker table tbody tr:hover > td {
    background: transparent !important;
    background-color: transparent !important;
}

html.dark-mode .pika-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    border: none !important;
}

html.dark-mode .pika-table th {
    background-color: transparent !important;
    border: none !important;
    color: var(--dm-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 6px 0 !important;
    line-height: 18px !important;
    letter-spacing: 0.5px !important;
}

html.dark-mode .pika-table th abbr {
    text-decoration: none !important;
    border-bottom: none !important;
    cursor: default !important;
}

/* Pikaday Day Cells */
html.dark-mode .pika-button {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    color: var(--dm-text) !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    padding: 6px 2px !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}

html.dark-mode .pika-button:hover,
html.dark-mode .pika-row.pick-whole-week:hover .pika-button {
    background-color: rgba(44, 160, 28, 0.22) !important;
    border-color: var(--dm-brand) !important;
    color: #ffffff !important;
}

/* Today */
html.dark-mode .is-today .pika-button {
    color: var(--dm-brand) !important;
    font-weight: 700 !important;
    border: 1px solid var(--dm-brand) !important;
    background-color: rgba(44, 160, 28, 0.12) !important;
}

/* Selected Date */
html.dark-mode .is-selected .pika-button,
html.dark-mode .has-event .pika-button,
html.dark-mode .is-startrange .pika-button,
html.dark-mode .is-endrange .pika-button {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35) !important;
}

/* Disabled & Outside Month */
html.dark-mode .is-disabled .pika-button,
html.dark-mode .is-outside-current-month .pika-button {
    color: #555b62 !important;
    opacity: 0.35 !important;
    background-color: transparent !important;
    pointer-events: none !important;
    border: none !important;
}

html.dark-mode .pika-table td.is-disabled {
    background-color: rgba(235, 139, 139, 0.12) !important;
    border-radius: 6px !important;
}

html.dark-mode .pika-table td.is-disabled button {
    color: #e57373 !important;
    opacity: 0.7 !important;
    text-align: center !important;
}

/* Pikaday Time Extension (if present) */
html.dark-mode .pika-time-container {
    border-top: 1px solid var(--dm-border-soft) !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
    color: var(--dm-text) !important;
}

html.dark-mode .pika-time-container select {
    background-color: var(--dm-input) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
    border-radius: 4px !important;
}

/* jQuery UI Datepicker */
html.dark-mode .ui-datepicker,
html.dark-mode .ui-widget-content.ui-datepicker {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    color: var(--dm-text) !important;
    padding: 8px !important;
}

html.dark-mode .ui-datepicker .ui-datepicker-header {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--dm-border-soft) !important;
    color: var(--dm-text-heading) !important;
    padding-bottom: 6px !important;
}

html.dark-mode .ui-datepicker .ui-datepicker-prev,
html.dark-mode .ui-datepicker .ui-datepicker-next {
    filter: invert(1) brightness(1.8) !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

html.dark-mode .ui-datepicker th {
    background-color: transparent !important;
    border: none !important;
    color: var(--dm-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 6px 0 !important;
}

html.dark-mode .ui-datepicker td .ui-state-default {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    color: var(--dm-text) !important;
    text-align: center !important;
    padding: 5px !important;
}

html.dark-mode .ui-datepicker td .ui-state-hover {
    background-color: rgba(44, 160, 28, 0.22) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
}

html.dark-mode .ui-datepicker td .ui-state-highlight {
    color: var(--dm-brand) !important;
    border: 1px solid var(--dm-brand) !important;
    background-color: rgba(44, 160, 28, 0.12) !important;
}

html.dark-mode .ui-datepicker td .ui-state-active {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

/* Generic jQuery UI widget content (non-datepicker) */
html.dark-mode .ui-widget-content:not(.ui-datepicker) {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .ui-widget-content:not(.ui-datepicker) .ui-state-default {
    background-color: var(--dm-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .ui-widget-content:not(.ui-datepicker) .ui-state-active,
html.dark-mode .ui-widget-content:not(.ui-datepicker) .ui-state-hover {
    background-color: var(--dm-brand) !important;
    color: #fff !important;
}

/* Magnific popup */
html.dark-mode .mfp-content,
html.dark-mode .white-popup-block {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
}

/* User Management tables & controls */
html.dark-mode .userlist_table tbody tr:nth-child(odd),
html.dark-mode .userlist_table tbody tr:nth-child(odd) > td,
html.dark-mode #tblUserList tbody tr:nth-child(odd),
html.dark-mode #tblUserList tbody tr:nth-child(odd) > td,
html.dark-mode .user_group_table tbody tr:nth-child(odd),
html.dark-mode .user_group_table tbody tr:nth-child(odd) > td,
html.dark-mode .employee_review_userid_table tbody tr:nth-child(odd),
html.dark-mode .employee_review_userid_table tbody tr:nth-child(odd) > td,
html.dark-mode .HrWriteUps_list tbody tr:nth-child(odd),
html.dark-mode .HrWriteUps_list tbody tr:nth-child(odd) > td,
html.dark-mode .vehicle_list_table tbody tr:nth-child(odd),
html.dark-mode .vehicle_list_table tbody tr:nth-child(odd) > td,
html.dark-mode .vehicle_repair_list_table tbody tr:nth-child(odd),
html.dark-mode .vehicle_repair_list_table tbody tr:nth-child(odd) > td,
html.dark-mode .exp_billing_list tbody tr:nth-child(odd),
html.dark-mode .exp_billing_list tbody tr:nth-child(odd) > td,
html.dark-mode .recruit_tab_admin_table tbody tr:nth-child(even),
html.dark-mode .recruit_tab_admin_table tbody tr:nth-child(even) > td {
    background-color: rgba(255, 255, 255, .035) !important;
}

html.dark-mode .userlist_table tbody tr:nth-child(even),
html.dark-mode .userlist_table tbody tr:nth-child(even) > td,
html.dark-mode #tblUserList tbody tr:nth-child(even),
html.dark-mode #tblUserList tbody tr:nth-child(even) > td,
html.dark-mode .user_group_table tbody tr:nth-child(even),
html.dark-mode .user_group_table tbody tr:nth-child(even) > td,
html.dark-mode .employee_review_userid_table tbody tr:nth-child(even),
html.dark-mode .employee_review_userid_table tbody tr:nth-child(even) > td,
html.dark-mode .HrWriteUps_list tbody tr:nth-child(even),
html.dark-mode .HrWriteUps_list tbody tr:nth-child(even) > td,
html.dark-mode .vehicle_list_table tbody tr:nth-child(even),
html.dark-mode .vehicle_list_table tbody tr:nth-child(even) > td,
html.dark-mode .vehicle_repair_list_table tbody tr:nth-child(even),
html.dark-mode .vehicle_repair_list_table tbody tr:nth-child(even) > td,
html.dark-mode .exp_billing_list tbody tr:nth-child(even),
html.dark-mode .exp_billing_list tbody tr:nth-child(even) > td,
html.dark-mode .recruit_tab_admin_table tbody tr:nth-child(odd),
html.dark-mode .recruit_tab_admin_table tbody tr:nth-child(odd) > td {
    background-color: transparent !important;
}

html.dark-mode .userlist_table tbody tr:hover,
html.dark-mode .userlist_table tbody tr:hover > td,
html.dark-mode #tblUserList tbody tr:hover,
html.dark-mode #tblUserList tbody tr:hover > td,
html.dark-mode .user_group_table tbody tr:hover,
html.dark-mode .user_group_table tbody tr:hover > td,
html.dark-mode .employee_review_userid_table tbody tr:hover,
html.dark-mode .employee_review_userid_table tbody tr:hover > td,
html.dark-mode .HrWriteUps_list tbody tr:hover,
html.dark-mode .HrWriteUps_list tbody tr:hover > td,
html.dark-mode .vehicle_list_table tbody tr:hover,
html.dark-mode .vehicle_list_table tbody tr:hover > td,
html.dark-mode .vehicle_repair_list_table tbody tr:hover,
html.dark-mode .vehicle_repair_list_table tbody tr:hover > td,
html.dark-mode .exp_billing_list tbody tr:hover,
html.dark-mode .exp_billing_list tbody tr:hover > td,
html.dark-mode .recruit_tab_admin_table tbody tr:hover,
html.dark-mode .recruit_tab_admin_table tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .userlist_table tbody tr td,
html.dark-mode #tblUserList tbody tr td,
html.dark-mode .user_group_table tbody tr td {
    border-color: var(--dm-border-soft) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .userlist_table .User_list_info:not(.name-anchor-style) {
    color: var(--dm-text) !important;
}

html.dark-mode .userlist_table .user_list_device_header {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .manage_user_export .ImportPanel {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .manage_user_export .ImportPanel::before {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .manage_user_export #PdfImport,
html.dark-mode .manage_user_export #ExcelImport {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .manage_user_export #PdfImport:hover,
html.dark-mode .manage_user_export #ExcelImport:hover {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

/* User Information tabs (Detail, HR, Management, Documents, User Permission, Employee Reviews) */
html.dark-mode .user_information_container .nav-tabs {
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .user_information_container .nav-tabs > li {
    border: 1px solid var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
    margin-right: 4px;
    border-radius: 4px 4px 0 0;
}

html.dark-mode .user_information_container .nav-tabs > li:not(.active) > a {
    color: var(--dm-text-muted) !important;
    background-color: transparent !important;
    border: none !important;
}

html.dark-mode .user_information_container .nav-tabs > li:hover:not(.active) {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .user_information_container .nav-tabs > li:hover:not(.active) > a {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .user_information_container .nav-tabs > li.active,
html.dark-mode .user_information_container .nav-tabs > li.active > a,
html.dark-mode .user_information_container .nav-tabs > li.active > a:hover,
html.dark-mode .user_information_container .nav-tabs > li.active > a:focus {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Employee Availability Calendar (ap_table, ap_week_table) */
html.dark-mode #EmpAvailibility .udi_information_block {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
}

html.dark-mode .ap_table tr th,
html.dark-mode .ap_week_table tr th {
    background-color: var(--dm-header-bar, #343a42) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .ap_table tr th label,
html.dark-mode .ap_week_table tr th label {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .ap_table tr td,
html.dark-mode .ap_week_table tr td {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .ap_table .monthlydate {
    background-color: var(--dm-elevated) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
    font-weight: 500;
}

html.dark-mode .ap_table .monthlyinfo {
    color: var(--dm-text) !important;
}

html.dark-mode .ap_table .monthlyinfo:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

html.dark-mode .ap_table .ea_edit {
    color: var(--dm-brand) !important;
}

/* Weekend Holiday (red / pink) in dark mode */
html.dark-mode .weekly_holyday {
    background-color: rgba(224, 82, 96, 0.15) !important;
}

html.dark-mode .weekly_holyday .monthlydate {
    background-color: rgba(224, 82, 96, 0.25) !important;
    color: #ff8591 !important;
    border-bottom: 1px solid rgba(224, 82, 96, 0.3) !important;
}

html.dark-mode .weekly_holyday .monthly-holiday-info {
    color: #ff8591 !important;
    font-weight: 600;
}

/* Normal Holiday / Day Off (amber) in dark mode */
html.dark-mode .normal_holyday {
    background-color: rgba(217, 155, 47, 0.15) !important;
}

html.dark-mode .normal_holyday .monthlydate {
    background-color: rgba(217, 155, 47, 0.25) !important;
    color: #ffd166 !important;
    border-bottom: 1px solid rgba(217, 155, 47, 0.3) !important;
}

html.dark-mode .normal_holyday .monthlyinfo {
    color: #ffd166 !important;
    font-weight: 600;
}

/* Weekly view first column */
html.dark-mode .ap_week_table tr td:first-child {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
    border-color: var(--dm-border) !important;
}

/* Calendar month/week toggles and nav */
html.dark-mode .weekbtn,
html.dark-mode .monthbtn {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .weekbtn.active-btn,
html.dark-mode .monthbtn.active-btn {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

html.dark-mode #EmpAvailibility .btn-group.monthshow .btn-default {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode #EmpAvailibility .btn-group.monthshow .btn-default:hover {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode #EmpAvailibility .month_name {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .tot_ava_hr {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
    border-top: 1px solid var(--dm-border) !important;
}

/* Scrollbars */
html.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-mode ::-webkit-scrollbar-track { background: var(--dm-bg); }
html.dark-mode ::-webkit-scrollbar-thumb { background: #3f464d; border-radius: 5px; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #4c545c; }

/* =========================================================
   RECEIVE PAYMENT / COLLECT PAYMENT MODAL
   ========================================================= */

html.dark-mode .add-invoice-container,
html.dark-mode .receive_payment_container,
html.dark-mode .receive_payment_bottom {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .add-invoice-container .div-header,
html.dark-mode .add-invoice-container .header-title {
    background-color: var(--dm-header-bar) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .add-invoice-container .custom-title-span {
    color: var(--dm-header-bar-text) !important;
}

/* Top details card */
html.dark-mode .receive_payment_top {
    background-color: var(--dm-surface) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .receive_payment_top .span-style,
html.dark-mode .receive_payment_top label,
html.dark-mode .OutStandingTransectionsTitle span {
    color: var(--dm-text) !important;
}

/* Big amount display */
html.dark-mode .receive_payment_top .amount-span-style,
html.dark-mode .receive_payment_top .amount-big {
    color: var(--dm-text-heading, #ffffff) !important;
}

/* Inputs & Addons */
html.dark-mode .receive_payment_container .form-control,
html.dark-mode .receive_payment_container input[type="text"],
html.dark-mode .receive_payment_container select {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .receive_payment_container .form-control:focus,
html.dark-mode .receive_payment_container input[type="text"]:focus,
html.dark-mode .receive_payment_container select:focus {
    border-color: var(--dm-brand) !important;
}

html.dark-mode .receive_payment_container .form-control[disabled],
html.dark-mode .receive_payment_container input[disabled] {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .currency_style .input-group-prepend .input-group-text,
html.dark-mode .currency_style .input-group-addon,
html.dark-mode .input_group_for_date .input-group-btn .btn {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Sub-forms for payment methods (ACH, Credit Card, Check, Debit, etc.) */
html.dark-mode .receive_payment_method_div {
    background-color: var(--dm-surface) !important;
}

html.dark-mode .payment_info_field {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .payment_info_field .span-style,
html.dark-mode .payment_info_field label {
    color: var(--dm-text) !important;
}

html.dark-mode .payment_info_field textarea {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode #btnSaveACHInfo,
html.dark-mode #btnSaveCreditCardInfo {
    background-color: var(--dm-brand) !important;
    color: #ffffff !important;
    border-color: var(--dm-brand) !important;
}

/* Transactions Table */
html.dark-mode #tblTransactions {
    background-color: transparent !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode #tblTransactions > thead > tr > th,
html.dark-mode #tblTransactions .thead-th-style {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .table-head-border {
    border-bottom: 2px solid var(--dm-border) !important;
}

html.dark-mode #tblTransactions tbody tr td,
html.dark-mode #tblTransactions .table-body-td-style {
    background-color: transparent !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode #tblTransactions tbody tr:hover,
html.dark-mode #tblTransactions .thead-th-style:hover,
html.dark-mode #tblTransactions .table-body-td-style:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Clear Payment Button */
html.dark-mode .btn-clear-payment {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 4px;
    transition: all 0.2s ease;
}

html.dark-mode .btn-clear-payment:hover {
    background-color: #383e46 !important;
    color: var(--dm-text-heading) !important;
    border-color: #4f5763 !important;
}

/* Footer & Buttons */
html.dark-mode .add-invoice-container + .invoice-footer,
html.dark-mode .invoice-footer {
    background-color: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
}

html.dark-mode .invoice-footer .InvoiceCancelButton,
html.dark-mode .InvoiceCancelButton {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .invoice-footer .InvoiceCancelButton:hover,
html.dark-mode .InvoiceCancelButton:hover {
    background-color: #383e46 !important;
    color: var(--dm-text-heading) !important;
    border-color: #4f5763 !important;
}

html.dark-mode .invoice-footer .InvoiceSaveButton.SaveAndSendBtn,
html.dark-mode .InvoiceSaveButton.SaveAndSendBtn {
    background-color: var(--dm-brand) !important;
    color: #ffffff !important;
    border-color: var(--dm-brand) !important;
}

/* Customer Autocomplete Dropdown in Modal */
html.dark-mode .customer_name_insert_div .tt-menu,
html.dark-mode .receive_payment_top .tt-menu {
    background-color: var(--dm-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 4px 12px var(--dm-shadow) !important;
}

html.dark-mode .customer_name_insert_div .tt-suggestion,
html.dark-mode .receive_payment_top .tt-suggestion {
    color: var(--dm-text) !important;
    border-bottom: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode .customer_name_insert_div .tt-suggestion:hover,
html.dark-mode .customer_name_insert_div .tt-suggestion.tt-cursor,
html.dark-mode .receive_payment_top .tt-suggestion:hover,
html.dark-mode .receive_payment_top .tt-suggestion.tt-cursor {
    background-color: #353c45 !important;
    color: var(--dm-text-heading) !important;
}

/* --------------------------------------------------------- the toggle itself */

.dark-mode-toggle {
    cursor: pointer;
    background: none;
    border: 0;
}

.dark-mode-toggle .fa {
    font-size: 17px;
    line-height: 1;
}

/* Show the moon in light mode, the sun in dark mode */
.dark-mode-toggle .dm-icon-dark { display: none; }
html.dark-mode .dark-mode-toggle .dm-icon-dark { display: inline-block; }
html.dark-mode .dark-mode-toggle .dm-icon-light { display: none; }

html.dark-mode .dark-mode-toggle .fa { color: #f0c451 !important; }

/* ------------------------------------------------------------------- Export as excel file modal (Reports/ExportConfirm) */
html.dark-mode body,
html.dark-mode .export_confirm_container {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .export_confirm_container .sub-header {
    background: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .export_confirm_container .cross-image {
    filter: invert(1) brightness(1.6) !important;
}

html.dark-mode .export_excel_table {
    border-color: var(--dm-border) !important;
}

html.dark-mode .export_excel_table thead,
html.dark-mode .export_excel_table thead tr th {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .export_excel_table tbody tr td {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .export_confirm_content {
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .export_confirm_content select {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .export_excel_radio_div label {
    color: var(--dm-text) !important;
}

html.dark-mode .contents {
    background-color: var(--dm-bg) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .contents_right_side {
    color: var(--dm-text) !important;
}

html.dark-mode .export_confirm_container .label-cbx {
    color: var(--dm-text) !important;
}

html.dark-mode .export_confirm_container .label-cbx b {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .export_confirm_container .label-cbx .checkbox {
    border: 2px solid var(--dm-border-strong, #666) !important;
    background-color: var(--dm-input) !important;
}

html.dark-mode .export_confirm_container .footer {
    background: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .cancelbutton {
    background-color: #d9534f !important;
    border-color: #d9534f !important;
    color: #ffffff !important;
}

html.dark-mode .okbutton {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
}

/* MagnificPopup iframe holder & wrappers */
html.dark-mode .mfp-content > div[style*="background-color"],
html.dark-mode .mfp-iframe-holder .mfp-content > div,
html.dark-mode .mfp-iframe-scaler,
html.dark-mode .mfp-iframe {
    background-color: var(--dm-surface) !important;
}

/* Print / document preview modals (TicketPreviewPopup, GetEstimate, GetInvoice, etc.) */
html.dark-mode .ticket_preview_pop,
html.dark-mode .HeadContents,
html.dark-mode .HeadContents_agreement,
html.dark-mode .HeadContents_send_email,
html.dark-mode .bodyConentsDiv,
html.dark-mode .bodyConentsDiv1,
html.dark-mode .footerContents {
    background-color: transparent !important;
}

html.dark-mode .HeadContents h4,
html.dark-mode .HeadContents_agreement h4,
html.dark-mode .HeadContents_send_email h4 {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .HeadContents span,
html.dark-mode .HeadContents_agreement span,
html.dark-mode .HeadContents_send_email span {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .CloseButtonDiv img {
    filter: invert(1) brightness(0.9);
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

html.dark-mode .CloseButtonDiv img:hover {
    opacity: 1;
}

html.dark-mode .btnCancel {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .btnCancel:hover {
    background-color: var(--dm-surface) !important;
    border-color: #4a5056 !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .bodyConentsDiv iframe,
html.dark-mode .bodyConentsDiv1 iframe,
html.dark-mode iframe.pdf-styles {
    border-color: var(--dm-border) !important;
}

/* Ticket Checklist Modal */
html.dark-mode #TicketChecklistModal .modal-content {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode #TicketChecklistModal .checklist-modal-header:before,
html.dark-mode #TicketChecklistModal .checklist-modal-header:after,
html.dark-mode #TicketChecklistModal .modal-footer:before,
html.dark-mode #TicketChecklistModal .modal-footer:after {
    display: none !important;
}

html.dark-mode #TicketChecklistModal .checklist-modal-header {
    background-color: var(--dm-header-bar) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-header-bar-text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

html.dark-mode #TicketChecklistModal .modal-body {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text) !important;
}

html.dark-mode #TicketChecklistModal .modal-footer {
    background-color: var(--dm-surface) !important;
    border-top-color: var(--dm-border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

html.dark-mode #TicketChecklistModal .modal-footer .btn-default {
    background-color: var(--dm-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode #TicketChecklistModal .modal-footer .btn-default:hover {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-text-muted) !important;
}

html.dark-mode .chk-item {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .chk-item:hover {
    border-color: #4b5563 !important;
}

html.dark-mode .chk-title {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .chk-field label {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .chk-file {
    background-color: var(--dm-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .chk-file:hover,
html.dark-mode .chk-file:focus {
    border-color: #2ca01c !important;
}

html.dark-mode .chk-current-file {
    background-color: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    color: #4ade80 !important;
}

html.dark-mode .chk-current-file a {
    color: #4ade80 !important;
}

html.dark-mode .chk-badge.chk-yes {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark-mode .chk-badge.chk-no {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .chk-sub-section {
    background-color: var(--dm-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .chk-company-name {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .chk-credit-grade {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* ------------------------------------------------------------- Inventory tabs */
html.dark-mode .Inventory-Page-wrap .nav-tabs,
html.dark-mode #InventoryTable,
html.dark-mode #InventoryTechTab,
html.dark-mode .TechPurchaseOrderListPartial_container .nav-tabs,
html.dark-mode #myTab,
html.dark-mode #myTransfferLogTab {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .Inventory-Page-wrap .nav-tabs > li,
html.dark-mode #InventoryTable > li,
html.dark-mode #InventoryTechTab > li,
html.dark-mode .TechPurchaseOrderListPartial_container .nav-tabs > li,
html.dark-mode #myTab > li,
html.dark-mode #myTransfferLogTab > li {
    border: 1px solid var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
}

html.dark-mode .Inventory-Page-wrap .nav-tabs > li > a,
html.dark-mode #InventoryTable > li > a,
html.dark-mode #InventoryTechTab > li > a,
html.dark-mode .TechPurchaseOrderListPartial_container .nav-tabs > li > a,
html.dark-mode #myTab > li > a,
html.dark-mode #myTransfferLogTab > li > a {
    color: var(--dm-text-muted) !important;
    background-color: transparent !important;
    border: none !important;
}

html.dark-mode .Inventory-Page-wrap .nav-tabs > li:not(.active):hover,
html.dark-mode #InventoryTable > li:not(.active):hover,
html.dark-mode #InventoryTechTab > li:not(.active):hover,
html.dark-mode .TechPurchaseOrderListPartial_container .nav-tabs > li:not(.active):hover,
html.dark-mode #myTab > li:not(.active):hover,
html.dark-mode #myTransfferLogTab > li:not(.active):hover {
    background-color: var(--dm-elevated) !important;
}

html.dark-mode .Inventory-Page-wrap .nav-tabs > li:not(.active) > a:hover,
html.dark-mode #InventoryTable > li:not(.active) > a:hover,
html.dark-mode #InventoryTechTab > li:not(.active) > a:hover,
html.dark-mode .TechPurchaseOrderListPartial_container .nav-tabs > li:not(.active) > a:hover,
html.dark-mode #myTab > li:not(.active) > a:hover,
html.dark-mode #myTransfferLogTab > li:not(.active) > a:hover {
    color: var(--dm-text-heading) !important;
    background-color: transparent !important;
}

/* Active tab: in light mode the view sets brand green on li.active and white text.
   Ensure both li.active and anchor render consistently brand green with white text in dark mode. */
html.dark-mode .Inventory-Page-wrap .nav-tabs > li.active,
html.dark-mode .Inventory-Page-wrap .nav-tabs > li.active > a,
html.dark-mode .Inventory-Page-wrap .nav-tabs > li.active > a:hover,
html.dark-mode .Inventory-Page-wrap .nav-tabs > li.active > a:focus,
html.dark-mode #InventoryTable > li.active,
html.dark-mode #InventoryTable > li.active > a,
html.dark-mode #InventoryTable > li.active > a:hover,
html.dark-mode #InventoryTable > li.active > a:focus,
html.dark-mode #InventoryTechTab > li.active,
html.dark-mode #InventoryTechTab > li.active > a,
html.dark-mode #InventoryTechTab > li.active > a:hover,
html.dark-mode #InventoryTechTab > li.active > a:focus,
html.dark-mode .TechPurchaseOrderListPartial_container .nav-tabs > li.active,
html.dark-mode .TechPurchaseOrderListPartial_container .nav-tabs > li.active > a,
html.dark-mode .TechPurchaseOrderListPartial_container .nav-tabs > li.active > a:hover,
html.dark-mode .TechPurchaseOrderListPartial_container .nav-tabs > li.active > a:focus,
html.dark-mode #myTab > li.active,
html.dark-mode #myTab > li.active > a,
html.dark-mode #myTab > li.active > a:hover,
html.dark-mode #myTab > li.active > a:focus,
html.dark-mode #myTransfferLogTab > li.active,
html.dark-mode #myTransfferLogTab > li.active > a,
html.dark-mode #myTransfferLogTab > li.active > a:hover,
html.dark-mode #myTransfferLogTab > li.active > a:focus {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------- Inventory Loaders & Toolbar Background */
html.dark-mode .Inventory-Page-wrap .header-content,
html.dark-mode .inventory_tab_content .header-content,
html.dark-mode .filter-inventory-equipments,
html.dark-mode .filter-inventory-equipmentstech,
html.dark-mode .filter-inventory-equipmentsBranch,
html.dark-mode .invoice-loader,
html.dark-mode .ListViewLoader,
html.dark-mode .lds-css,
html.dark-mode .lds-double-ring,
html.dark-mode .LoaderWorkingDiv {
    background: transparent !important;
    background-color: transparent !important;
}

/* ------------------------------------------------------------- Inventory tables & borders */
html.dark-mode #tbleq_filter,
html.dark-mode .fil_equ_list_cont #tbleq_filter,
html.dark-mode .techinventory_inventory #tbleq_filter,
html.dark-mode .inventory_list_table_custom,
html.dark-mode #tblBI,
html.dark-mode #tblPO,
html.dark-mode #tblPO_tech,
html.dark-mode #tblPO_techDemand,
html.dark-mode #tblVideo,
html.dark-mode .purchase_order_list_partial_table {
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .table-head-border,
html.dark-mode thead.fil_eqi_list_header,
html.dark-mode thead.table-head-border {
    border-top: 1px solid var(--dm-border) !important;
    border-bottom: 2px solid var(--dm-border) !important;
    background-color: var(--dm-header-bar) !important;
}

html.dark-mode .table-head-border th,
html.dark-mode thead.fil_eqi_list_header th,
html.dark-mode #tbleq_filter thead tr th,
html.dark-mode #tblBI thead tr th,
html.dark-mode #tblPO thead tr th,
html.dark-mode #tblPO_tech thead tr th,
html.dark-mode #tblPO_techDemand thead tr th {
    border-top-color: var(--dm-border) !important;
    border-bottom-color: var(--dm-border) !important;
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode .fil_equ_list_cont .th_timeclock_pre,
html.dark-mode .fil_equ_list_cont .th_timeclock,
html.dark-mode .th_timeclock_pre,
html.dark-mode .th_timeclock {
    border-right: 1px solid var(--dm-border) !important;
}

html.dark-mode .inventory_list_table_custom tbody tr td,
html.dark-mode #tbleq_filter tbody tr td,
html.dark-mode #tblBI tbody tr td,
html.dark-mode #tblPO tbody tr td,
html.dark-mode #tblPO_tech tbody tr td,
html.dark-mode #tblPO_techDemand tbody tr td,
html.dark-mode .product_and_services_table table tbody tr td,
html.dark-mode .purchase_order_list_partial_table tbody tr td {
    border: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode #tblBI thead tr,
html.dark-mode #tblBI tbody tr,
html.dark-mode #tblPO_tech tbody tr,
html.dark-mode #tblPO_techDemand tbody tr,
html.dark-mode .purchase_order_list_partial_table tbody tr,
html.dark-mode #tblPaidCommissionReport tbody tr,
html.dark-mode #tblTickets tbody tr,
html.dark-mode #tblTransfers tbody tr,
html.dark-mode .inventory-list {
    border-color: var(--dm-border-soft) !important;
}

/* ------------------------------------------------------------- Technician List */
html.dark-mode .technicianListHeader {
    background-color: var(--dm-header-bar, #2a2e33) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .techListTitle {
    color: var(--dm-header-bar-text, #ffffff) !important;
}

html.dark-mode .technicianListContent,
html.dark-mode .technicianListContentPurchase {
    background-color: var(--dm-surface, #1f2225) !important;
    border-color: var(--dm-border, #383d42) !important;
    color: var(--dm-text, #c9d1d9) !important;
}

html.dark-mode .technicianListContent div,
html.dark-mode .technicianListContentPurchase div {
    color: var(--dm-text, #c9d1d9) !important;
}

html.dark-mode .technicianListContent:hover,
html.dark-mode .technicianListContentPurchase:hover {
    background-color: var(--dm-elevated, #2a2e33) !important;
    color: var(--dm-text-heading, #ffffff) !important;
}

html.dark-mode .technicianListContent:hover div,
html.dark-mode .technicianListContentPurchase:hover div {
    color: var(--dm-text-heading, #ffffff) !important;
}

html.dark-mode .technicianListContent.activetechlist,
html.dark-mode .technicianListContentPurchase.activetechlist,
html.dark-mode .activetechlist {
    background-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

html.dark-mode .activetechlist::after {
    border-left: 10px solid var(--dm-brand, #2ca01c) !important;
}

html.dark-mode .technicianListContent.activetechlist div,
html.dark-mode .technicianListContentPurchase.activetechlist div,
html.dark-mode .activetechlist div {
    color: #ffffff !important;
}

/* ------------------------------------------------------------- Tech Transfer & DO Buttons */
html.dark-mode .button_position .equipment-new:not([style*="#ff2c2c"]),
html.dark-mode .button_position .btn-receive-tech {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}

html.dark-mode .button_position .equipment-new:not([style*="#ff2c2c"]):hover,
html.dark-mode .button_position .btn-receive-tech:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}

html.dark-mode .button_position [style*="#ff2c2c"],
html.dark-mode .button_position .btn-decline-tech {
    background-color: #e53935 !important;
    border-color: #e53935 !important;
    color: #ffffff !important;
}

html.dark-mode .button_position [style*="#ff2c2c"]:hover,
html.dark-mode .button_position .btn-decline-tech:hover {
    background-color: #c62828 !important;
    border-color: #c62828 !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------- Bootstrap Select Dropdown ("Blue hobe na transparent thakbe") */
html.dark-mode .bootstrap-select .dropdown-menu {
    background-color: var(--dm-surface, #1e2227) !important;
    border: 1px solid var(--dm-border, #3a3f45) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

html.dark-mode .bootstrap-select .dropdown-menu > li > a {
    color: var(--dm-text, #d0d4dc) !important;
    background-color: transparent !important;
}

html.dark-mode .bootstrap-select .dropdown-menu > li.selected > a,
html.dark-mode .bootstrap-select .dropdown-menu > .active > a,
html.dark-mode .bootstrap-select.btn-group .dropdown-menu li.selected a,
html.dark-mode .bootstrap-select.btn-group .dropdown-menu li.active a {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--dm-text-heading, #ffffff) !important;
}

html.dark-mode .bootstrap-select .dropdown-menu > li > a:hover,
html.dark-mode .bootstrap-select .dropdown-menu > li > a:focus,
html.dark-mode .bootstrap-select .dropdown-menu > li.selected > a:hover,
html.dark-mode .bootstrap-select .dropdown-menu > li.selected > a:focus,
html.dark-mode .bootstrap-select.btn-group .dropdown-menu li:not(.disabled) a:hover {
    background-color: var(--dm-elevated, #2a2f36) !important;
    color: var(--dm-text-heading, #ffffff) !important;
}

html.dark-mode .bootstrap-select .dropdown-menu li.selected a span.check-mark {
    color: var(--dm-brand, #2ca01c) !important;
}

html.dark-mode .bootstrap-select .bs-searchbox input {
    background-color: var(--dm-bg, #14171a) !important;
    color: var(--dm-text, #d0d4dc) !important;
    border: 1px solid var(--dm-border, #3a3f45) !important;
}

html.dark-mode .bootstrap-select .bs-actionsbox .btn {
    background-color: var(--dm-elevated, #2a2f36) !important;
    border-color: var(--dm-border, #3a3f45) !important;
    color: var(--dm-text-heading, #ffffff) !important;
}

/* ------------------------------------------------------------- Detailed Equipment History Drawer */
html.dark-mode .apo_inventory,
html.dark-mode .apo_inventory .PoContentScroll {
    background-color: var(--dm-bg, #14171a) !important;
}

html.dark-mode #tblTickets,
html.dark-mode #tblTransfers {
    border: 1px solid var(--dm-border, #383d42) !important;
    background-color: var(--dm-surface, #1f2225) !important;
}

html.dark-mode #tblTickets thead tr th,
html.dark-mode #tblTransfers thead tr th {
    background-color: var(--dm-header-bar, #2a2e33) !important;
    color: var(--dm-header-bar-text, #ffffff) !important;
    border-color: var(--dm-border, #383d42) !important;
}

html.dark-mode #tblTickets tbody tr td,
html.dark-mode #tblTransfers tbody tr td {
    border-color: var(--dm-border, #383d42) !important;
    color: var(--dm-text, #c9d1d9) !important;
}

html.dark-mode #tblTickets a,
html.dark-mode #tblTransfers a {
    color: var(--dm-brand, #2ca01c) !important;
}

/* ------------------------------------------------------------- Equipment Detail */
html.dark-mode #myEquipmentTab {
    border-bottom: 1px solid var(--dm-border) !important;
    margin-bottom: 0px !important;
}

html.dark-mode #myEquipmentTab > li:last-child {
    background-color: transparent !important;
    border: none !important;
}

html.dark-mode .EquipmentDetailDiv {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    margin: 10px 0px !important;
    border-radius: 4px !important;
    padding: 10px !important;
}

html.dark-mode .DetailDiv_heading,
html.dark-mode .HistoryDiv_heading,
html.dark-mode .VendorPrice_heading {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .DetailDiv_heading span,
html.dark-mode .HistoryDiv_heading span,
html.dark-mode .VendorPrice_heading span {
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode .DetailDiv table,
html.dark-mode .HistoryDiv table,
html.dark-mode .VendorPriceTable {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
}

html.dark-mode .EquipmentDetailDiv table tr,
html.dark-mode .DetailDiv table tr,
html.dark-mode .HistoryDiv table tr,
html.dark-mode .VendorPriceTable tr {
    border-bottom-color: var(--dm-border-soft) !important;
}

html.dark-mode .DetailDiv table tr td,
html.dark-mode .HistoryDiv table tr td,
html.dark-mode .VendorPriceTable tr td,
html.dark-mode .VendorPriceTable thead tr th,
html.dark-mode .HistoryDiv table thead tr td {
    color: var(--dm-text) !important;
}

html.dark-mode .DetailDiv table tr:nth-child(even),
html.dark-mode .HistoryDiv table tbody tr:nth-child(even),
html.dark-mode .VendorPriceTable tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html.dark-mode .DetailDiv table tr:hover,
html.dark-mode .HistoryDiv table tbody tr:hover,
html.dark-mode .VendorPriceTable tbody tr:hover {
    background-color: var(--dm-elevated) !important;
}

html.dark-mode .add_product_history {
    background-color: var(--dm-brand) !important;
    color: #ffffff !important;
    border: none !important;
}

html.dark-mode .add_product_history:hover {
    background-color: #258817 !important;
}

html.dark-mode .add_product_history i {
    color: #ffffff !important;
}

html.dark-mode #myEquipmentTab > li {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
}

html.dark-mode #myEquipmentTab > li > a {
    color: var(--dm-text) !important;
}

html.dark-mode #myEquipmentTab > li.active {
    background-color: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
}

html.dark-mode #myEquipmentTab > li.active > a {
    color: #ffffff !important;
}

html.dark-mode .equipment_detail_page_back_btn {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .equipment_detail_page_back_btn:hover {
    color: var(--dm-brand) !important;
}

/* ------------------------------------------------------------- Login 2FA */
html.dark-mode #twoFASection .two-fa-card {
    background-color: transparent !important;
    background: transparent !important;
}

html.dark-mode #twoFASection .two-fa-header p,
html.dark-mode #twoFASection .text-muted {
    color: var(--dm-text-muted) !important;
}

html.dark-mode #twoFASection .method-content {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode #twoFASection .method-content:hover {
    border-color: #50565e !important;
}

html.dark-mode #twoFASection .method-content i {
    color: var(--dm-text-muted) !important;
}

html.dark-mode #twoFASection .method-label {
    color: var(--dm-text-heading) !important;
}

html.dark-mode #twoFASection .masked-info {
    background-color: var(--dm-input) !important;
    color: var(--dm-text-muted) !important;
    border: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode #twoFASection .method-item input:checked + .method-content {
    border-color: #4A90E2 !important;
    background-color: rgba(74, 144, 226, 0.16) !important;
}

html.dark-mode #twoFASection .method-item input:checked + .method-content i {
    color: #5aa9f8 !important;
}

html.dark-mode #twoFASection .method-item input:checked + .method-content .method-label {
    color: #ffffff !important;
}

html.dark-mode #twoFASection .method-item input:checked + .method-content .masked-info {
    background-color: rgba(74, 144, 226, 0.25) !important;
    color: #8cc3fa !important;
    border-color: rgba(74, 144, 226, 0.35) !important;
}

html.dark-mode #twoFASection #otpBox hr {
    border-color: var(--dm-border) !important;
}

html.dark-mode #twoFASection #otpBox .small-text {
    color: var(--dm-text-muted) !important;
}

html.dark-mode #twoFASection .otp-field {
    background-color: var(--dm-input) !important;
    color: var(--dm-text-heading) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode #twoFASection .otp-field:focus {
    border-color: #4A90E2 !important;
}

html.dark-mode #twoFASection #Backbtn {
    color: var(--dm-link) !important;
}

html.dark-mode #twoFASection #Backbtn:hover {
    color: var(--dm-link-hover) !important;
}

/* ------------------------------------------------------------- Customer / Equipment File */
html.dark-mode #tblFileCustomer,
html.dark-mode .tblFileCustomer,
html.dark-mode #tblFileCompany,
html.dark-mode .ld_act_customer_file_table {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode #tblFileCustomer thead tr th,
html.dark-mode .tblFileCustomer thead tr th,
html.dark-mode #tblFileCompany thead tr th,
html.dark-mode .ld_act_customer_file_table thead tr th {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 2px solid var(--dm-border) !important;
    border-top-color: var(--dm-border) !important;
}

html.dark-mode #tblFileCustomer thead tr th:hover,
html.dark-mode .tblFileCustomer thead tr th:hover,
html.dark-mode #tblFileCompany thead tr th:hover {
    background-color: var(--dm-elevated) !important;
}

html.dark-mode #tblFileCustomer > tbody > tr:nth-child(even),
html.dark-mode .tblFileCustomer tbody tr:nth-child(even),
html.dark-mode #tblFileCompany tbody tr:nth-child(even),
html.dark-mode .ld_act_customer_file_table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html.dark-mode #tblFileCustomer > tbody > tr:nth-child(odd),
html.dark-mode .tblFileCustomer tbody tr:nth-child(odd),
html.dark-mode #tblFileCompany tbody tr:nth-child(odd),
html.dark-mode .ld_act_customer_file_table tbody tr:nth-child(odd),
html.dark-mode .tblFileCustomer tbody tr.odd,
html.dark-mode .tblFileCustomer tbody tr.even {
    background-color: transparent !important;
}

html.dark-mode #tblFileCustomer > tbody > tr:hover,
html.dark-mode .tblFileCustomer tbody tr:hover,
html.dark-mode #tblFileCompany tbody tr:hover,
html.dark-mode .ld_act_customer_file_table tbody tr:hover,
html.dark-mode .tblFileCustomer tbody tr.odd:hover,
html.dark-mode .tblFileCustomer tbody tr.even:hover {
    background-color: var(--dm-elevated) !important;
}

html.dark-mode #tblFileCustomer tbody tr td,
html.dark-mode .tblFileCustomer tbody tr td,
html.dark-mode #tblFileCompany tbody tr td,
html.dark-mode .ld_act_customer_file_table tbody tr td {
    color: var(--dm-text) !important;
    border-bottom: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode #tblFileCustomer tbody td.dataTables_empty,
html.dark-mode .tblFileCustomer tbody td.dataTables_empty,
html.dark-mode #tblFileCompany tbody td.dataTables_empty,
html.dark-mode .ld_act_customer_file_table tbody td.dataTables_empty {
    color: var(--dm-text-muted) !important;
    background-color: transparent !important;
}

html.dark-mode #tblFileCustomer_paginate .paginate_button,
html.dark-mode .EquipmentFile_Load .dataTables_paginate .paginate_button {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode #tblFileCustomer_paginate .paginate_button.disabled,
html.dark-mode .EquipmentFile_Load .dataTables_paginate .paginate_button.disabled {
    background: var(--dm-bg) !important;
    color: var(--dm-text-muted) !important;
    border-color: var(--dm-border-soft) !important;
}

html.dark-mode #tblFileCustomer_paginate .paginate_button:hover:not(.disabled),
html.dark-mode .EquipmentFile_Load .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: var(--dm-elevated) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode #tblFileCustomer_paginate .paginate_button.current,
html.dark-mode .EquipmentFile_Load .dataTables_paginate .paginate_button.current {
    background: var(--dm-brand) !important;
    border-color: var(--dm-brand) !important;
    color: #ffffff !important;
}

html.dark-mode #tblFileCustomer_info,
html.dark-mode .EquipmentFile_Load .dataTables_info {
    color: var(--dm-text-muted) !important;
}

/* ------------------------------------------------------------- Manual Inventory drawer */
html.dark-mode .manual_inventory_container {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .manual_inventory_header {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .manual_inventory_inner label,
html.dark-mode .manual_inventory_inner span {
    color: var(--dm-text) !important;
}

html.dark-mode .bootstrap-select > .btn,
html.dark-mode .bootstrap-select .dropdown-toggle {
    background-color: var(--dm-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .bootstrap-select .dropdown-menu {
    background-color: var(--dm-elevated) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .bootstrap-select .dropdown-menu li a {
    color: var(--dm-text) !important;
}

html.dark-mode .bootstrap-select .dropdown-menu li a:hover,
html.dark-mode .bootstrap-select .dropdown-menu li.selected a {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .manual_inventory_footer {
    background-color: var(--dm-elevated) !important;
    border-top: 1px solid var(--dm-border) !important;
}

html.dark-mode .manual_inventory_footer .btn,
html.dark-mode .manual_inventory_footer button {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}

html.dark-mode .manual_inventory_footer .btn:hover,
html.dark-mode .manual_inventory_footer button:hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------- Add/Edit Equipment Drawer */
html.dark-mode .addequipment_div,
html.dark-mode .add_equipment_contents,
html.dark-mode .add_equipment_container,
html.dark-mode .add_equipment_container_height {
    background-color: var(--dm-surface, #1f2225) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_equip_header {
    background-color: var(--dm-header-bar, #343a42) !important;
    color: var(--dm-header-bar-text, #f2f4f6) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .equipment_info_block,
html.dark-mode .equipment_info_block_for_Addequipment {
    background-color: var(--dm-surface, #1f2225) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .equipment_info_block_header {
    background-color: var(--dm-header-bar, #343a42) !important;
    color: var(--dm-header-bar-text, #f2f4f6) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .span-style,
html.dark-mode .add_equip_check_text,
html.dark-mode .service_info_check_left .lbl-CheckBoxText,
html.dark-mode .service_info_check_right .lbl-CheckBoxText {
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_equip_footer_section,
html.dark-mode .add_equipment_contents .footer-section {
    background-color: var(--dm-elevated, #282c30) !important;
    border-top: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .btn-save-Inventory-product {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}

html.dark-mode .btn-save-Inventory-product:hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #ffffff !important;
}

html.dark-mode .add_equipment_container .btn:not(.btn-save-Inventory-product) {
    background-color: var(--dm-elevated, #282c30) !important;
    border-color: var(--dm-border, #383d42) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_equipment_container .form-control {
    background-color: var(--dm-input, #212427) !important;
    border-color: var(--dm-border, #383d42) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .vendor_list_table thead tr {
    border-bottom: 2px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .vendor_list_table thead tr th {
    background-color: var(--dm-header-bar, #343a42) !important;
    color: var(--dm-header-bar-text, #f2f4f6) !important;
}

html.dark-mode .vendor_list_table tbody tr {
    border-bottom: 1px solid var(--dm-border-soft, #2c3034) !important;
    background-color: transparent !important;
}

html.dark-mode .vendor_list_table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html.dark-mode .vendor_list_table tbody tr:hover {
    background-color: var(--dm-elevated, #282c30) !important;
}

html.dark-mode .vendor_list_table tbody tr td {
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .primaryrow {
    background-color: var(--dm-elevated, #282c30) !important;
    color: var(--dm-text-heading, #f2f4f6) !important;
}

html.dark-mode .add_equipment_contents .tt-menu {
    background-color: var(--dm-elevated, #282c30) !important;
    color: var(--dm-text, #e3e5e8) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .add_equipment_contents .tt-suggestion {
    border-bottom: 1px solid var(--dm-border-soft, #2c3034) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_equipment_contents .tt-suggestion:hover {
    background-color: var(--dm-surface, #1f2225) !important;
}

/* ------------------------------------------------------------- Location Inventory List Modal */
html.dark-mode .techEquipmentDetaiPartial_container,
html.dark-mode .tedp_inner {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .tedp_heading {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .tedp_table thead tr {
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .tedp_table thead tr th {
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    border-top: none !important;
}

html.dark-mode .tedp_table tbody tr {
    border-bottom: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode .tedp_table tbody tr td {
    color: var(--dm-text) !important;
    border-bottom: 1px solid var(--dm-border-soft) !important;
}

/* ------------------------------------------------------------- Mass PO, Mass Restock & Tech Reorder Point */
html.dark-mode .add_mass_po_container,
html.dark-mode .add_mass_restock_container {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .add_mass_po_header,
html.dark-mode .header_title_avb,
html.dark-mode .avb_div_header,
html.dark-mode .avb_invoice_informations {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .RestockDataLoadPanelHeading {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .RestockDataLoadPanelHeading .panel-title a,
html.dark-mode .RestockDataLoadPanelHeading .accordion_header {
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode .RestockDataLoadPanelHeading .panel-title span {
    color: var(--dm-text-muted) !important;
}

html.dark-mode #CustomerMassPOTab thead tr th,
html.dark-mode #CustomerMassRestockTab thead tr th,
html.dark-mode .add_mass_restock_container #CustomerMassRestockTab thead tr th {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode #CustomerMassPOTab tbody tr,
html.dark-mode #CustomerMassRestockTab tbody tr,
html.dark-mode .add_mass_restock_container #CustomerMassRestockTab tbody tr {
    background-color: transparent !important;
    border-bottom: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode #CustomerMassPOTab tbody tr:nth-child(odd),
html.dark-mode #CustomerMassRestockTab tbody tr:nth-child(odd),
html.dark-mode .add_mass_restock_container #CustomerMassRestockTab tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html.dark-mode #CustomerMassPOTab tbody tr:hover,
html.dark-mode #CustomerMassRestockTab tbody tr:hover,
html.dark-mode .add_mass_restock_container #CustomerMassRestockTab tbody tr:hover {
    background-color: var(--dm-elevated) !important;
}

html.dark-mode #CustomerMassPOTab tbody tr td,
html.dark-mode #CustomerMassRestockTab tbody tr td,
html.dark-mode .add_mass_restock_container #CustomerMassRestockTab tbody tr td {
    color: var(--dm-text) !important;
    border-color: var(--dm-border-soft) !important;
}

html.dark-mode #CustomerMassPOTab tbody tr td input {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode #CustomerMassPOTab tbody tr:hover td input {
    background-color: var(--dm-input) !important;
}

html.dark-mode .SaveaButtonsDivMass button,
html.dark-mode .SaveaButtonsDivMass .btn {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}

html.dark-mode .SaveaButtonsDivMass button:hover,
html.dark-mode .SaveaButtonsDivMass .btn:hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #ffffff !important;
}

/* Purchase Order & Demand Order Filters */
html.dark-mode .bi_single_filte_info_container {
    background: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode .bi_single_filter_info_footer {
    background-color: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
}

/* Purchase Order & Demand Order Tables */
html.dark-mode #CustomerInvoiceTab thead tr th {
    background-color: var(--dm-header-bar) !important;
    color: var(--dm-header-bar-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode #CustomerInvoiceTab thead tr th span {
    color: var(--dm-header-bar-text) !important;
}

html.dark-mode #CustomerInvoiceTab tbody tr,
html.dark-mode #CustomerInvoiceTab tbody tr.HasItem,
html.dark-mode #CustomerInvoiceTab tbody tr[style*="#f2f2f2"],
html.dark-mode #CustomerInvoiceTab tbody tr.HasItem[style*="#f2f2f2"] {
    background-color: transparent !important;
    border-bottom: 1px solid var(--dm-border-soft) !important;
}

html.dark-mode #CustomerInvoiceTab tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html.dark-mode #CustomerInvoiceTab tbody tr:hover {
    background-color: var(--dm-elevated) !important;
}

html.dark-mode #CustomerInvoiceTab tbody tr td {
    color: var(--dm-text) !important;
    border-color: var(--dm-border-soft) !important;
}

html.dark-mode #CustomerInvoiceTab tbody tr td input {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode #CustomerInvoiceTab tbody tr td input:focus {
    border-color: var(--dm-brand, #2ca01c) !important;
}

html.dark-mode #CustomerInvoiceTab tbody tr td .input-group-text {
    background-color: var(--dm-elevated) !important;
    color: var(--dm-text-muted) !important;
    border-color: var(--dm-border) !important;
}

/* PO & DO Action Buttons */
html.dark-mode .invoice-footer .CheckPrintAndSendInvoice,
html.dark-mode .invoice-footer .SaveAndSendBtn,
html.dark-mode .invoice-footer .UpdateRatebtn,
html.dark-mode .invoice-footer .updaterateb,
html.dark-mode .add_demand_order_footer .InvoiceSaveButton {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}

html.dark-mode .invoice-footer .CheckPrintAndSendInvoice:hover,
html.dark-mode .invoice-footer .SaveAndSendBtn:hover,
html.dark-mode .invoice-footer .UpdateRatebtn:hover,
html.dark-mode .invoice-footer .updaterateb:hover,
html.dark-mode .add_demand_order_footer .InvoiceSaveButton:hover {
    background-color: #238016 !important;
    border-color: #238016 !important;
    color: #ffffff !important;
}

/* =========================================================
   MESSAGE & CONFIRMATION MODALS (_Modals.cshtml)
   ========================================================= */
html.dark-mode #ModalConfirmationMessage .modal-content,
html.dark-mode #ModalSuccessMessage .modal-content,
html.dark-mode #ModalErrorMessage .modal-content,
html.dark-mode #ModalCautionMessage .modal-content,
html.dark-mode #ModalLeaveMessage .modal-content,
html.dark-mode #ModalSuccessIeateryPopup .modal-content,
html.dark-mode #CustomerToLeadModalConfirmationMessage .modal-content,
html.dark-mode #ModalOpenText .modal-content,
html.dark-mode #ModalCancelCustomer .modal-content {
    background-color: var(--dm-surface, #21262d) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    border-radius: 6px !important;
}

/* Header container must NOT have the global .modal-header background */
html.dark-mode #ModalConfirmationMessage .message_header_container,
html.dark-mode #ModalSuccessMessage .message_header_container,
html.dark-mode #ModalErrorMessage .message_header_container,
html.dark-mode #ModalCautionMessage .message_header_container,
html.dark-mode #ModalLeaveMessage .message_header_container,
html.dark-mode #ModalSuccessIeateryPopup .message_header_container,
html.dark-mode #CustomerToLeadModalConfirmationMessage .message_header_container,
html.dark-mode .modal .message_header_container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
}

/* Header border horizontal line */
html.dark-mode #ModalConfirmationMessage .message_header_border,
html.dark-mode #CustomerToLeadModalConfirmationMessage .message_header_border,
html.dark-mode #ModalLeaveMessage .message_header_border {
    border-bottom: 1px solid rgba(240, 173, 78, 0.4) !important;
}
html.dark-mode #ModalSuccessMessage .message_header_border,
html.dark-mode #ModalSuccessIeateryPopup .message_header_border {
    border-bottom: 1px solid rgba(92, 184, 92, 0.4) !important;
}
html.dark-mode #ModalErrorMessage .message_header_border,
html.dark-mode #ModalCautionMessage .message_header_border {
    border-bottom: 1px solid rgba(217, 83, 79, 0.4) !important;
}

/* Title element sits on top of the border line with matching background */
html.dark-mode .message_header_title,
html.dark-mode .message_header_title_credit {
    background-color: var(--dm-surface, #21262d) !important;
    color: var(--dm-text-heading, #ffffff) !important;
    padding: 0 16px !important;
    width: auto !important;
    display: inline-block !important;
}

html.dark-mode #ModalConfirmationMessage .message_header_title,
html.dark-mode #CustomerToLeadModalConfirmationMessage .message_header_title,
html.dark-mode #ModalLeaveMessage .message_header_title {
    color: #f0ad4e !important;
}
html.dark-mode #ModalSuccessMessage .message_header_title,
html.dark-mode #ModalSuccessIeateryPopup .message_header_title {
    color: #5cb85c !important;
}
html.dark-mode #ModalErrorMessage .message_header_title,
html.dark-mode #ModalCautionMessage .message_header_title {
    color: #d9534f !important;
}

html.dark-mode .modal-title:empty,
html.dark-mode .message_header_title:empty {
    display: none !important;
}

/* Modal Content Body Text */
html.dark-mode #ModalConfirmationMessage .message_content_div,
html.dark-mode #ModalSuccessMessage .message_content_div,
html.dark-mode #ModalErrorMessage .message_content_div,
html.dark-mode #ModalCautionMessage .message_content_div,
html.dark-mode #ModalLeaveMessage .message_content_div,
html.dark-mode .message_content_div .cus-body,
html.dark-mode .message_content_div .cus-body p {
    color: var(--dm-text-primary, #e6edf3) !important;
}

/* Modal Footer */
html.dark-mode #ModalConfirmationMessage .modal-footer,
html.dark-mode #ModalSuccessMessage .modal-footer,
html.dark-mode #ModalErrorMessage .modal-footer,
html.dark-mode #ModalCautionMessage .modal-footer,
html.dark-mode #ModalLeaveMessage .modal-footer,
html.dark-mode #ModalConfirmationMessage .success-footer,
html.dark-mode #ModalLeaveMessage .success-footer {
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
    padding: 10px 20px 20px !important;
}

/* Close Button (X) */
html.dark-mode #ModalConfirmationMessage .closenew,
html.dark-mode #ModalSuccessMessage .closenew,
html.dark-mode #ModalErrorMessage .closenew,
html.dark-mode #ModalCautionMessage .closenew,
html.dark-mode #ModalLeaveMessage .closenew,
html.dark-mode .closenew,
html.dark-mode button.closenew {
    color: var(--dm-text-muted, #8b949e) !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
}
html.dark-mode .closenew:hover,
html.dark-mode .closenew:focus,
html.dark-mode button.closenew:hover,
html.dark-mode button.closenew:focus {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Yes / No Buttons */
html.dark-mode #ModalConfirmationMessage .btn-no,
html.dark-mode #ModalLeaveMessage .btn-no,
html.dark-mode .modal-footer .red_button {
    background-color: #d9534f !important;
    border-color: #d9534f !important;
    color: #ffffff !important;
}
html.dark-mode #ModalConfirmationMessage .btn-no:hover,
html.dark-mode #ModalLeaveMessage .btn-no:hover,
html.dark-mode .modal-footer .red_button:hover {
    background-color: #c9302c !important;
    border-color: #c9302c !important;
    color: #ffffff !important;
}

html.dark-mode #ModalConfirmationMessage .btn-green,
html.dark-mode #ModalLeaveMessage .btn-green,
html.dark-mode .modal-footer .green_button {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode #ModalConfirmationMessage .btn-green:hover,
html.dark-mode #ModalLeaveMessage .btn-green:hover,
html.dark-mode .modal-footer .green_button:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}

/* =========================================================
   BOOTSTRAP-SELECT / MULTI-SELECT DROPDOWNS
   ========================================================= */
html.dark-mode .bootstrap-select.btn-group .dropdown-menu,
html.dark-mode .bootstrap-select .dropdown-menu {
    background-color: var(--dm-surface-2, #21262d) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

html.dark-mode .bootstrap-select.btn-group .dropdown-menu li a {
    color: var(--dm-text-primary, #e6edf3) !important;
}

html.dark-mode .bootstrap-select.btn-group .dropdown-menu li a:hover,
html.dark-mode .bootstrap-select.btn-group .dropdown-menu li a:focus,
html.dark-mode .bootstrap-select.btn-group .dropdown-menu li.selected a,
html.dark-mode .bootstrap-select.btn-group .dropdown-menu li.active a {
    background-color: var(--dm-surface-3, #2d333b) !important;
    color: #ffffff !important;
}

html.dark-mode .bootstrap-select.btn-group .dropdown-menu li.disabled a {
    color: var(--dm-text-muted, #8b949e) !important;
}

html.dark-mode .bootstrap-select .bs-searchbox,
html.dark-mode .bootstrap-select .bs-actionsbox {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
}

html.dark-mode .bootstrap-select .bs-searchbox input.form-control {
    background-color: var(--dm-input, #0d1117) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
}

html.dark-mode .bootstrap-select .bs-actionsbox .btn-group button {
    background-color: var(--dm-surface-3, #2d333b) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .bootstrap-select .bs-actionsbox .btn-group button:hover {
    background-color: #38404a !important;
    color: #ffffff !important;
}

/* "No results matched" search empty state */
html.dark-mode .bootstrap-select.btn-group .no-results,
html.dark-mode .bootstrap-select .no-results {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border: 1px dashed var(--dm-border, #30363d) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin: 6px 8px !important;
    text-align: center;
}

html.dark-mode .bootstrap-select.btn-group .dropdown-menu .notify,
html.dark-mode .bootstrap-select .dropdown-menu .notify {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
}

/* =========================================================
   PAGES 43 - 50 QA DARK MODE FIXES
   ========================================================= */

/* 1. Page 43: User Information & HR Occurrences / Writeups buttons & tables */
html.dark-mode #AddNewOccurance,
html.dark-mode #AddNewWriteup,
html.dark-mode #btnSaveUser {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode #AddNewOccurance:hover,
html.dark-mode #AddNewWriteup:hover,
html.dark-mode #btnSaveUser:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}
html.dark-mode .hr_occurance_info table thead tr,
html.dark-mode .hr_occurance_info table tbody tr {
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode .hr_occurance_info table thead tr th,
html.dark-mode .hr_occurance_info table tbody tr td {
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .hr_occurance_info table tbody tr:hover,
html.dark-mode .hr_occurance_info table thead tr td:hover {
    background-color: var(--dm-surface-2, #21262d) !important;
}

/* 2. Page 44: Sales Matrix Reports Search Bar trailing box */
html.dark-mode .sales_matrix_report_container .input-group,
html.dark-mode #FirstCallCloseTab .input-group,
html.dark-mode #OverAllCloseTab .input-group,
html.dark-mode #NumberOfSalesTab .input-group,
html.dark-mode #SoldToFundedTab .input-group,
html.dark-mode #AppointmentSetTab .input-group {
    width: auto !important;
}

/* 3. Page 45: All Sales Report - Service & Equipment Drawer (uk-table zebra striping fix) */
html.dark-mode .customer_report_details_header,
html.dark-mode .customer_report_table_header,
html.dark-mode .lead_report_details_header,
html.dark-mode .lead_report_table_header {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .customer_report_details_header a,
html.dark-mode .lead_report_details_header a {
    color: var(--dm-brand, #2ca01c) !important;
}
html.dark-mode .uk-table,
html.dark-mode .report_table_custom table {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .uk-table th,
html.dark-mode .report_table_custom table thead tr th {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .uk-table td,
html.dark-mode .report_table_custom table tbody tr td {
    color: var(--dm-text-primary, #e6edf3) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode .uk-table-striped tbody tr:nth-of-type(odd),
html.dark-mode .uk-table-striped > tr:nth-of-type(odd),
html.dark-mode .report_table_custom table tbody tr:nth-child(odd) {
    background-color: var(--dm-surface-1, #161b22) !important;
    border-top: 1px solid var(--dm-border, #30363d) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .uk-table-striped tbody tr:nth-of-type(even),
html.dark-mode .uk-table-striped > tr:nth-of-type(even),
html.dark-mode .report_table_custom table tbody tr:nth-child(even) {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-top: 1px solid var(--dm-border, #30363d) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .uk-table-hover tbody tr:hover,
html.dark-mode .uk-table-hover > tr:hover,
html.dark-mode .report_table_custom table tbody tr:hover {
    background-color: var(--dm-surface-3, #2d333b) !important;
}

/* 4. Pages 42, 46, 47, 48, 49: All Report Filter Dropdowns, Footers, and Filter Buttons */
html.dark-mode .convert_cus_report_footer,
html.dark-mode .reference_cus_report_footer,
html.dark-mode .goback_cus_report_footer,
html.dark-mode .install_cus_report_footer,
html.dark-mode .collection_cus_report_footer,
html.dark-mode .new_sales_report_footer,
html.dark-mode .variable_cost_footer,
html.dark-mode .estimate_list_footer,
html.dark-mode .report_filter_footer {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-top: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .convert_cus_report_filter,
html.dark-mode .reference_cus_report_filter,
html.dark-mode .goback_cus_report_filter,
html.dark-mode .install_cus_report_filter,
html.dark-mode .collection_cus_report_filter,
html.dark-mode .new_sales_report_filter,
html.dark-mode .variable_cost_filter,
html.dark-mode .estimate_list_filter {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode .convert_cus_inp,
html.dark-mode .install_cus_inp,
html.dark-mode .collection_cus_inp {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode .lilrp_filter_btn,
html.dark-mode .lcrp_filter_btn,
html.dark-mode .page_filter_btn,
html.dark-mode #convert_cus_filterbtn,
html.dark-mode #reference_cus_filterbtn,
html.dark-mode #goback_cus_filterbtn,
html.dark-mode #install_cus_filterbtn,
html.dark-mode #collection_cus_filterbtn,
html.dark-mode #filterbtn {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode .lilrp_filter_btn:hover,
html.dark-mode .lcrp_filter_btn:hover,
html.dark-mode .page_filter_btn:hover,
html.dark-mode #convert_cus_filterbtn:hover,
html.dark-mode #reference_cus_filterbtn:hover,
html.dark-mode #goback_cus_filterbtn:hover,
html.dark-mode #install_cus_filterbtn:hover,
html.dark-mode #collection_cus_filterbtn:hover,
html.dark-mode #filterbtn:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}

/* 5. Page 49: Invoice Modal Footer */
html.dark-mode .invoice_modal_footer,
html.dark-mode .invoice-detail-footer,
html.dark-mode .invoice_footer_div {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-top: 1px solid var(--dm-border, #30363d) !important;
}

/* 6. Page 50: Payroll Reports Table (#PayrollReportTable) & Buttons */
html.dark-mode #PayrollReportTable {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode #PayrollReportTable thead tr th {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode #PayrollReportTable tbody tr td {
    color: var(--dm-text-primary, #e6edf3) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode #PayrollReportTable tbody tr:nth-child(odd) {
    background-color: var(--dm-surface-1, #161b22) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode #PayrollReportTable tbody tr:nth-child(even) {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode #PayrollReportTable tbody tr:hover {
    background-color: var(--dm-surface-3, #2d333b) !important;
}
html.dark-mode .btnBI,
html.dark-mode #btnDownloadPayment {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode .btnBI:hover,
html.dark-mode #btnDownloadPayment:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}

/* =========================================================
   PAGES 51 - 60 QA DARK MODE FIXES
   ========================================================= */

/* 1. Global & Report Download Buttons (Pages 51, 52, 53, 57, 59) */
html.dark-mode #btnDownloadPayrollsalesCommission_sales,
html.dark-mode #btnDownloadPayrollTechCommission_Tech,
html.dark-mode #btnDownloadPayrollFollowUpCom,
html.dark-mode #btnDownloadPayrollFollowUpCommission,
html.dark-mode #btnDownloadPayrollFundedCommission,
html.dark-mode #btnDownloadPayrollMemberCommission_Member,
html.dark-mode #btnDownloadPayrollMemberCommission,
html.dark-mode #btnDownloadPayrollNetPay,
html.dark-mode #btnDownloadPayrollRescheduleCommission,
html.dark-mode #btnDownloadPayrollsalesPay_sales,
html.dark-mode #btnDownloadPayrollServiceCall,
html.dark-mode #btnDownloadPayrollCallCommission,
html.dark-mode #btnCancellationCueDownload,
html.dark-mode #btnCreatedPOReportDownload,
html.dark-mode #btnCreatedPOReportDownload01,
html.dark-mode #btnReceivedPOReportDownload,
html.dark-mode #btnRMAReportDownload,
html.dark-mode #btnDownloadLeadsReport_transfercustomer,
html.dark-mode #btn_download_estimates,
html.dark-mode #btn_download_estimates_approve,
html.dark-mode #btn_download_estimates_decline,
html.dark-mode button[id*="Download"],
html.dark-mode button[id*="download"],
html.dark-mode a[id*="Download"],
html.dark-mode a[id*="download"],
html.dark-mode .report_btn.lrp_float_right,
html.dark-mode .report_btn {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode #btnDownloadPayrollsalesCommission_sales:hover,
html.dark-mode #btnDownloadPayrollTechCommission_Tech:hover,
html.dark-mode #btnDownloadPayrollFollowUpCom:hover,
html.dark-mode #btnDownloadPayrollFollowUpCommission:hover,
html.dark-mode #btnDownloadPayrollFundedCommission:hover,
html.dark-mode #btnDownloadPayrollMemberCommission_Member:hover,
html.dark-mode #btnDownloadPayrollMemberCommission:hover,
html.dark-mode #btnDownloadPayrollNetPay:hover,
html.dark-mode #btnDownloadPayrollRescheduleCommission:hover,
html.dark-mode #btnDownloadPayrollsalesPay_sales:hover,
html.dark-mode #btnDownloadPayrollServiceCall:hover,
html.dark-mode #btnDownloadPayrollCallCommission:hover,
html.dark-mode #btnCancellationCueDownload:hover,
html.dark-mode #btnCreatedPOReportDownload:hover,
html.dark-mode #btnCreatedPOReportDownload01:hover,
html.dark-mode #btnReceivedPOReportDownload:hover,
html.dark-mode #btnRMAReportDownload:hover,
html.dark-mode #btnDownloadLeadsReport_transfercustomer:hover,
html.dark-mode #btn_download_estimates:hover,
html.dark-mode #btn_download_estimates_approve:hover,
html.dark-mode #btn_download_estimates_decline:hover,
html.dark-mode button[id*="Download"]:hover,
html.dark-mode button[id*="download"]:hover,
html.dark-mode a[id*="Download"]:hover,
html.dark-mode a[id*="download"]:hover,
html.dark-mode .report_btn.lrp_float_right:hover,
html.dark-mode .report_btn:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}
html.dark-mode .report_btn i,
html.dark-mode .report_btn .fa-download {
    color: #ffffff !important;
}

/* 2. PO & RMA Search Buttons & Table Striping (Pages 52, 53) */
html.dark-mode .search_PO_btn,
html.dark-mode #btnsearchtextDOnew,
html.dark-mode #btnCreatedPOReportSearch,
html.dark-mode #btnReceivedPOReportSearch,
html.dark-mode .search_RMA_btn,
html.dark-mode #btnRMASearch {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode .search_PO_btn:hover,
html.dark-mode #btnsearchtextDOnew:hover,
html.dark-mode #btnCreatedPOReportSearch:hover,
html.dark-mode #btnReceivedPOReportSearch:hover,
html.dark-mode .search_RMA_btn:hover,
html.dark-mode #btnRMASearch:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}
html.dark-mode .search_PO_btn i,
html.dark-mode .search_RMA_btn i {
    color: #ffffff !important;
}

/* RMA & Inventory Count & RWS Tables (Page 53) */
html.dark-mode #InventoryCountReportTable,
html.dark-mode #RWSTable {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode #InventoryCountReportTable thead tr th,
html.dark-mode #RWSTable thead tr th {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode #InventoryCountReportTable tbody tr td,
html.dark-mode #RWSTable tbody tr td {
    color: var(--dm-text-primary, #e6edf3) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode #InventoryCountReportTable > tbody > tr:nth-child(odd),
html.dark-mode #RWSTable > tbody > tr:nth-child(odd) {
    background-color: var(--dm-surface-1, #161b22) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode #InventoryCountReportTable > tbody > tr:nth-child(even),
html.dark-mode #RWSTable > tbody > tr:nth-child(even) {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode #InventoryCountReportTable > tbody > tr:hover,
html.dark-mode #RWSTable > tbody > tr:hover {
    background-color: var(--dm-surface-3, #2d333b) !important;
}

/* 3. PO Filter Container & Footers (Page 54 Top) */
html.dark-mode .bi_single_filte_info_container,
html.dark-mode .bi_single_filter_info_footer {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-color: var(--dm-border, #30363d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}

/* 4. Staged Location Ticket Base Table Modal (Page 54 Bottom) */
html.dark-mode .header-section-wrap,
html.dark-mode .Service-table {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode #tblService {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode #tblService thead,
html.dark-mode #tblService thead th,
html.dark-mode .thead-th-style {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode #tblService tbody td {
    color: var(--dm-text-primary, #e6edf3) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode #tblService tbody tr:nth-child(odd) {
    background-color: var(--dm-surface-1, #161b22) !important;
}
html.dark-mode #tblService tbody tr:nth-child(even) {
    background-color: var(--dm-surface-2, #21262d) !important;
}
html.dark-mode #tblService tbody tr:hover {
    background-color: var(--dm-surface-3, #2d333b) !important;
}

/* 5. Estimates Search Inputs & Trailing Boxes (Page 55 Top) */
html.dark-mode .left_content_div .input-group {
    width: auto !important;
}

/* 6. Customer Reports: Transfer, Financed & Test Accounts (Pages 55, 56) */
html.dark-mode .transfer_cus_report_filter,
html.dark-mode .transfer_cus_report_footer,
html.dark-mode .transfer_cus_report_filte_innerr {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-color: var(--dm-border, #30363d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .transfer_cus_inp {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode .lead_click_item,
html.dark-mode a.lead_click_item,
html.dark-mode .lead_click_item:hover,
html.dark-mode a.lead_click_item:hover {
    color: var(--dm-brand, #2ca01c) !important;
}

/* 7. Aging Report Sales Person Text & Customer Names (Page 57 Bottom) */
html.dark-mode #AgedReportTable tbody tr td a:not([href]),
html.dark-mode #AgedReportTable tbody tr td a:not(.name_anchor_style) {
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode #AgedReportTable tbody tr td a.name_anchor_style {
    color: var(--dm-brand, #2ca01c) !important;
}

/* 8. Knowledgebase & Add Knowledgebase Drawer (Pages 58, 59) */
html.dark-mode .AddPtoHeader,
html.dark-mode .add_pto_header {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .AddPtoHeader span,
html.dark-mode .AddPtoHeader .image_header_text {
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .AddPtoFooter,
html.dark-mode .AddProductFooter {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-top: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .btnSavePto,
html.dark-mode #SaveKnowledge {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode .btnSavePto:hover,
html.dark-mode #SaveKnowledge:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}
html.dark-mode .srch_sugg_head {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .srch_sugg_block {
    background-color: var(--dm-surface-1, #161b22) !important;
    border-color: var(--dm-border, #30363d) !important;
}
html.dark-mode .srch_sugg_info a.kn_ques {
    color: var(--dm-brand, #2ca01c) !important;
}
html.dark-mode .srch_sugg_info_btn {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .srch_sugg_info_btn:hover {
    background-color: var(--dm-surface-3, #2d333b) !important;
    color: #ffffff !important;
}

/* 9. Calendar Day Off Hover (Page 60) */
html.dark-mode .day-off-cell:hover,
html.dark-mode td[style*="background-color: rgb(255, 192, 203)"]:hover,
html.dark-mode td[style*="background-color: pink"]:hover,
html.dark-mode .calendar-day-off:hover {
    filter: brightness(0.9) !important;
}
/* =========================================================
   PAGES 61 - 69 QA DARK MODE FIXES
   ========================================================= */

/* 1. Page 61 Top: Calendar Ticket Color info popup */
html.dark-mode #ticket_color_div {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode #ticket_color_div:before {
    border-color: var(--dm-brand, #2ca01c) transparent transparent transparent !important;
}
html.dark-mode #ticket_color_div span,
html.dark-mode #ticket_color_div .ticket_type_div span {
    color: var(--dm-text-primary, #e6edf3) !important;
}

/* 2. Page 61 Bottom: Ticket Transfer Top Banner */
html.dark-mode .dwa_top_info,
html.dark-mode .dwa_header {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .dwa_top_info span,
html.dark-mode .dwa_top_info i {
    color: var(--dm-text-primary, #e6edf3) !important;
}

/* 3. Page 62 Top: Build Version */
html.dark-mode #btnAddBuildLog,
html.dark-mode .btn_add_build_version {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode .addbuildfooter {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-top: 1px solid var(--dm-border, #30363d) !important;
}

/* 4. Page 62 Bottom: Sales Commission Drawer */
html.dark-mode .commission_container,
html.dark-mode .commission_inner {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .commission_header,
html.dark-mode .commission_header_small {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .commission_footer,
html.dark-mode .add_sales_commission_footer,
html.dark-mode .sales_commission_footer {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-top: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .commission_inner .form-group .span_style {
    color: var(--dm-text-primary, #e6edf3) !important;
}

/* 5. Page 63 Top: SmartLeadSetup Equipment Table Row Hover */
html.dark-mode .smart_lead_setup_container table tbody tr:hover,
html.dark-mode .smart_lead_setup_container table tbody tr:hover td,
html.dark-mode #tblEquipment tbody tr:hover,
html.dark-mode #tblEquipment tbody tr:hover td,
html.dark-mode .lead_setup_partial_outer table tbody tr:hover,
html.dark-mode .lead_setup_partial_outer table tbody tr:hover td {
    background-color: var(--dm-surface-3, #2d333b) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}

/* 6. Page 63 Bottom: Agreement Preview Modal */
html.dark-mode .pba_container {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .HeadContents h4,
html.dark-mode .HeadContents span {
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .gslfp_footer {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-top: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode #btnSendMailAndSMS,
html.dark-mode #btnSendMail,
html.dark-mode #btnSendSMS,
html.dark-mode .btnPrint,
html.dark-mode .gslfp_footer_inner .input-group button {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode #btnSendMailAndSMS:hover,
html.dark-mode #btnSendMail:hover,
html.dark-mode #btnSendSMS:hover,
html.dark-mode .btnPrint:hover,
html.dark-mode .gslfp_footer_inner .input-group button:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}

/* 7. Pages 64 & 65: Customer Detail Tabs (Files, Correspondence, Notes/Tasks, Invoices) */
html.dark-mode #tblCorrespondence tbody tr:nth-child(odd),
html.dark-mode #tblNotes tbody tr:nth-child(odd),
html.dark-mode #tblNotes > tbody > tr:nth-child(odd),
html.dark-mode #tblNotes.dataTable.display tbody tr.odd,
html.dark-mode #tblNotes.dataTable.stripe tbody tr.odd,
html.dark-mode #tblFollowUpNotes tbody tr:nth-child(odd),
html.dark-mode .lead_note_reminder_table tbody tr:nth-child(odd),
html.dark-mode #tblInvoice tbody tr:nth-child(odd),
html.dark-mode .invoice_list_partial_table tbody tr:nth-child(odd) {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}

html.dark-mode #tblCorrespondence tbody tr:nth-child(even),
html.dark-mode #tblNotes tbody tr:nth-child(even),
html.dark-mode #tblNotes > tbody > tr:nth-child(even),
html.dark-mode #tblNotes.dataTable.display tbody tr.even,
html.dark-mode #tblNotes.dataTable.stripe tbody tr.even,
html.dark-mode #tblFollowUpNotes tbody tr:nth-child(even),
html.dark-mode .lead_note_reminder_table tbody tr:nth-child(even),
html.dark-mode #tblInvoice tbody tr:nth-child(even),
html.dark-mode .invoice_list_partial_table tbody tr:nth-child(even) {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}

html.dark-mode #tblCorrespondence tbody tr:hover,
html.dark-mode #tblNotes tbody tr:hover,
html.dark-mode #tblNotes > tbody > tr:hover,
html.dark-mode #tblNotes.dataTable tbody tr:hover,
html.dark-mode #tblFollowUpNotes tbody tr:hover,
html.dark-mode .lead_note_reminder_table tbody tr:hover,
html.dark-mode #tblInvoice tbody tr:hover,
html.dark-mode .invoice_list_partial_table tbody tr:hover {
    background-color: var(--dm-surface-3, #2d333b) !important;
}

html.dark-mode #tblNotes,
html.dark-mode .notes-table,
html.dark-mode #tblFollowUpNotes,
html.dark-mode .lead_note_reminder_table,
html.dark-mode #tblInvoice {
    background-color: transparent !important;
    border-color: var(--dm-border, #30363d) !important;
}

html.dark-mode #tblNotes thead tr th,
html.dark-mode #tblNotes .thead-th-style,
html.dark-mode #tblFollowUpNotes thead tr th,
html.dark-mode .lead_note_reminder_table thead tr th,
html.dark-mode #tblInvoice thead tr th {
    background-color: var(--dm-header-bar, #1a1d20) !important;
    color: var(--dm-header-bar-text, #ffffff) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
}

html.dark-mode #tblNotes tbody tr td,
html.dark-mode #tblNotes .table-body-td-style,
html.dark-mode #tblNotes td.notes_device_row {
    background-color: transparent !important;
    color: var(--dm-text-primary, #e6edf3) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

html.dark-mode #tblNotes .notes_header_custom,
html.dark-mode #tblNotes .notes_device_header {
    color: var(--dm-text-muted, #8b949e) !important;
    font-weight: 600;
}

html.dark-mode #tblNotes .notes_device_info,
html.dark-mode #tblNotes .notes_device_info span,
html.dark-mode #tblNotes .notes_device_info div,
html.dark-mode #tblNotes .nt_text_st,
html.dark-mode #tblNotes .nt_text_st div {
    color: var(--dm-text-primary, #e6edf3) !important;
}

html.dark-mode #tblNotes .nt_text_st div:first-child {
    color: var(--dm-text-muted, #8b949e) !important;
}

html.dark-mode #tblNotes .item-edit i,
html.dark-mode #tblNotes .fa-sticky-note-o {
    color: var(--dm-link, #5aa9f8) !important;
}

html.dark-mode #tblNotes .fa-thumbtack {
    color: #f59e0b !important;
}

html.dark-mode #tblNotes .item-delete,
html.dark-mode #tblNotes .follow-up-delete,
html.dark-mode #tblNotes .fa-trash-o {
    color: var(--dm-danger, #e05260) !important;
}

html.dark-mode #tblNotes .item-delete:hover,
html.dark-mode #tblNotes .follow-up-delete:hover,
html.dark-mode #tblNotes .fa-trash-o:hover {
    color: #ff7b88 !important;
}

html.dark-mode #tblNotes .nt_text_btn,
html.dark-mode #tblNotes .moreContent {
    color: var(--dm-link, #5aa9f8) !important;
}

html.dark-mode #tblNotes .lessContent {
    color: var(--dm-danger, #e05260) !important;
}

html.dark-mode #tblNotes tbody tr.PinnedNote,
html.dark-mode #tblNotes tbody tr.PinnedNote td {
    background-color: rgba(44, 160, 28, 0.18) !important;
}

html.dark-mode #tblNotes tbody tr.PinnedNote:hover,
html.dark-mode #tblNotes tbody tr.PinnedNote:hover td {
    background-color: rgba(44, 160, 28, 0.28) !important;
}

html.dark-mode .note_top_search_bar_inner #Searchtxt,
html.dark-mode .note_top_search_bar_inner #StartDate,
html.dark-mode .note_top_search_bar_inner #EndDate {
    background-color: var(--dm-input, #212427) !important;
    border-color: var(--dm-border, #30363d) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .note_top_search_bar_inner .input-group-btn .applySearch {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    html.dark-mode #tblNotes .notes_device_row {
        border-bottom: 1px solid var(--dm-border, #30363d) !important;
        background-color: var(--dm-surface-1, #161b22) !important;
    }
}

/* 8. Page 66 Top: User Profile */
html.dark-mode .user_profile_body {
    border-color: var(--dm-border, #30363d) !important;
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .user_profile_header {
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode #saveProfile {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode #saveProfile:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}
html.dark-mode .tot_ava_hr {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}

/* 9. Pages 66 Bottom, 67, 68: Time Clock & PTO */
html.dark-mode .employee_time_clock,
html.dark-mode .pto_partial_info_table_container table,
html.dark-mode .employees_pto_info_table_container table,
html.dark-mode .pto_list_partial_table,
html.dark-mode .employees_pto_partial_table {
    border-color: var(--dm-border, #30363d) !important;
    background-color: transparent !important;
}

html.dark-mode .employee_time_clock thead tr th,
html.dark-mode .pto_partial_info_table_container table thead tr td,
html.dark-mode .employees_pto_info_table_container table thead tr td,
html.dark-mode .pto_list_partial_table thead tr th,
html.dark-mode .employees_pto_partial_table thead tr th {
    background-color: var(--dm-header-bar, #1a1d20) !important;
    color: var(--dm-header-bar-text, #ffffff) !important;
    border-color: var(--dm-border, #30363d) !important;
}

html.dark-mode .employee_time_clock tbody tr:nth-child(odd),
html.dark-mode .pto_partial_info_table_container table tbody tr:nth-child(odd),
html.dark-mode .employees_pto_info_table_container table tbody tr:nth-child(odd),
html.dark-mode .pto_list_partial_table tbody tr:nth-child(odd),
html.dark-mode .employees_pto_partial_table tbody tr:nth-child(odd) {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}

html.dark-mode .employee_time_clock tbody tr:nth-child(even),
html.dark-mode .pto_partial_info_table_container table tbody tr:nth-child(even),
html.dark-mode .employees_pto_info_table_container table tbody tr:nth-child(even),
html.dark-mode .pto_list_partial_table tbody tr:nth-child(even),
html.dark-mode .employees_pto_partial_table tbody tr:nth-child(even) {
    background-color: var(--dm-surface-2, #21262d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}

html.dark-mode .employee_time_clock tbody tr:hover,
html.dark-mode .pto_partial_info_table_container table tbody tr:hover,
html.dark-mode .employees_pto_info_table_container table tbody tr:hover,
html.dark-mode .pto_list_partial_table tbody tr:hover,
html.dark-mode .employees_pto_partial_table tbody tr:hover {
    background-color: var(--dm-surface-3, #2d333b) !important;
}

html.dark-mode .employee_time_clock tbody tr td,
html.dark-mode .pto_partial_info_table_container table tbody tr td,
html.dark-mode .employees_pto_info_table_container table tbody tr td,
html.dark-mode .pto_list_partial_table tbody tr td,
html.dark-mode .employees_pto_partial_table tbody tr td {
    color: var(--dm-text-primary, #e6edf3) !important;
    border-color: var(--dm-border, #30363d) !important;
}

html.dark-mode .btn_addPTO,
html.dark-mode #btnAddPto,
html.dark-mode #btnAddEmployeesPto,
html.dark-mode .employees_pto_approve_btn,
html.dark-mode #AddClockInOUt {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode .btn_addPTO:hover,
html.dark-mode #btnAddPto:hover,
html.dark-mode #btnAddEmployeesPto:hover,
html.dark-mode .employees_pto_approve_btn:hover,
html.dark-mode #AddClockInOUt:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}

/* 10. Page 68 Bottom: Lead FollowUp Buttons */
html.dark-mode #AddReminder,
html.dark-mode .AddReminder,
html.dark-mode #AddNotes,
html.dark-mode #AddMessage {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
    color: #ffffff !important;
}
html.dark-mode #AddReminder:hover,
html.dark-mode .AddReminder:hover,
html.dark-mode #AddNotes:hover,
html.dark-mode #AddMessage:hover {
    background-color: var(--dm-brand-hover, #238016) !important;
    border-color: var(--dm-brand-hover, #238016) !important;
    color: #ffffff !important;
}

/* 11. Page 69: User Group Permission Drawer */
html.dark-mode .add_acc_fee_head_container {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-bottom: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .add_acc_fee_head_text,
html.dark-mode .add_acc_fee_head_container span {
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .add_usergroup_container,
html.dark-mode .add_usergroup_container_smL {
    background-color: var(--dm-surface-1, #161b22) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .containercheck {
    color: var(--dm-text-primary, #e6edf3) !important;
}
html.dark-mode .containercheck .checkmark {
    background-color: var(--dm-surface-2, #21262d) !important;
    border: 1px solid var(--dm-border, #30363d) !important;
}
html.dark-mode .containercheck input:checked ~ .checkmark {
    background-color: var(--dm-brand, #2ca01c) !important;
    border-color: var(--dm-brand, #2ca01c) !important;
}
html.dark-mode .containercheck .checkmark:after {
    border-color: #ffffff !important;
}

/* =========================================================
   INVOICE / ESTIMATE / LIST PRINT & ACTION ICONS
   ========================================================= */
html.dark-mode .all_invoice_partial_other_option span a,
html.dark-mode .all_invoice_partial_other_option span a i,
html.dark-mode .all_invoice_partial_other_option .InvoicePrint,
html.dark-mode .all_invoice_partial_other_option .InvoicePrint i,
html.dark-mode .all_invoice_partial_other_option .InvPrint a,
html.dark-mode .all_invoice_partial_other_option .InvPrintForPhone a,
html.dark-mode .estimate_partial_other_option span a,
html.dark-mode .estimate_partial_other_option span a i,
html.dark-mode .estimate_partial_other_option .InvoicePrint,
html.dark-mode .estimate_partial_other_option .InvoicePrint i,
html.dark-mode .estimate_partial_other_option .InvPrint a,
html.dark-mode .estimate_partial_other_option .InvPrintForPhone a,
html.dark-mode .InvPrint a,
html.dark-mode .InvPrint a i,
html.dark-mode .InvPrintForPhone a,
html.dark-mode .InvPrintForPhone a i,
html.dark-mode a.InvoicePrint,
html.dark-mode a.InvoicePrint i,
html.dark-mode .cus-print,
html.dark-mode .PrintTransaction,
html.dark-mode .PrintTransaction i {
    color: var(--dm-text-primary, #e6edf3) !important;
    transition: color 0.2s ease;
}

html.dark-mode .all_invoice_partial_other_option span a:hover,
html.dark-mode .all_invoice_partial_other_option span a:hover i,
html.dark-mode .all_invoice_partial_other_option .InvoicePrint:hover,
html.dark-mode .all_invoice_partial_other_option .InvoicePrint:hover i,
html.dark-mode .all_invoice_partial_other_option .InvPrint a:hover,
html.dark-mode .all_invoice_partial_other_option .InvPrintForPhone a:hover,
html.dark-mode .estimate_partial_other_option span a:hover,
html.dark-mode .estimate_partial_other_option span a:hover i,
html.dark-mode .estimate_partial_other_option .InvoicePrint:hover,
html.dark-mode .estimate_partial_other_option .InvoicePrint:hover i,
html.dark-mode .estimate_partial_other_option .InvPrint a:hover,
html.dark-mode .estimate_partial_other_option .InvPrintForPhone a:hover,
html.dark-mode .InvPrint a:hover,
html.dark-mode .InvPrint a:hover i,
html.dark-mode .InvPrintForPhone a:hover,
html.dark-mode .InvPrintForPhone a:hover i,
html.dark-mode a.InvoicePrint:hover,
html.dark-mode a.InvoicePrint:hover i,
html.dark-mode .cus-print:hover,
html.dark-mode .PrintTransaction:hover,
html.dark-mode .PrintTransaction:hover i {
    color: var(--dm-brand, #2ca01c) !important;
}

/* =========================================================
   PRESERVE RED TEXT IN DARK MODE ACROSS ALL TABLES & LISTS
   ========================================================= */

/* 1. Dedicated red utility classes and status classes */
html.dark-mode .color_red_style,
html.dark-mode .color_red_style_bold,
html.dark-mode .color-red,
html.dark-mode .red_text,
html.dark-mode .red-text,
html.dark-mode .text-red,
html.dark-mode .text-danger,
html.dark-mode .red:not(.red_button):not(.btn),
html.dark-mode span.red:not(.red_button):not(.btn),
html.dark-mode b.red,
html.dark-mode strong.red,
html.dark-mode p.red,
html.dark-mode div.red:not(.red_button):not(.btn) {
    color: #ff4d4f !important;
}

html.dark-mode .color_red_style_bold {
    font-weight: bold;
}

/* 2. Red classes inside all tables, lists, and table cells (overrides table td/tr dark mode colors) */
html.dark-mode table .color_red_style,
html.dark-mode table .color_red_style_bold,
html.dark-mode table .color-red,
html.dark-mode table .red_text,
html.dark-mode table .red-text,
html.dark-mode table .text-red,
html.dark-mode table .text-danger,
html.dark-mode table .red:not(.red_button):not(.btn),
html.dark-mode table td.color_red_style,
html.dark-mode table td.color_red_style_bold,
html.dark-mode table td.color-red,
html.dark-mode table td.red,
html.dark-mode table td.text-danger,
html.dark-mode .table .color_red_style,
html.dark-mode .table .color_red_style_bold,
html.dark-mode .table .color-red,
html.dark-mode .table .red_text,
html.dark-mode .table .red-text,
html.dark-mode .table .text-red,
html.dark-mode .table .text-danger,
html.dark-mode .table .red:not(.red_button):not(.btn),
html.dark-mode .table-body-td-style .color_red_style,
html.dark-mode .table-body-td-style .color_red_style_bold,
html.dark-mode .table-body-td-style .color-red,
html.dark-mode .table-body-td-style .red_text,
html.dark-mode .table-body-td-style .red-text,
html.dark-mode .table-body-td-style .text-red,
html.dark-mode .table-body-td-style .text-danger,
html.dark-mode .table-body-td-style .red:not(.red_button):not(.btn),
html.dark-mode .table-body-td-style.color_red_style,
html.dark-mode .table-body-td-style.color_red_style_bold,
html.dark-mode .table-body-td-style.color-red,
html.dark-mode .invoice_device_info .color_red_style,
html.dark-mode .invoice_device_info .color_red_style_bold,
html.dark-mode .invoice_device_info .color-red,
html.dark-mode .invoice_device_info .red_text,
html.dark-mode #tblInvoice .color_red_style,
html.dark-mode #tblInvoice .color_red_style_bold,
html.dark-mode #tblInvoice .color-red,
html.dark-mode #tblInvoice .red_text,
html.dark-mode #tblInvoice .red:not(.red_button):not(.btn),
html.dark-mode .invoice_list_partial_table .color_red_style,
html.dark-mode .invoice_list_partial_table .color_red_style_bold,
html.dark-mode .invoice_list_partial_table .color-red,
html.dark-mode .all_invoice .color_red_style,
html.dark-mode .all_invoice .color_red_style_bold,
html.dark-mode .all_invoice .color-red,
html.dark-mode .filter-customer-container .color_red_style,
html.dark-mode .filter-customer-container .color_red_style_bold,
html.dark-mode .filter-customer-container .color-red,
html.dark-mode .filter-customer-container .red_text,
html.dark-mode .filter-customer-container .red:not(.red_button):not(.btn) {
    color: #ff4d4f !important;
}

/* 3. Inline style="color:red..." preservation across all tables and elements */
html.dark-mode [style*="color:red"],
html.dark-mode [style*="color: red"],
html.dark-mode [style*="color:Red"],
html.dark-mode [style*="color: Red"],
html.dark-mode [style*="color:#f00"],
html.dark-mode [style*="color: #f00"],
html.dark-mode [style*="color:#ff0000"],
html.dark-mode [style*="color: #ff0000"],
html.dark-mode [style*="color:#d9534f"],
html.dark-mode [style*="color: #d9534f"],
html.dark-mode [style*="color:#e74c3c"],
html.dark-mode [style*="color: #e74c3c"],
html.dark-mode [style*="color:#c0392b"],
html.dark-mode [style*="color: #c0392b"],
html.dark-mode [style*="color:#dc3545"],
html.dark-mode [style*="color: #dc3545"],
html.dark-mode [style*="color:#e05260"],
html.dark-mode [style*="color: #e05260"],
html.dark-mode table [style*="color:red"],
html.dark-mode table [style*="color: red"],
html.dark-mode table [style*="color:Red"],
html.dark-mode table [style*="color: Red"],
html.dark-mode table [style*="color:#f00"],
html.dark-mode table [style*="color: #f00"],
html.dark-mode table [style*="color:#ff0000"],
html.dark-mode table [style*="color: #ff0000"],
html.dark-mode table [style*="color:#d9534f"],
html.dark-mode table [style*="color: #d9534f"],
html.dark-mode table [style*="color:#e74c3c"],
html.dark-mode table [style*="color: #e74c3c"],
html.dark-mode table [style*="color:#c0392b"],
html.dark-mode table [style*="color: #c0392b"],
html.dark-mode table [style*="color:#dc3545"],
html.dark-mode table [style*="color: #dc3545"],
html.dark-mode table [style*="color:#e05260"],
html.dark-mode table [style*="color: #e05260"],
html.dark-mode .table [style*="color:red"],
html.dark-mode .table [style*="color: red"],
html.dark-mode .table [style*="color:Red"],
html.dark-mode .table [style*="color: Red"],
html.dark-mode .table [style*="color:#f00"],
html.dark-mode .table [style*="color: #f00"],
html.dark-mode .table [style*="color:#ff0000"],
html.dark-mode .table [style*="color: #ff0000"],
html.dark-mode .table [style*="color:#d9534f"],
html.dark-mode .table [style*="color: #d9534f"],
html.dark-mode .table [style*="color:#e74c3c"],
html.dark-mode .table [style*="color: #e74c3c"],
html.dark-mode .table [style*="color:#c0392b"],
html.dark-mode .table [style*="color: #c0392b"],
html.dark-mode .table [style*="color:#dc3545"],
html.dark-mode .table [style*="color: #dc3545"],
html.dark-mode .table [style*="color:#e05260"],
html.dark-mode .table [style*="color: #e05260"],
html.dark-mode .table-body-td-style [style*="color:red"],
html.dark-mode .table-body-td-style [style*="color: red"],
html.dark-mode .table-body-td-style [style*="color:Red"],
html.dark-mode .table-body-td-style [style*="color: Red"],
html.dark-mode .table-body-td-style [style*="color:#f00"],
html.dark-mode .table-body-td-style [style*="color: #f00"],
html.dark-mode .table-body-td-style [style*="color:#ff0000"],
html.dark-mode .table-body-td-style [style*="color: #ff0000"],
html.dark-mode .table-body-td-style [style*="color:#d9534f"],
html.dark-mode .table-body-td-style [style*="color: #d9534f"],
html.dark-mode .table-body-td-style [style*="color:#e74c3c"],
html.dark-mode .table-body-td-style [style*="color: #e74c3c"],
html.dark-mode .table-body-td-style [style*="color:#c0392b"],
html.dark-mode .table-body-td-style [style*="color: #c0392b"],
html.dark-mode .table-body-td-style [style*="color:#dc3545"],
html.dark-mode .table-body-td-style [style*="color: #dc3545"],
html.dark-mode .table-body-td-style [style*="color:#e05260"],
html.dark-mode .table-body-td-style [style*="color: #e05260"],
html.dark-mode td[style*="color:red"],
html.dark-mode td[style*="color: red"],
html.dark-mode td[style*="color:Red"],
html.dark-mode td[style*="color: Red"],
html.dark-mode td[style*="color:#f00"],
html.dark-mode td[style*="color: #f00"],
html.dark-mode td[style*="color:#ff0000"],
html.dark-mode td[style*="color: #ff0000"],
html.dark-mode td[style*="color:#d9534f"],
html.dark-mode td[style*="color: #d9534f"],
html.dark-mode td[style*="color:#e74c3c"],
html.dark-mode td[style*="color: #e74c3c"],
html.dark-mode td[style*="color:#c0392b"],
html.dark-mode td[style*="color: #c0392b"],
html.dark-mode td[style*="color:#dc3545"],
html.dark-mode td[style*="color: #dc3545"],
html.dark-mode td[style*="color:#e05260"],
html.dark-mode td[style*="color: #e05260"] {
    color: #ff4d4f !important;
}

/* 4. Hover states for links with red styling */
html.dark-mode a.color_red_style:hover,
html.dark-mode a.color_red_style_bold:hover,
html.dark-mode a.color-red:hover,
html.dark-mode a.red_text:hover,
html.dark-mode a.red:not(.red_button):not(.btn):hover,
html.dark-mode a.text-danger:hover,
html.dark-mode a[style*="color:red"]:hover,
html.dark-mode a[style*="color: red"]:hover,
html.dark-mode table a.color_red_style:hover,
html.dark-mode table a.color-red:hover,
html.dark-mode table a.red_text:hover,
html.dark-mode table a.text-danger:hover,
html.dark-mode table a[style*="color:red"]:hover,
html.dark-mode table a[style*="color: red"]:hover {
    color: #ff7875 !important;
}

/*
    (a preview pane, a rendered document, an emailed template) can opt out with
    class="dm-keep-light".
*/
html.dark-mode .dm-keep-light,
html.dark-mode .dm-keep-light * {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #ddd !important;
}

/* Customer Detail Address Toolbar */
html.dark-mode .Customerdetail_addresss {
    background-color: transparent !important;
}

html.dark-mode .Customerdetail_addresss .test_acc_style {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-color: var(--dm-border, #30363d) !important;
    color: var(--dm-text-primary, #e6edf3) !important;
}

html.dark-mode .Customerdetail_addresss .test_acc_style:hover {
    background-color: var(--dm-surface-3, #2d333b) !important;
    border-color: #484f58 !important;
}

html.dark-mode .customer_address_group .customeraddress_style {
    color: var(--dm-text, #c9d1d9) !important;
}

html.dark-mode .customer_address_group #getDirection img {
    border-color: #388bfd !important;
}

html.dark-mode .customer_central_station_no {
    background-color: var(--dm-surface-2, #21262d) !important;
    border-color: var(--dm-border, #30363d) !important;
    color: var(--dm-text, #c9d1d9) !important;
}

html.dark-mode .customer_transfer_info {
    color: var(--dm-text-muted, #8b949e) !important;
}

/* Access Denied Card */
html.dark-mode .access_denied_inner {
    background-color: var(--dm-surface, #1f2225) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .access_denied_container i {
    color: var(--dm-danger, #e05260) !important;
    filter: drop-shadow(0 2px 8px rgba(224, 82, 96, 0.35));
}

html.dark-mode .access_denied_header {
    color: var(--dm-text-heading, #f2f4f6) !important;
}

html.dark-mode .access_denied_text {
    color: var(--dm-text-muted, #9aa0a6) !important;
}

/* ------------------------------------------------ Third Party API Tabs (Alarm.com, UCC, Avantgrad) */
html.dark-mode #ThirdPartyAPIsTab > li {
    background-color: var(--dm-surface, #1f2225) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode #ThirdPartyAPIsTab > li > a {
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode #ThirdPartyAPIsTab > li:hover {
    background-color: var(--dm-elevated, #282c30) !important;
}

html.dark-mode #ThirdPartyAPIsTab > li:hover > a {
    color: #ffffff !important;
}

html.dark-mode #ThirdPartyAPIsTab > li.active {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
}

html.dark-mode #ThirdPartyAPIsTab > li.active > a {
    color: #ffffff !important;
}

/* Card Blocks */
html.dark-mode .acd_info_block,
html.dark-mode .termin_cust_info,
html.dark-mode .ucc_info_block {
    background-color: var(--dm-surface, #1f2225) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    border-radius: 6px !important;
    overflow: hidden;
}

/* Card Header Bars */
html.dark-mode .acd_info_header,
html.dark-mode .termin_cust_info_header,
html.dark-mode .ucc_info_block_header {
    background-color: var(--dm-header-bar, #343a42) !important;
    color: var(--dm-header-bar-text, #f2f4f6) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
    font-weight: 600 !important;
}

/* Alarm.com Table Details */
html.dark-mode .acd_info_block table tbody tr td:nth-child(1),
html.dark-mode .termin_cust_info_div table tr td:nth-child(1) {
    color: var(--dm-text-heading, #f2f4f6) !important;
}

html.dark-mode .acd_info_block table tbody tr td:nth-child(2),
html.dark-mode .termin_cust_info_div table tr td:nth-child(2) {
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .acd_info_block table tbody tr td:nth-child(1) span {
    color: var(--dm-text-muted, #9aa0a6) !important;
}

/* UCC & Avantgrad Table Details */
html.dark-mode .ucc_info_inner_head,
html.dark-mode .ucc_info_block_info label,
html.dark-mode .ucc_cust_equipment_table tbody tr td div:nth-child(1),
html.dark-mode .ucc_cust_site_agencies_table tbody tr td div:nth-child(1) {
    color: var(--dm-text-heading, #f2f4f6) !important;
}

html.dark-mode .ucc_info_inner_head span {
    color: var(--dm-text-muted, #9aa0a6) !important;
}

html.dark-mode .ucc_info_inner_info,
html.dark-mode .ucc_info_block_info table tbody tr td {
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .ucc_info_block_info table thead tr {
    background-color: var(--dm-elevated, #282c30) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .ucc_info_block_info table thead tr th {
    color: var(--dm-text-heading, #f2f4f6) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .ucc_info_block_info table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html.dark-mode .ucc_info_block_info table tbody tr:nth-child(even) {
    background-color: transparent !important;
}

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

html.dark-mode .ucc_info_block_info table td,
html.dark-mode .ucc_info_block_info table th {
    border-color: var(--dm-border-soft, #2c3034) !important;
}

/* Inputs & Form Controls */
html.dark-mode .ucc_cust_detail_top_bar input,
html.dark-mode .ucc_cust_detail_top_bar select,
html.dark-mode .aventgrad_customer_top_bar input,
html.dark-mode .aventgrad_customer_top_bar select,
html.dark-mode .customersyncarea input,
html.dark-mode #AlarmSyncId,
html.dark-mode #UCCSyncId,
html.dark-mode #AvantgradSyncId {
    background-color: var(--dm-input, #212427) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .customersyncarea label {
    color: var(--dm-text-heading, #f2f4f6) !important;
}

/* ------------------------------------------------ Third Party API Button Colors (Keep identical to Light Mode) */

/* Alarm.com Buttons */
html.dark-mode .TerminateCustomerDiv .btn,
html.dark-mode .TerminateCustomerDiv .ShowEquipments,
html.dark-mode .TerminateCustomerDiv .RunSystemCheck,
html.dark-mode .TerminateCustomerDiv .DoSystemCheck,
html.dark-mode .TerminateCustomerDiv .Refresh,
html.dark-mode .CreateCustomerDiv .btn,
html.dark-mode .CreateCustomerDiv .CreateCustomer,
html.dark-mode .CreateCustomerDiv .CreateCommitment,
html.dark-mode .ActivateCommitmentDiv .ActivateCommitment,
html.dark-mode .customersyncarea .syncbtn {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
}

html.dark-mode .TerminateCustomerDiv .btn:hover,
html.dark-mode .TerminateCustomerDiv .btn:focus,
html.dark-mode .CreateCustomerDiv .btn:hover,
html.dark-mode .CreateCustomerDiv .btn:focus,
html.dark-mode .customersyncarea .syncbtn:hover,
html.dark-mode .customersyncarea .syncbtn:focus {
    background-color: #248216 !important;
    border-color: #248216 !important;
    color: #ffffff !important;
}

html.dark-mode .TerminateCustomerDiv .TerminateCustomer,
html.dark-mode .TerminateCustomerDiv .Unassociate {
    background-color: #d71920 !important;
    border-color: #d71920 !important;
    color: #ffffff !important;
}

html.dark-mode .TerminateCustomerDiv .TerminateCustomer:hover,
html.dark-mode .TerminateCustomerDiv .TerminateCustomer:focus,
html.dark-mode .TerminateCustomerDiv .Unassociate:hover,
html.dark-mode .TerminateCustomerDiv .Unassociate:focus {
    background-color: #b9151b !important;
    border-color: #b9151b !important;
    color: #ffffff !important;
}

/* UCC Buttons */
html.dark-mode .ucc_cust_detail_top_bar .input-group button,
html.dark-mode .ucc_cust_detail_top_bar #TestUcc,
html.dark-mode .ucc_cust_detail_top_bar .history,
html.dark-mode .ucc_cust_detail_top_bar .Unassociate,
html.dark-mode .editUccCustomer,
html.dark-mode #UpdateSiteContact,
html.dark-mode .syncbtnUCC,
html.dark-mode .CreateCustomerUCC {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
}

html.dark-mode .ucc_cust_detail_top_bar .input-group button:hover,
html.dark-mode .ucc_cust_detail_top_bar .input-group button:focus,
html.dark-mode .ucc_cust_detail_top_bar .Unassociate:hover,
html.dark-mode .ucc_cust_detail_top_bar .Unassociate:focus,
html.dark-mode .editUccCustomer:hover,
html.dark-mode .editUccCustomer:focus,
html.dark-mode .syncbtnUCC:hover,
html.dark-mode .CreateCustomerUCC:hover {
    background-color: #248216 !important;
    border-color: #248216 !important;
    color: #ffffff !important;
}

/* Avantgrad Buttons */
html.dark-mode .nmc_detail_top_bar .btn,
html.dark-mode .aventgrad_customer_top_bar .btn,
html.dark-mode .aventgrad_customer_top_bar #PlaceTest,
html.dark-mode .aventgrad_customer_top_bar #HistoryData,
html.dark-mode .aventgrad_customer_top_bar #TerminateCustomer,
html.dark-mode .aventgrad_customer_top_bar .Unassociate,
html.dark-mode .aventgrad_customer_top_bar .green_button,
html.dark-mode #editSite,
html.dark-mode .syncbtnAvantgrad,
html.dark-mode .CreateCustomerAvantgrad {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
}

html.dark-mode .nmc_detail_top_bar .btn:hover,
html.dark-mode .nmc_detail_top_bar .btn:focus,
html.dark-mode .aventgrad_customer_top_bar .btn:hover,
html.dark-mode .aventgrad_customer_top_bar .btn:focus,
html.dark-mode #editSite:hover,
html.dark-mode .syncbtnAvantgrad:hover,
html.dark-mode .CreateCustomerAvantgrad:hover {
    background-color: #248216 !important;
    border-color: #248216 !important;
    color: #ffffff !important;
}

/* ------------------------------------------------ Create Account Modals (AddAvantgradCustomer, AddBrinksAccount, AddNmcCustomer) */
html.dark-mode .add_brinks_acc_container,
html.dark-mode .add_brinks_info_container {
    background-color: var(--dm-bg, #17191c) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_brinks_info_block {
    background-color: var(--dm-surface, #1f2225) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    border-radius: 6px !important;
    overflow: hidden;
}

html.dark-mode .border_brinks {
    border: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .add_brinks_info_block_header {
    background: var(--dm-header-bar, #343a42) !important;
    color: var(--dm-header-bar-text, #f2f4f6) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .add_brinks_info_block_information .form-group .aba_header,
html.dark-mode .aba_header,
html.dark-mode .add_alarm_customer_content_label,
html.dark-mode .text-custom,
html.dark-mode .add_emergency_contact_check label {
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_brinks_info_block_information input,
html.dark-mode .add_brinks_info_block_information select,
html.dark-mode .add_brinks_info_block_information .form-control {
    background-color: var(--dm-input, #212427) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_brinks_info_block_information .bootstrap-select > .btn.dropdown-toggle {
    background-color: var(--dm-input, #212427) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_brinks_info_block_information .bootstrap-select .filter-option {
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_brinks_footer {
    background-color: var(--dm-surface, #1f2225) !important;
    border-top: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .add_brinks_footer button,
html.dark-mode .add_brinks_footer button:hover,
html.dark-mode .add_brinks_footer button:focus,
html.dark-mode #Contact_Addition,
html.dark-mode #Agency_Addition,
html.dark-mode #Zode_Addition {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
}

html.dark-mode .aba_zone_list_table thead tr th,
html.dark-mode #Contactlist table tr th,
html.dark-mode #Agencylist table tr th,
html.dark-mode #Zonelist table tr th {
    background-color: var(--dm-elevated, #282c30) !important;
    color: var(--dm-text-heading, #f2f4f6) !important;
    border-color: var(--dm-border, #383d42) !important;
}

html.dark-mode .aba_zone_list_table tbody tr td,
html.dark-mode #Contactlist table tr td,
html.dark-mode #Agencylist table tr td,
html.dark-mode #Zonelist table tr td {
    color: var(--dm-text, #e3e5e8) !important;
    border-color: var(--dm-border-soft, #2c3034) !important;
}

html.dark-mode #Contactlist table tr td a.cus-anchor {
    color: #2ca01c !important;
}

html.dark-mode .contact_delete i {
    color: var(--dm-danger, #e05260) !important;
}

/* ------------------------------------------------ UCC Customer Details & Alarm Customer Modals (_AddUCCCustomer, _AddAlarmCustomer) */
html.dark-mode .add_ucc_cust_inner,
html.dark-mode .customer_alarm_tab,
html.dark-mode .setup_customer_alarm {
    background-color: var(--dm-bg, #17191c) !important;
    color: var(--dm-text, #e3e5e8) !important;
    border-color: var(--dm-border, #383d42) !important;
}

/* Sub-header section divider bars (e.g. GENERAL INFORMATION, EMERGENCY CONTACTS, ADD AGENCIES, ADD SECURITY ZONES, CUSTOMER INFORMATION, CREATE LOGIN, SYSTEM INFORMATION) */
html.dark-mode .sub-header,
html.dark-mode .add_ucc_cust_inner .sub-header,
html.dark-mode .customer_alarm_tab .sub-header,
html.dark-mode .setup_customer_alarm .sub-header {
    background: var(--dm-header-bar, #343a42) !important;
    background-color: var(--dm-header-bar, #343a42) !important;
    color: var(--dm-header-bar-text, #f2f4f6) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    border-radius: 4px;
}

html.dark-mode .add_ucc_cust_inner .form-group .add_alarm_customer_content_label,
html.dark-mode .add_ucc_cust_inner .form-group .text-custom,
html.dark-mode .customer_alarm_tab .add_alarm_customer_content_label {
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_ucc_cust_inner input,
html.dark-mode .add_ucc_cust_inner select,
html.dark-mode .add_ucc_cust_inner .form-control,
html.dark-mode .customer_alarm_tab input,
html.dark-mode .customer_alarm_tab select,
html.dark-mode .customer_alarm_tab .form-control {
    background-color: var(--dm-input, #212427) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_ucc_cust_inner input[readonly],
html.dark-mode .add_ucc_cust_inner .form-control[readonly],
html.dark-mode .customer_alarm_tab input[readonly],
html.dark-mode .customer_alarm_tab .form-control[readonly] {
    background-color: #191c1f !important;
    color: var(--dm-text, #e3e5e8) !important;
    border-color: var(--dm-border, #383d42) !important;
}

html.dark-mode .add_ucc_cust_inner .bootstrap-select > .btn.dropdown-toggle,
html.dark-mode .customer_alarm_tab .bootstrap-select > .btn.dropdown-toggle {
    background-color: var(--dm-input, #212427) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .add_ucc_sec_zone_table table thead tr th {
    background-color: var(--dm-elevated, #282c30) !important;
    color: var(--dm-text-heading, #f2f4f6) !important;
    border-color: var(--dm-border, #383d42) !important;
}

html.dark-mode .add_ucc_sec_zone_table table tbody tr td {
    color: var(--dm-text, #e3e5e8) !important;
    border-color: var(--dm-border-soft, #2c3034) !important;
}

html.dark-mode table.CoverageSummaryTable th {
    background-color: var(--dm-elevated, #282c30) !important;
    color: var(--dm-text-heading, #f2f4f6) !important;
    border-color: var(--dm-border, #383d42) !important;
}

html.dark-mode table.CoverageSummaryTable tr {
    border-color: var(--dm-border-soft, #2c3034) !important;
}

html.dark-mode .add_alarm_customer_footer {
    background-color: var(--dm-surface, #1f2225) !important;
    border-top: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode #SubscribeToUCC,
html.dark-mode #SubscribeToAlarm,
html.dark-mode .btnAddToAlarm,
html.dark-mode .setup_customer_alarm button,
html.dark-mode .add_alarm_customer_footer button {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
}

html.dark-mode #SubscribeToUCC:hover,
html.dark-mode #SubscribeToUCC:focus,
html.dark-mode #SubscribeToAlarm:hover,
html.dark-mode #SubscribeToAlarm:focus,
html.dark-mode .btnAddToAlarm:hover,
html.dark-mode .btnAddToAlarm:focus,
html.dark-mode .setup_customer_alarm button:hover,
html.dark-mode .setup_customer_alarm button:focus,
html.dark-mode .add_alarm_customer_footer button:hover,
html.dark-mode .add_alarm_customer_footer button:focus {
    background-color: #248216 !important;
    border-color: #248216 !important;
    color: #ffffff !important;
}

/* ------------------------------------------------ Print Preview & Action Modals (GetEstimator, GetEstimate, GetInvoice, GetPurchaseOrder, etc.) */
html.dark-mode .HeadContents h4,
html.dark-mode .HeadContents_agreement h4 {
    color: var(--dm-text-heading, #f2f4f6) !important;
}

html.dark-mode .HeadContents span,
html.dark-mode .HeadContents_agreement span {
    color: var(--dm-text-muted, #9aa0a6) !important;
}

html.dark-mode .CloseButtonDiv img {
    filter: invert(1) brightness(0.9);
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

html.dark-mode .CloseButtonDiv img:hover {
    opacity: 1;
}

html.dark-mode .btnCancel {
    background-color: var(--dm-elevated, #282c30) !important;
    color: var(--dm-text, #e3e5e8) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .btnCancel:hover {
    background-color: var(--dm-surface, #1f2225) !important;
    border: 1px solid var(--dm-border-strong, #4a5056) !important;
    color: var(--dm-text-heading, #f2f4f6) !important;
}

html.dark-mode .btnPrint,
html.dark-mode .btnemail_send,
html.dark-mode .btnIAgree {
    background-color: #2ca01c !important;
    border-color: #2ca01c !important;
    color: #ffffff !important;
}

html.dark-mode .btnPrint:hover,
html.dark-mode .btnPrint:focus,
html.dark-mode .btnemail_send:hover,
html.dark-mode .btnemail_send:focus,
html.dark-mode .btnIAgree:hover,
html.dark-mode .btnIAgree:focus {
    background-color: #248216 !important;
    border-color: #248216 !important;
    color: #ffffff !important;
}

html.dark-mode .pdf-styles,
html.dark-mode #iframePdf {
    border: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .mfp-iframe-scaler iframe {
    background-color: var(--dm-surface, #1f2225) !important;
}

/* Multi-agreement contract popup */
html.dark-mode .multi_agree_doc_container,
html.dark-mode .multi_agree_doc_inner {
    background-color: var(--dm-surface, #1f2225) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .multi_agree_doc_header {
    background-color: var(--dm-header-bar, #343a42) !important;
    color: var(--dm-header-bar-text, #f2f4f6) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode .multi_agree_doc_content .mad_header {
    color: var(--dm-text-heading, #f2f4f6) !important;
}

/* Send email modal */
html.dark-mode .send_mail_invoice_container {
    background-color: var(--dm-surface, #1f2225) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

html.dark-mode .send_mail_invoice_header {
    background-color: var(--dm-header-bar, #343a42) !important;
    color: var(--dm-header-bar-text, #f2f4f6) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
}

/* =========================================================
   SYSTEM UPDATE & BUILD VERSION MODALS (DARK MODE)
   ========================================================= */

/* Modal Content & Shell */
html.dark-mode #BuildVersionModal .modal-content,
html.dark-mode #BuildVersionInfoModal .modal-content {
    background-color: var(--dm-surface, #1f2225) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

/* Modal Header */
html.dark-mode #BuildVersionModal .modal-header,
html.dark-mode #BuildVersionInfoModal .modal-header {
    background-color: var(--dm-header-bar, #343a42) !important;
    border-bottom: 1px solid var(--dm-border, #383d42) !important;
    padding: 18px 24px !important;
}

html.dark-mode #BuildVersionModal .modal-title,
html.dark-mode #BuildVersionInfoModal .modal-title {
    color: var(--dm-header-bar-text, #f2f4f6) !important;
    font-weight: 600 !important;
}

html.dark-mode #BuildVersionModal .modal-header .close,
html.dark-mode #BuildVersionInfoModal .modal-header .close {
    color: #ffffff !important;
    opacity: 0.75 !important;
    text-shadow: none !important;
}

html.dark-mode #BuildVersionModal .modal-header .close:hover,
html.dark-mode #BuildVersionInfoModal .modal-header .close:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Modal Body */
html.dark-mode #BuildVersionModal .modal-body,
html.dark-mode #BuildVersionInfoModal .modal-body {
    background-color: var(--dm-surface, #1f2225) !important;
    color: var(--dm-text, #e3e5e8) !important;
    padding: 20px 24px !important;
}

/* Version & Build Date Meta Box */
html.dark-mode #BuildVersionModal .build-version-meta-box,
html.dark-mode #BuildVersionInfoModal .build-version-meta-box,
html.dark-mode #BuildVersionModal .modal-body > div[style*="grid"],
html.dark-mode #BuildVersionInfoModal .modal-body > div[style*="grid"] {
    background-color: var(--dm-input-bg, #262a2e) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode #BuildVersionModal .build-version-meta-label,
html.dark-mode #BuildVersionInfoModal .build-version-meta-label,
html.dark-mode #BuildVersionModal .build-version-meta-box span,
html.dark-mode #BuildVersionInfoModal .build-version-meta-box span,
html.dark-mode #BuildVersionModal .modal-body span[style*="uppercase"],
html.dark-mode #BuildVersionInfoModal .modal-body span[style*="uppercase"] {
    color: var(--dm-text-muted, #9ba3af) !important;
}

html.dark-mode #BuildVersionModal .build-version-meta-val,
html.dark-mode #BuildVersionInfoModal .build-version-meta-val,
html.dark-mode #BuildVersionModal .build-version-meta-box strong,
html.dark-mode #BuildVersionInfoModal .build-version-meta-box strong,
html.dark-mode #BuildVersionModal .modal-body strong,
html.dark-mode #BuildVersionInfoModal .modal-body strong {
    color: var(--dm-text-heading, #ffffff) !important;
}

/* Section Title ("What's New & Changes") */
html.dark-mode #BuildVersionModal .build-version-notes-title,
html.dark-mode #BuildVersionInfoModal .build-version-notes-title,
html.dark-mode #BuildVersionModal .build-version-notes-title span,
html.dark-mode #BuildVersionInfoModal .build-version-notes-title span,
html.dark-mode #BuildVersionModal .modal-body p,
html.dark-mode #BuildVersionInfoModal .modal-body p {
    color: var(--dm-text-heading, #f2f4f6) !important;
}

/* Scrollable Changes Notes Box */
html.dark-mode #BuildVersionModal .build-version-notes-box,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box,
html.dark-mode #BuildVersionModal #bvInfoChanges,
html.dark-mode #BuildVersionInfoModal #bvInfoChanges,
html.dark-mode #BuildVersionModal .modal-body div[style*="overflow-y"],
html.dark-mode #BuildVersionInfoModal .modal-body div[style*="overflow-y"] {
    background-color: var(--dm-input-bg, #181a1c) !important;
    border: 1px solid var(--dm-border, #383d42) !important;
    color: var(--dm-text, #e3e5e8) !important;
}

/* All content inside notes box */
html.dark-mode #BuildVersionModal .build-version-notes-box *,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box *,
html.dark-mode #BuildVersionModal #bvInfoChanges *,
html.dark-mode #BuildVersionInfoModal #bvInfoChanges *,
html.dark-mode #BuildVersionModal .modal-body div[style*="overflow-y"] *,
html.dark-mode #BuildVersionInfoModal .modal-body div[style*="overflow-y"] * {
    color: var(--dm-text, #e3e5e8) !important;
    background-color: transparent !important;
}

html.dark-mode #BuildVersionModal .build-version-notes-box strong,
html.dark-mode #BuildVersionModal .build-version-notes-box b,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box strong,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box b {
    color: var(--dm-text-heading, #ffffff) !important;
}

/* Links inside notes */
html.dark-mode #BuildVersionModal .build-version-notes-box a,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box a,
html.dark-mode #BuildVersionModal #bvInfoChanges a,
html.dark-mode #BuildVersionInfoModal #bvInfoChanges a,
html.dark-mode #BuildVersionModal .modal-body div[style*="overflow-y"] a,
html.dark-mode #BuildVersionInfoModal .modal-body div[style*="overflow-y"] a {
    color: #58a6ff !important;
    text-decoration: underline !important;
}

html.dark-mode #BuildVersionModal .build-version-notes-box a:hover,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box a:hover,
html.dark-mode #BuildVersionModal #bvInfoChanges a:hover,
html.dark-mode #BuildVersionInfoModal #bvInfoChanges a:hover {
    color: #79b8ff !important;
}

/* Notes scrollbar */
html.dark-mode #BuildVersionModal .build-version-notes-box::-webkit-scrollbar,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box::-webkit-scrollbar,
html.dark-mode #BuildVersionModal .modal-body div[style*="overflow-y"]::-webkit-scrollbar,
html.dark-mode #BuildVersionInfoModal .modal-body div[style*="overflow-y"]::-webkit-scrollbar {
    width: 7px;
}

html.dark-mode #BuildVersionModal .build-version-notes-box::-webkit-scrollbar-track,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box::-webkit-scrollbar-track,
html.dark-mode #BuildVersionModal .modal-body div[style*="overflow-y"]::-webkit-scrollbar-track,
html.dark-mode #BuildVersionInfoModal .modal-body div[style*="overflow-y"]::-webkit-scrollbar-track {
    background-color: #1e2124;
    border-radius: 4px;
}

html.dark-mode #BuildVersionModal .build-version-notes-box::-webkit-scrollbar-thumb,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box::-webkit-scrollbar-thumb,
html.dark-mode #BuildVersionModal .modal-body div[style*="overflow-y"]::-webkit-scrollbar-thumb,
html.dark-mode #BuildVersionInfoModal .modal-body div[style*="overflow-y"]::-webkit-scrollbar-thumb {
    background-color: #474e56;
    border-radius: 4px;
}

html.dark-mode #BuildVersionModal .build-version-notes-box::-webkit-scrollbar-thumb:hover,
html.dark-mode #BuildVersionInfoModal .build-version-notes-box::-webkit-scrollbar-thumb:hover,
html.dark-mode #BuildVersionModal .modal-body div[style*="overflow-y"]::-webkit-scrollbar-thumb:hover,
html.dark-mode #BuildVersionInfoModal .modal-body div[style*="overflow-y"]::-webkit-scrollbar-thumb:hover {
    background-color: #606973;
}

/* Modal Footer */
html.dark-mode #BuildVersionModal .modd_foo,
html.dark-mode .modd_foo {
    background-color: var(--dm-surface, #1f2225) !important;
    border-top: 1px solid var(--dm-border, #383d42) !important;
}

html.dark-mode #BuildVersionModal .modd_foo .build-version-warning-text,
html.dark-mode #BuildVersionModal .modd_foo span[style*="color: red"],
html.dark-mode .modd_foo .build-version-warning-text,
html.dark-mode .modd_foo span[style*="color: red"] {
    color: #ff6b6b !important;
}

html.dark-mode #BuildVersionModal .modd_foo .btn-primary {
    background-color: #337ab7 !important;
    border-color: #2e6da4 !important;
    color: #ffffff !important;
}

html.dark-mode #BuildVersionModal .modd_foo .btn-primary:hover {
    background-color: #286090 !important;
    border-color: #204d74 !important;
    color: #ffffff !important;
}