@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700&family=Bebas+Neue&display=swap");

/* ══════════════════════════════════════════════════════════════════════════════
   Blue Tank & Pump — Theme CSS
   Loads after mini.css + mini-compat.css.  Uses CSS variables so the entire
   palette can be changed from :root.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Palette ── */

:root {
    --btp-primary: #002F87;
    --btp-primary-dark: #001f5a;
    --btp-secondary: #737373;
    --btp-text: #7A7A7A;
    --btp-bg: #FAFAFA;
    --btp-surface: #FFFFFF;
    --btp-muted: #D2D6E2;
    --btp-dark: #001241;
    --btp-accent-light: #C9D5E9;
    --btp-accent-mid: #B7D4FF;
    --btp-accent-strong: #95abd2;
    --bt-red: #e60026;
    --bt-green: #008714;
}

/* ── Global typography ── */

body {
    font-family: "Roboto", sans-serif;
    color: var(--btp-text);
    background-color: var(--btp-bg);
}

.webix_view,
.webix_layout_toolbar,
.webix_toolbar {
    font-family: "Roboto", sans-serif;
}

/* ── Status colors ── */

.green { color: var(--bt-green) !important; }
i.red, .red i { color: var(--bt-red) !important; }
.compileerror { border-left-color: var(--bt-red) !important; }
.compileok { border-left-color: var(--bt-green) !important; }

.badge-err,
.mapTooltip ul li .badge-err {
    background-color: var(--bt-red) !important;
    color: #fff !important;
}

.badge-ok,
.mapTooltip ul li .badge-ok,
div.tableview .badge-ok {
    background-color: var(--bt-green) !important;
    color: #fff !important;
}

/* Red icons in datatables — generic selector replaces hardcoded datatable IDs */
.webix_dtable .webix_cell i.red,
.webix_dtable .webix_cell .red,
.webix_dtable .webix_cell i.fas.fa-times-square.red,
.webix_dtable .webix_cell i.fas.fa-times.red,
.webix_dtable .webix_cell i.fas.fa-bell.red,
.webix_dtable .webix_cell i.far.fa-badge-dollar.red {
    color: var(--bt-red) !important;
}

/* ── Top navigation ── */

.primary_nav,
.primary_nav.dev {
    background-color: var(--btp-surface) !important;
    padding: 0 28px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    color: var(--btp-primary);
    position: relative;
    z-index: 5;
}

.primary_nav .webix_list_item,
.primary_nav button,
.topnav_button .webix_button,
.topnav_button .webix_button span,
.topnav_button .webix_img_btn,
.topnav_button .webix_img_btn .webix_icon,
.topnav_button .webix_img_btn .webix_icon_btn,
.topnav_button .webix_img_btn_text,
.topEnv, .topEnv code,
.topnav_service, .topnav_service th, .topnav_service td,
.topcart, .topcart .webix_template {
    color: var(--btp-primary) !important;
}

.topnav_button.nobg button.webix_button,
.topnav_button.nobg .webix_button {
    background-color: transparent !important;
    color: var(--btp-primary) !important;
}

.topnav_button.nobg .webix_img_btn_text,
.topnav_button.nobg .webix_icon,
.topnav_button.nobg .webix_icon_btn {
    color: var(--btp-primary) !important;
}

.topnav_button.nobg button.webix_button:hover,
.topnav_button.nobg .webix_button:hover {
    background-color: var(--btp-accent-light) !important;
    color: var(--btp-primary) !important;
}

.topnav_button.nobg button.webix_button:hover .webix_img_btn_text,
.topnav_button.nobg .webix_button:hover .webix_img_btn_text,
.topnav_button.nobg button.webix_button:hover .webix_icon,
.topnav_button.nobg .webix_button:hover .webix_icon,
.topnav_button.nobg button.webix_button:hover .webix_icon_btn,
.topnav_button.nobg .webix_button:hover .webix_icon_btn {
    color: #1b4fb0 !important;
}

.primary_nav .webix_list_item:hover,
.right_menu .webix_list_item:hover {
    color: var(--btp-primary) !important;
}

.right_menu .webix_list_item,
.right_menu span,
.right_menu .webix_submenu_icon {
    color: var(--btp-primary) !important;
}

.webix_list_item[webix_l_id="topmenu_doc"] {
    display: none !important;
}

/* ── Breadcrumbs ── */

.breadcrumbs .webix_template {
    background-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
    position: relative;
    z-index: 1;
}

.breadcrumbs .group_isaccount,
.breadcrumbs span.group_isaccount {
    color: var(--btp-surface) !important;
}

.breadcrumbs img[src*="g1121.png"] {
    display: none !important;
}

/* ── Logo ── */

.logo {
    background-image: url("/theme/4243_W8C2YBOSNZAQI8FLONET/Blue Command Logo straight.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain !important;
    background-color: var(--btp-surface) !important;
    border-radius: 2px;
    width: 160px !important;
}

.logo img {
    width: 160px;
}

/* ── Headers / table headers ── */

.webix_header,
.webix_hcell,
.webix_column > div.webix_header_border {
    background-color: var(--btp-primary);
    color: var(--btp-surface) !important;
    border-color: var(--btp-primary);
}

.webix_ss_header,
.webix_ss_header td {
    background-color: var(--btp-primary);
    color: var(--btp-surface);
}

body#manage.manage .webix_template.webix_header,
body#manage.manage .webix_template.webix_header .webix_el_label {
    color: var(--btp-accent-strong) !important;
}

.webix_header .webix_selected.webix_segment_0,
.webix_header .webix_selected.webix_segment_1,
.webix_header .webix_selected.webix_segment_N {
    background-color: var(--btp-accent-light) !important;
    border-color: var(--btp-primary) !important;
    color: var(--btp-dark) !important;
}

.webix_header .webix_selected.webix_segment_0:hover,
.webix_header .webix_selected.webix_segment_1:hover,
.webix_header .webix_selected.webix_segment_N:hover,
.webix_header .webix_selected.webix_segment_0:focus,
.webix_header .webix_selected.webix_segment_1:focus,
.webix_header .webix_selected.webix_segment_N:focus,
.webix_header .webix_selected.webix_segment_0:active,
.webix_header .webix_selected.webix_segment_1:active,
.webix_header .webix_selected.webix_segment_N:active {
    background-color: var(--btp-accent-mid) !important;
}

/* ── Selected rows ── */

.webix_selected,
.webix_selected .webix_cell,
.webix_row_select,
.webix_row_select .webix_cell,
.webix_column > div.webix_row_select {
    background-color: var(--btp-muted) !important;
    color: var(--btp-dark) !important;
}

/* ── Sidebar ── */

.webix_sidebar .webix_sidebar_item.webix_selected,
.webix_sidebar .webix_sidebar_item.webix_selected:hover {
    background-color: var(--btp-primary);
    color: var(--btp-surface);
}

/* ── Progress bar ── */

.webix_progress_bottom .webix_progress_state {
    background-color: var(--btp-primary);
}

/* ── Tabs ── */

.webix_item_tab,
.webixtype_bottom .webix_item_tab,
.webix_el_tabbar .webixtype_icon .webix_item_tab,
.webix_el_tabbar .webixtype_iconTop .webix_item_tab,
.webix_el_tabbar .webixtype_image .webix_item_tab,
.webix_all_tabs .webix_item_tab {
    color: var(--btp-primary) !important;
}

.webix_el_tabbar .webixtype_iconTop .webix_item_tab .webix_icon,
.webix_el_tabbar .webixtype_iconTop .webix_item_tab .webix_icon_btn,
.webix_el_tabbar .webixtype_image .webix_item_tab .webix_icon,
.webix_el_tabbar .webixtype_image .webix_item_tab .webix_icon_btn,
.webix_el_tabbar .webixtype_iconTop .webix_item_tab .webix_img_btn_text,
.webix_el_tabbar .webixtype_image .webix_item_tab .webix_img_btn_text {
    color: var(--btp-primary) !important;
}

.webix_tabbar .webix_item_tab.webix_selected,
.webix_tabbar .webix_item_tab.webix_selected:hover,
.webix_item_tab.webix_selected,
.webixtype_bottom .webix_item_tab.webix_selected,
.webix_all_tabs .webix_item_tab.webix_selected {
    background-color: var(--btp-primary) !important;
    border-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
    box-shadow: none !important;
}

.webix_el_tabbar .webixtype_iconTop .webix_item_tab.webix_selected .webix_icon,
.webix_el_tabbar .webixtype_iconTop .webix_item_tab.webix_selected .webix_icon_btn,
.webix_el_tabbar .webixtype_image .webix_item_tab.webix_selected .webix_icon,
.webix_el_tabbar .webixtype_image .webix_item_tab.webix_selected .webix_icon_btn,
.webix_el_tabbar .webixtype_iconTop .webix_item_tab.webix_selected .webix_img_btn_text,
.webix_el_tabbar .webixtype_image .webix_item_tab.webix_selected .webix_img_btn_text {
    color: var(--btp-surface) !important;
}

/* Tab hover/focus: no color change */
.webix_item_tab:hover,
.webix_item_tab:focus,
.webixtype_bottom .webix_item_tab:hover,
.webixtype_bottom .webix_item_tab:focus,
.webix_all_tabs .webix_item_tab:hover,
.webix_all_tabs .webix_item_tab:focus {
    background-color: #c8c8c8 !important;
    color: var(--btp-primary) !important;
}

.webix_item_tab.webix_selected:hover,
.webix_item_tab.webix_selected:focus,
.webixtype_bottom .webix_item_tab.webix_selected:hover,
.webixtype_bottom .webix_item_tab.webix_selected:focus,
.webix_all_tabs .webix_item_tab.webix_selected:hover,
.webix_all_tabs .webix_item_tab.webix_selected:focus {
    background-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
    box-shadow: none !important;
}

/* Tab top corner rounding */
.webix_item_tab,
.webix_all_tabs .webix_item_tab {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ── Buttons — generic ── */

.webix_primary .webix_button,
.webix_primary button,
.webix_primary input {
    background-color: var(--btp-primary);
    border-color: var(--btp-primary);
    color: var(--btp-surface);
}

.webix_el_button input,
.webix_el_toggle input,
.webix_el_button button,
.webix_el_toggle button,
.webixbutton {
    background-color: var(--btp-primary);
    border: 1px solid var(--btp-primary);
    color: var(--btp-surface);
}

.webix_el_button .webix_button,
.webix_primary .webix_button {
    background-color: var(--btp-primary);
    border-color: var(--btp-primary);
    color: var(--btp-surface);
}

.webix_el_button .webix_button:hover,
.webix_el_button .webix_button:focus,
.webix_primary .webix_button:hover,
.webix_primary .webix_button:focus {
    background-color: var(--btp-accent-mid);
    border-color: var(--btp-accent-strong);
    color: var(--btp-dark);
}

.webix_el_button .webix_button:active,
.webix_primary .webix_button:active {
    background-color: var(--btp-accent-strong) !important;
    border-color: var(--btp-accent-strong) !important;
    color: var(--btp-surface) !important;
}

.nobg .webix_button {
    background-color: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
}

/* ── Dashboard toolbar (dashboard select + edit/add/print icons) ── */

.dashboardToolbar.webix_toolbar {
    background-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
}

.dashboardToolbar.webix_toolbar .webix_icon,
.dashboardToolbar.webix_toolbar .webix_icon_btn,
.dashboardToolbar.webix_toolbar .webix_img_btn_text {
    color: var(--btp-surface) !important;
}

.dashboardToolbar.webix_toolbar .nobg .webix_button:hover,
.dashboardToolbar.webix_toolbar .nobg .webix_button:focus {
    background-color: var(--btp-primary-dark) !important;
}

/* ── Buttons — manage page tools ── */

.systemTools.webix_toolbar {
    background-color: var(--btp-primary) !important;
}

.systemTools.webix_toolbar .webix_el_button button,
.systemTools.webix_toolbar .webix_icon_btn,
.systemTools.webix_toolbar .webix_icon {
    color: var(--btp-surface) !important;
}

body#manage.manage .systemTools .webix_el_button button,
body#manage.manage .systemTools a .webix_el_button button {
    background-color: var(--btp-accent-light) !important;
    color: var(--btp-primary) !important;
    border-color: transparent !important;
}

body#manage.manage .systemTools .webix_el_button button:hover,
body#manage.manage .systemTools .webix_el_button button:focus,
body#manage.manage .systemTools a .webix_el_button button:hover {
    background-color: var(--btp-accent-strong) !important;
    color: var(--btp-primary) !important;
}

.webix_secondary .webix_button {
    background-color: var(--btp-primary) !important;
    border-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
}

.webix_secondary .webix_button:hover,
.webix_secondary .webix_button:focus {
    background-color: var(--btp-accent-mid) !important;
    border-color: var(--btp-accent-strong) !important;
    color: var(--btp-dark) !important;
}

.webix_secondary .webix_button:active {
    background-color: var(--btp-accent-strong) !important;
    border-color: var(--btp-accent-strong) !important;
    color: var(--btp-surface) !important;
}

.ezebtn .webix_el_box .webix_button,
.ezebtn div button {
    background-color: var(--btp-primary) !important;
    border-color: var(--btp-primary) !important;
}

.ezebtn div button:hover,
.ezebtn div button:focus,
.ezebtn div button:active {
    background-color: var(--btp-primary-dark) !important;
    border-color: var(--btp-primary-dark) !important;
}

/* ── Buttons — configure page ── */

body#configure.configure .webix_el_button .webix_button,
body#configure.configure .webix_secondary .webix_button {
    background-color: var(--btp-primary) !important;
    border-color: transparent !important;
    color: var(--btp-surface) !important;
}

body#configure.configure .webix_el_button .webix_button:hover,
body#configure.configure .webix_el_button .webix_button:focus,
body#configure.configure .webix_secondary .webix_button:hover,
body#configure.configure .webix_secondary .webix_button:focus {
    background-color: var(--btp-accent-strong) !important;
    color: var(--btp-primary) !important;
    border-color: transparent !important;
}

body#configure.configure .webix_el_button .webix_button:active,
body#configure.configure .webix_secondary .webix_button:active {
    background-color: var(--btp-accent-strong) !important;
    border-color: var(--btp-accent-strong) !important;
    color: var(--btp-surface) !important;
}

body#configure.configure .topnav_button.nobg button.webix_button {
    background-color: var(--btp-surface) !important;
    color: var(--btp-primary) !important;
    border-color: transparent !important;
    margin-left: 15px !important;
}

body#configure.configure .topnav_button.nobg button.webix_button:hover,
body#configure.configure .topnav_button.nobg button.webix_button:focus {
    background-color: var(--btp-surface) !important;
    color: var(--btp-primary) !important;
}

/* ── Save button (configure breadcrumbs) ── */

#configureSaveButton .webix_disabled_view .webix_disabled_box {
    background-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
}

#configureSaveButton .savebutton .webix_button {
    background-color: var(--bt-red) !important;
}

/* ── Add controller button ── */

button.webixtype_base,
button.webixtype_base:hover,
button.webixtype_base:focus,
button.webixtype_base:active {
    background-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
    border-color: var(--btp-primary) !important;
}

.webix_dtable .webix_cell .webix_el_button:hover,
.webix_dtable .webix_column > div:hover .webix_el_button {
    background-color: transparent !important;
}

button#add_controller.webixtype_base {
/*    background-color: var(--btp-accent-strong) !important; */
    color: var(--btp-surface) !important;
    border-color: transparent !important;
}

/* ── Save button (configure breadcrumbs) ── */

#configureSaveButton .webix_disabled_view .webix_disabled_box {
    background-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
}

body#configure.configure #configureSaveButton .savebutton .webix_button,
body#configure.configure #configureSaveButton .webix_secondary.savebutton .webix_button,
body#configure.configure #configureSaveButton .savebutton button {
    background-color: var(--bt-red) !important;
    color: var(--btp-surface) !important;
    border-color: var(--bt-red) !important;
}

/* ── Combo / richselect icons ── */

.webix_combo .webix_input_icon.wxi-menu-down,
.webix_el_combo .webix_input_icon {
    color: var(--btp-primary) !important;
}

.webix_hcell .iconlink,
.webix_hcell .iconlink:hover {
    color: var(--btp-surface) !important;
}

.iconlink:hover,
div.outerWidgetPanel div.widgetcfg:hover {
    color: var(--btp-primary) !important;
}

/* ── Window / popup dialogs ── */

.webix_win_head,
.webix_popup .webix_win_head,
.webix_popup .webix_win_head .webix_template {
    background-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
}

.webix_popup .webix_win_body,
.webix_popup .webix_win_body .webix_template {
    background-color: var(--btp-surface) !important;
    color: var(--btp-dark) !important;
}

/* Prompt/alert dialog input borders */
.webix_prompt .webix_popup_input input,
.webix_alert .webix_popup_input input,
.webix_confirm .webix_popup_input input {
    border-color: var(--btp-primary) !important;
}

.webix_prompt .webix_popup_input input:focus,
.webix_alert .webix_popup_input input:focus,
.webix_confirm .webix_popup_input input:focus {
    border-color: var(--btp-accent-mid) !important;
    box-shadow: 0 0 0 2px rgba(183, 212, 255, 0.8) !important;
}

.webix_popup .webix_button,
.webix_popup .webix_el_button .webix_button,
.webix_popup .webix_el_button button {
    background-color: var(--btp-primary) !important;
    border-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
}

.webix_popup .webix_button:hover,
.webix_popup .webix_el_button .webix_button:hover,
.webix_popup .webix_el_button button:hover {
    background-color: var(--btp-primary-dark) !important;
    border-color: var(--btp-primary-dark) !important;
}

/* Window form richselect icon (inside modal forms) */
.webix_window .webix_form .webix_el_richselect .webix_input_icon.wxi-menu-down {
    color: var(--btp-primary) !important;
}

/* Window form delete/cancel secondary buttons */
.webix_window .webix_form .webix_secondary .webix_button.webix_img_btn {
    background-color: var(--btp-surface);
    border-color: var(--btp-surface);
}

/* ── Confirm / Prompt / Alert dialogs — consolidated ── */

.webix_confirm .webix_popup_title,
.webix_confirm-warning .webix_popup_title,
.webix_confirm-error .webix_popup_title,
.webix_prompt .webix_popup_title,
.webix_alert .webix_popup_title {
    background-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
}

.webix_confirm .webix_popup_text,
.webix_confirm-warning .webix_popup_text,
.webix_confirm-error .webix_popup_text,
.webix_prompt .webix_popup_text,
.webix_alert .webix_popup_text {
    color: var(--btp-dark) !important;
}

.webix_confirm .webix_popup_button,
.webix_confirm-warning .webix_popup_button,
.webix_confirm-error .webix_popup_button,
.webix_prompt .webix_popup_button,
.webix_alert .webix_popup_button,
.webix_confirm .webix_popup_button button,
.webix_confirm-warning .webix_popup_button button,
.webix_confirm-error .webix_popup_button button,
.webix_prompt .webix_popup_button button,
.webix_alert .webix_popup_button button,
.webix_confirm .webix_popup_button .webix_button,
.webix_confirm-warning .webix_popup_button .webix_button,
.webix_confirm-error .webix_popup_button .webix_button,
.webix_prompt .webix_popup_button .webix_button,
.webix_alert .webix_popup_button .webix_button {
    background-color: var(--btp-primary) !important;
    border-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
}

.webix_confirm .webix_popup_button:hover,
.webix_confirm-warning .webix_popup_button:hover,
.webix_confirm-error .webix_popup_button:hover,
.webix_prompt .webix_popup_button:hover,
.webix_alert .webix_popup_button:hover,
.webix_confirm .webix_popup_button button:hover,
.webix_confirm-warning .webix_popup_button button:hover,
.webix_confirm-error .webix_popup_button button:hover,
.webix_prompt .webix_popup_button button:hover,
.webix_alert .webix_popup_button button:hover,
.webix_confirm .webix_popup_button .webix_button:hover,
.webix_confirm-warning .webix_popup_button .webix_button:hover,
.webix_confirm-error .webix_popup_button .webix_button:hover,
.webix_prompt .webix_popup_button .webix_button:hover,
.webix_alert .webix_popup_button .webix_button:hover {
    background-color: var(--btp-primary-dark) !important;
    border-color: var(--btp-primary-dark) !important;
}

.custom_confirm_button button {
    background-color: var(--btp-accent-light) !important;
    border-color: var(--btp-accent-light) !important;
    color: var(--btp-dark) !important;
}

.custom_confirm_button button:hover {
    background-color: var(--btp-accent-mid) !important;
}

/* ── Messages / tooltips ── */

.webix_message {
    background-color: var(--btp-primary);
    color: var(--btp-surface);
}

.webix_tooltip {
    background-color: var(--btp-dark);
    color: var(--btp-surface);
}

/* ── Calendar / datepicker ── */

.webix_input_icon.wxi-calendar,
.webix_input_icon.wxi-clock,
.webix_icon.wxi-checkbox-marked,
.webix_cal_icon,
.webix_cal_time {
    color: var(--btp-primary) !important;
}

/* Checkbox border handled by font icon glyph in new Webix — no explicit border needed */

.webix_checkbox_1 .webix_custom_checkbox,
.webix_checkbox_1 .webix_custom_checkbox:before,
.webix_custom_checkbox:before,
.webix_icon.wxi-checkbox-marked,
.webix_multilist .wxi-checkbox-marked,
.webix_table_checkbox.webix_table_checkbox_checked,
.webix_tree_checkbox.wxi-checkbox-marked {
    color: var(--btp-primary) !important;
    border-color: var(--btp-primary) !important;
}

.webix_custom_checkbox:focus {
    border-color: var(--btp-primary) !important;
}

.webix_el_radio .webix_radio_1 .webix_custom_radio,
.webix_el_radio .webix_radio_1 .webix_custom_radio:before {
    color: var(--btp-primary) !important;
}

.webix_el_radio .webix_custom_radio:focus {
    color: var(--btp-accent-strong) !important;
}

.webix_cal_icon:hover,
.webix_cal_time:hover {
    color: var(--btp-primary-dark) !important;
}

.webix_el_datepicker .webix_input_icon,
.webix_el_datepicker .webix_input_icon.wxi-clock,
.webix_el_datepicker .webix_input_icon.wxi-calendar {
    background-color: var(--btp-accent-light) !important;
    color: var(--btp-primary) !important;
    border-left: 1px solid var(--btp-accent-mid) !important;
    border-radius: 0 6px 6px 0;
}

.webix_el_datepicker .webix_input_icon:hover,
.webix_el_datepicker .webix_input_icon:focus {
    background-color: var(--btp-accent-mid) !important;
}

.webix_cal_done {
    background-color: var(--btp-primary) !important;
    border-color: var(--btp-primary) !important;
    border-bottom-color: var(--btp-primary-dark) !important;
    color: var(--btp-surface) !important;
}

.webix_cal_done:hover,
.webix_cal_done:focus,
.webix_cal_done:active {
    background-color: var(--btp-primary-dark) !important;
}

.webix_cal_body .webix_cal_today,
.webix_cal_body .webix_cal_today .webix_cal_day_inner {
    border-color: var(--btp-accent-mid) !important;
}

.webix_cal_body .webix_selected,
.webix_cal_body .webix_cal_event.webix_cal_select,
.webix_cal_body .webix_cal_select .webix_cal_day_inner,
.webix_cal_body .webix_cal_range_start .webix_cal_day_inner,
.webix_cal_body .webix_cal_range_end .webix_cal_day_inner,
.webix_cal_body .webix_cal_block.webix_selected span {
    background-color: var(--btp-accent-mid) !important;
    color: var(--btp-dark) !important;
}

.webix_cal_body .webix_selected:focus,
.webix_cal_body .webix_cal_select:focus,
.webix_cal_body .webix_cal_event.webix_cal_select:focus,
.webix_cal_body .webix_cal_block.webix_selected:focus span {
    background-color: var(--btp-accent-light) !important;
}

/* ── Counter buttons ── */

.webix_inp_counter_prev,
.webix_inp_counter_next {
    background-color: var(--btp-primary) !important;
    border-color: var(--btp-primary) !important;
    border-bottom-color: var(--btp-primary-dark) !important;
    color: var(--btp-surface) !important;
}

.webix_inp_counter_prev:hover,
.webix_inp_counter_prev:focus,
.webix_inp_counter_prev:active,
.webix_inp_counter_next:hover,
.webix_inp_counter_next:focus,
.webix_inp_counter_next:active {
    background-color: var(--btp-primary-dark) !important;
}

/* ── Form input focus states ── */

.webix_el_box input:focus,
.webix_el_box textarea:focus,
.webix_el_box select:focus,
.webix_el_input input:focus,
.webix_el_input textarea:focus,
.webix_el_input select:focus,
.webix_inp_static:focus,
.webix_input_area input:focus,
.webix_input_area textarea:focus,
.webix_input_area select:focus {
    outline: none !important;
    border-color: var(--btp-accent-mid) !important;
    box-shadow: 0 0 0 2px rgba(183, 212, 255, 0.8) !important;
}

/* ── Group settings ── */

.groupAccSettings .webix_header,
.svcAccHdr, .svcCtlHdr, .cartSection {
    background-color: var(--btp-primary) !important;
    color: #fff !important;
}

.groupAccSettings .webix_header .webix_template .fas.fa-trash,
.groupAccSettings .webix_header .webix_el_button .fas.fa-trash,
body#manage.manage .webix_icon_btn.fas.fa-trash-alt,
body#configure.configure .webix_icon_btn.fas.fa-trash-alt {
    color: var(--btp-primary) !important;
    background-color: var(--btp-bg);
}

.groupAccSettings .webix_colorpicker .webix_el_input,
.groupAccSettings .webix_colorpicker .webix_input_inner,
.groupAccSettings .webix_colorpicker .webix_icon {
    background-color: var(--btp-accent-light);
}

.svcActHeader { border-left-color: var(--btp-accent-light) !important; }
.svcPkg { color: var(--btp-accent-strong) !important; }

/* ── Status area (progress bars) ── */

#statusArea .progress {
    background-color: var(--bt-green) !important;
    border-color: var(--bt-green) !important;
}

#statusArea .progress .progress-bar {
    background-color: var(--bt-red) !important;
}

#statusArea .progress .progress-text {
    color: #fff !important;
}

#statusArea .progress.candy .progress-bar {
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3) inset;
}

/* ── Tank config widget ── */

.tank-config-richselect .webix_inp_icon,
.tank-config-window .webix_richselect .webix_inp_icon {
    color: var(--btp-accent-strong) !important;
}

.tank-config-window .webix_form {
    background-color: var(--btp-surface) !important;
    border-radius: 10px;
    padding: 18px 20px 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.tank-config-window .webix_form .webix_control {
    margin-bottom: 12px;
}

.tank-config-option-list .tank-color-swatch,
.tank-color-option .tank-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.tank-color-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: rgba(255, 255, 255, 0.85);
}

.tank-config-option-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    padding: 6px 0;
}

/* ── Login page ── */

.login, .forgot, .register, .user_registration {
    position: relative;
    background-color: var(--btp-primary-dark);
}

.login::before, .forgot::before, .register::before, .user_registration::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("/theme/4243_W8C2YBOSNZAQI8FLONET/login_background.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    z-index: -1;
}

.login-form form {
    background: rgba(255, 255, 255, 0.70) !important;
    position: relative;
    padding: 30px !important;
    padding-top: 200px !important;
}

.login-form form::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 30px;
    right: 30px;
    height: 160px;
    background-color: rgba(255, 255, 255, 0.0);
    background-image: url("/theme/4243_W8C2YBOSNZAQI8FLONET/Blue Command Logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 4px;
}

.login-form .btn {
    background-color: var(--btp-primary) !important;
    border-color: var(--btp-primary) !important;
    color: var(--btp-surface) !important;
}

.login-form .btn:hover,
.login-form .btn:focus,
.login-form .btn:active {
    background-color: var(--btp-primary-dark) !important;
    border-color: var(--btp-primary-dark) !important;
}

.login-form a, .login-form a:link {
    color: var(--btp-primary) !important;
}

.login-form a:visited {
    color: var(--btp-accent-strong) !important;
}