/* Theme switch in the sidebar, above the language flag. */

.theme-switch {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 40px;
    margin: 0 auto 8px;
    color: #1a5287;
    transition: background-color 0.1s ease-in-out;
}

.theme-switch:hover,
.theme-switch:focus {
    background-color: #d8e5f1;
    outline: none;
}

.theme-switch .fa {
    font-size: 22px;
    font-weight: 400;
    line-height: 22px;
    width: 22px;
    height: 22px;
}

/* Rail buttons share one box on every page. The bottom block is full-bleed, so size it explicitly. */
#leftSidebar .sidebar-nav .left-sidebar-link:not(.sidebar-group__item),
#leftSidebar .sidebar-bottom .left-sidebar-link,
#leftSidebar .sidebar-bottom .theme-switch,
#leftSidebar .sidebar-license .license-status,
#root [class*="_item_"] {
    box-sizing: border-box !important;
    width: 50px !important;
    height: 40px !important;
    min-width: 50px !important;
    min-height: 40px !important;
    max-width: 50px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 auto 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 40px !important;
}

#leftSidebar .sidebar-bottom {
    left: 10px;
    right: 10px;
    bottom: 20px;
    padding: 8px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#leftSidebar .sidebar-nav {
    padding-bottom: 240px;
}

#leftSidebar:has(.sidebar-license) {
    display: flex;
    flex-direction: column;
}

#leftSidebar:has(.sidebar-license) .sidebar-nav {
    flex: 0 0 auto;
    padding-bottom: 0;
}

#leftSidebar:has(.sidebar-license) .sidebar-bottom {
    position: static;
    flex: 0 0 auto;
    width: auto;
}

#leftSidebar .sidebar-license {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

#leftSidebar .sidebar-license.sidebar-license--hidden .license-status {
    visibility: hidden;
    pointer-events: none;
}

#leftSidebar .sidebar-license .license-status {
    margin: 0 auto !important;
    cursor: default;
}

#leftSidebar .sidebar-license .license-status:hover,
#leftSidebar .sidebar-license .license-status:focus-within {
    background-color: #d8e5f1;
}

#leftSidebar .sidebar-license .license-status-dot {
    width: 22px;
    height: 22px;
    box-shadow: none;
}

#leftSidebar .sidebar-license .license-status-pop {
    top: 50%;
    right: auto;
    left: calc(100% + 12px);
    transform: translateY(-50%);
}

.site-footer {
    display: none !important;
}

#leftSidebar .left-sidebar-link-icon,
#leftSidebar .left-sidebar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    margin: 0;
    line-height: 1;
}

/* Every sidebar glyph shares one 22px box, one weight and one color. */
#leftSidebar .left-sidebar-link i.fa,
#leftSidebar .sidebar-group__item-icon .fa,
#root [data-nwaf-home] svg {
    font-size: 22px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 22px !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    color: #1a5287;
}

#leftSidebar .sidebar-group__item-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#leftSidebar .sidebar-group__item-icon img,
#leftSidebar .left-sidebar-link-icon img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
    display: block;
}

/* Letter marks stay inside the same 50x40 button.
   Pairs are sized to the icon width; a single letter is sized to the icon height. */
#leftSidebar .left-sidebar-link-icon > span.fa,
#leftSidebar .left-sidebar-letter {
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1 !important;
    vertical-align: middle;
}

#leftSidebar .left-sidebar-link-icon > span.fa.sidebar-letter--one {
    font-size: 22px !important;
    letter-spacing: 0;
}


.theme-switch__icon--sun {
    display: none !important;
}

html[data-theme="dark"] .theme-switch__icon--moon {
    display: none !important;
}

html[data-theme="dark"] .theme-switch__icon--sun {
    display: inline-flex !important;
}

/* Light is the default. Dark is applied only when the theme flag is set. */
html {
    color-scheme: light;
}

/* Dark surfaces. The top bar stays navy in both themes. */

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: #101820 !important;
    background-image: none !important;
    color: #d7e6f4 !important;
}

html[data-theme="dark"] a {
    color: #8ec0ea;
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
    color: #c5dff6;
}

html[data-theme="dark"] [style*="#134473"] {
    color: #d7e6f4 !important;
}

html[data-theme="dark"] .navbar-inverse,
html[data-theme="dark"] .navbar-inverse .navbar-collapse,
html[data-theme="dark"] .navbar-inverse .navbar-form {
    background-color: #1a5287 !important;
    border-color: #134473 !important;
}

html[data-theme="dark"] .navbar-inverse .navbar-nav > li > a {
    color: #fff !important;
    background-color: transparent;
}

html[data-theme="dark"] .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff;
}

.brand-logo {
    height: 42px;
    width: auto;
    display: block;
}

/* Header is navy in both themes. The blue mark matches that bar, so the white mark is shown.
   .navbar-brand > img is more specific than these classes, so the hide rule must win. */
a.navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 70px;
    max-width: 70px;
    height: 90px;
    margin-left: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* The navigator is inset, so a negative margin hides the mark on WAF settings.
   Pin it to the fixed bar instead, in the same 70px rail as the sidebar. */
.navbar.navbar-fixed-top > .container-fluid.custom-navigator-container > .navbar-header > a.navbar-brand {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.navbar-brand > img.brand-logo {
    height: 42px;
    width: auto;
    margin: 0;
}

.navbar-brand > img.brand-logo--light {
    display: none;
}

.navbar-brand > img.brand-logo--dark {
    display: block;
}

html[data-theme="dark"] #select_role_button,
html[data-theme="dark"] #select_status_button,
html[data-theme="dark"] #RoleDropdown,
html[data-theme="dark"] #StatusDropdown,
html[data-theme="dark"] .dropdown-select > .btn,
html[data-theme="dark"] .dropdown-select > .input-group-addon {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
    border-color: #3d6286 !important;
}

html[data-theme="dark"] #search_input,
html[data-theme="dark"] #input_search_false_pos,
html[data-theme="dark"] .block-filter button,
html[data-theme="dark"] .block-filter .form-control {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
    border-color: #3d6286 !important;
}
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .cabinet-btn-primary,
html[data-theme="dark"] .cabinet-btn.active {
    color: #fff !important;
}

html[data-theme="dark"] #leftSidebar,
html[data-theme="dark"] .left-sidebar,
html[data-theme="dark"] .nav.nav-pills-mywaf,
html[data-theme="dark"] .small-resolution-warning {
    background-color: #172433 !important;
    color: #d7e6f4;
}

html[data-theme="dark"] .left-sidebar-link,
html[data-theme="dark"] .left-sidebar-link .fa,
html[data-theme="dark"] #leftSidebar .left-sidebar-link i.fa,
html[data-theme="dark"] #leftSidebar .sidebar-group__item-icon .fa,
html[data-theme="dark"] #leftSidebar .theme-switch .fa,
html[data-theme="dark"] #root [data-nwaf-home] svg,
html[data-theme="dark"] .theme-switch {
    color: #c5d9ec;
}

html[data-theme="dark"] .left-sidebar-link.active,
html[data-theme="dark"] .left-sidebar-link:hover,
html[data-theme="dark"] .left-sidebar-link:focus,
html[data-theme="dark"] .left-sidebar-link-title,
html[data-theme="dark"] .lang-switcher__trigger:hover,
html[data-theme="dark"] .lang-switcher__trigger:focus,
html[data-theme="dark"] .theme-switch:hover,
html[data-theme="dark"] .theme-switch:focus,
html[data-theme="dark"] #leftSidebar .sidebar-license .license-status:hover,
html[data-theme="dark"] #leftSidebar .sidebar-license .license-status:focus-within {
    background-color: #24384f;
    color: #d7e6f4;
}

html[data-theme="dark"] .sidebar-group__submenu,
html[data-theme="dark"] .lang-switcher__dropdown {
    background-color: #1d3044;
    color: #d7e6f4;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-group-addon:not(#openFilterModal),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .white-input,
html[data-theme="dark"] .cabinet_form-control input[type="text"],
html[data-theme="dark"] .cabinet_form-control input[type="number"],
html[data-theme="dark"] .cabinet_form-control input[type="password"],
html[data-theme="dark"] [style*="#d8e5f1"],
html[data-theme="dark"] [style*="#d8e4f1"] {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
    border-color: #3d6286 !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .cabinet_form-control input::placeholder {
    color: #8eabc4;
}

html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .cabinet-btn,
html[data-theme="dark"] .cabinet-btn-secondary {
    background-color: #1d3044;
    color: #d7e6f4;
    border-color: #3d6286;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-default:active,
html[data-theme="dark"] .cabinet-btn:hover:not(.cabinet-btn-primary):not(.active),
html[data-theme="dark"] .cabinet-btn:focus:not(.cabinet-btn-primary):not(.active),
html[data-theme="dark"] .cabinet-btn:active:not(.cabinet-btn-primary):not(.active) {
    background-color: #24384f;
    color: #fff;
    border-color: #3d6286;
}

html[data-theme="dark"] .cabinet-btn.active,
html[data-theme="dark"] .cabinet-btn-primary,
html[data-theme="dark"] .cabinet-btn-primary:hover,
html[data-theme="dark"] .cabinet-btn-primary:focus,
html[data-theme="dark"] .cabinet-btn-primary:active {
    background-color: #1a5287;
    border-color: #134473;
    color: #fff;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td {
    border-color: #2e4a66;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] table.dataTable tbody tr.odd {
    background-color: #152433;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover {
    background-color: #24384f;
}

html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
    color: #d7e6f4;
}

html[data-theme="dark"] .dataTables_wrapper input,
html[data-theme="dark"] .dataTables_wrapper select {
    background-color: #132033;
    color: #d7e6f4;
    border: 1px solid #3d6286;
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-content_ec,
html[data-theme="dark"] .modal-content_ec_del,
html[data-theme="dark"] .event_details_modal .modal-content,
html[data-theme="dark"] .event_details_modal .modal-body,
html[data-theme="dark"] .event_details_modal .table,
html[data-theme="dark"] .event_details_modal .table td,
html[data-theme="dark"] .event_details_modal .table th,
html[data-theme="dark"] .event_details_modal .table tr,
html[data-theme="dark"] .signature-m_content,
html[data-theme="dark"] .signature-m_content .modal-body,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-footer,
html[data-theme="dark"] .well,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .thumbnail,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-title,
html[data-theme="dark"] .popover-content,
html[data-theme="dark"] .login-form {
    background-color: #172433;
    color: #d7e6f4;
    border-color: #2e4a66;
}

html[data-theme="dark"] .event_details_modal .m_head,
html[data-theme="dark"] .event_details_modal .m_foot {
    background-color: #1a5287 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #modal_settings_info .modal-content,
html[data-theme="dark"] #modal_settings_info .m_head,
html[data-theme="dark"] #modal_settings_info .modal-body {
    background-color: #172433 !important;
    color: #d7e6f4 !important;
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] #modal_settings_info .m_close,
html[data-theme="dark"] #modal_settings_info .m_close span {
    color: #d7e6f4 !important;
}

html[data-theme="dark"] .event_details_modal .table,
html[data-theme="dark"] .event_details_modal .table td,
html[data-theme="dark"] .event_details_modal .table th,
html[data-theme="dark"] .event_details_modal .table tr {
    background-color: #172433 !important;
    color: #d7e6f4 !important;
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] .ec-page-size-menu,
html[data-theme="dark"] .filters-select-list,
html[data-theme="dark"] .list-domains,
html[data-theme="dark"] .send_to_api {
    background: #172433 !important;
    color: #d7e6f4 !important;
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] .ec-page-size-menu button,
html[data-theme="dark"] .filters-select-list .filter-select,
html[data-theme="dark"] .item-list-domains {
    color: #d7e6f4;
    background: transparent;
}

html[data-theme="dark"] .ec-page-size-menu > li.is-selected > button,
html[data-theme="dark"] .filters-select-list .filter-select.active {
    background: #132033 !important;
    color: #d7e6f4 !important;
}

html[data-theme="dark"] .modal textarea.form-control,
html[data-theme="dark"] .signature-col__text,
html[data-theme="dark"] #wl-info button {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] .signature-col__header {
    color: #9bb4cc !important;
}

html[data-theme="dark"] .signature-wltable {
    border-top-color: #2e4a66 !important;
}

html[data-theme="dark"] .ec-key-tabs {
    background: #1d3044;
}

html[data-theme="dark"] .ec-key-tabs > li > a {
    color: #9bb4cc;
}

html[data-theme="dark"] .ec-key-tabs > li.active {
    background: #132033;
}

html[data-theme="dark"] .nav-tabs.ec-key-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs.ec-key-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs.ec-key-tabs > li.active > a:focus,
html[data-theme="dark"] .ec-key-tabs > li.active > a,
html[data-theme="dark"] .ec-key-tabs > li.active > a:hover,
html[data-theme="dark"] .ec-key-tabs > li.active > a:focus {
    background: transparent;
    color: #d7e6f4;
    border-color: transparent;
}

.modal textarea.form-control,
[id^="manage_request_"] textarea.form-control {
    resize: vertical;
    width: 100%;
    max-width: 100%;
    max-height: 240px;
    overflow: auto !important;
    box-sizing: border-box;
}

[id^="manage_request_"] .modal-dialog {
    max-height: calc(100vh - 40px);
    overflow: hidden;
}

html[data-theme="dark"] .close,
html[data-theme="dark"] .modal-header .close {
    color: #d7e6f4;
    opacity: 0.8;
    text-shadow: none;
}

html[data-theme="dark"] .dropdown-menu > li > a,
html[data-theme="dark"] .multiselect-container > li > a,
html[data-theme="dark"] .multiselect-container > li > a > label {
    color: #d7e6f4;
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus,
html[data-theme="dark"] .multiselect-container > li > a:hover {
    background-color: #24384f;
    color: #fff;
}

html[data-theme="dark"] .nav-tabs {
    border-bottom-color: #2e4a66;
}

html[data-theme="dark"] .nav-tabs > li > a {
    color: #8eabc4;
}

html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
    background-color: #172433;
    color: #d7e6f4;
    border-color: #2e4a66 #2e4a66 transparent;
}

html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: #172433;
    border-color: #2e4a66;
    color: #d7e6f4;
}

html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > a:hover,
html[data-theme="dark"] .pagination > .active > span {
    background-color: #1a5287;
    border-color: #1a5287;
    color: #fff;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-search__field,
html[data-theme="dark"] .select2-results__option {
    background-color: #132033;
    color: #d7e6f4;
    border-color: #3d6286;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background-color: #1a5287;
    color: #fff;
}

html[data-theme="dark"] .daterangepicker,
html[data-theme="dark"] .daterangepicker .calendar-table,
html[data-theme="dark"] .daterangepicker .ranges {
    background-color: #172433;
    color: #d7e6f4;
    border-color: #2e4a66;
}

html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range,
html[data-theme="dark"] .daterangepicker td.off.start-date,
html[data-theme="dark"] .daterangepicker td.off.end-date {
    background-color: #101820;
    color: #6d879c;
}

html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover,
html[data-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: #24384f;
    color: #d7e6f4;
}

html[data-theme="dark"] .daterangepicker .ranges li.active {
    background-color: #1a5287;
    color: #fff;
}

html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background-color: #132033;
    color: #d7e6f4;
    border-color: #2e4a66;
}

html[data-theme="dark"] hr {
    border-top-color: #2e4a66;
}

html[data-theme="dark"] .tooltip-inner {
    background-color: #1d3044;
    color: #d7e6f4;
}

html[data-theme="dark"] .tooltip-inner:has(.ip-tip) {
    background-color: #1a4068;
    color: #f4f8fc;
}

html[data-theme="dark"] .tooltip.bottom:has(.ip-tip) .tooltip-arrow {
    border-bottom-color: #1a4068;
}

html[data-theme="dark"] .tooltip.top:has(.ip-tip) .tooltip-arrow {
    border-top-color: #1a4068;
}

html[data-theme="dark"] .login-page {
    background-color: #101820;
    background-image: none;
    color-scheme: dark;
}

html[data-theme="dark"] .login-theme-switch .theme-switch {
    background: #172433;
    border-color: #3d6286;
    color: #d7e6f4;
}

html[data-theme="dark"] .login-form-input-wrapper {
    background-color: #132033;
}

html[data-theme="dark"] #summary-page-actions #dateDiv .input-group {
    background: #132033;
    border-color: #3d6286;
}

html[data-theme="dark"] .cabinet-alert {
    background-color: #172433;
    color: #d7e6f4;
    border-color: #3d6286;
}

/* Navbar search keeps an id rule with !important, so the dark field has to match that. */
html[data-theme="dark"] #attack_table_search_input,
html[data-theme="dark"] #attack_table_search_input.blocked,
html[data-theme="dark"] .navbar .search-input .form-control {
    background-color: #0e2138 !important;
    color: #d7e6f4 !important;
    border-color: #3d6286 !important;
}

html[data-theme="dark"] #attack_table_search_input::placeholder,
html[data-theme="dark"] #myInput::placeholder {
    color: #8eabc4 !important;
}

html[data-theme="dark"] #openFilterModal,
html[data-theme="dark"] #openFilterModal.input-group-addon {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #openFilterModal svg path {
    fill: #d7e6f4;
}

html[data-theme="dark"] .search-input__clear,
html[data-theme="dark"] .search-input__clear .fa {
    color: #d7e6f4;
}

html[data-theme="dark"] .summary-page-title,
html[data-theme="dark"] .summary-top-bar-title,
html[data-theme="dark"] .summary-widget-title,
html[data-theme="dark"] .summary-collapse-btn,
html[data-theme="dark"] .filter-section-title,
html[data-theme="dark"] .filter-field label,
html[data-theme="dark"] .summary-host-name,
html[data-theme="dark"] .summary-host-count {
    color: #d7e6f4;
}

html[data-theme="dark"] .summary-map-widget,
html[data-theme="dark"] .summary-widget-header,
html[data-theme="dark"] .summary-widget-body,
html[data-theme="dark"] .filter-modal-content,
html[data-theme="dark"] #summaryFilterModal,
html[data-theme="dark"] .summary-add-widget-dropdown,
html[data-theme="dark"] .summary-add-widget-item,
html[data-theme="dark"] .summary-category-dropdown .filter-dropdown-menu,
html[data-theme="dark"] .filter-dropdown-trigger,
html[data-theme="dark"] .summary-category-dropdown .filter-dropdown-trigger {
    background: #172433;
    color: #d7e6f4;
    border-color: #2e4a66;
}

html[data-theme="dark"] .summary-widget-locked {
    background-image: none;
    background-color: #132033;
    color: #d7e6f4;
}

html[data-theme="dark"] .summary-locked-icon {
    background: #24384f;
}

html[data-theme="dark"] .summary-map-svg-container path {
    fill: #24384f;
    stroke: #101820;
}

html[data-theme="dark"] .summary-host-list,
html[data-theme="dark"] .summary-right-tab,
html[data-theme="dark"] .filter-toggle-btn,
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .filter-input,
html[data-theme="dark"] .filter-reset-btn,
html[data-theme="dark"] .filter-preset-btn,
html[data-theme="dark"] .filter-search-input {
    background: #132033;
    color: #d7e6f4;
    border-color: #3d6286;
}

html[data-theme="dark"] .filter-toggle-btn.active,
html[data-theme="dark"] .summary-right-tab.active {
    background: #1a5287;
    color: #fff;
    border-color: #1a5287;
}

html[data-theme="dark"] .summary-category-dropdown .filter-option {
    color: #d7e6f4;
    border-color: #2e4a66;
}

html[data-theme="dark"] .summary-category-dropdown .filter-option.selected,
html[data-theme="dark"] .summary-add-widget-item:hover,
html[data-theme="dark"] .summary-add-widget-item.active {
    background: #24384f;
    color: #d7e6f4;
}

html[data-theme="dark"] .summary-category-dropdown .filter-dropdown-placeholder {
    color: #8eabc4;
}

html[data-theme="dark"] .filter-dropdown-menu {
    background: #1d3044;
    color: #e8f2fb;
    border: 1px solid #2e4a66;
}

html[data-theme="dark"] .filter-dropdown-actions,
html[data-theme="dark"] .filter-dropdown-search,
html[data-theme="dark"] .filter-dropdown-confirm {
    border-color: #2e4a66;
}

html[data-theme="dark"] .filter-action-btn {
    background: #132033;
    color: #e8f2fb;
    border-color: #3d6286;
}

html[data-theme="dark"] .filter-action-btn:hover {
    background: #24384f;
    color: #e8f2fb;
    border-color: #3d6286;
}

html[data-theme="dark"] .filter-option,
html[data-theme="dark"] .filter-option-label,
html[data-theme="dark"] .filter-dropdown-empty,
html[data-theme="dark"] .filter-dropdown-loading {
    color: #e8f2fb;
}

html[data-theme="dark"] .filter-option:hover,
html[data-theme="dark"] .filter-option.selected {
    background: #24384f;
    color: #e8f2fb;
}

html[data-theme="dark"] .filter-search-input {
    background: #132033;
    color: #e8f2fb;
    border-color: #3d6286;
}

html[data-theme="dark"] .google-visualization-tooltip,
html[data-theme="dark"] .summary-map-tooltip {
    background: #1d3044 !important;
    color: #d7e6f4 !important;
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] .summary-widget-body text {
    fill: #8eabc4;
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .summary-stats-table,
html[data-theme="dark"] .summary-stats-table thead tr,
html[data-theme="dark"] .summary-top-bar,
html[data-theme="dark"] .aw-card {
    background: #172433;
    color: #d7e6f4;
    border-color: #2e4a66;
}

html[data-theme="dark"] .summary-table-title,
html[data-theme="dark"] .summary-stats-table th,
html[data-theme="dark"] .summary-stats-table td,
html[data-theme="dark"] .summary-bt-count,
html[data-theme="dark"] .summary-host-num,
html[data-theme="dark"] .summary-host-percent,
html[data-theme="dark"] .aw-status-text {
    color: #d7e6f4;
}

html[data-theme="dark"] .aw-card-name,
html[data-theme="dark"] .aw-group-title,
html[data-theme="dark"] .aw-resource {
    color: #e8f2fb !important;
}

html[data-theme="dark"] .summary-switch-tabs {
    background: #132033;
    border-color: #3d6286;
}

html[data-theme="dark"] .summary-switch-btn {
    color: #d7e6f4;
}

html[data-theme="dark"] .summary-collapse-btn svg path,
html[data-theme="dark"] .summary-widget-close-btn svg path,
html[data-theme="dark"] .summary-widget-settings svg path {
    stroke: #8eabc4;
}

html[data-theme="dark"] .attack-table tbody.open {
    background: rgba(16, 24, 32, 0.35);
}

html[data-theme="dark"] .attack-table-info-row {
    color: #d7e6f4;
}

html[data-theme="dark"] .attack-table-info-title {
    color: #8ec0ea;
}

html[data-theme="dark"] .attack-table-info-text {
    color: #d7e6f4;
    border-left-color: #2e4a66;
}

html[data-theme="dark"] .attack-table-slidable-block .attack-table-info-title {
    color: #8eabc4;
}

html[data-theme="dark"] .attack-table-slidable-block .attack-table-info-text {
    color: #e7f0f8;
    border-left: none;
}

html[data-theme="dark"] .attack-table-slidable-block > .attack-table-info-row > .attack-table-info-row,
html[data-theme="dark"] .attack-table-slidable-block > .attack-table-info-row:not(:has(> .attack-table-info-row)) {
    border-top-color: rgba(142, 176, 204, 0.22);
    border-bottom: none;
}

html[data-theme="dark"] .box-info-attack {
    background: none;
    color: inherit;
}

html[data-theme="dark"] .linedot,
html[data-theme="dark"] .linedot .box-info-attack {
    color: #ff8d8d !important;
    background: none !important;
}

html[data-theme="dark"] .attack-table-slidable-block-tr table.attack-table.table {
    background-color: #132033;
}

html[data-theme="dark"] .summary-widget-body rect[fill="#ffffff"],
html[data-theme="dark"] .summary-widget-body rect[fill="#fff"] {
    fill: transparent;
}

html[data-theme="dark"] .summary-widget-body rect[fill="#e8eef4"],
html[data-theme="dark"] .summary-widget-body rect[fill="#f6f8fb"] {
    fill: #2e4a66;
}

html[data-theme="dark"] .am-header,
html[data-theme="dark"] .am-group,
html[data-theme="dark"] .am-card,
html[data-theme="dark"] .am-dropdown,
html[data-theme="dark"] .rs-node-card,
html[data-theme="dark"] .rs-legend-box,
html[data-theme="dark"] #rsFilterModal,
html[data-theme="dark"] #tsFilterModal {
    background: #172433;
    color: #d7e6f4;
    border-color: #2e4a66;
}

html[data-theme="dark"] .am-card-ghost {
    background: #132033;
}

html[data-theme="dark"] .horizontal-tabs,
html[data-theme="dark"] .am-key-tabs {
    background-color: #132033;
}

html[data-theme="dark"] .horizontal-tabs li {
    border-right-color: #2e4a66;
}

html[data-theme="dark"] .horizontal-tabs > li.active,
html[data-theme="dark"] .horizontal-tabs > li.active > a,
html[data-theme="dark"] .horizontal-tabs > li.active > a:hover,
html[data-theme="dark"] .horizontal-tabs > li.active > a:focus,
html[data-theme="dark"] .am-key-tabs > li.nav-item.active,
html[data-theme="dark"] .am-key-tabs > li.nav-item.active > a,
html[data-theme="dark"] .am-key-tabs > li.nav-item.active > a:hover,
html[data-theme="dark"] .am-key-tabs > li.nav-item.active > a:focus,
html[data-theme="dark"] .am-key-tabs > li.nav-item.active .nav-link {
    background-color: #1a5287 !important;
    color: #fff !important;
}

html[data-theme="dark"] .nav-tabs .nav-item .nav-link.active {
    color: #fff;
}

html[data-theme="dark"] .form-title {
    background-color: #1d3044;
    color: #d7e6f4;
}

html[data-theme="dark"] .horizontal-item-link,
html[data-theme="dark"] .am-title,
html[data-theme="dark"] .am-card-name,
html[data-theme="dark"] .am-group-name,
html[data-theme="dark"] .am-section-header,
html[data-theme="dark"] .am-stat-label,
html[data-theme="dark"] .am-group-chevron,
html[data-theme="dark"] .rs-node-name,
html[data-theme="dark"] .rs-section-title,
html[data-theme="dark"] .rs-section-chevron,
html[data-theme="dark"] .rs-legend-value,
html[data-theme="dark"] #rsFilterModal .summary-filter-section-title,
html[data-theme="dark"] #tsFilterModal .summary-filter-section-title {
    color: #d7e6f4;
}

html[data-theme="dark"] .am-meta,
html[data-theme="dark"] .rs-node-meta {
    color: #8eabc4;
}

html[data-theme="dark"] .am-card-description:not(.placeholder) {
    color: #e8f2fb;
}

html[data-theme="dark"] .am-section-chevron path {
    stroke: #e8f2fb;
}

html[data-theme="dark"] .am-stat {
    border-color: #2e4a66;
}

html[data-theme="dark"] .am-stat-value:not(.good):not(.warning):not(.critical):not(.used) {
    color: #e8f2fb;
}

html[data-theme="dark"] .am-group-badge {
    background: #1d3044;
    color: #e8f2fb;
}

html[data-theme="dark"] .am-dropdown-preset,
html[data-theme="dark"] .am-period-preset,
html[data-theme="dark"] .am-alias-modal__btn {
    background: #132033;
    color: #d7e6f4;
}

html[data-theme="dark"] .am-period-menu {
    background: #172433;
}

html[data-theme="dark"] .am-period-menu .am-period-preset {
    background: #132033;
    color: #e8f2fb;
    border-color: #2e4a66;
}

html[data-theme="dark"] .am-period-menu .am-period-preset:hover {
    background: #24384f;
}

html[data-theme="dark"] .am-period-menu .am-period-preset.active {
    background: #1a5287;
    border-color: #1a5287;
    color: #fff;
}

html[data-theme="dark"] .rs-section {
    border-color: #2e4a66;
}

html[data-theme="dark"] body:has(.rs-page) #dateDiv .input-group,
html[data-theme="dark"] body:has(.am-page) #dateDiv .input-group,
html[data-theme="dark"] body:has(.ts-page) #dateDiv .input-group {
    background: #132033;
    border-color: #3d6286;
}

html[data-theme="dark"] body:has(.rs-page) #dateDiv input.form-control,
html[data-theme="dark"] body:has(.am-page) #dateDiv input.form-control,
html[data-theme="dark"] body:has(.ts-page) #dateDiv input.form-control,
html[data-theme="dark"] body:has(.rs-page) #dateDiv .daterange-reset,
html[data-theme="dark"] body:has(.am-page) #dateDiv .daterange-reset,
html[data-theme="dark"] body:has(.ts-page) #dateDiv .daterange-reset {
    color: #d7e6f4 !important;
}

/* Chart containers stay dark while Google Charts is still drawing. */
html[data-theme="dark"] .summary-map-widget,
html[data-theme="dark"] .summary-widget-body,
html[data-theme="dark"] .summary-content-area,
html[data-theme="dark"] .summary-left-panel,
html[data-theme="dark"] .summary-left-pane,
html[data-theme="dark"] .summary-map-svg-container,
html[data-theme="dark"] .summary-left-panel div:not(.summary-skeleton),
html[data-theme="dark"] #line_chart,
html[data-theme="dark"] #line_chart div:not(.summary-skeleton) {
    background-color: #172433 !important;
}

html[data-theme="dark"] .summary-skeleton,
html[data-theme="dark"] .summary-skeleton-sm,
html[data-theme="dark"] .summary-skeleton-table,
html[data-theme="dark"] .summary-left-panel .summary-skeleton {
    background: linear-gradient(90deg, #1a2c40 25%, #2a4560 50%, #1a2c40 75%) !important;
    background-size: 200% 100% !important;
}

html[data-theme="dark"] .summary-host-list,
html[data-theme="dark"] .summary-switch-tabs {
    background-color: #132033 !important;
}

html[data-theme="dark"] .form-center {
    background-color: #172433 !important;
    border-color: #2e4a66 !important;
    color: #d7e6f4;
}

html[data-theme="dark"] .form-center .form-control,
html[data-theme="dark"] .form-center .input-group-addon,
html[data-theme="dark"] .form-center .custom-addon,
html[data-theme="dark"] #edit_form_change_user_domains input {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
    border-color: #3d6286 !important;
}

html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #fff;"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: whitesmoke"],
html[data-theme="dark"] [style*="background:whitesmoke"] {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
}

html[data-theme="dark"] img.qr {
    background: #fff;
    padding: 8px;
    border-radius: 4px;
}

html[data-theme="dark"] #list_key_table,
html[data-theme="dark"] #list_key_table td,
html[data-theme="dark"] .key_table_row {
    background: #132033 !important;
    color: #d7e6f4 !important;
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] .key_table_header,
html[data-theme="dark"] .key_table_header th {
    background: #1d3044 !important;
    color: #d7e6f4 !important;
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] .form-center .save_button,
html[data-theme="dark"] .binput-group.save_button {
    background: #1d3044 !important;
    color: #d7e6f4 !important;
    border-color: #3d6286 !important;
}

html[data-theme="dark"] .slider {
    background-color: #3d6286;
}

html[data-theme="dark"] .slider:before {
    background-color: #d7e6f4;
}

html[data-theme="dark"] #myTable,
html[data-theme="dark"] #myTable tbody tr,
html[data-theme="dark"] #myTable td,
html[data-theme="dark"] table.demo2 tbody tr,
html[data-theme="dark"] table.demo2 td {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] #myTable thead tr,
html[data-theme="dark"] #myTable thead th,
html[data-theme="dark"] table.demo2 thead tr,
html[data-theme="dark"] table.demo2 thead th,
html[data-theme="dark"] .floatThead-container,
html[data-theme="dark"] .floatThead-table {
    background-color: #1d3044 !important;
    color: #d7e6f4 !important;
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] .btn-loading-next-page,
html[data-theme="dark"] .round-button-icons {
    background-color: #1d3044 !important;
    color: #d7e6f4 !important;
    border-color: #3d6286 !important;
}

/* Nginx settings is a separate React page. It follows the same theme flag. */
html[data-theme="dark"] #root,
html[data-theme="dark"] body:has(#root) {
    background-color: #101820 !important;
    color: #d7e6f4;
}

html[data-theme="dark"] body:has(#root) {
    --palette-primary-light: #1d3044;
    --palette-primary-100: #24384f;
    --palette-text-primary: #d7e6f4;
    --palette-background-default: #101820;
    --palette-background-paper: #172433;
    --palette-TableCell-border: #2e4a66;
    --palette-grey-200: #1d3044;
    --palette-divider: #2e4a66;
}

html[data-theme="dark"] #root tr:has(> [class*="cell_open"]) > .MuiCollapse-root > div > div > tr {
    border-color: #24384f !important;
}

html[data-theme="dark"] #root .MuiTypography-root,
html[data-theme="dark"] #root .MuiTableCell-root,
html[data-theme="dark"] #root .MuiToggleButton-root {
    color: #d7e6f4 !important;
}

html[data-theme="dark"] #root .MuiPaper-root,
html[data-theme="dark"] #root .MuiTableContainer-root,
html[data-theme="dark"] #root .MuiTableHead-root,
html[data-theme="dark"] #root thead,
html[data-theme="dark"] .MuiModal-root .MuiPaper-root,
html[data-theme="dark"] .MuiDialog-root .MuiPaper-root,
html[data-theme="dark"] .MuiPopover-root .MuiPaper-root,
html[data-theme="dark"] .MuiAutocomplete-popper .MuiPaper-root,
html[data-theme="dark"] .MuiPickersPopper-root .MuiPaper-root,
html[data-theme="dark"] .MuiMenu-root .MuiPaper-root,
html[data-theme="dark"] .MuiModal-root .MuiDialogContent-root,
html[data-theme="dark"] .MuiModal-root .MuiDialogActions-root,
html[data-theme="dark"] .MuiModal-root .MuiInputBase-root,
html[data-theme="dark"] .MuiModal-root .MuiList-root,
html[data-theme="dark"] .MuiPopover-root .MuiList-root,
html[data-theme="dark"] #root .MuiInputBase-root,
html[data-theme="dark"] #root .MuiOutlinedInput-root,
html[data-theme="dark"] #root .MuiDialogContent-root {
    background-color: #1d3044 !important;
    color: #d7e6f4 !important;
}

html[data-theme="dark"] .MuiModal-root .MuiTypography-root,
html[data-theme="dark"] .MuiDialog-root .MuiDialogTitle-root,
html[data-theme="dark"] .MuiDialog-root .MuiDialogContent-root,
html[data-theme="dark"] .MuiDialog-root .MuiDialogContent-root .MuiBox-root,
html[data-theme="dark"] .MuiDialog-root .MuiTableCell-root,
html[data-theme="dark"] .MuiDialog-root .MuiTableRow-root,
html[data-theme="dark"] .MuiDialog-root .MuiInputBase-root,
html[data-theme="dark"] .MuiDialog-root .MuiOutlinedInput-root,
html[data-theme="dark"] .MuiDialog-root .MuiSelect-select,
html[data-theme="dark"] .MuiDrawer-paper,
html[data-theme="dark"] .MuiAutocomplete-popper,
html[data-theme="dark"] .MuiAutocomplete-listbox,
html[data-theme="dark"] .MuiAutocomplete-option {
    background-color: #1d3044 !important;
    color: #d7e6f4 !important;
}

html[data-theme="dark"] .MuiDialog-root .MuiTypography-root,
html[data-theme="dark"] .MuiPopover-root .MuiTypography-root,
html[data-theme="dark"] .MuiModal-root .MuiInputBase-input,
html[data-theme="dark"] .MuiModal-root .MuiFormLabel-root,
html[data-theme="dark"] .MuiModal-root .MuiInputLabel-root,
html[data-theme="dark"] .MuiModal-root .MuiMenuItem-root,
html[data-theme="dark"] .MuiPopover-root .MuiMenuItem-root,
html[data-theme="dark"] #root .MuiInputBase-input,
html[data-theme="dark"] #root .MuiFormLabel-root,
html[data-theme="dark"] #root .MuiInputLabel-root {
    color: #d7e6f4 !important;
}

html[data-theme="dark"] .MuiModal-root .MuiOutlinedInput-notchedOutline,
html[data-theme="dark"] #root .MuiOutlinedInput-notchedOutline {
    border-color: #3d6286 !important;
}

html[data-theme="dark"] #root .MuiTableBody-root,
html[data-theme="dark"] #root tbody,
html[data-theme="dark"] #root .MuiTableRow-root {
    background-color: #172433;
    color: #d7e6f4;
}

html[data-theme="dark"] #root .MuiToggleButtonGroup-root {
    background-color: #1d3044 !important;
}

html[data-theme="dark"] .MuiToggleButton-root.Mui-selected,
html[data-theme="dark"] #root .MuiToggleButton-root.Mui-selected {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
}

#root [style*="attack-table-bg"] {
    background-image: none !important;
}

html[data-theme="dark"] #root [style*="attack-table-bg"] {
    background-image: none !important;
    background-color: #101820 !important;
}

html[data-theme="dark"] #root .notistack-MuiContent {
    background-color: #172433 !important;
    color: #d7e6f4 !important;
}

/* Logo box ends at the rail edge. 31px plus the 14px from the glyph to that edge
   equals the 45px gap between the search field and the date. */
.navbar.navbar-fixed-top,
.navbar > .container-fluid.custom-navigator-container,
.navbar > .container-fluid.custom-navigator-container > .navbar-header {
    overflow: visible;
}

.navbar > .container-fluid.custom-navigator-container > .navbar-header {
    width: 25px !important;
    flex: 0 0 25px !important;
    min-width: 0;
    margin-left: 0 !important;
    overflow: visible;
}

.custom-navigator-container .controls-panel {
    justify-content: flex-start;
}

.custom-navigator-container div#searchDiv,
.custom-navigator-container div#searchDivScanner {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    margin-left: 31px;
    padding-right: 0;
}

.custom-navigator-container div#dateDiv {
    margin-left: 45px;
    float: none;
}

.custom-navigator-container #searchDiv .search-input,
.custom-navigator-container #searchDivScanner .search-input {
    width: 100%;
}

html[data-theme="dark"] .attack-scale > span {
    background: #2c4258;
}

/* Rule lists on rule management use a custom header, not a table head. */
html[data-theme="dark"] .erl-rule-type-filter {
    background: #132033;
    border-color: #2e4a66;
}

html[data-theme="dark"] .erl-rule-type-btn {
    color: #c5d9ec;
}

html[data-theme="dark"] .erl-list {
    border-color: #2e4a66;
}

html[data-theme="dark"] .erl-header {
    background: #1d3044;
    color: #d7e6f4;
    border-bottom-color: #2e4a66;
}

html[data-theme="dark"] .erl-header--text {
    color: #d7e6f4 !important;
}

html[data-theme="dark"] .erl-row {
    background: #132033;
    border-top-color: #2e4a66;
    border-bottom-color: #2e4a66;
}

html[data-theme="dark"] .erl-col-comment,
html[data-theme="dark"] .erl-col-domain,
html[data-theme="dark"] .erl-col-url,
html[data-theme="dark"] .erl-detail-block-title,
html[data-theme="dark"] .erl-detail-value,
html[data-theme="dark"] .erl-filter-section-title,
html[data-theme="dark"] .erl-filter-checkbox-label {
    color: #d7e6f4;
}

html[data-theme="dark"] .erl-detail {
    background: #1d3044;
    border-top-color: #2e4a66;
}

html[data-theme="dark"] .erl-detail-label,
html[data-theme="dark"] .erl-empty-state,
html[data-theme="dark"] .erl-no-search-results {
    color: #8eabc4;
}

html[data-theme="dark"] .erl-action-btn,
html[data-theme="dark"] .erl-view-btn,
html[data-theme="dark"] .erl-expand-btn {
    color: #c5d9ec;
}

html[data-theme="dark"] .erl-filter-checkbox-label input[type="checkbox"]:not(:checked) {
    background-color: #132033;
    border-color: #3d6286;
}

/* Rollback cards stay white, and their icon strokes are dark on the dark buttons. */
html[data-theme="dark"] .module-selector {
    border-color: #2e4a66;
    background: #132033;
}

html[data-theme="dark"] .module-selector__title,
html[data-theme="dark"] .module-selector__button,
html[data-theme="dark"] .backup__title,
html[data-theme="dark"] .main-section__title,
html[data-theme="dark"] .backup__name {
    color: #d7e6f4;
}

html[data-theme="dark"] .module-selector__button:hover {
    background-color: #1d3044;
}

html[data-theme="dark"] .module-selector__item.active .module-selector__button {
    background-color: #1a5287;
    color: #fff;
}

html[data-theme="dark"] .vertical-divider {
    background-color: #2e4a66;
}

html[data-theme="dark"] .backup__item {
    background:
        linear-gradient(#172433, #172433) padding-box,
        linear-gradient(to right, rgba(255, 255, 255, 0.06) 90%, #3d6286 90%);
    color: #d7e6f4;
}

html[data-theme="dark"] .backup__comment,
html[data-theme="dark"] .backup__comment-full,
html[data-theme="dark"] .backup__list_empty {
    color: #8eabc4;
}

html[data-theme="dark"] .backup__item svg path,
html[data-theme="dark"] .backup-section__create_buttons svg path {
    stroke: #c5d9ec;
}

html[data-theme="dark"] .rb__modal-content {
    background: #172433;
    color: #d7e6f4;
}

html[data-theme="dark"] .rb__modal-title,
html[data-theme="dark"] .rb__modal-body,
html[data-theme="dark"] .rb__modal-text,
html[data-theme="dark"] .rb__diff-object-title,
html[data-theme="dark"] .rb__diff-empty {
    color: #d7e6f4;
}

html[data-theme="dark"] .rb__modal-content .form-control,
html[data-theme="dark"] .rb__modal-comment {
    background: #132033;
    color: #d7e6f4;
    border-color: #3d6286;
}

html[data-theme="dark"] .rb__diff-border {
    border-color: #2e4a66;
}

html[data-theme="dark"] .rb__diff-unchanged,
html[data-theme="dark"] .rb__diff-unchanged .rb__diff-sign,
html[data-theme="dark"] .rb__diff-unchanged .rb__diff-key,
html[data-theme="dark"] .rb__diff-unchanged .rb__diff-value {
    color: #d7e6f4;
}

html[data-theme="dark"] .rb__diff-added {
    background: #1a3a5c;
}

html[data-theme="dark"] .rb__diff-added .rb__diff-sign,
html[data-theme="dark"] .rb__diff-added .rb__diff-key,
html[data-theme="dark"] .rb__diff-added .rb__diff-value {
    color: #d7e6f4;
}

html[data-theme="dark"] .rb__diff-removed {
    background: #24303c;
}

html[data-theme="dark"] .rb__diff-removed .rb__diff-sign,
html[data-theme="dark"] .rb__diff-removed .rb__diff-key,
html[data-theme="dark"] .rb__diff-removed .rb__diff-value {
    color: #8eabc4;
}

/* Typed text and added value chips on WAF settings stay readable in dark theme. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not([type="file"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .bf-value-element,
html[data-theme="dark"] .bf-modal-value-input,
html[data-theme="dark"] .bf-modal-zone-select {
    background-color: #132033 !important;
    color: #e8f2fb !important;
    -webkit-text-fill-color: #e8f2fb;
    caret-color: #e8f2fb;
    border-color: #3d6286;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #8eabc4 !important;
    -webkit-text-fill-color: #8eabc4;
}

/* Added setting chips stay light blue, so inherited light text disappears on them. */
html[data-theme="dark"] .box_set_settings,
html[data-theme="dark"] .box_set_settings .vhost_name {
    background: #1d3044 !important;
    color: #e8f2fb !important;
    -webkit-text-fill-color: #e8f2fb;
    border: 1px solid #3d6286;
}

html[data-theme="dark"] .box_set_settings button,
html[data-theme="dark"] .box_set_settings button span {
    color: #e8f2fb !important;
    -webkit-text-fill-color: #e8f2fb;
}

html[data-theme="dark"] .bf-modal-add-btn,
html[data-theme="dark"] .bf-modal-new-condition-btn {
    background-color: #1d3044 !important;
    color: #e8f2fb !important;
    border-color: #3d6286 !important;
}

html[data-theme="dark"] .bf-modal-add-btn svg path,
html[data-theme="dark"] .bf-modal-new-condition-btn svg path,
html[data-theme="dark"] .bf-modal-del-value-btn svg path {
    stroke: #e8f2fb;
    fill: #e8f2fb;
}

html[data-theme="dark"] #tab_masking .card,
html[data-theme="dark"] #tab_masking .zone select,
html[data-theme="dark"] #tab_masking .condition input,
html[data-theme="dark"] #tab_masking .add-btn,
html[data-theme="dark"] #tab_masking .button_block .form-control {
    background-color: #172433 !important;
    color: #e8f2fb !important;
    -webkit-text-fill-color: #e8f2fb;
    border-color: #3d6286 !important;
}

html[data-theme="dark"] #tab_masking .card,
html[data-theme="dark"] #tab_masking .header,
html[data-theme="dark"] #tab_masking .add-btn,
html[data-theme="dark"] #tab_masking .add-btn > b,
html[data-theme="dark"] #tab_masking .page_title,
html[data-theme="dark"] #tab_masking .arrow i.fa {
    color: #e8f2fb !important;
}

html[data-theme="dark"] #tab_masking .condition input::placeholder,
html[data-theme="dark"] #tab_masking .button_block .form-control::placeholder {
    color: #8eabc4 !important;
    -webkit-text-fill-color: #8eabc4;
}

/* "Block IP" and its chevron are one button.
   :not(#id) is required so this beats the generic addon rule, which counts that id. */
html[data-theme="dark"] .add-rules-bl .btn-primary,
html[data-theme="dark"] .add-rules-bl .btn-primary:hover,
html[data-theme="dark"] .add-rules-bl .btn-primary:focus,
html[data-theme="dark"] .add-rules-bl .btn-primary:active {
    background-color: #1a5287 !important;
    border-color: #1a5287 !important;
    color: #fff !important;
}

html[data-theme="dark"] .add-rules-bl .btn-primary + .input-group-addon:not(#openFilterModal) {
    background: #1a5287 !important;
    background-color: #1a5287 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    border-color: #1a5287 !important;
    border-left-color: #3d6ea8 !important;
}

/* EC filter menus keep link blue and inline light fills. Force a dark row and light text. */
html[data-theme="dark"] #level_ec_ul li,
html[data-theme="dark"] #agent_ec_ul li,
html[data-theme="dark"] #waf_id_ec_ul li,
html[data-theme="dark"] #ip_ec_ul li,
html[data-theme="dark"] #cat_ec_ul li,
html[data-theme="dark"] .int_ul_ec li {
    background: #132033 !important;
    background-color: #132033 !important;
}

html[data-theme="dark"] #level_ec_ul li.ec-filter-selected,
html[data-theme="dark"] #agent_ec_ul li.ec-filter-selected,
html[data-theme="dark"] #waf_id_ec_ul li.ec-filter-selected,
html[data-theme="dark"] #ip_ec_ul li.ec-filter-selected,
html[data-theme="dark"] #cat_ec_ul li.ec-filter-selected {
    background: #1a5287 !important;
    background-color: #1a5287 !important;
}

html[data-theme="dark"] #level_ec_ul a,
html[data-theme="dark"] #agent_ec_ul a,
html[data-theme="dark"] #waf_id_ec_ul a,
html[data-theme="dark"] #ip_ec_ul a,
html[data-theme="dark"] #cat_ec_ul a,
html[data-theme="dark"] .int_ul_ec a,
html[data-theme="dark"] #level_ec_ul label,
html[data-theme="dark"] #agent_ec_ul label,
html[data-theme="dark"] #waf_id_ec_ul label,
html[data-theme="dark"] #ip_ec_ul label,
html[data-theme="dark"] #cat_ec_ul label,
html[data-theme="dark"] .int_ul_ec label,
html[data-theme="dark"] #level_ec_ul p,
html[data-theme="dark"] #agent_ec_ul p,
html[data-theme="dark"] #waf_id_ec_ul p,
html[data-theme="dark"] #ip_ec_ul p,
html[data-theme="dark"] #cat_ec_ul p,
html[data-theme="dark"] .int_ul_ec p {
    color: #e8f2fb !important;
    -webkit-text-fill-color: #e8f2fb;
}

html[data-theme="dark"] #level_ec_ul .checkbox:hover,
html[data-theme="dark"] #agent_ec_ul .checkbox:hover,
html[data-theme="dark"] #waf_id_ec_ul .checkbox:hover,
html[data-theme="dark"] #ip_ec_ul .checkbox:hover,
html[data-theme="dark"] #cat_ec_ul .checkbox:hover,
html[data-theme="dark"] #level_ec_ul .checkbox_level:hover,
html[data-theme="dark"] .int_ul_ec .checkbox:hover,
html[data-theme="dark"] #level_ec_ul li:hover,
html[data-theme="dark"] #agent_ec_ul li:hover,
html[data-theme="dark"] #waf_id_ec_ul li:hover,
html[data-theme="dark"] #ip_ec_ul li:hover,
html[data-theme="dark"] #cat_ec_ul li:hover,
html[data-theme="dark"] .int_ul_ec li:hover {
    background: #24384f !important;
    background-color: #24384f !important;
}

html[data-theme="dark"] #level_ec_ul li.ec-filter-selected:hover,
html[data-theme="dark"] #agent_ec_ul li.ec-filter-selected:hover,
html[data-theme="dark"] #waf_id_ec_ul li.ec-filter-selected:hover,
html[data-theme="dark"] #ip_ec_ul li.ec-filter-selected:hover,
html[data-theme="dark"] #cat_ec_ul li.ec-filter-selected:hover {
    background: #1a5287 !important;
    background-color: #1a5287 !important;
}

.license-status-pop {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 2000;
    min-width: 280px;
    max-width: 380px;
    padding: 10px 12px;
    background: #fff;
    color: #134473;
    border: 1px solid #d5e4f3;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(8, 7, 8, 0.16);
    text-align: left;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
}

.license-status:hover,
.license-status:focus-within {
    z-index: 30;
}

.license-status:hover .license-status-pop,
.license-status:focus-within .license-status-pop {
    display: block;
}

.license-status-pop-title {
    margin-bottom: 8px;
    font-weight: 600;
}

.license-status-pop-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
}

.license-status-mark {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9aa3ad;
}

.license-status-mark--ok {
    background: #2eae4f;
}

.license-status-mark--warn {
    background: #f5c518;
}

.license-status-mark--bad {
    background: #e53935;
}

.license-status-pop-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.license-status-pop-detail {
    flex: 0 0 auto;
    color: #5c6b7a;
}

html[data-theme="dark"] .license-status-pop {
    background: #172433;
    color: #e8f2fb;
    border-color: #24384f;
}

html[data-theme="dark"] .license-status-pop-detail {
    color: #9eb4c8;
}

html[data-theme="dark"] #requests_table > thead > tr > th {
    color: #d7e6f4;
    background: #172433;
    border-bottom-color: #24384f;
}

html[data-theme="dark"] #scan_table th,
html[data-theme="dark"] #scan_table td {
    border-bottom-color: #24384f;
    color: #d7e6f4;
}

html[data-theme="dark"] #scan_table > thead > tr > th {
    color: #d7e6f4;
    background: #172433;
}

html[data-theme="dark"] #scan_table .attack-table-info-title,
html[data-theme="dark"] .scan-row-toggle {
    color: #8ec0ea;
}

html[data-theme="dark"] #scan_table .attack-table-info-text {
    color: #d7e6f4;
    border-left-color: #2e4a66;
}

/* EC sort marks and filter chevrons use the header text color. Default SVG fill is black. */
html[data-theme="dark"] .sort_EC,
html[data-theme="dark"] .sort_EC path,
html[data-theme="dark"] #block_header .ec_li_buttons svg.svg,
html[data-theme="dark"] #block_header .ec_li_buttons svg.svg path,
html[data-theme="dark"] .int_box > .int_btn_ec > svg,
html[data-theme="dark"] .int_box > .int_btn_ec > svg path {
    fill: #d7e6f4 !important;
}

/* Dyn/MLC setting rows: the name-column rule stays on the left and is not a light stripe. */
html[data-theme="dark"] .form-row,
html[data-theme="dark"] .form-col-labels,
html[data-theme="dark"] .form-col-values,
html[data-theme="dark"] form[id^="dyn_settings_form"],
html[data-theme="dark"] #set_settings_form {
    border-color: #2e4a66 !important;
}

html[data-theme="dark"] form[id^="dyn_settings_form"],
html[data-theme="dark"] #set_settings_form {
    color: #d7e6f4 !important;
}

html[data-theme="dark"] .btn.action.settings {
    color: #8ec0ea;
    border-right-color: #2e4a66;
}

/* The IP-limit editor row border collapsed through the fields. */
#edit_nwaf_limit .form-row {
    border-bottom: 0;
}

#edit_nwaf_limit .form-row::after {
    content: "";
    display: table;
    clear: both;
}

html[data-theme="dark"] .form-check-label {
    color: #d7e6f4 !important;
}

html[data-theme="dark"] tr[id^="table_modal_list_models_retraining_row_"] td {
    background-color: #1d3044 !important;
    color: #d7e6f4 !important;
}

html[data-theme="dark"] tr[id^="table_modal_list_models_retraining_row_"] input {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
    border-color: #3d6286 !important;
}

html[data-theme="dark"] tr[id^="table_modal_list_models_retraining_row_"] .btn.action {
    background-color: #24384f !important;
    color: #d7e6f4 !important;
    border: 1px solid #3d6286 !important;
    font-size: 10px;
}

html[data-theme="dark"] #edit_setting.bf-modal-mode .m_head,
html[data-theme="dark"] #edit_setting.bf-modal-mode .modal-content,
html[data-theme="dark"] #edit_setting.bf-modal-mode .bf-modal-summary,
html[data-theme="dark"] #edit_setting.bf-modal-mode .bf-modal-body {
    background-color: #172433 !important;
    color: #d7e6f4 !important;
}

html[data-theme="dark"] #edit_setting.bf-modal-mode #edit_setting_title,
html[data-theme="dark"] #edit_setting.bf-modal-mode .m_close,
html[data-theme="dark"] .bf-modal-label,
html[data-theme="dark"] #brute_bf_detect_block .checkbox-container,
html[data-theme="dark"] #brute_bf_detect_block .checkbox-container label {
    color: #d7e6f4 !important;
}

/* WL extension fields row: keep select / value / "Рег. выраж." on one line.
   Match only the fields form-group (direct cols, or col-sm-12 wrapping cols).
   Do not match a title form-group that merely nests another form-group — that
   put the label in the flex row and broke edit-after-reload (QA 3.1.994). */
[class^="extension_"] > .form-group:has(> .col-sm-3 .regex_extension),
[class^="extension_"] > .form-group:has(> .col-sm-12 > .col-sm-3 .regex_extension) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    float: none;
    width: 100%;
}

[class^="extension_"] > .form-group:has(> .col-sm-3 .regex_extension) > [class*="col-sm-"],
[class^="extension_"] > .form-group:has(> .col-sm-12 > .col-sm-3 .regex_extension) > [class*="col-sm-"] {
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
}

[class^="extension_"] > .form-group:has(> .col-sm-12 > .col-sm-3 .regex_extension) > .col-sm-12 {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

[class^="extension_"] .col-sm-4:has(select),
[class^="extension_"] .col-sm-12 > .col-sm-4 {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
}

[class^="extension_"] .col-sm-5,
[class^="extension_"] .col-sm-12 > .col-sm-5 {
    flex: 1.4 1 0;
    min-width: 0;
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
}

[class^="extension_"] .col-sm-3:has(.regex_extension),
[class^="extension_"] .col-sm-12 > .col-sm-3 {
    flex: 0 0 148px;
    width: 148px;
    max-width: 148px;
    float: none;
    white-space: nowrap;
    text-align: left;
    padding-left: 8px;
    padding-right: 0;
}

[class^="extension_"] label.form-check-label {
    width: auto !important;
    white-space: nowrap;
    font-size: 16px;
}

html[data-theme="dark"] .dropdown-select,
html[data-theme="dark"] .dropdown-select > .dropdown-menu,
html[data-theme="dark"] #RoleDropdown,
html[data-theme="dark"] #StatusDropdown {
    background-color: #132033 !important;
    color: #d7e6f4 !important;
    border-color: #3d6286 !important;
}

html[data-theme="dark"] .dropdown-select > .dropdown-menu,
html[data-theme="dark"] .dropdown-select > ul.dropdown-menu,
html[data-theme="dark"] #RoleDropdown,
html[data-theme="dark"] #StatusDropdown {
    border-top-color: #132033 !important;
}

html[data-theme="dark"] .dropdown-select .dropdown-menu > li > a,
html[data-theme="dark"] .dropdown-select .dropdown-item,
html[data-theme="dark"] #RoleDropdown > li > a,
html[data-theme="dark"] #StatusDropdown > li > a {
    color: #d7e6f4 !important;
    background-color: transparent;
}

/* Yes/No share one rounded bar. A lone Save button is transparent, so the
   footer radius shows through. In the dark theme the footer is a different
   color from the opaque pair, and their square corners cover that radius. */
html[data-theme="dark"] .modal-footer.m_foot {
    overflow: hidden;
    background-color: #1a5287;
    border-color: #1a5287;
    border-bottom-left-radius: 21px;
    border-bottom-right-radius: 21px;
}

html[data-theme="dark"] .m_foot > .btn.m_btn:not(.save_button),
html[data-theme="dark"] .m_foot > .btn.m_btn:not(.save_button):hover,
html[data-theme="dark"] .m_foot > .btn.m_btn:not(.save_button):focus,
html[data-theme="dark"] .m_foot > .btn.m_btn:not(.save_button):active {
    background-color: #1a5287;
    border-color: #1a5287;
    color: #ffffff;
    box-shadow: none;
}

/* Close (X) on rule/signature modals: hard-coded #666 vanishes on dark panels,
   so testers only saw the scrollbar arrow in the same corner. */
html[data-theme="dark"] .signature-close-btn {
    color: #d7e6f4;
}

html[data-theme="dark"] .signature-close-btn:hover {
    background-color: rgba(215, 230, 244, 0.12);
}

html[data-theme="dark"] .rule-creation-modal__content {
    background-color: #172433;
    color: #d7e6f4;
    border-color: #2e4a66;
}