:root{
    --app-bg: #f6f9ff;
    --app-text: #444444;
    --app-muted: #6c757d;
    --app-muted-2: #899bbd;
    --app-surface: #ffffff;
    --app-surface-2: #ffffff;
    --app-border: #ebeef4;
    --app-primary: #4154f1;
    --app-primary-hover: #6776f4;
    --app-primary-rgb: 65, 84, 241;
    --app-secondary: #6c757d;
    --app-success: #198754;
    --app-danger: #dc3545;
    --app-warning: #ffc107;
    --app-dark: #212529;
    --app-light: #f8f9fa;
    --app-link: #012970;
    --app-link-hover: #4154f1;
    --app-hover: rgba(0,0,0,0.06);
    --app-hover-dark: rgba(255,255,255,0.08);
    --app-surface-hover: #eef3ff;
    --app-divider: rgba(0,0,0,0.08);
    --app-scrollbar-thumb: #aab7cf;
    --app-scrollbar-track: transparent;
    --app-input-bg: #ffffff;
    --app-input-border: #ced4da;
    --app-input-label-bg: #e9ecef;
    --app-input-label-border: #eef3f8;
    --app-focus: #435ebe;
    --app-focus-accent: #5a8dee;
    --app-info-bg: #0dcaf0;
    --app-info-text: #000000;
    --app-secondary-bg: rgba(108, 117, 125, 0.14);
    --app-secondary-text: var(--app-text);
    --app-success-bg: rgba(25, 135, 84, 0.14);
    --app-success-text: var(--app-text);
    --app-danger-bg: rgba(220, 53, 69, 0.14);
    --app-danger-text: var(--app-text);
    --app-warning-bg: rgba(255, 193, 7, 0.14);
    --app-warning-text: #000000;
    --app-dark-bg: var(--app-dark);
    --app-dark-text: #ffffff;
    --app-light-bg: var(--app-light);
    --app-light-text: #000000;
    --app-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);

    --cell-highlight-bg: rgba(255, 193, 7, 0.28);
    --cell-highlight-border: rgba(255, 193, 7, 0.75);
    --cell-highlight-text: #1f2328;
}

.btn-primary{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus{
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--app-primary) 35%, transparent);
}

.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus{
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--app-primary) 35%, transparent);
}

.btn-secondary{
    --bs-btn-color: var(--app-text);
    --bs-btn-bg: var(--app-secondary-bg);
    --bs-btn-border-color: var(--app-secondary-bg);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-secondary-bg) 70%, var(--app-hover));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-secondary-bg) 70%, var(--app-hover));
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-secondary-bg) 55%, var(--app-hover));
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-secondary-bg) 55%, var(--app-hover));
    --bs-btn-disabled-color: var(--app-text);
    --bs-btn-disabled-bg: var(--app-secondary-bg);
    --bs-btn-disabled-border-color: var(--app-secondary-bg);
}

.btn-success{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-success);
    --bs-btn-border-color: var(--app-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-success) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-success) 85%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-success) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-success) 75%, #000);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--app-success);
    --bs-btn-disabled-border-color: var(--app-success);
}

.btn-danger{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-danger);
    --bs-btn-border-color: var(--app-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-danger) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-danger) 85%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-danger) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-danger) 75%, #000);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--app-danger);
    --bs-btn-disabled-border-color: var(--app-danger);
}

.btn-warning{
    --bs-btn-color: #000;
    --bs-btn-bg: var(--app-warning);
    --bs-btn-border-color: var(--app-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-warning) 85%, #fff);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-warning) 85%, #fff);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-warning) 78%, #fff);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-warning) 78%, #fff);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--app-warning);
    --bs-btn-disabled-border-color: var(--app-warning);
}

.btn-info{
    --bs-btn-color: var(--app-info-text);
    --bs-btn-bg: var(--app-info-bg);
    --bs-btn-border-color: var(--app-info-bg);
    --bs-btn-hover-color: var(--app-info-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-info-bg) 80%, #fff);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-info-bg) 80%, #fff);
    --bs-btn-active-color: var(--app-info-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-info-bg) 72%, #fff);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-info-bg) 72%, #fff);
    --bs-btn-disabled-color: var(--app-info-text);
    --bs-btn-disabled-bg: var(--app-info-bg);
    --bs-btn-disabled-border-color: var(--app-info-bg);
}

.btn-light{
    --bs-btn-color: var(--app-text);
    --bs-btn-bg: var(--app-light-bg);
    --bs-btn-border-color: var(--app-border);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-surface-hover);
    --bs-btn-hover-border-color: var(--app-border);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-surface-hover);
    --bs-btn-active-border-color: var(--app-border);
    --bs-btn-disabled-color: var(--app-text);
    --bs-btn-disabled-bg: var(--app-light-bg);
    --bs-btn-disabled-border-color: var(--app-border);
}

.btn-dark{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-dark-bg);
    --bs-btn-border-color: var(--app-dark-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-dark-bg) 80%, #fff);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-dark-bg) 80%, #fff);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-dark-bg) 70%, #fff);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-dark-bg) 70%, #fff);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--app-dark-bg);
    --bs-btn-disabled-border-color: var(--app-dark-bg);
}

.btn-outline-secondary{
    --bs-btn-color: var(--app-muted);
    --bs-btn-border-color: var(--app-divider);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-surface-hover);
    --bs-btn-hover-border-color: var(--app-divider);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-surface-hover);
    --bs-btn-active-border-color: var(--app-divider);
    --bs-btn-disabled-color: var(--app-muted);
    --bs-btn-disabled-border-color: var(--app-divider);
}

.btn-outline-success{
    --bs-btn-color: var(--app-success);
    --bs-btn-border-color: var(--app-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-success);
    --bs-btn-hover-border-color: var(--app-success);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-success) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-success) 80%, #000);
    --bs-btn-disabled-color: var(--app-success);
    --bs-btn-disabled-border-color: var(--app-success);
}

.btn-outline-danger{
    --bs-btn-color: var(--app-danger);
    --bs-btn-border-color: var(--app-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-danger);
    --bs-btn-hover-border-color: var(--app-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-danger) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-danger) 80%, #000);
    --bs-btn-disabled-color: var(--app-danger);
    --bs-btn-disabled-border-color: var(--app-danger);
}

.btn-outline-warning{
    --bs-btn-color: var(--app-warning);
    --bs-btn-border-color: var(--app-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--app-warning);
    --bs-btn-hover-border-color: var(--app-warning);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-warning) 85%, #fff);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-warning) 85%, #fff);
    --bs-btn-disabled-color: var(--app-warning);
    --bs-btn-disabled-border-color: var(--app-warning);
}

.btn-outline-info{
    --bs-btn-color: var(--app-info-bg);
    --bs-btn-border-color: var(--app-info-bg);
    --bs-btn-hover-color: var(--app-info-text);
    --bs-btn-hover-bg: var(--app-info-bg);
    --bs-btn-hover-border-color: var(--app-info-bg);
    --bs-btn-active-color: var(--app-info-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-info-bg) 80%, #fff);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-info-bg) 80%, #fff);
    --bs-btn-disabled-color: var(--app-info-bg);
    --bs-btn-disabled-border-color: var(--app-info-bg);
}

.btn-outline-light{
    --bs-btn-color: var(--app-light);
    --bs-btn-border-color: var(--app-divider);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-light-bg);
    --bs-btn-hover-border-color: var(--app-divider);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-light-bg);
    --bs-btn-active-border-color: var(--app-divider);
    --bs-btn-disabled-color: var(--app-light);
    --bs-btn-disabled-border-color: var(--app-divider);
}

.btn-outline-dark{
    --bs-btn-color: var(--app-text);
    --bs-btn-border-color: var(--app-divider);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-dark-bg);
    --bs-btn-hover-border-color: var(--app-dark-bg);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-dark-bg);
    --bs-btn-active-border-color: var(--app-dark-bg);
    --bs-btn-disabled-color: var(--app-text);
    --bs-btn-disabled-border-color: var(--app-divider);
}

:root[data-theme="dark"]{
    --app-bg: #1c1f21;
    --app-text: #e6e6e6;
    --app-muted: #a7b0b7;
    --app-muted-2: #7f8a93;
    --app-surface: #20262a;
    --app-surface-2: #22201f;
    --app-border: rgba(255,255,255,0.08);
    --app-primary: #7a67eb;
    --app-primary-hover: #8e7cfc;
    --app-primary-rgb: 122, 103, 235;
    --app-secondary: #a7b0b7;
    --app-success: #48d597;
    --app-danger: #ff6b6b;
    --app-warning: #ffd36b;
    --app-dark: #0f1113;
    --app-light: rgba(255,255,255,0.85);
    --app-link: #cfdfff;
    --app-link-hover: #ffffff;
    --app-hover: rgba(255,255,255,0.08);
    --app-hover-dark: rgba(0,0,0,0.06);
    --app-surface-hover: rgba(255,255,255,0.06);
    --app-divider: rgba(255,255,255,0.10);
    --app-scrollbar-thumb: rgba(255,255,255,0.22);
    --app-scrollbar-track: transparent;
    --app-input-bg: #1c2226;
    --app-input-border: rgba(255,255,255,0.14);
    --app-input-label-bg: rgba(255,255,255,0.06);
    --app-input-label-border: rgba(255,255,255,0.10);
    --app-focus: #8e7cfc;
    --app-focus-accent: #cfd6ff;
    --app-info-bg: rgba(13, 202, 240, 0.22);
    --app-info-text: var(--app-text);
    --app-secondary-bg: rgba(167, 176, 183, 0.14);
    --app-secondary-text: var(--app-text);
    --app-success-bg: rgba(72, 213, 151, 0.14);
    --app-success-text: var(--app-text);
    --app-danger-bg: rgba(255, 107, 107, 0.14);
    --app-danger-text: var(--app-text);
    --app-warning-bg: rgba(255, 211, 107, 0.14);
    --app-warning-text: var(--app-text);
    --app-dark-bg: rgba(0,0,0,0.35);
    --app-dark-text: #ffffff;
    --app-light-bg: rgba(255,255,255,0.10);
    --app-light-text: var(--app-text);
    --app-shadow: 0px 2px 20px rgba(0, 0, 0, 0.35);

    --cell-highlight-bg: rgba(255, 211, 107, 0.22);
    --cell-highlight-border: rgba(255, 211, 107, 0.55);
    --cell-highlight-text: rgba(255,255,255,0.95);
}

body{
    background: var(--app-bg);
    color: var(--app-text);
}

html{
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

body::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}

body::-webkit-scrollbar-track{
    background: var(--app-scrollbar-track);
}

body::-webkit-scrollbar-thumb{
    background-color: var(--app-scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid var(--app-scrollbar-track);
}

/* Webix scrollbars */
.webix_view ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

.webix_view ::-webkit-scrollbar-track{
    background: var(--app-scrollbar-track);
}

.webix_view ::-webkit-scrollbar-thumb{
    background-color: var(--app-scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid var(--app-scrollbar-track);
}

/* Webix base theming */
.webix_view,
.webix_layout_line{
    background-color: var(--app-surface);
    color: var(--app-text);
}

.webix_toolbar,
.webix_toolbar.webix_layout_toolbar{
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.webix_datatable{
    color: var(--app-text);
}

.webix_ss_header,
.webix_ss_header .webix_hcolumn,
.webix_hcell,
.webix_hcell.webix_last_row,
.webix_dd_drag_column{
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.webix_ss_body,
.webix_ss_center,
.webix_ss_vscroll,
.webix_ss_hscroll{
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.webix_cell,
.webix_column,
.webix_datatable .webix_cell{
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.webix_datatable .webix_cell.highlight_cell,
.webix_cell.highlight_cell{
    background-color: var(--cell-highlight-bg) !important;
    border-color: var(--cell-highlight-border) !important;
    color: var(--cell-highlight-text) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cell-highlight-border) 65%, transparent);
}

.webix_datatable .webix_cell.webix_row_select,
.webix_datatable .webix_cell.webix_select_mark{
    background-color: var(--app-surface-hover);
}

.webix_row_hover,
.webix_datatable .webix_cell:hover{
    background-color: var(--app-surface-hover);
}

.webix_inp_label,
.webix_el_label{
    color: var(--app-muted);
}

.webix_inp_static,
.webix_inp_text,
.webix_inp_password,
.webix_el_text input,
.webix_el_search input,
.webix_el_combo input,
.webix_el_richselect input,
.webix_el_datepicker input,
.webix_el_textarea textarea,
.webix_el_richselect .webix_inp_static,
.webix_el_combo .webix_inp_static,
.webix_el_search .webix_inp_static{
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-input-border);
}

.webix_el_search input,
.webix_el_search .webix_inp_static{
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-input-border);
}

.webix_el_text input:focus,
.webix_el_search input:focus,
.webix_el_combo input:focus,
.webix_el_richselect input:focus,
.webix_el_datepicker input:focus,
.webix_el_textarea textarea:focus{
    border-color: var(--app-focus);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--app-focus) 35%, transparent);
}

.webix_popup,
.webix_list,
.webix_multicombo_list,
.webix_menu,
.webix_suggest{
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.webix_list_item,
.webix_menu-x,
.webix_menu-y,
.webix_context_menu{
    color: var(--app-text);
}

.webix_list_item.webix_selected,
.webix_list_item:hover,
.webix_menu .webix_list_item:hover,
.webix_menu .webix_list_item.webix_selected{
    background-color: var(--app-surface-hover);
}

.webix_pivot_toolbar{
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

a{
    color: var(--app-link);
}

a:hover,
a:focus{
    color: var(--app-link-hover);
}

/* Bootstrap utilities adapter */
.text-body{
    color: var(--app-text) !important;
}

.text-muted,
.text-secondary{
    color: var(--app-muted) !important;
}

.text-primary{ color: var(--app-primary) !important; }
.text-success{ color: var(--app-success) !important; }
.text-danger{ color: var(--app-danger) !important; }
.text-warning{ color: var(--app-warning) !important; }
.text-info{ color: var(--app-info-bg) !important; }
.text-light{ color: var(--app-light) !important; }
.text-dark{ color: var(--app-text) !important; }

.bg-primary{ background-color: var(--app-primary) !important; color: #fff !important; }
.bg-secondary{ background-color: var(--app-secondary-bg) !important; color: var(--app-secondary-text) !important; }
.bg-success{ background-color: var(--app-success-bg) !important; color: var(--app-success-text) !important; }
.bg-danger{ background-color: var(--app-danger-bg) !important; color: var(--app-danger-text) !important; }
.bg-warning{ background-color: var(--app-warning-bg) !important; color: var(--app-warning-text) !important; }
.bg-info{ background-color: var(--app-info-bg) !important; color: var(--app-info-text) !important; }
.bg-light{ background-color: var(--app-light-bg) !important; color: var(--app-light-text) !important; }
.bg-dark{ background-color: var(--app-dark-bg) !important; color: var(--app-dark-text) !important; }

.bg-primary-light{ background-color: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface)) !important; border-color: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface)) !important; color: var(--app-text) !important; }
.bg-secondary-light{ background-color: var(--app-secondary-bg) !important; border-color: var(--app-secondary-bg) !important; color: var(--app-secondary-text) !important; }
.bg-success-light{ background-color: var(--app-success-bg) !important; border-color: var(--app-success-bg) !important; color: var(--app-success-text) !important; }
.bg-danger-light{ background-color: var(--app-danger-bg) !important; border-color: var(--app-danger-bg) !important; color: var(--app-danger-text) !important; }
.bg-warning-light{ background-color: var(--app-warning-bg) !important; border-color: var(--app-warning-bg) !important; color: var(--app-warning-text) !important; }
.bg-info-light{ background-color: var(--app-info-bg) !important; border-color: var(--app-info-bg) !important; color: var(--app-info-text) !important; }
.bg-dark-light{ background-color: color-mix(in srgb, var(--app-divider) 55%, var(--app-surface)) !important; border-color: color-mix(in srgb, var(--app-divider) 55%, var(--app-surface)) !important; color: var(--app-text) !important; }

.card-img-overlay{
    background-color: color-mix(in srgb, var(--app-surface) 60%, transparent);
}

.accordion-button:not(.collapsed){
    background-color: var(--app-surface-hover);
    color: var(--app-link);
}

.header-nav .notifications .notification-item:hover,
.header-nav .messages .message-item:hover{
    background-color: var(--app-surface-hover);
}

.text-bg-primary{ background-color: var(--app-primary) !important; color: #fff !important; }
.text-bg-secondary{ background-color: var(--app-secondary-bg) !important; color: var(--app-secondary-text) !important; }
.text-bg-success{ background-color: var(--app-success-bg) !important; color: var(--app-success-text) !important; }
.text-bg-danger{ background-color: var(--app-danger-bg) !important; color: var(--app-danger-text) !important; }
.text-bg-warning{ background-color: var(--app-warning-bg) !important; color: var(--app-warning-text) !important; }
.text-bg-info{ background-color: var(--app-info-bg) !important; color: var(--app-info-text) !important; }
.text-bg-light{ background-color: var(--app-light-bg) !important; color: var(--app-light-text) !important; }
.text-bg-dark{ background-color: var(--app-dark-bg) !important; color: var(--app-dark-text) !important; }

.border{ border-color: var(--app-border) !important; }
.border-top{ border-top-color: var(--app-border) !important; }
.border-end{ border-right-color: var(--app-border) !important; }
.border-bottom{ border-bottom-color: var(--app-border) !important; }
.border-start{ border-left-color: var(--app-border) !important; }

.border-primary{ border-color: var(--app-primary) !important; }
.border-secondary{ border-color: var(--app-secondary) !important; }
.border-success{ border-color: var(--app-success) !important; }
.border-danger{ border-color: var(--app-danger) !important; }
.border-warning{ border-color: var(--app-warning) !important; }
.border-info{ border-color: var(--app-info-bg) !important; }
.border-light{ border-color: var(--app-light) !important; }
.border-dark{ border-color: var(--app-divider) !important; }

.link-secondary{ color: var(--app-muted) !important; }
.link-secondary:hover,.link-secondary:focus{ color: var(--app-text) !important; }
.link-success{ color: var(--app-success) !important; }
.link-success:hover,.link-success:focus{ color: var(--app-link-hover) !important; }
.link-danger{ color: var(--app-danger) !important; }
.link-danger:hover,.link-danger:focus{ color: var(--app-link-hover) !important; }
.link-warning{ color: var(--app-warning) !important; }
.link-warning:hover,.link-warning:focus{ color: var(--app-link-hover) !important; }
.link-info{ color: var(--app-info-bg) !important; }
.link-info:hover,.link-info:focus{ color: var(--app-link-hover) !important; }
.link-light{ color: var(--app-light) !important; }
.link-light:hover,.link-light:focus{ color: var(--app-link-hover) !important; }
.link-dark{ color: var(--app-text) !important; }
.link-dark:hover,.link-dark:focus{ color: var(--app-link-hover) !important; }

/* DataTables base vars */
:root,
html,
body{
    --dt-html-background: var(--app-surface);
}

h1, h2, h3, h4, h5, h6{
    color: var(--app-text);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
    color: var(--app-link);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{
    color: var(--app-link-hover);
}

.header{
    background-color: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.header .logo span,
.header .toggle-sidebar-btn,
.header .search-form button i{
    color: var(--app-link);
}

.header .search-form input{
    background: var(--app-input-bg);
    color: var(--app-text);
    border: 1px solid var(--app-input-border);
}

.header .search-form input::placeholder{
    color: var(--app-muted);
}

.header .search-form input:focus,
.header .search-form input:hover{
    outline: none;
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--app-focus) 35%, transparent);
    border: 1px solid var(--app-focus);
}

.header .search-form button{
    background: none;
}

.header .search-form button i{
    color: var(--app-link);
}

@media (max-width: 1199px) {
    .header .search-bar{
        background: var(--app-surface);
        box-shadow: var(--app-shadow);
    }
}

.header-nav .nav-icon i,
.header-nav .nav-profile .user-name{
    color: var(--app-link);
}

.slide-form .slide-form-content-wrapper{
    background-color: var(--app-surface);
    color: var(--app-text);
}

section.profile{
    color: var(--app-text);
}

:root[data-theme="dark"] section.profile{
    color: var(--app-text);
}

.sidebar{
    background-color: var(--app-surface);
    border-right: 1px solid var(--app-border);
}

.card,
.card-header,
.card-footer,
.dropdown-menu{
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.dropdown-divider{
    border-top-color: var(--app-divider);
}

.dropdown-menu .dropdown-item{
    color: var(--app-text);
}

.dropdown-menu .dropdown-footer a{
    color: var(--app-text);
    text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover,
.dropdown-menu .dropdown-footer a:focus{
    color: var(--app-link-hover);
    text-decoration: none;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
    background-color: var(--app-surface-hover);
}

@media (min-width: 768px) {
    .dropdown-menu-arrow::before {
        background: var(--app-surface);
        border-top: 1px solid var(--app-border);
        border-left: 1px solid var(--app-border);
    }
}

.header-nav .profile .dropdown-item:hover,
.header-nav .profile .dropdown-item:focus{
    background-color: var(--app-surface-hover);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-header h6,
.dropdown-menu .dropdown-header span{
    color: var(--app-text);
}

.dropdown-menu .dropdown-item i{
    color: var(--app-muted);
}

.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i{
    color: var(--app-link-hover);
}

.header-nav .profile .dropdown-item:hover i,
.header-nav .profile .dropdown-item:focus i{
    color: var(--app-link-hover);
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus{
    color: var(--app-link-hover);
}

.pagetitle h1{
    color: var(--app-text);
}

.card-title{
    color: var(--app-link);
}

.card-title span{
    color: var(--app-muted-2);
}

.dashboard .recent-sales .table thead th{
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.dashboard .recent-sales .table thead{
    border-color: var(--app-border);
}

.dashboard .info-card h6{
    color: var(--app-text);
}

.dashboard .news h4 a{
    color: var(--app-link);
}

.dashboard .news h4 a:hover{
    color: var(--app-link-hover);
}

#profile-sessions .session:hover{
    background-color: var(--app-surface-hover);
}

.back-to-top{
    background: var(--app-primary);
}

.back-to-top:hover{
    background: var(--app-primary-hover);
}

.table{
    color: var(--app-text);
}

.table{
    --bs-table-color: var(--app-text);
    --bs-table-bg: var(--app-surface);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-color: var(--app-text);
    --bs-table-striped-bg: color-mix(in srgb, var(--app-divider) 35%, transparent);
    --bs-table-active-color: var(--app-text);
    --bs-table-active-bg: var(--app-surface-hover);
    --bs-table-hover-color: var(--app-text);
    --bs-table-hover-bg: var(--app-surface-hover);
}

.table-bordered{
    border-color: var(--app-border);
}

.table-group-divider{
    border-top-color: var(--app-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > *{
    --bs-table-accent-bg: var(--bs-table-striped-bg);
}

.table-active{
    --bs-table-accent-bg: var(--bs-table-active-bg);
    color: var(--bs-table-active-color);
}

.table-hover > tbody > tr:hover > *{
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

.table-primary{ --bs-table-bg: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface)); --bs-table-striped-bg: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface)); --bs-table-active-bg: color-mix(in srgb, var(--app-primary) 18%, var(--app-surface)); --bs-table-hover-bg: color-mix(in srgb, var(--app-primary) 16%, var(--app-surface)); color: var(--app-text); border-color: var(--app-border); }
.table-secondary{ --bs-table-bg: var(--app-secondary-bg); --bs-table-striped-bg: color-mix(in srgb, var(--app-secondary-bg) 70%, var(--app-surface)); --bs-table-active-bg: color-mix(in srgb, var(--app-secondary-bg) 55%, var(--app-surface)); --bs-table-hover-bg: color-mix(in srgb, var(--app-secondary-bg) 60%, var(--app-surface)); color: var(--app-text); border-color: var(--app-border); }
.table-success{ --bs-table-bg: var(--app-success-bg); --bs-table-striped-bg: color-mix(in srgb, var(--app-success-bg) 70%, var(--app-surface)); --bs-table-active-bg: color-mix(in srgb, var(--app-success-bg) 55%, var(--app-surface)); --bs-table-hover-bg: color-mix(in srgb, var(--app-success-bg) 60%, var(--app-surface)); color: var(--app-text); border-color: var(--app-border); }
.table-danger{ --bs-table-bg: var(--app-danger-bg); --bs-table-striped-bg: color-mix(in srgb, var(--app-danger-bg) 70%, var(--app-surface)); --bs-table-active-bg: color-mix(in srgb, var(--app-danger-bg) 55%, var(--app-surface)); --bs-table-hover-bg: color-mix(in srgb, var(--app-danger-bg) 60%, var(--app-surface)); color: var(--app-text); border-color: var(--app-border); }
.table-warning{ --bs-table-bg: var(--app-warning-bg); --bs-table-striped-bg: color-mix(in srgb, var(--app-warning-bg) 70%, var(--app-surface)); --bs-table-active-bg: color-mix(in srgb, var(--app-warning-bg) 55%, var(--app-surface)); --bs-table-hover-bg: color-mix(in srgb, var(--app-warning-bg) 60%, var(--app-surface)); color: var(--app-text); border-color: var(--app-border); }
.table-info{ --bs-table-bg: var(--app-info-bg); --bs-table-striped-bg: color-mix(in srgb, var(--app-info-bg) 60%, var(--app-surface)); --bs-table-active-bg: color-mix(in srgb, var(--app-info-bg) 70%, var(--app-surface)); --bs-table-hover-bg: color-mix(in srgb, var(--app-info-bg) 65%, var(--app-surface)); color: var(--app-info-text); border-color: var(--app-border); }
.table-light{ --bs-table-bg: var(--app-light-bg); --bs-table-striped-bg: color-mix(in srgb, var(--app-light-bg) 80%, var(--app-surface)); --bs-table-active-bg: color-mix(in srgb, var(--app-light-bg) 70%, var(--app-surface)); --bs-table-hover-bg: color-mix(in srgb, var(--app-light-bg) 75%, var(--app-surface)); color: var(--app-text); border-color: var(--app-border); }
.table-dark{ --bs-table-bg: var(--app-dark-bg); --bs-table-striped-bg: color-mix(in srgb, var(--app-dark-bg) 80%, var(--app-surface)); --bs-table-active-bg: color-mix(in srgb, var(--app-dark-bg) 70%, var(--app-surface)); --bs-table-hover-bg: color-mix(in srgb, var(--app-dark-bg) 75%, var(--app-surface)); color: var(--app-dark-text); border-color: var(--app-border); }

.tableview-container,
.tableview-footer,
.no-items-row{
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.choice-input{
    background-color: var(--app-input-bg);
    border: 1px solid var(--app-input-border);
    color: var(--app-text);
}

.choice-input .choice-input-item{
    background-color: var(--app-surface-hover);
    border: 1px solid var(--app-divider);
    color: var(--app-text);
}

.choice-input .choice-input-item .choice-input-item-content.editable{
    color: var(--app-link);
}

.choice-input .choice-input-item-delete{
    color: var(--app-muted);
    background-color: var(--app-surface-hover);
}

.choice-inputscope .choice-input-item-delete:hover,
.choice-input .choice-input-item-delete:active{
    background-color: var(--app-hover);
    border-color: var(--app-divider);
}

.choice-input-popup-window{
    background-color: var(--app-surface);
    box-shadow: var(--app-shadow);
    color: var(--app-text);
    border: 1px solid var(--app-border);
}

.no-items-row{
    border-left: 1px solid var(--app-border);
    border-right: 1px solid var(--app-border);
}

div.dt-button-info{
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    color: var(--app-text);
}

/* Bootstrap table cell background */
.table>:not(caption)>*>*{
    background-color: var(--app-surface);
}

.table-hover>tbody>tr:hover>*{
    background-color: var(--app-surface-hover);
    color: var(--app-text);
}

.nav-tabs-bordered{
    border-bottom: 2px solid var(--app-border);
}

.nav-tabs-bordered .nav-link{
    color: var(--app-muted);
    background: transparent;
    border: 0;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus{
    color: var(--app-link);
}

.nav-tabs-bordered .nav-link.active{
    color: var(--app-link-hover);
    background-color: var(--app-surface);
    border-bottom: 2px solid var(--app-primary);
}

.form-control{
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-input-border);
}

.form-control::placeholder{
    color: var(--app-muted);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly]{
    background-color: var(--app-surface-hover);
    color: var(--app-muted);
    border-color: var(--app-input-border);
    opacity: 1;
}

.form-control-plaintext{
    color: var(--app-text);
}

.form-control:focus{
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-focus);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--app-focus) 35%, transparent);
}

.input-group-text{
    background-color: var(--app-surface-hover);
    color: var(--app-text);
    border-color: var(--app-input-border);
}

.form-select{
    background-color: var(--app-input-bg);
    color: var(--app-text);
    border-color: var(--app-input-border);
}

.form-select:focus{
    border-color: var(--app-focus);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--app-focus) 35%, transparent);
}

.form-floating > label{
    color: var(--app-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label{
    color: var(--app-muted);
}

:root[data-theme="dark"] .form-floating > label{
    color: var(--app-muted);
}

:root[data-theme="dark"] .form-floating > .form-control:focus ~ label,
:root[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
:root[data-theme="dark"] .form-floating > .form-select ~ label{
    color: var(--app-muted);
}

/* Input-group border seams */
.input-group .btn{
    border-color: var(--app-input-border);
}

.input-group .btn:hover,
.input-group .btn:focus{
    border-color: var(--app-focus);
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){
    border-right-color: transparent;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
    border-left-color: transparent;
}

:root[data-theme="dark"] .form-select{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,0.55%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input{
    background-color: var(--app-input-bg);
    border-color: var(--app-input-border);
}

.form-check-input:focus{
    border-color: var(--app-focus);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--app-focus) 35%, transparent);
}

.form-check-input:checked{
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.form-switch .form-check-input{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.35%29'/%3e%3c/svg%3e");
}

body:not(.dark-theme) .form-switch .form-check-input{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,0.35%29'/%3e%3c/svg%3e");
}

.btn-outline-primary{
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-focus-shadow-rgb: 65, 84, 241;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active{
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

/* ApexCharts theming */
.apexcharts-tooltip{
    box-shadow: var(--app-shadow);
}

.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark{
    border: 1px solid var(--app-border);
    background: color-mix(in srgb, var(--app-surface) 96%, transparent);
    color: var(--app-text);
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title{
    background: var(--app-surface-hover);
    border-bottom: 1px solid var(--app-divider);
    color: var(--app-text);
}

.apexcharts-text,
.apexcharts-legend-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-title-text,
.apexcharts-subtitle-text,
.apexcharts-datalabel,
.apexcharts-tooltip-text{
    fill: var(--app-text) !important;
    color: var(--app-text) !important;
}

.apexcharts-gridline,
.apexcharts-xaxis line,
.apexcharts-yaxis line,
.apexcharts-xaxis-border,
.apexcharts-yaxis-border,
.apexcharts-xaxis-tick,
.apexcharts-yaxis-tick{
    stroke: var(--app-divider) !important;
}

.footer{
    background-color: var(--app-surface);
    border-top: 1px solid var(--app-border);
}