/* FORTO360 charcoal palette, inspired by the supplied dashboard reference. */
.icon-viber {
    width: 18px;
    height: 18px;
    background-image: url("/icons/viber.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-sms {
    width: 18px;
    height: 18px;
    background-image: url("/icons/sms.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.login-page { background-color: lightgray; }

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: #e8ebef;
    border: 1px solid #cbd1d8;
    border-radius: 9px;
    white-space: nowrap;
}

.theme-switch-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #334155;
    font: 500 12px/1.2 'Open Sans', sans-serif;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.theme-switch-option:hover { background: rgba(52, 102, 143, .1); }
.theme-switch-option:focus-visible { outline: 2px solid #34668f; outline-offset: 1px; }
.theme-switch-option.active { background: #34668f; border-color: #34668f; color: #fff; }
.login-theme-switch { position: fixed; top: 14px; right: 16px; z-index: 20; }

/* Give the month and year selectors more room in both theme variants. */
.ui-datepicker { width: 20em; }
.ui-datepicker .ui-datepicker-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 38px;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: auto !important;
    box-sizing: border-box;
}
.ui-datepicker select.ui-datepicker-month { flex: 1.2 1 0; min-width: 92px; }
.ui-datepicker select.ui-datepicker-year { flex: 1 1 0; min-width: 75px; }

@media screen {
    html[data-theme="black"] .theme-switch {
        background: #1b2228;
        border-color: var(--black-border);
    }
    html[data-theme="black"] .theme-switch-option { color: var(--black-text); }
    html[data-theme="black"] .theme-switch-option:hover { background: var(--black-hover); }
    html[data-theme="black"] .theme-switch-option.active {
        background: var(--black-primary);
        border-color: var(--black-primary);
        color: var(--black-grid-text);
    }
    html[data-theme="black"] .theme-switch-option:focus-visible { outline-color: var(--black-blue); }
    html[data-theme="black"] {
        color-scheme: dark;
        --black-bg: #0f213c;
        --black-inner-panel: #202528;
        --black-filter: #252a2d;
        --black-sidebar: #141a26;
        --black-panel: #1c2023;
        --black-control: #20262a;
        --black-input-bg: #22282c;
        --black-input-border: #46505a;
        --black-input-text: #d6d9dd;
        --black-input-placeholder: #909ba5;
        --black-input-focus-bg: #252d32;
        --black-input-focus-border: #7895ac;
        --black-input-disabled-bg: #1d2328;
        --black-input-disabled-text: #7f8992;
        --black-dropdown-bg: #242a2e;
        --black-dropdown-selected-bg: #343f47;
        --black-field-outline: var(--black-input-border);
        --black-border: #30383e;
        --black-text: #ded9d2;
        --black-muted: #91999f;
        --black-blue: #8daac0;
        --black-green: #8eaf98;
        --black-red: #ce8b83;
        --black-primary: #34668f;
        --black-button: #334155;
        --black-button-hover: #40516a;
        --black-hover: #293137;
        --black-selected: #2d3b46;
        --black-row-border: #282f34;
        --black-grid-text: #ded9d2;
        --black-grid-header: #242a2e;
        --black-grid-footer: #282f33;
        --black-grid-row: #20262a;
        --black-grid-row-alt: #272e33;
        --black-grid-ink: #d6d9dd;
        --black-grid-link: #8daac0;
        --black-grid-green: #70c58f;
        --black-grid-red: #ef8178;
        --black-control-height: 34px;
        --black-radius: 6px;
        --dt-row-selected: 45, 59, 70;
        --dt-row-selected-text: 222, 217, 210;
        --dt-row-selected-link: 141, 170, 192;
        background: var(--black-bg);
        color: var(--black-text);
        text-rendering: optimizeLegibility;
    }

    html[data-theme="black"] body,
    html[data-theme="black"] .page-wrapper,
    html[data-theme="black"] .page-content,
    html[data-theme="black"] .page-content-inner {
        background: #141a26;
        color: var(--black-text);
        font-weight: 500;
    }
    html[data-theme="black"] .page-inner {
        background: var(--black-inner-panel);
        color: var(--black-text);
        font-weight: 500;
        border: 1px solid var(--black-border);
        border-radius: 8px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    }

    html[data-theme="black"] .sidebar {
        background: var(--black-sidebar);
        border-right: 1px solid #202a33;
        border-radius: 0;
    }

    html[data-theme="black"] .page-header {
        background: #1b2228;
        color: var(--black-text);
        border-bottom: 1px solid var(--black-border);
    }

    html[data-theme="black"] .nav-element a { color: var(--black-muted); }
    html[data-theme="black"] a:not(.btn):not(.theme-switch-option):not(.trigger-dropdown):not(.close-dialog):not(.tooltip-trigger):not(:has(> .custom-icon)):not(:has(> img:only-child)) {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    html[data-theme="black"] a:not(.btn):not(.theme-switch-option):not(.trigger-dropdown):not(.close-dialog):not(.tooltip-trigger):not(:has(> .custom-icon)):not(:has(> img:only-child)):hover {
        text-decoration-thickness: 2px;
    }
    html[data-theme="black"] .sidebar .nav-main a { text-decoration: none !important; }
    html[data-theme="black"] .nav-element.opened { background: #19232d; }
    html[data-theme="black"] .nav-element .nav-title.active,
    html[data-theme="black"] .nav-element .nav-title:hover,
    html[data-theme="black"] .nav-main .sub-menu li.active a,
    html[data-theme="black"] .nav-main .sub-menu li a:hover {
        background: #263546;
        color: var(--black-text);
        border-radius: 6px;
    }

    html[data-theme="black"] .nav-element .nav-title span { font-weight: 600; }
    html[data-theme="black"] .breadcrumb a { color: var(--black-muted); }
    html[data-theme="black"] .personal-info .initials { background: var(--black-control); }
    html[data-theme="black"] .personal-info .initials:after,
    html[data-theme="black"] .lang-picker .current-lang:after { filter: invert(0.7); }

    html[data-theme="black"] .metric-card,
    html[data-theme="black"] .dashboard-boxes .box,
    html[data-theme="black"] .dashboard-quick-links {
        background: var(--black-panel) !important;
        border: 1px solid var(--black-border) !important;
        box-shadow: none;
        border-radius: 7px;
    }

    html[data-theme="black"] .metric-card { padding: 8px 18px; }
    html[data-theme="black"] .metric-value,
    html[data-theme="black"] .communication-metric-value,
    html[data-theme="black"] .dashboard-boxes .box-text h3,
    html[data-theme="black"] .dashboard-quick-links h3 { color: var(--black-text); }
    html[data-theme="black"] .metric-label,
    html[data-theme="black"] .communication-metric-label,
    html[data-theme="black"] .dashboard-boxes .box-text p { color: var(--black-muted) !important; }
    html[data-theme="black"] .communication-metric-chart { background: transparent; }

    html[data-theme="black"] .dashboard-quick-links-list a {
        background: var(--black-button);
        border: 1px solid var(--black-button);
        color: var(--black-text);
        font-weight: 500;
        padding: 8px;
    }
    html[data-theme="black"] .dashboard-quick-links-list a:hover { background: var(--black-button-hover); }

    html[data-theme="black"] .dashboard-signals .dashboard-quick-links-list a {
        background: var(--signal-background, #cce7fb);
        border-color: var(--signal-background, #cce7fb);
        color: var(--black-text);
        padding: 7px 12px;
    }
    html[data-theme="black"] .dashboard-signals .dashboard-quick-links-list a:hover,
    html[data-theme="black"] .dashboard-signals .dashboard-quick-links-list a:focus-visible {
        background: var(--signal-background, #cce7fb);
        filter: brightness(0.96);
    }

    html[data-theme="black"] .dashboard-signals a[data-status-id="4"] { --signal-background: var(--signal-new-bg-dark); }
    html[data-theme="black"] .dashboard-signals a[data-status-id="5"] { --signal-background: var(--signal-accepted-bg-dark); }
    html[data-theme="black"] .dashboard-signals a[data-status-id="6"] { --signal-background: var(--signal-pending-bg-dark); }
    html[data-theme="black"] .dashboard-signals a[data-status-id="2"] { --signal-background: var(--signal-progress-bg-dark); }
    html[data-theme="black"] .dashboard-signals a[data-status-id="7"] { --signal-background: var(--signal-warranty-bg-dark); }
    html[data-theme="black"] .dashboard-signals a[data-status-id="3"] { --signal-background: var(--signal-completed-bg-dark); }
    html[data-theme="black"] .dashboard-signals a[data-status-id="1"] { --signal-background: var(--signal-warranty-bg-dark); }

    html[data-theme="black"] input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    html[data-theme="black"] select,
    html[data-theme="black"] textarea,
    html[data-theme="black"] .ui-multiselect {
        background-color: var(--black-input-bg);
        color: var(--black-input-text);
        border: 1px solid var(--black-input-border);
        border-radius: 6px;
    }
    html[data-theme="black"] input::placeholder,
    html[data-theme="black"] textarea::placeholder { color: var(--black-input-placeholder); }
    html[data-theme="black"] .form-label { color: var(--black-muted); }
    html[data-theme="black"] :focus-visible { outline: 1px solid var(--black-blue); outline-offset: 2px; }

    html[data-theme="black"] .personal-info-dropdown,
    html[data-theme="black"] .lang-dropdown,
    html[data-theme="black"] .ui-widget-content,
    html[data-theme="black"] .ui-multiselect-menu,
    html[data-theme="black"] .xdsoft_datetimepicker,
    html[data-theme="black"] .ac_results {
        background: var(--black-panel);
        color: var(--black-text);
        border-color: var(--black-border);
    }
    html[data-theme="black"] .personal-info > .initials.trigger-dropdown {
        border: 1px solid rgba(222, 217, 210, 0.7);
        box-sizing: border-box;
    }
    html[data-theme="black"] .personal-info-dropdown a,
    html[data-theme="black"] .lang-dropdown a,
    html[data-theme="black"] .personal-info h4,
    html[data-theme="black"] .ui-widget-content a { color: var(--black-text); }
    html[data-theme="black"] .personal-info-dropdown li a:hover,
    html[data-theme="black"] .lang-dropdown li a:hover,
    html[data-theme="black"] .lang-dropdown li.active a,
    html[data-theme="black"] .ui-widget-header { background: var(--black-control); color: var(--black-text); border-color: var(--black-border); }

    /* Shared controls: matte surfaces and a single, quiet focus treatment. */
    html[data-theme="black"] :is(input, select, textarea, button.ui-multiselect),
    html[data-theme="black"] .ms-options-wrap > button,
    html[data-theme="black"] .chosen-container .chosen-single {
        box-shadow: none;
        background-image: none;
    }
    html[data-theme="black"] :is(.text-input, .search-form, .datepicker-wrapper, .dataTables_filter) input,
    html[data-theme="black"] select:not([multiple]),
    html[data-theme="black"] button.ui-multiselect,
    html[data-theme="black"] .ms-options-wrap > button,
    html[data-theme="black"] .chosen-container .chosen-single {
        min-height: var(--black-control-height);
        height: var(--black-control-height);
        border-radius: var(--black-radius);
        padding: 7px 10px;
        box-sizing: border-box;
    }
    html[data-theme="black"] .datepicker-wrapper input { padding-right: 32px; }
    html[data-theme="black"] :is(input, select, textarea, button.ui-multiselect):focus,
    html[data-theme="black"] .ms-options-wrap > button:focus,
    html[data-theme="black"] .ms-options-wrap.ms-active > button {
        background-color: var(--black-input-focus-bg);
        border-color: var(--black-input-focus-border);
        outline: 1px solid var(--black-input-focus-border);
        outline-offset: 0;
        box-shadow: none;
    }
    html[data-theme="black"] select option {
        background: var(--black-dropdown-bg) !important;
        color: var(--black-input-text);
    }
    /* The legacy widget stylesheet marks these properties important. */
    html[data-theme="black"] .global-dropdown button.ui-multiselect {
        background: var(--black-input-bg) !important;
        color: var(--black-input-text) !important;
        font-weight: 500 !important;
        padding: 7px 10px !important;
    }
    html[data-theme="black"] .global-dropdown button.ui-multiselect:hover { border-color: var(--black-input-focus-border) !important; }
    html[data-theme="black"] .global-dropdown button.ui-multiselect:focus { border-color: var(--black-input-focus-border) !important; }
    html[data-theme="black"] button.ui-multiselect .ui-icon { filter: brightness(0) invert(0.65); }
    html[data-theme="black"] select:hover,
    html[data-theme="black"] button.ui-multiselect:hover,
    html[data-theme="black"] .ms-options-wrap > button:hover {
        color: var(--black-text);
        border-color: #46525c;
    }
    html[data-theme="black"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: #648470; }
    html[data-theme="black"] :is(input, select, textarea, button):disabled,
    html[data-theme="black"] .table-input.disabled-input {
        background-color: var(--black-input-disabled-bg) !important;
        color: var(--black-input-disabled-text) !important;
    }
    html[data-theme="black"] #pnlFilter,
    html[data-theme="black"] .apartment-metric {
        background: var(--black-filter);
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
        box-shadow: none;
    }
    html[data-theme="black"] .apartment-metric-value { color: var(--black-text); }
    html[data-theme="black"] .apartment-metric-label,
    html[data-theme="black"] .custom-table-wrapper .table-title { color: var(--black-muted); }

    /* Both multiselect implementations are used throughout the application. */
    html[data-theme="black"] button.ui-multiselect,
    html[data-theme="black"] .ms-options-wrap > button,
    html[data-theme="black"] .chosen-container .chosen-single {
        background: var(--black-input-bg);
        border: 1px solid var(--black-input-border);
        color: var(--black-input-text);
    }
    html[data-theme="black"] .ui-multiselect-menu,
    html[data-theme="black"] .ms-options-wrap > .ms-options,
    html[data-theme="black"] .chosen-container .chosen-drop,
    html[data-theme="black"] .grid-actions-dropdown,
    html[data-theme="black"] .dt-button-collection {
        background: var(--black-dropdown-bg);
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        padding: 6px;
    }
    html[data-theme="black"] .ui-multiselect-header,
    html[data-theme="black"] .ms-options .drop-actions {
        background: transparent;
        color: var(--black-muted);
        border: 0;
        border-bottom: 1px solid var(--black-border);
        padding: 8px 4px;
    }
    html[data-theme="black"] .ui-multiselect-header a,
    html[data-theme="black"] .ms-options :is(.ms-selectall, .ms-deselectall) { color: var(--black-muted); }
    html[data-theme="black"] .ui-multiselect-filter input,
    html[data-theme="black"] .ms-options .ms-search input {
        background: var(--black-input-bg);
        color: var(--black-input-text);
        border: 1px solid var(--black-input-border);
        border-radius: var(--black-radius);
        min-height: var(--black-control-height);
        box-shadow: none;
    }
    /* !important replaces inline white backgrounds assigned during refresh. */
    html[data-theme="black"] .ui-multiselect-checkboxes label,
    html[data-theme="black"] .ms-options-wrap > .ms-options > ul label,
    html[data-theme="black"] .grid-actions-dropdown li a,
    html[data-theme="black"] .chosen-container .chosen-results li {
        background: transparent !important;
        color: var(--black-input-text);
        border: 1px solid transparent;
        border-radius: 4px;
        min-height: 34px;
        padding-top: 8px;
        padding-bottom: 8px;
        line-height: 18px;
        box-sizing: border-box;
        text-decoration: none;
    }
    html[data-theme="black"] .ui-multiselect-checkboxes label[style*="lightgray"],
    html[data-theme="black"] .ui-multiselect-checkboxes label[style*="211, 211, 211"],
    html[data-theme="black"] .chosen-container .chosen-results li.disabled-result {
        color: var(--black-muted);
        background: #24292d !important;
    }
    html[data-theme="black"] .ui-multiselect-checkboxes label.ui-state-hover,
    html[data-theme="black"] .ui-multiselect-checkboxes label:hover,
    html[data-theme="black"] .ms-options-wrap > .ms-options > ul label:hover,
    html[data-theme="black"] .ms-options-wrap > .ms-options > ul label.focused,
    html[data-theme="black"] .grid-actions-dropdown li a:hover,
    html[data-theme="black"] .chosen-container .chosen-results li.highlighted {
        background: var(--black-hover) !important;
        border-color: transparent;
    }
    html[data-theme="black"] .ui-multiselect-checkboxes label:has(input:checked),
    html[data-theme="black"] .ms-options-wrap > .ms-options > ul li.selected label {
        background: var(--black-dropdown-selected-bg) !important;
    }
    html[data-theme="black"] .ms-options-wrap > .ms-options > ul label span {
        background: var(--black-control);
        border-color: #65717a;
    }
    html[data-theme="black"] .ms-options-wrap > .ms-options > ul input:checked + span {
        background: #648470;
        border-color: #648470;
    }
    html[data-theme="black"] .ms-options-wrap > button:after { filter: brightness(0) invert(0.65); }

    /* Secondary and row actions stay neutral; only primary actions use blue. */
    html[data-theme="black"] .btn,
    html[data-theme="black"] .dt-button,
    html[data-theme="black"] input:is([type="button"], [type="submit"]) {
        background: var(--black-control);
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
        min-height: var(--black-control-height);
        padding: 8px 10px;
        box-shadow: none;
        text-decoration: none;
        box-sizing: border-box;
    }
    html[data-theme="black"] .btn:hover,
    html[data-theme="black"] .dt-button:hover { background: var(--black-hover); box-shadow: none; filter: none; }
    /* Column chooser: the generic button background replaces its old icon image. */
    html[data-theme="black"] .dt-buttons {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }
    html[data-theme="black"] .dt-button.columnChooser {
        position: relative;
        width: 34px;
        height: 34px;
        min-width: 34px;
        padding: 0;
        margin-top: 0;
    }
    html[data-theme="black"] .dt-button.columnChooser::before {
        content: '';
        position: absolute;
        inset: 8px;
        background-color: var(--black-text);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v18H3zM9 3v18M15 3v18' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v18H3zM9 3v18M15 3v18' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        pointer-events: none;
    }
    html[data-theme="black"] .dt-button-collection .buttons-columnVisibility {
        background: var(--black-dropdown-bg);
        color: var(--black-text) !important;
        border: 1px solid var(--black-border);
        box-shadow: none;
        height: auto;
        min-height: 32px;
        padding: 6px 8px;
        line-height: 18px;
    }
    html[data-theme="black"] .dt-button-collection .buttons-columnVisibility.active {
        background: var(--black-selected);
        border: 1px solid #46525c;
        box-shadow: none;
        height: auto;
        min-height: 32px;
        padding: 6px 8px;
    }
    html[data-theme="black"] .dt-button-collection .buttons-columnVisibility:hover,
    html[data-theme="black"] .dt-button-collection .buttons-columnVisibility:focus-visible { background: var(--black-hover); }
    html[data-theme="black"] .dt-button-collection .buttons-columnVisibility span { color: inherit; }
    html[data-theme="black"] .btn-main,
    html[data-theme="black"] #btnAddNew {
        background: var(--black-button);
        border: 1px solid var(--black-button);
        color: var(--black-text);
        border-radius: var(--black-radius);
        min-height: var(--black-control-height);
    }
    html[data-theme="black"] .btn-main:hover,
    html[data-theme="black"] #btnAddNew:hover { background: var(--black-button-hover); }
    html[data-theme="black"] .btn.quicactions-button {
        background: var(--black-button);
        border-color: var(--black-button);
        color: var(--black-text);
        padding: 7px 10px;
    }
    html[data-theme="black"] .btn.quicactions-button:hover { background: var(--black-button-hover); }
    html[data-theme="black"] .btn-red { background: #784f4b; border-color: #92655f; }
    html[data-theme="black"] .btn-red:hover { background: #89605a; }
    html[data-theme="black"] .btn-grid-action {
        background: var(--black-control);
        color: var(--black-text) !important;
        border: 1px solid var(--black-border);
        min-height: 28px;
        padding: 7px 10px;
        border-radius: var(--black-radius);
        white-space: nowrap;
    }

    /* Quiet grid: horizontal separators, generous rows, no vertical lattice. */
    html[data-theme="black"] table.dataTable {
        background: var(--black-control);
        color: var(--black-grid-text);
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
        border-spacing: 0;
    }
    html[data-theme="black"] table.dataTable tbody tr { background: var(--black-grid-row) !important; }
    html[data-theme="black"] table.dataTable tbody :is(td, th) {
        background: var(--black-grid-row) !important;
        color: var(--black-grid-ink);
        font-weight: 500;
        padding: 8px 6px;
        border: 0;
        border-bottom: 1px solid var(--black-row-border);
        box-shadow: none !important;
    }
    html[data-theme="black"] table.dataTable tbody tr ~ tr td { border-top: 0; }
    html[data-theme="black"] table.dataTable tbody tr.odd :is(td, th) { background: var(--black-grid-row) !important; }
    html[data-theme="black"] table.dataTable tbody tr.even :is(td, th),
    html[data-theme="black"] table.dataTable tbody tr:nth-child(even):where(:not(.odd):not(.even):not(.child)) :is(td, th) { background: var(--black-grid-row-alt) !important; }
    html[data-theme="black"] .table-caption {
        background: #293035;
        color: var(--black-text);
        border: 0;
        border-bottom: 1px solid var(--black-border);
        padding: 10px 6px;
    }
    html[data-theme="black"] table.dataTable thead,
    html[data-theme="black"] table.dataTable thead :is(th, td) {
        background: var(--black-grid-header);
        color: var(--black-grid-text);
        border-color: var(--black-border);
    }
    html[data-theme="black"] table.dataTable tfoot,
    html[data-theme="black"] table.dataTable tfoot :is(th, td) {
        background: var(--black-grid-footer);
        color: var(--black-grid-text);
        border-color: var(--black-border);
    }
    html[data-theme="black"] table.dataTable tbody tr:hover :is(td, th) { background: var(--black-hover) !important; }
    html[data-theme="black"] table.dataTable tbody tr.selected :is(td, th) { background: var(--black-selected) !important; }
    html[data-theme="black"] table.dataTable tbody tr td:first-child:before { background: #627e93; width: 2px; }
    html[data-theme="black"] table.dataTable :is(a:not(.btn), .table-link) {
        color: var(--black-grid-link);
        font-weight: 500;
        text-decoration: none;
    }
    html[data-theme="black"] table.dataTable :is(a:not(.btn), .table-link):hover { text-decoration: underline; }
    html[data-theme="black"] table.dataTable .grid-actions-dropdown a { color: var(--black-text); text-decoration: none; }
    html[data-theme="black"] .administrator-charges-groups table.dataTable .editrow.table-link { white-space: nowrap; }
    /* Existing renderers carry semantic colors inline; keep their meaning. */
    html[data-theme="black"] :is(table.dataTable, .apartment-metrics) :is(.text-success, [style^="color: green" i], [style*="; color: green" i], [style^="color:green" i], [style*=";color:green" i]) {
        color: var(--black-grid-green) !important;
    }
    html[data-theme="black"] :is(table.dataTable, .apartment-metrics) :is(.text-danger, .error-link, [style^="color: maroon" i], [style*="; color: maroon" i], [style^="color:maroon" i], [style*=";color:maroon" i], [style^="color: red" i], [style*="; color: red" i]) {
        color: var(--black-grid-red) !important;
    }
    html[data-theme="black"] table.dataTable :is(thead, tfoot) :is(th, td) { color: var(--black-grid-text); }
    html[data-theme="black"] table.dataTable :is(.text-success, [style^="color: green" i], [style*="; color: green" i], [style^="color:green" i], [style*=";color:green" i]) {
        color: var(--black-grid-green) !important;
    }
    html[data-theme="black"] table.dataTable :is(.text-danger, .error-link, [style^="color: maroon" i], [style*="; color: maroon" i], [style^="color:maroon" i], [style*=";color:maroon" i], [style^="color: red" i], [style*="; color: red" i]) {
        color: var(--black-grid-red) !important;
    }
    html[data-theme="black"] table.dataTable .table-input {
        background-color: var(--black-panel);
        min-height: 28px;
        border-color: var(--black-border);
    }

    html[data-theme="black"] .ui-switcher {
        background: #343c40;
        box-shadow: none;
    }
    html[data-theme="black"] .ui-switcher[aria-checked="true"] { background: #587563; }
    html[data-theme="black"] .ui-switcher:after { background: #d2dbd5; }

    /* Sort indicators need enough contrast against the navy grid header. */
    html[data-theme="black"] table.dataTable thead :is(.sorting, .sorting_asc, .sorting_desc)::before,
    html[data-theme="black"] table.dataTable thead :is(.sorting, .sorting_asc, .sorting_desc)::after {
        color: var(--black-text);
        opacity: 0.65;
    }
    html[data-theme="black"] table.dataTable thead .sorting_asc::before,
    html[data-theme="black"] table.dataTable thead .sorting_desc::after { opacity: 1; }
    html[data-theme="black"] table.dataTable thead .sorting_asc::after,
    html[data-theme="black"] table.dataTable thead .sorting_desc::before { opacity: 0.35; }
    html[data-theme="black"] table.dataTable thead .DataTables_sort_icon { filter: brightness(0) invert(0.87); }

    /* Reuse each SVG's silhouette with a readable theme color on every page. */
    html[data-theme="black"] .icon-details-notes { --black-action-mask: url('/icons/details-notes.svg'); }
    html[data-theme="black"] .icon-details-notes-green {
        --black-action-mask: url('/icons/details-notes-green.svg');
        --black-action-color: var(--black-grid-green);
    }
    html[data-theme="black"] .icon-notes { --black-action-mask: url('/icons/notes.svg'); }
    html[data-theme="black"] .icon-notes-red {
        --black-action-mask: url('/icons/notes-red.svg');
        --black-action-color: var(--black-grid-red);
    }
    html[data-theme="black"] .icon-pencil { --black-action-mask: url('/icons/pencil.svg'); }
    html[data-theme="black"] .icon-edit { --black-action-mask: url('/icons/sidebar-icons/edit.svg'); }
    html[data-theme="black"] .icon-save { --black-action-mask: url('/icons/save.svg'); }
    html[data-theme="black"] .icon-trash-can {
        --black-action-mask: url('/icons/trash-can.svg');
        --black-action-color: var(--black-grid-red);
    }
    html[data-theme="black"] .custom-icon:is(.icon-details-notes, .icon-details-notes-green, .icon-notes, .icon-notes-red, .icon-pencil, .icon-edit, .icon-save, .icon-trash-can) {
        background-image: none !important;
        background-color: var(--black-action-color, var(--black-text)) !important;
        -webkit-mask-image: var(--black-action-mask);
        mask-image: var(--black-action-mask);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
    html[data-theme="black"] img[src*="home_white.svg"] { filter: brightness(0) invert(0.87); }
    html[data-theme="black"] img[src*="home_green.svg"] { filter: brightness(1.65) saturate(0.75); }
    html[data-theme="black"] img[src*="icon-edit.gif"] {
        content: url('/icons/pencil.svg');
        filter: brightness(0) invert(0.87);
    }
    html[data-theme="black"] img[src*="icon-delete.gif"] {
        content: url('/icons/trash-can.svg');
        filter: brightness(1.65) saturate(0.75);
    }

    /* Toolbars and pagination share the same control geometry. */
    html[data-theme="black"] .dataTables_wrapper .dataTables_filter { align-items: center; flex-wrap: wrap; gap: 8px; }
    /* The default dropdown wrapper has a fixed width, unlike its dark control.
       Size grid actions to their contents instead of leaving empty space before the buttons. */
    html[data-theme="black"] .push-in-table > .dropdown-single { width: auto; }
    html[data-theme="black"] .push-in-table + .dt-buttons { margin-left: 5px; }
    html[data-theme="black"] .dataTables_wrapper :is(.dataTables_filter, .dataTables_length) label { color: var(--black-muted); }
    html[data-theme="black"] .dataTables_wrapper .dataTables_paginate .paginate_button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        min-height: 32px;
        padding: 6px 9px;
        margin: 2px;
        background: var(--black-control);
        color: var(--black-text) !important;
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
        box-shadow: none;
    }
    html[data-theme="black"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--black-hover); border-color: #46525c; }
    html[data-theme="black"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--black-primary); border-color: var(--black-primary); }
    html[data-theme="black"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    html[data-theme="black"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--black-muted) !important; background: var(--black-panel); border-color: var(--black-border); cursor: default; }
    html[data-theme="black"] table.dataTable .editrow:not(.table-link),
    html[data-theme="black"] table.dataTable .cell-icons > :is(a, button, span),
    html[data-theme="black"] table.dataTable a:has(> img:only-child),
    html[data-theme="black"] .custom-actions a:has(> .custom-icon:only-child) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: var(--black-panel);
        border: 1px solid var(--black-border);
        border-radius: 5px;
        box-sizing: border-box;
        text-decoration: none;
        vertical-align: middle;
    }
    html[data-theme="black"] table.dataTable .editrow:not(.table-link):hover,
    html[data-theme="black"] table.dataTable .cell-icons > :is(a, button, span):hover,
    html[data-theme="black"] table.dataTable a:has(> img:only-child):hover,
    html[data-theme="black"] .custom-actions a:hover { background: var(--black-hover); }
    html[data-theme="black"] .dataTables_wrapper,
    html[data-theme="black"] .dataTables_wrapper .dataTables_info,
    html[data-theme="black"] .dataTables_wrapper .dataTables_paginate { color: var(--black-muted); }

    /* ApartmentProform's live grid receives legacy inline colors after each draw. */
    html[data-theme="black"] .apartment-proform #tblResults thead th {
        background: var(--black-grid-header) !important;
        color: var(--black-grid-text) !important;
        border-color: var(--black-border) !important;
    }
    html[data-theme="black"] .apartment-proform #tblResults tbody tr,
    html[data-theme="black"] .apartment-proform #tblResults tbody td {
        background: var(--black-control) !important;
        color: var(--black-grid-text);
        border-color: var(--black-row-border) !important;
    }
    html[data-theme="black"] .apartment-proform #tblResults tbody tr.even td { background: #272e33 !important; }
    html[data-theme="black"] .apartment-proform #tblResults tbody tr:hover td { background: var(--black-hover) !important; }
    html[data-theme="black"] .apartment-proform #tblResults tfoot :is(th, td),
    html[data-theme="black"] .apartment-proform #tblCommonData :is(td, th) {
        background: var(--black-grid-footer);
        color: var(--black-text);
        border-color: var(--black-border);
    }
    html[data-theme="black"] .apartment-proform #tblResults input[type="text"] {
        background: var(--black-control) !important;
        color: var(--black-text) !important;
        border-color: var(--black-border) !important;
    }

    /* Apartment account summaries and document panels use light surfaces by default. */
    html[data-theme="black"] .apartment-account :is(.top-bar, .box-info-element) {
        background: var(--black-control);
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
    }
    html[data-theme="black"] .apartment-account .box-info-big .box-info-element { padding: 10px 12px; }
    html[data-theme="black"] .apartment-account .box-info-total {
        background: var(--black-sidebar);
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
        padding: 10px 12px;
    }
    html[data-theme="black"] .apartment-account :is(.box-info > strong, .box-info-big .box-info-element span, .box-documents h3, .box-documents-row > span, .form-label) {
        color: var(--black-text);
    }
    html[data-theme="black"] .apartment-account .top-bar a:not(.btn) {
        color: var(--black-blue);
        text-decoration: none;
    }
    html[data-theme="black"] .apartment-account .top-bar a:not(.btn):hover { text-decoration: underline; }

    html[data-theme="black"] :is(.income-report-page, .income-total-report-page) .chartContainer {
        background: transparent;
        border-bottom-color: var(--black-border);
    }
    html[data-theme="black"] :is(.income-report-page, .income-total-report-page) .chartContainer .boxShadow {
        background: var(--black-panel) !important;
        border: 1px solid var(--black-border);
        border-radius: 8px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    }

    /* Apartment report sections and totals, including dynamically rendered labels. */
    html[data-theme="black"] :is(.apartment-report, .apartment-advances) .top-bar {
        background: var(--black-control);
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
    }
    html[data-theme="black"] :is(.apartment-report, .apartment-advances) :is(.info-box, .form-label) { color: var(--black-text); }
    html[data-theme="black"] .apartment-advances .info-box-alt {
        background: var(--black-sidebar);
        color: var(--black-text);
        border-color: var(--black-border) !important;
    }
    html[data-theme="black"] .apartment-report .box-info-total {
        background: var(--black-sidebar);
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
        padding: 10px 12px;
    }
    html[data-theme="black"] :is(.apartment-report, .apartment-document) :is([style^="color: black" i], [style^="color:black" i], [style*="; color: black" i], [style*=";color:black" i]) { color: var(--black-text) !important; }

    /* Payment invitations and communal invoices: override inline paper colors on screen. */
    html[data-theme="black"] .apartment-document > table {
        background: var(--black-panel);
        color: var(--black-text);
        border: 1px solid var(--black-border) !important;
        border-radius: var(--black-radius);
    }
    html[data-theme="black"] .apartment-document :is(td, th, label, .BlackTableBody, .style31) { color: var(--black-text); }
    html[data-theme="black"] .apartment-document table { border-color: var(--black-border) !important; }
    html[data-theme="black"] .apartment-document :is(.table-element, #tblAdvance, #tblCommonData) {
        background: var(--black-control) !important;
        color: var(--black-text) !important;
    }
    html[data-theme="black"] .apartment-document .table-element thead :is(th, td) {
        background: var(--black-grid-header) !important;
        color: var(--black-text) !important;
        border-color: var(--black-border) !important;
    }
    html[data-theme="black"] .apartment-document .table-element tfoot :is(th, td) {
        background: var(--black-grid-footer) !important;
        color: var(--black-text) !important;
        border-color: var(--black-border) !important;
    }
    html[data-theme="black"] .apartment-document .table-element tbody :is(th, td) { border-color: var(--black-row-border) !important; }
    html[data-theme="black"] .apartment-document .table-element:not(.dataTable) tbody td { background: var(--black-control) !important; }
    html[data-theme="black"] .apartment-document .table-element:not(.dataTable) tbody tr:nth-child(even) td { background: #272e33 !important; }
    html[data-theme="black"] .apartment-document .table-element:not(.dataTable) tbody tr:hover td { background: var(--black-hover) !important; }
    html[data-theme="black"] .apartment-document #tblAdvance td { border-color: var(--black-border) !important; }
    html[data-theme="black"] .apartment-document #ProformTitle2 { color: var(--black-text) !important; }
    html[data-theme="black"] .apartment-document #ddlPaymentType {
        background-color: var(--black-control) !important;
        color: var(--black-text);
    }
    html[data-theme="black"] .apartment-document td[style*="color: maroon" i] { color: var(--black-grid-red) !important; }
    /* Keep the invoice's fixed columns identical to the light-theme layout. */
    html[data-theme="black"] .apartment-proform-communal #tblResults tbody td {
        padding: 3px;
        font-weight: 400;
    }

    /* HomeBook document tables and their JS-created read-only/editable controls. */
    html[data-theme="black"] :is(.home-book, .apartment-home-book) { color: var(--black-text); }
    html[data-theme="black"] :is(.home-book, .apartment-home-book) .top-bar {
        background: #293035 !important;
        color: var(--black-text) !important;
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
    }
    html[data-theme="black"] :is(.home-book, .apartment-home-book) .top-bar :is(p, strong) { color: var(--black-text) !important; }
    html[data-theme="black"] :is(.home-book, .apartment-home-book) :is(#tblCommonData, #tblDivision1, #tblDivision2, #tblDivision3, #tblDivision4) {
        background: var(--black-panel) !important;
        color: var(--black-text) !important;
        border-color: var(--black-border) !important;
    }
    html[data-theme="black"] :is(.home-book, .apartment-home-book) :is(#tblCommonData, #tblDivision1, #tblDivision2, #tblDivision3, #tblDivision4) :is(td, th) {
        background: var(--black-panel) !important;
        color: var(--black-text) !important;
        border-color: var(--black-row-border) !important;
    }
    html[data-theme="black"] :is(.home-book, .apartment-home-book) :is(#tblDivision1, #tblDivision2, #tblDivision3, #tblDivision4) thead tr,
    html[data-theme="black"] :is(.home-book, .apartment-home-book) :is(#tblDivision1, #tblDivision2, #tblDivision3, #tblDivision4) thead th {
        background: var(--black-grid-header) !important;
        color: var(--black-grid-text) !important;
        border-color: var(--black-border) !important;
    }
    html[data-theme="black"] :is(.home-book, .apartment-home-book) :is(.table-data-input, .table-input, #txtPurpose, .dropdown-single-select, textarea, input:not([type="hidden"])) {
        background: var(--black-control) !important;
        color: var(--black-text) !important;
        border-color: rgba(255, 255, 255, 0.32) !important;
    }
    html[data-theme="black"] :is(.home-book, .apartment-home-book) :is(.table-data-input, .table-input, #txtPurpose, .dropdown-single-select, textarea, input):disabled {
        background: var(--black-panel) !important;
        color: var(--black-muted) !important;
        opacity: 1;
    }
    html[data-theme="black"] :is(.home-book, .apartment-home-book) .info-box { color: var(--black-text); }
    html[data-theme="black"] :is(.home-book, .apartment-home-book) .dates::placeholder { color: var(--black-muted); }

    /* Shared cash/balance reports: filters, section titles, and summary panels. */
    html[data-theme="black"] .financial-report :is(.info-box, .form-label, .table-title, .total-body) { color: var(--black-text); }
    html[data-theme="black"] .financial-report :is(.info-box-alt, .total-header, .box-info-total) {
        background: var(--black-sidebar);
        color: var(--black-text);
        border-color: var(--black-border) !important;
    }
    html[data-theme="black"] .financial-report .total-body { background: var(--black-control); }
    html[data-theme="black"] .financial-report table:not(.dataTable) {
        color: var(--black-text);
        border-color: var(--black-border) !important;
    }
    /* Inline section bands also appear in report markup appended after a search. */
    html[data-theme="black"] .financial-report :is(div, table, tr):is([style*="background-color: gainsboro" i], [style*="background-color:gainsboro" i], [style*="background-color: rgb(220, 220, 220)" i]) {
        background-color: var(--black-control) !important;
        color: var(--black-text);
    }
    html[data-theme="black"] .financial-report table:is([style*="background-color: #ffcc00" i], [style*="background-color:#ffcc00" i], [style*="background-color: rgb(255, 204, 0)" i]) {
        background-color: var(--black-sidebar) !important;
        color: var(--black-text);
    }
    html[data-theme="black"] .financial-report :is([style^="color: black" i], [style*="; color: black" i], [style^="color:black" i], [style*=";color:black" i], [style*="color: rgb(0, 0, 0)" i]) { color: var(--black-text) !important; }
    html[data-theme="black"] .financial-report :is([style^="color: green" i], [style^="color:green" i], [style*="; color: green" i], [style*="color: rgb(0, 128, 0)" i]) { color: var(--black-grid-green) !important; }
    html[data-theme="black"] .financial-report :is([style^="color: red" i], [style*="; color: red" i], [style^="color: maroon" i], [style*="; color: maroon" i], [style*="color: #d80027" i], [style*="color: rgb(216, 0, 39)" i]) { color: var(--black-grid-red) !important; }

    html[data-theme="black"] .customer-support > .inline-elements > table,
    html[data-theme="black"] .customer-support > .inline-elements > table td { background: transparent; color: var(--black-text); }
    html[data-theme="black"] .customer-support #AptNo {
        background: var(--black-input-bg) !important;
        color: var(--black-input-text) !important;
        border: 1px solid var(--black-input-border) !important;
    }
    html[data-theme="black"] .customer-support #AptNo:disabled {
        background: var(--black-input-disabled-bg) !important;
        color: var(--black-input-disabled-text) !important;
    }

    html[data-theme="black"] .budget-by-contract .form-label { color: var(--black-text); }
    html[data-theme="black"] .budget-by-contract #frmdiv > table {
        background-color: var(--black-panel) !important;
        color: var(--black-text);
        border-color: var(--black-border);
        border-radius: var(--black-radius);
    }
    html[data-theme="black"] .budget-by-contract #frmdiv td { color: var(--black-text); }

    /* Survey editor and cloned question panels retain their existing layout. */
    html[data-theme="black"] .survey-editor { background: var(--black-panel); color: var(--black-text); }
    html[data-theme="black"] .survey-editor > .form-header {
        background: var(--black-grid-header);
        color: var(--black-text);
        border: 0;
        border-radius: 103px;
    }
    html[data-theme="black"] .survey-editor :is(.info-box, .form-label, table:not(.dataTable)) { color: var(--black-text); }
    html[data-theme="black"] .survey-editor .addEditQuestion {
        background-color: var(--black-control) !important;
        color: var(--black-text);
        border-color: var(--black-border) !important;
    }
    html[data-theme="black"] .survey-editor #lblClientUrl { color: var(--black-blue) !important; }
    html[data-theme="black"] .survey-editor .addEditQuestion span[style*="color: #8b0000" i] { color: var(--black-grid-red) !important; }
    html[data-theme="black"] .survey-editor .tox-tinymce { border-color: var(--black-border); }

    /* DailyReportDetails also assigns light panel backgrounds while opening records. */
    html[data-theme="black"] .daily-report-details { background-color: #141a26 !important; }
    html[data-theme="black"] .daily-report-details #dialogDetails {
        background-color: var(--black-panel) !important;
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: 8px;
    }
    html[data-theme="black"] .daily-report-details .form-header {
        background: #293035;
        color: var(--black-text);
        border: 0;
        border-radius: 103px;
    }
    html[data-theme="black"] .daily-report-details :is(.form-label, .form-body, .file-list) { color: var(--black-text); }
    html[data-theme="black"] .daily-report-details :is(#lblSourceBalance, #lblLastItemAmount):is([style*="color: black" i], [style*="color: rgb(0, 0, 0)" i]) { color: var(--black-text) !important; }
    html[data-theme="black"] .daily-report-details :is(#lblSourceBalance, #lblLastItemAmount)[style*="color: maroon" i] { color: var(--black-grid-red) !important; }
    html[data-theme="black"] .daily-report-details #lblSourceBalance[style*="color: green" i] { color: var(--black-grid-green) !important; }

    html[data-theme="black"] .epay-payments .top-bar {
        background: var(--black-input-bg);
        color: var(--black-input-text);
        border: 1px solid var(--black-input-border);
        border-radius: var(--black-radius);
    }
    html[data-theme="black"] .epay-payments .top-bar p,
    html[data-theme="black"] .epay-payments .top-bar strong { color: var(--black-text); }
    html[data-theme="black"] .epay-payments > div > #tblFilter,
    html[data-theme="black"] .epay-payments #tblFilter,
    html[data-theme="black"] .epay-payments #tblFilter > tbody,
    html[data-theme="black"] .epay-payments #tblFilter > tbody > tr,
    html[data-theme="black"] .epay-payments #tblFilter > tbody > tr > td { background: transparent; }

    /* The standalone Login page loads this theme without the shared layout. */
    html[data-theme="black"] .login-page .login-page-wrapper {
        background-color: var(--black-bg);
        background-blend-mode: normal;
    }
    html[data-theme="black"] .login-page .login-content {
        background: var(--black-sidebar);
        color: var(--black-text);
    }
    html[data-theme="black"] .login-page .login-content:after {
        background: radial-gradient(192% 108% at right, transparent 50.6%, var(--black-sidebar) 51.1%);
    }
    html[data-theme="black"] .login-form .input-container input {
        background: var(--black-control);
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: var(--black-radius);
        min-height: 40px;
        font-weight: 500;
    }
    html[data-theme="black"] .login-form .input-container input:focus { border-color: #627e93 !important; }
    html[data-theme="black"] .login-form .input-container input:-webkit-autofill {
        -webkit-text-fill-color: var(--black-text);
        box-shadow: inset 0 0 0 1000px var(--black-control);
        caret-color: var(--black-text);
    }
    html[data-theme="black"] .login-form .form-label,
    html[data-theme="black"] .login-content-inner .login-link { color: var(--black-text); }
    html[data-theme="black"] .login-content-inner .login-link:before { background: var(--black-text); }
    html[data-theme="black"] .login-form .btn-main {
        background: var(--black-button) !important;
        color: var(--black-text);
        min-height: 40px;
    }
    html[data-theme="black"] .login-form .btn-main:hover { background: var(--black-button-hover) !important; }
    html[data-theme="black"] .login-form .toggle-password .custom-icon { filter: brightness(0) invert(0.75); }

    /* Shared partial-view dialogs, including dynamically loaded forms. */
    html[data-theme="black"] .dialog-wrapper,
    html[data-theme="black"] #ModalOverlay,
    html[data-theme="black"] .ui-widget-overlay { background: rgba(8, 12, 16, 0.72); }
    html[data-theme="black"] .dialog-form,
    html[data-theme="black"] #ModalWindow-Content,
    html[data-theme="black"] #QuickMessage {
        background: var(--black-panel);
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: 8px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    }
    html[data-theme="black"] .dialog-form .form-header {
        background: #293035;
        color: var(--black-grid-text);
        border: 0;
        border-radius: 103px;
    }
    html[data-theme="black"] .dialog-form :is(.form-body > p, .form-aside h3, .panel-title) { color: var(--black-text); }
    html[data-theme="black"] .dialog-form :is(.form-label, .panel-parking-label) { color: #b1bac0; }
    html[data-theme="black"] .dialog-form :is(.ownersNameLink, .form-aside p a) {
        color: var(--black-blue);
        text-decoration: none;
    }
    html[data-theme="black"] .dialog-form :is(.ownersNameLink, .form-aside p a):hover { text-decoration: underline; }
    html[data-theme="black"] .close-dialog {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        background: var(--black-control);
        border: 1px solid var(--black-border);
        border-radius: 5px;
        z-index: 1;
    }
    html[data-theme="black"] .close-dialog:hover { background: var(--black-hover); }
    html[data-theme="black"] :is(.close-dialog, #ModalWindow-Content) .icon-cross-black { filter: invert(0.85); }

    /* Some partials set field colors inline; override only form controls. */
    html[data-theme="black"] :is(.dialog-form, #ModalWindow-Content) :where(input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
        background-color: var(--black-control) !important;
        color: var(--black-grid-text) !important;
        border-color: var(--black-border);
        box-shadow: none;
    }
    html[data-theme="black"] :is(.dialog-form, #ModalWindow-Content) :is(input, select, textarea):disabled {
        background-color: var(--black-panel) !important;
        color: var(--black-muted) !important;
    }
    html[data-theme="black"] :is(.dialog-form, #ModalWindow-Content) :is(input, select, textarea):focus { border-color: #627e93; }
    html[data-theme="black"] #OnlineCashDlg input { border-color: var(--black-field-outline, var(--black-border)) !important; }
    html[data-theme="black"] #OnlineCashDlg input:focus { border-color: var(--black-field-outline, #627e93) !important; }
    html[data-theme="black"] .dialog-form .text-input { background: transparent; }
    html[data-theme="black"] .dialog-form :is(.apartment-status, .isDefault-wrapper, .isVAT-wrapper),
    html[data-theme="black"] .dialog-form div:is([style*="background-color: white"], [style*="background-color:white"]):has(> .ui-switcher) {
        background-color: var(--black-control) !important;
    }

    /* Apartment details: expandable sections and owner/tenant side panels. */
    html[data-theme="black"] .dialog-form :is(.connected-objects-panel, .admin-contracts-panel, .owner-panel, .tenant-panel) {
        background: var(--black-panel);
        color: var(--black-text);
        border-color: var(--black-border);
    }
    html[data-theme="black"] .dialog-form :is(.connected-objects-header, .admin-contracts-header) {
        background: var(--black-control);
        border-color: var(--black-border);
    }
    html[data-theme="black"] .dialog-form :is(.connected-objects-header, .admin-contracts-header):hover { background: var(--black-hover); }
    html[data-theme="black"] .dialog-form :is(.connected-objects-title, .admin-contracts-title, .connected-objects-chevron, .admin-contracts-chevron) { color: var(--black-text); }
    html[data-theme="black"] .dialog-form :is(.connected-objects-body, .admin-contracts-body) {
        background: var(--black-panel);
        border-color: var(--black-border);
    }
    html[data-theme="black"] .dialog-form .connected-objects-section .custom-table-wrapper { border-color: var(--black-border); }
    html[data-theme="black"] .dialog-form :is(.connected-objects-count, .panel-count-badge) {
        background: var(--black-primary);
        color: var(--black-grid-text);
    }
    html[data-theme="black"] .dialog-form .btn-teal {
        background: var(--black-button);
        border: 1px solid var(--black-button);
        color: var(--black-grid-text);
        border-radius: var(--black-radius);
    }
    html[data-theme="black"] .dialog-form .btn-teal:hover { background: var(--black-button-hover); }
    html[data-theme="black"] .dialog-form :is(.btn-icon, .btn-remove-circle) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--black-control);
        color: var(--black-text);
        border: 1px solid var(--black-border);
        border-radius: 5px;
        min-width: 26px;
        min-height: 26px;
    }
    html[data-theme="black"] .dialog-form .btn-remove-circle { color: var(--black-grid-red); }
    html[data-theme="black"] .dialog-form :is(.btn-icon, .btn-remove-circle):hover { background: var(--black-hover); opacity: 1; }
    html[data-theme="black"] .dialog-form :is(.connected-objects-table, .panel-table, .panel-owners-table) :is(td, th) {
        background: var(--black-control);
        color: var(--black-grid-text);
        border-color: var(--black-row-border);
    }
    html[data-theme="black"] .dialog-form :is(.connected-objects-table, .panel-table) thead :is(td, th) {
        background: var(--black-grid-header);
        border-color: var(--black-border);
    }
    html[data-theme="black"] .dialog-form :is(.connected-objects-table, .panel-table) tfoot :is(td, th) {
        background: var(--black-grid-footer);
        border-color: var(--black-border);
    }
    html[data-theme="black"] .dialog-form .panel-table tbody tr.no-data-row td { background: var(--black-control); color: var(--black-muted); }
    html[data-theme="black"] .dialog-form .connected-objects-table .inline-adding-row td { background: var(--black-selected); }
    html[data-theme="black"] .dialog-form .connected-objects-table tbody tr:hover td { background: var(--black-hover); }

    /* Date-range partial: the trigger and expanded presets are also surfaces. */
    html[data-theme="black"] .date-picker-container .trigger-button {
        background: var(--black-control) !important;
        color: var(--black-text) !important;
        border-color: var(--black-border);
        border-radius: var(--black-radius);
        height: var(--black-control-height);
        box-shadow: none;
    }
    html[data-theme="black"] .date-picker-container .trigger-button:hover { border-color: #627e93; box-shadow: none; }
    html[data-theme="black"] .date-picker-container :is(.picker-wrapper, .quick-ranges) {
        background: var(--black-panel);
        color: var(--black-text);
        border: 1px solid var(--black-border);
    }
    html[data-theme="black"] .date-picker-container .picker-header { background: var(--black-control); color: var(--black-text); }
    html[data-theme="black"] .date-picker-container .range-section { border-color: var(--black-border); }
    html[data-theme="black"] .date-picker-container :is(.range-section-title, .current-range) { color: var(--black-muted); }
    html[data-theme="black"] .date-picker-container .range-option { color: var(--black-text); }
    html[data-theme="black"] .date-picker-container .range-option:hover { background: var(--black-hover); }
    html[data-theme="black"] .date-picker-container .range-option.active { background: var(--black-primary); color: var(--black-grid-text); }

    /* Map remaining legacy teal accents to the shared button blue. */
    html[data-theme="black"] #wrapper:hover,
    html[data-theme="black"] #wrapper[style*="#49a0a2" i],
    html[data-theme="black"] #wrapper[style*="rgb(73, 160, 162)"],
    html[data-theme="black"] .sectionHeader[style*="#49a0a2" i] {
        background-color: var(--black-primary) !important;
        color: var(--black-text) !important;
    }
    html[data-theme="black"] .sidebar .pushpin :is(.pinhead, .pinbase, .pinshaft),
    html[data-theme="black"] .sidebar .pushpin :is(.pinhead, .pinbase, .pinshaft)::after { background: var(--black-text); }
    html[data-theme="black"] .sidebar .pushpin .pinpoint { background: var(--black-muted); }
    html[data-theme="black"] .checkbox-wrapper .check-text { color: var(--black-text); }
    html[data-theme="black"] .datepickers .datepicker:hover::placeholder { color: var(--black-muted); }
    html[data-theme="black"] .datepickers .datepicker::placeholder,
    html[data-theme="black"] .datepicker-wrapper .datepicker::placeholder,
    html[data-theme="black"] input.datepicker::placeholder { color: var(--black-muted) !important; }
    html[data-theme="black"] input.datepicker,
    html[data-theme="black"] .datepicker-wrapper input.datepicker {
        background-color: var(--black-control) !important;
        color: var(--black-text) !important;
        border-color: rgba(255, 255, 255, 0.32) !important;
        caret-color: var(--black-text);
    }
    html[data-theme="black"] input.datepicker:focus { border-color: #627e93 !important; }
    html[data-theme="black"] .datepicker-wrapper:after { filter: brightness(0) invert(0.85); }
    html[data-theme="black"] .ui-datepicker,
    html[data-theme="black"] .ui-datepicker.ui-widget-content {
        z-index: 1005 !important;
        background: var(--black-panel) !important;
        background-image: none !important;
        color: var(--black-text) !important;
        border: 1px solid rgba(222, 217, 210, 0.45) !important;
        border-radius: 8px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
        padding: 8px;
    }
    html[data-theme="black"] .ui-datepicker .ui-datepicker-header {
        background: var(--black-control) !important;
        background-image: none !important;
        color: var(--black-text) !important;
        border: 1px solid var(--black-border) !important;
        border-radius: 6px;
    }
    html[data-theme="black"] .ui-datepicker .ui-datepicker-title,
    html[data-theme="black"] .ui-datepicker th { color: var(--black-text) !important; }
    html[data-theme="black"] .ui-datepicker .ui-datepicker-title select {
        background: var(--black-control) !important;
        color: var(--black-text) !important;
        border: 1px solid rgba(255, 255, 255, 0.32) !important;
        border-radius: 5px;
    }
    html[data-theme="black"] .ui-datepicker td { color: var(--black-text) !important; }
    html[data-theme="black"] .ui-datepicker td a,
    html[data-theme="black"] .ui-datepicker td span {
        background: transparent !important;
        background-image: none !important;
        color: var(--black-text) !important;
        border: 1px solid transparent !important;
        border-radius: 5px;
        text-align: center;
    }
    html[data-theme="black"] .ui-datepicker td a:hover,
    html[data-theme="black"] .ui-datepicker td:not(.ui-datepicker-unselectable):hover a {
        background: var(--black-hover) !important;
        color: var(--black-text) !important;
    }
    html[data-theme="black"] .ui-datepicker td.ui-datepicker-current-day,
    html[data-theme="black"] .ui-datepicker td.ui-datepicker-current-day a,
    html[data-theme="black"] .ui-datepicker td.selected-date,
    html[data-theme="black"] .ui-datepicker td.selected-date a {
        background: var(--black-primary) !important;
        color: var(--black-grid-text) !important;
        border-color: var(--black-primary) !important;
    }
    html[data-theme="black"] .ui-datepicker td.ui-datepicker-unselectable,
    html[data-theme="black"] .ui-datepicker td.ui-datepicker-unselectable span { color: #717b84 !important; }
    html[data-theme="black"] .ui-datepicker .ui-datepicker-prev,
    html[data-theme="black"] .ui-datepicker .ui-datepicker-next { filter: brightness(0) invert(0.85); }
    html[data-theme="black"] .ui-datepicker .ui-icon { filter: brightness(0) invert(0.85); }
    html[data-theme="black"] .ui-datepicker .ui-datepicker-current-day,
    html[data-theme="black"] .ui-datepicker .selected-date,
    html[data-theme="black"] .ui-datepicker td:not(.ui-datepicker-unselectable):hover {
        background: var(--black-primary) !important;
        color: var(--black-text) !important;
    }
    html[data-theme="black"] .ui-datepicker .ui-datepicker-current-day a,
    html[data-theme="black"] .ui-datepicker .selected-date a,
    html[data-theme="black"] .ui-datepicker td:not(.ui-datepicker-unselectable):hover a { color: var(--black-text) !important; }
    html[data-theme="black"] .ui-widget-content .ui-state-hover a,
    html[data-theme="black"] .ui-multiselect-header a:hover { color: var(--black-text); }
    html[data-theme="black"] button.ui-multiselect .ui-icon,
    html[data-theme="black"] .ui-state-hover .ui-icon,
    html[data-theme="black"] .ui-state-focus .ui-icon { border-color: var(--black-primary) !important; color: var(--black-text) !important; }
    html[data-theme="black"] .file-uploader { background: var(--black-panel); border-color: var(--black-primary); }
    html[data-theme="black"] .jqte_focused { border-color: var(--black-primary); }
    html[data-theme="black"] #QuickMessage.notification { border-color: var(--black-primary); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); }

    html[data-theme="black"] :is(input, select, textarea, .form-label, .btn, .dialog-form) { font-weight: 500; }
    html[data-theme="black"] table.dataTable :is(thead, tfoot) :is(th, td),
    html[data-theme="black"] .dialog-form .form-header { font-weight: 600; }

    html[data-theme="black"] input[type="checkbox"] {
        border: 1px solid var(--black-field-outline, rgba(255, 255, 255, 0.32)) !important;
        /* Native checkbox appearance can ignore borders, so trace its edge too. */
        outline: 1px solid var(--black-field-outline, rgba(255, 255, 255, 0.32));
        outline-offset: -1px;
        box-shadow: none !important;
    }
    html[data-theme="black"] .checkbox-wrapper .checkmark,
    html[data-theme="black"] .ms-options-wrap > .ms-options > ul label input[type="checkbox"] + span {
        border: 1px solid rgba(255, 255, 255, 0.32) !important;
    }

    /* A fine off-white border separates editable controls from dark panels. */
    html[data-theme="black"] :is(input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, button.ui-multiselect, .ms-options-wrap > button, .chosen-container .chosen-single, .date-picker-container .trigger-button) {
        border: 1px solid var(--black-field-outline, var(--black-input-border)) !important;
    }
    html[data-theme="black"] :is(input, select, textarea, button.ui-multiselect, .ms-options-wrap > button):focus {
        --black-field-outline: var(--black-input-focus-border);
    }
    html[data-theme="black"] :is(input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, button.ui-multiselect, .ms-options-wrap > button, .chosen-container .chosen-single, .date-picker-container .trigger-button) {
        background-color: var(--black-input-bg) !important;
        color: var(--black-input-text) !important;
    }
    html[data-theme="black"] :is(input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, button.ui-multiselect, .ms-options-wrap > button, .chosen-container .chosen-single, .date-picker-container .trigger-button):focus {
        background-color: var(--black-input-focus-bg) !important;
        color: var(--black-input-text) !important;
        border-color: var(--black-input-focus-border) !important;
    }
    html[data-theme="black"] :is(input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, button.ui-multiselect, .ms-options-wrap > button, .chosen-container .chosen-single, .date-picker-container .trigger-button):disabled {
        background-color: var(--black-input-disabled-bg) !important;
        color: var(--black-input-disabled-text) !important;
        border-color: var(--black-input-border) !important;
    }
    html[data-theme="black"] :is(input, textarea)::placeholder { color: var(--black-input-placeholder) !important; }
    html[data-theme="black"] select option { background: var(--black-dropdown-bg) !important; color: var(--black-input-text); }
    /* Validation must take priority over both the white and focused borders. */
    html[data-theme="black"] .error,
    html[data-theme="black"] .has-error :is(input, select, textarea),
    html[data-theme="black"] .text-input input:invalid {
        --black-field-outline: var(--black-grid-red) !important;
        border: 1px solid var(--black-grid-red) !important;
        outline: none !important;
    }
    html[data-theme="black"] .error { background-color: var(--black-control); }
    html[data-theme="black"] input[type="checkbox"].error {
        outline: 1px solid var(--black-grid-red) !important;
        outline-offset: -1px;
    }
    html[data-theme="black"] * { scrollbar-color: #43515f var(--black-bg); }
    html[data-theme="black"] ::-webkit-scrollbar-track { background: var(--black-bg); }
    html[data-theme="black"] ::-webkit-scrollbar-thumb { background: #43515f; }
}