/*
 * "Modern" / "Modern Dark" Webix skin overlay.
 *
 * This is NOT a full skin (webix.skin.set() only recognizes flat/material/
 * compact/mini/contrast in this bundled webix.js build - see CLAUDE.md).
 * Instead this file is loaded *on top of* flat.min.css: flat supplies the
 * base layout metrics (row heights, paddings, etc. via webix.skin.set('flat')),
 * and this file re-skins the visual surface (colors, radii, shadows, borders)
 * to a flatter, softer, more current look.
 *
 * "Modern Dark" is not a second stylesheet - it's the same overlay with a
 * dark default palette. Colors are exposed as CSS custom properties on
 * :root so they can be changed live from JS (see setModernCssVars() in
 * index.html): that function derives text/border/overlay colors from the
 * lightness of the chosen surface/bg, so any dark surface+bg pair (the
 * "modern-dark" preset or a user's own dark customization of "modern")
 * automatically gets light text, lightened borders and light-tinted
 * hover/shadow overlays via --m-overlay-rgb instead of hardcoded black.
 * Every var() below has an inline (light-theme) fallback so the skin still
 * looks correct if the vars haven't been injected yet.
 */

/* flat.css paints every .webix_view white by default and only a handful of
   layout wrappers (multiview cells, clean/line layouts, spacers, control
   shells...) are explicitly reset to transparent so the layout structure
   underneath can show through. That's invisible in the light "modern"
   preset (white-on-off-white), but in "modern-dark" any card that keeps
   flat's hardcoded white - a chart, a datatable row, a custom template
   card - turns into a bright white box with unreadable light text on it.
   So this skin flips the default to the themed surface color and then
   re-declares transparency for exactly the wrapper classes flat.css itself
   treats as transparent, instead of hand-picking which widgets to fix. */
.webix_view {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--m-text, #1a1d29);
  background-color: var(--m-surface, #ffffff);
}

.webix_multiview,
.webix_layout_clean,
.webix_layout_line,
.webix_clean,
.webix_control,
.webix_spacer,
.webix_view_align,
.webix_span_layer,
.webix_span_layer_top,
.webix_el_tabbar,
.webix_tab_filler,
.webix_menu-x {
  background-color: transparent;
}

body {
  background: var(--m-bg, #f4f5f9);
}

.webix_layout_space,
.webix_layout_wide {
  background: var(--m-bg, #f4f5f9);
}

.webix_view.webix_form,
.webix_view.webix_window,
.webix_win_body,
.webix_win_head {
  background-color: var(--m-surface, #ffffff);
}

::selection {
  background: var(--m-accent-soft-strong, rgba(99, 102, 241, .25));
}

:focus-visible {
  outline: 2px solid var(--m-accent, #6366f1);
  outline-offset: 1px;
}

/* ---------- toolbar ---------- */

.webix_toolbar {
  background: var(--m-surface, #ffffff);
  color: var(--m-surface-contrast, #1a1d29);
  border-bottom: 1px solid var(--m-surface-border, #e7e8ee);
  box-shadow: 0 1px 0 rgba(var(--m-overlay-rgb, 15, 23, 42), .02);
}
.webix_toolbar .webix_el_label {
  color: var(--m-surface-contrast, #1a1d29);
  font-weight: 600;
}
.webix_toolbar .webix_icon_button .webix_icon {
  color: var(--m-surface-contrast, #1a1d29);
  opacity: .72;
  transition: opacity .15s ease, color .15s ease;
}
.webix_toolbar .webix_icon_button:hover .webix_icon {
  opacity: 1;
  color: var(--m-accent, #6366f1);
}
.webix_toolbar .webix_img_btn .webix_icon,
.webix_toolbar .webix_img_btn_text {
  color: var(--m-surface-contrast, #1a1d29);
  opacity: .82;
  transition: opacity .15s ease, color .15s ease;
}
.webix_toolbar .webix_el_button:hover .webix_img_btn_text,
.webix_toolbar .webix_el_button:hover .webix_icon {
  opacity: 1;
  color: var(--m-accent, #6366f1);
}
.webix_toolbar.webix_shadow_small,
.webix_toolbar.webix_shadow_medium,
.webix_toolbar.webix_shadow_big {
  box-shadow: 0 2px 10px rgba(var(--m-overlay-rgb, 15, 23, 42), .06);
}
.webix_shadow_medium,
.webix_shadow_small,
.webix_shadow_big {
  box-shadow: 0 2px 10px rgba(var(--m-overlay-rgb, 15, 23, 42), .06);
}

/* ---------- buttons ---------- */

.webix_button {
  border-radius: 8px;
  border: 1px solid var(--m-surface-border, #e2e4ea);
  background: var(--m-surface, #ffffff);
  color: var(--m-text, #1a1d29);
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.webix_button:hover {
  background: var(--m-bg, #f4f5f9);
}
.webix_pressed .webix_button,
.webix_button:active {
  box-shadow: inset 0 1px 3px rgba(var(--m-overlay-rgb, 15, 23, 42), .14);
}

.webix_primary .webix_button {
  background: var(--m-accent, #6366f1);
  border-color: var(--m-accent, #6366f1);
  color: var(--m-accent-contrast, #ffffff);
}
.webix_primary .webix_button:hover {
  background: var(--m-accent-dark, #4f52d6);
  border-color: var(--m-accent-dark, #4f52d6);
}
.webix_primary .webix_button:focus {
  background: var(--m-accent-darker, #3d3fb8);
}
.webix_primary .webix_button .webix_icon,
.webix_primary .webix_button .webix_img_btn_text,
.webix_primary .webix_button .webix_icon_btn {
  color: var(--m-accent-contrast, #ffffff);
}

.webix_secondary .webix_button {
  background: var(--m-accent-soft, rgba(99, 102, 241, .12));
  border-color: transparent;
  color: var(--m-accent-dark, #4f52d6);
}
.webix_secondary .webix_button:hover {
  background: var(--m-accent-soft-strong, rgba(99, 102, 241, .22));
}
.webix_secondary .webix_button .webix_icon,
.webix_secondary .webix_button .webix_img_btn_text,
.webix_secondary .webix_button .webix_icon_btn {
  color: var(--m-accent-dark, #4f52d6);
}

.webix_danger .webix_button {
  background: var(--m-danger, #e5484d);
  border-color: var(--m-danger, #e5484d);
  color: #ffffff;
}
.webix_danger .webix_button:hover {
  background: var(--m-danger-dark, #cf3f44);
  border-color: var(--m-danger-dark, #cf3f44);
}
.webix_danger .webix_button .webix_icon,
.webix_danger .webix_button .webix_img_btn_text,
.webix_danger .webix_button .webix_icon_btn {
  color: #ffffff;
}

.webix_transparent .webix_button {
  background: transparent;
  border-color: transparent;
  color: var(--m-text-soft, #6b7280);
}
.webix_transparent .webix_button:hover {
  background: rgba(var(--m-overlay-rgb, 15, 23, 42), .08);
  color: var(--m-text, #1a1d29);
}
.webix_transparent .webix_button .webix_icon,
.webix_transparent .webix_button .webix_img_btn_text,
.webix_transparent .webix_button .webix_icon_btn {
  color: inherit;
}

.webix_popup_button {
  background: var(--m-accent, #6366f1);
  border-radius: 7px;
  color: #ffffff;
}
.webix_popup_button:hover {
  background: var(--m-accent-dark, #4f52d6);
}
.webix_popup_button:focus,
.webix_popup_button:active {
  background: var(--m-accent-darker, #3d3fb8);
}

/* ---------- lists / sidebar / accordion ---------- */

.webix_list_item {
  border-bottom: 1px solid transparent;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.webix_list_item:hover {
  background: var(--m-bg, #f4f5f9);
}
.webix_list_item.webix_selected {
  background: var(--m-accent-soft, rgba(99, 102, 241, .12));
  color: var(--m-accent-dark, #4f52d6);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--m-accent, #6366f1);
}
.webix_list_item.webix_selected:focus {
  background: var(--m-accent-soft-strong, rgba(99, 102, 241, .18));
}
.webix_list .webix_list_item.webix_selected {
  border-bottom: 1px solid transparent;
}
.webix_list_item.webix_disabled {
  background: transparent;
}

.webix_accordionitem_header {
  background: var(--m-surface, #ffffff);
  border-bottom: 1px solid var(--m-surface-border, #e7e8ee);
  color: var(--m-text, #1a1d29);
  font-weight: 600;
}
.webix_accordionitem_body {
  background: var(--m-surface, #ffffff);
}
.webix_view.webix_layout_accordion {
  background-color: var(--m-bg, #f4f5f9);
}

.webix_unit_header,
.webix_group_back,
.webix_group_back.webix_selected {
  background: var(--m-bg, #f4f5f9);
  color: var(--m-text-soft, #6b7280);
}

/* ---------- datatable ---------- */

.webix_ss_header,
.webix_hcolumn,
.webix_ss_vscroll_header,
.webix_dd_drag_column,
.webix_hs_left,
.webix_hs_center,
.webix_hs_right {
  background: var(--m-bg, #f7f8fb);
  color: var(--m-text-soft, #6b7280);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.webix_ss_header .webix_hcolumn .webix_hcell,
.webix_ss_header .webix_span {
  border-right: 1px solid var(--m-surface-border, #e7e8ee);
  border-bottom: 1px solid var(--m-surface-border, #e7e8ee);
}
.webix_ss_footer,
.webix_ss_footer .webix_hcolumn,
.webix_ss_footer .webix_hs_left,
.webix_ss_footer .webix_hs_center,
.webix_ss_footer .webix_hs_right,
.webix_ss_footer div.webix_ss_vscroll_footer {
  background: var(--m-surface, #ffffff);
}
.webix_hcell .webix_excel_filter {
  color: var(--m-text-soft, #6b7280);
}
.webix_hcell .webix_excel_filter:hover,
.webix_hcell.webix_ss_filter_active .webix_excel_filter {
  color: var(--m-accent, #6366f1);
}
.webix_ss_sort_num {
  color: var(--m-accent, #6366f1);
}
.webix_ss_header .webix_sel_hcell,
.webix_ss_footer .webix_sel_hcell,
.webix_ss_header .webix_dd_over_column {
  background-color: var(--m-accent-soft, rgba(99, 102, 241, .16));
}

.webix_column > div,
.webix_table_cell {
  border-right: 1px solid transparent;
  border-bottom: 1px solid var(--m-surface-border, #eef0f4);
}
.webix_ss_left .webix_column.webix_last > div,
.webix_ss_right .webix_column.webix_first > div,
.webix_hs_right .webix_first {
  border-color: var(--m-surface-border, #eef0f4);
}

.webix_column > div.webix_column_select,
.webix_column > div.webix_row_select,
.webix_column > .webix_drag_over.webix_cell.webix_row_select,
.webix_column > .webix_drag_over.webix_cell.webix_cell_select {
  background: var(--m-accent-soft, rgba(99, 102, 241, .14));
  color: var(--m-text, #1a1d29);
}
.webix_column > div.webix_cell_select:focus,
.webix_column > div.webix_column_select:focus,
.webix_column > div.webix_row_select:focus,
.webix_dtable_focused .webix_column > div.webix_row_select,
.webix_dtable_focused .webix_column > div.webix_column_select,
.webix_column > .webix_drag_over.webix_cell.webix_row_select:focus,
.webix_column > .webix_drag_over.webix_cell.webix_cell_select:focus {
  background: var(--m-accent-soft-strong, rgba(99, 102, 241, .22));
}
.webix_column > div.webix_column_select {
  border-left: 1px solid var(--m-accent, #6366f1);
  border-right: 1px solid var(--m-accent, #6366f1);
}
.webix_column > div.webix_row_select {
  border-bottom: 1px solid var(--m-surface-border, #eef0f4);
}

.webix_ss_filter select,
.webix_ss_filter input {
  border: 1px solid var(--m-surface-border, #e2e4ea);
  border-radius: 6px;
  background: var(--m-surface, #ffffff);
  color: var(--m-text, #1a1d29) !important;
}
.webix_ss_filter select:focus,
.webix_ss_filter input:focus {
  border-color: var(--m-accent, #6366f1);
}

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

.webix_el_text input,
.webix_el_search input,
.webix_el_combo input,
.webix_el_datepicker input,
.webix_el_colorpicker input,
.webix_el_select select,
.webix_inp_static,
input[type=text].webix_inp_static,
div.webix_inp_static,
.webix_el_textarea textarea,
.webix_el_combo .webix_inp_static,
.webix_el_richselect .webix_inp_static,
.webix_el_datepicker .webix_inp_static,
.webix_el_colorpicker .webix_inp_static,
.webix_el_search .webix_inp_static {
  border: 1px solid var(--m-surface-border, #dcdee6);
  border-radius: 8px;
  background: var(--m-surface, #ffffff);
  color: var(--m-text, #1a1d29);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.webix_el_text input:focus,
.webix_el_search input:focus,
.webix_el_combo input:focus,
.webix_el_datepicker input:focus,
.webix_el_colorpicker input:focus,
.webix_el_select select:focus,
.webix_el_richselect .webix_inp_static:focus,
.webix_el_datepicker .webix_inp_static:focus,
.webix_el_colorpicker .webix_inp_static:focus,
.webix_el_textarea textarea:focus {
  border-color: var(--m-accent, #6366f1);
  box-shadow: 0 0 0 3px var(--m-accent-soft, rgba(99, 102, 241, .15));
  outline: none;
}
.focusStyle {
  border-color: var(--m-accent, #6366f1);
  box-shadow: 0 0 0 3px var(--m-accent-soft, rgba(99, 102, 241, .15));
}
.webix_inp_label,
.webix_inp_top_label,
.webix_label_right,
.webix_el_label {
  color: var(--m-text-soft, #6b7280);
}
.webix_view_label {
  color: var(--m-text, #1a1d29);
  font-weight: 700;
}

.webix_el_combo .webix_input_icon,
.webix_el_richselect .webix_input_icon,
.webix_el_datepicker .webix_input_icon,
.webix_el_colorpicker .webix_input_icon {
  background-color: var(--m-surface, #ffffff);
  border: 1px solid var(--m-surface-border, #dcdee6);
  border-left: none;
  color: var(--m-text-soft, #6b7280);
}
.webix_el_combo .webix_input_icon:hover,
.webix_el_richselect .webix_input_icon:hover,
.webix_el_datepicker .webix_input_icon:hover,
.webix_el_colorpicker .webix_input_icon:hover {
  background-color: var(--m-bg, #f4f5f9);
  color: var(--m-accent, #6366f1);
}

.webix_inp_counter_next,
.webix_inp_counter_prev {
  background: var(--m-accent, #6366f1);
  border-color: var(--m-accent, #6366f1);
  color: var(--m-accent-contrast, #ffffff);
}
.webix_inp_counter_next:hover,
.webix_inp_counter_prev:hover,
.webix_inp_counter_next:focus,
.webix_inp_counter_prev:focus {
  background-color: var(--m-accent-dark, #4f52d6);
}
.webix_inp_counter_next:active,
.webix_inp_counter_prev:active {
  background-color: var(--m-accent-darker, #3d3fb8);
}
.webix_inp_counter_value {
  border-color: var(--m-surface-border, #dcdee6);
  color: var(--m-text, #1a1d29);
}

.webix_segment_0,
.webix_segment_1,
.webix_segment_N {
  border-color: var(--m-surface-border, #dcdee6);
  color: var(--m-text-soft, #6b7280);
}
.webix_selected.webix_segment_0,
.webix_selected.webix_segment_1,
.webix_selected.webix_segment_N {
  background: var(--m-accent, #6366f1);
  border-color: var(--m-accent, #6366f1);
  color: var(--m-accent-contrast, #ffffff);
}

.webix_switch_box.webix_switch_on {
  background-color: var(--m-accent, #6366f1);
  color: var(--m-accent-contrast, #ffffff);
}
.webix_switch_handle {
  border-color: var(--m-surface-border, #e2e4ea);
}

.webix_slider_box .webix_slider_left {
  background: var(--m-accent, #6366f1);
  border-color: var(--m-accent-dark, #4f52d6);
}
.webix_slider_box .webix_slider_handle {
  border-color: var(--m-accent, #6366f1);
}
.webix_slider_box .webix_slider_handle:focus {
  border-color: var(--m-accent-dark, #4f52d6);
  box-shadow: 0 0 0 4px var(--m-accent-soft, rgba(99, 102, 241, .18));
}

.webix_badge {
  background-color: var(--m-accent, #6366f1);
}

/* ---------- windows / popups / dialogs ---------- */

.webix_window {
  box-shadow: 0 20px 45px rgba(var(--m-overlay-rgb, 15, 23, 42), .16), 0 2px 8px rgba(var(--m-overlay-rgb, 15, 23, 42), .08);
}
.webix_win_head {
  border-bottom: 1px solid var(--m-surface-border, #e7e8ee);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.webix_win_body {
  overflow: hidden;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.webix_win_title {
  font-weight: 700;
}
.webix_modal {
  background-color: #0b0f1a;
}

.webix_list.webix_context,
.webix_context .webix_list_item {
  border-radius: 8px;
}

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

.webix_item_tab.webix_selected,
.webix_el_tabbar .webix_item_tab.webix_selected {
  color: var(--m-accent, #6366f1);
  border-color: var(--m-accent, #6366f1);
}

/* ---------- scrollbars ---------- */

.webix_scroll_x,
.webix_scroll_y,
.webix_c_scroll_y > div,
.webix_c_scroll_x > div {
  background: rgba(var(--m-overlay-rgb, 15, 23, 42), .18);
  border-radius: 6px;
}
.webix_c_scroll_y:hover > div,
.webix_c_scroll_y.webix_scroll_active div,
.webix_c_scroll_x:hover > div,
.webix_c_scroll_x.webix_scroll_active div {
  background: var(--m-accent, #6366f1);
}
.webix_c_scroll_bar_y,
.webix_c_scroll_bar_x {
  background: rgba(var(--m-overlay-rgb, 15, 23, 42), .03);
}