/* Resume CSS - Green Theme */
/* Version: 2025-07-15-01 */
/* Based on mini.min.css with adapted color scheme */


:root {
  /* Base theme colors */
  --primary-color: #6fd42f;
  --secondary-color: #4caf50;
  --accent-color: #bcffb4;
	--accent-light: #dcf5dc; /* Changed: more greenish light shade */
  --accent-dark: #008807;
  --light-color: #f5fff2;
  --dark-color: #2c3e2e;
  /* Additional accent variations */
	--accent-hover: #eaf5ea; /* Changed: lighter hover state */
  --accent-active: #a5d6a7;
  /* Accordion specific colors */
  --accordion-hover-bg: #e8f5e9;
  --accordion-hover-text: var(--dark-color);
  --accordion-expanded-bg: var(--accent-color);
  --accordion-expanded-text: var(--dark-color);
  /* Navigation colors */
  --nav-bg: var(--light-color);
  --nav-text: var(--dark-color);
  --nav-selected-bg: var(--accent-light);
  --nav-selected-text: var(--dark-color);
  --nav-hover-bg: #e8f5e9;
  --nav-hover-text: var(--dark-color);
  --nav-disabled-bg: #f0f0f0;
  --nav-disabled-text: #999999;
  /* Content colors */
  --content-bg: var(--light-color);
  --content-text: var(--dark-color);
  --content-selected-bg: var(--accent-light);
  --content-selected-text: var(--dark-color);
  --content-hover-bg: #e8f5e9;
  --content-hover-text: var(--dark-color);
  --content-header-bg: var(--secondary-color);
  --content-header-text: var(--light-color);
  /* Header/Toolbar colors - updated to light background */
  --header-bg: var(--accent-light);
  --header-text: var(--dark-color);
  --header-hover-bg: var(--accent-color);
  --header-hover-text: var(--dark-color);
  --header-active-bg: var(--accent-dark);
  --header-active-text: var(--dark-color);
  /* Control colors (buttons, inputs, etc) */
  --control-bg: var(--light-color);
  --control-text: var(--dark-color);
  --control-border: var(--accent-color);
  --control-hover-bg: #e8f5e9;
  --control-hover-text: var(--dark-color);
  --control-active-bg: var(--accent-color);
  --control-active-text: var(--dark-color);
  --control-focus-border: var(--primary-color);
  /* Overlay colors */
  --overlay-bg: rgba(44, 62, 46, 0.1);
  --overlay-text: var(--dark-color);
  --modal-bg: rgba(44, 62, 46, 0.7);
  --modal-text: var(--light-color);
  --loading-bg: rgba(44, 62, 46, 0.1);
  --loading-text: var(--dark-color);
  /* Message colors */
  --message-info-bg: var(--info-color);
  --message-info-text: white;
  --message-success-bg: var(--success-color);
  --message-success-text: --dark-color;
  --message-warning-bg: var(--warning-color);
  --message-warning-text: --dark-color;
  --message-error-bg: var(--error-color);
  --message-error-text: white;
  /* State colors - updated for consistency */
	--state-selected-bg: var(--accent-light); /* Using same greenish shade */
  --state-selected-text: var(--dark-color);
	--state-hover-bg: var(--accent-hover); /* Using same hover shade */
  --state-hover-text: var(--dark-color);
  --state-active-bg: var(--accent-color);
  --state-active-text: var(--dark-color);
  --state-disabled-bg: #f0f0f0;
  --state-disabled-text: #999999;
  /* Tooltip colors */
  --tooltip-bg: var(--accent-color);
  --tooltip-text: var(--dark-color);
  --tooltip-border: var(--dark-color);
  /* Form colors */
  --form-bg: var(--light-color);
  --form-text: var(--dark-color);
  --form-border: var(--accent-color);
  --form-label-text: var(--dark-color);
  --form-placeholder-text: rgba(44, 62, 46, 0.5);
  /* Table colors - updated for clearer states */
  --table-header-bg: var(--accent-light);
  --table-header-text: var(--dark-color);
  --table-cell-bg: var(--light-color);
  --table-cell-text: var(--dark-color);
	--table-selected-bg: var(--accent-light); /* Using more greenish shade */
  --table-selected-text: var(--dark-color);
	--table-hover-bg: var(--accent-hover); /* Using lighter shade for hover */
  --table-hover-text: var(--dark-color);
  --table-border: var(--accent-color);
  /* Dark mode colors */
  --dark-mode-bg: #1a291c;
	--dark-mode-bg-area: #345038;
  --dark-mode-text: #f5fff2;
  --dark-mode-border: #324634;
  --dark-mode-hover: #2a3a2c;
  --dark-mode-active: #3a513d;
  /* Special colors - unchanged */
  --error-color: #ff5252;
  --warning-color: #ffc107;
  --success-color: #4caf50;
  --info-color: #2196f3;
  /* Adding sidebar specific variable */
  --sidebar-item-radius: 0 30px 30px 0;
	--sidebar-right-margin: 2px; /* Margin for right side spacing */
  /* Segmented UI control colors */
  --segment-bg: var(--light-color);
  --segment-text: var(--dark-color);
  --segment-border: var(--accent-color);
  --segment-hover-bg: var(--accent-hover);
  --segment-hover-text: var(--dark-color);
  --segment-active-bg: var(--accent-color);
  --segment-active-text: var(--dark-color);
  --segment-selected-bg: var(--secondary-color);
  --segment-selected-text: var(--light-color);
  --segment-selected-hover-bg: var(--accent-dark);
  --segment-selected-hover-text: var(--light-color);
  --segment-selected-active-bg: var(--accent-light);
  --segment-selected-active-text: var(--light-color);
  --tab-hover-highlight-bottom: #0eff0d;
  --tab-text-color: var(--secondary-color);
  --tab-hover-bg: var(--control-hover-bg);
  --tab-selected-color: var(--secondary-color);
  --tab-selected-shadow: var(--secondary-color);
  --tab-selected-hover-bg: var(--light-color);
  --tab-close-icon-color: var(--text-color);
	/* Scrollbar colors */
	--scrollbar-track: var(--control-bg);
	--scrollbar-thumb: var(--control-border);
	--scrollbar-thumb-hover: var(--control-hover-bg);
	/* Selection colors */
	--selection-bg: var(--state-selected-bg);
	--selection-text: var(--state-selected-text);
	/* Border and text colors */
	--border-color: var(--control-border);
	--text-color: var(--content-text);
  --toolbar-button-cancel-bg: var(--state-disabled-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Invert main colors */
    --nav-bg: var(--dark-mode-bg);
    --nav-text: var(--dark-mode-text);
    --content-bg: var(--dark-mode-bg);
    --content-text: var(--dark-mode-text);
    --control-bg: var(--dark-mode-bg);
    --control-text: var(--dark-mode-text);
    /* Adjust state colors */
    --state-hover-bg: var(--dark-mode-hover);
    --state-hover-text: var(--dark-mode-text);
    --state-active-bg: var(--dark-mode-active);
    --state-active-text: var(--dark-mode-text);
		--state-selected-bg: var(--dark-mode-hover);
		--state-selected-text: var(--dark-mode-text);
		--state-disabled-bg: #2a2a2a;
		--state-disabled-text: #888888;
    /* Adjust other elements */
    --tooltip-bg: var(--dark-mode-bg);
    --tooltip-text: var(--dark-mode-text);
		--tooltip-border: var(--dark-mode-border);
    --form-bg: var(--dark-mode-bg);
    --form-text: var(--dark-mode-text);
		--form-border: var(--dark-mode-border);
		--form-label-text: var(--dark-mode-text);
		--form-placeholder-text: rgba(245, 255, 242, 0.5);
    --table-cell-bg: var(--dark-mode-bg);
    --table-cell-text: var(--dark-mode-text);
		--table-border: var(--dark-mode-border);
    /* Update header colors for dark mode */
    --header-bg: var(--dark-mode-hover);
    --header-text: var(--dark-mode-text);
    --header-hover-bg: var(--dark-mode-active);
    --header-hover-text: var(--dark-mode-text);
    --header-active-bg: var(--dark-mode-active);
    --header-active-text: var(--dark-mode-text);
    /* Update table header colors for dark mode */
    --table-header-bg: var(--dark-mode-hover);
    --table-header-text: var(--dark-mode-text);
		--table-selected-bg: var(--dark-mode-hover);
		--table-selected-text: var(--dark-mode-text);
		--table-hover-bg: var(--dark-mode-active);
		--table-hover-text: var(--dark-mode-text);
		/* Update navigation colors for dark mode */
		--nav-selected-bg: var(--dark-mode-hover);
		--nav-selected-text: var(--dark-mode-text);
		--nav-hover-bg: var(--dark-mode-active);
		--nav-hover-text: var(--dark-mode-text);
		--nav-disabled-bg: #2a2a2a;
		--nav-disabled-text: #888888;
		/* Update content colors for dark mode */
		--content-selected-bg: var(--dark-mode-hover);
		--content-selected-text: var(--dark-mode-text);
		--content-hover-bg: var(--dark-mode-active);
		--content-hover-text: var(--dark-mode-text);
		--content-header-bg: var(--secondary-color);
		--content-header-text: var(--light-color);
		/* Update control colors for dark mode */
		--control-border: var(--dark-mode-border);
		--control-hover-bg: var(--dark-mode-hover);
		--control-hover-text: var(--dark-mode-text);
		--control-active-bg: var(--dark-mode-active);
		--control-active-text: var(--dark-mode-text);
		--control-focus-border: var(--primary-color);
		/* Update overlay colors for dark mode */
		--overlay-bg: rgba(245, 255, 242, 0.1);
		--overlay-text: var(--dark-mode-text);
		--modal-bg: rgba(245, 255, 242, 0.7);
		--modal-text: var(--dark-mode-bg);
		--loading-bg: rgba(245, 255, 242, 0.1);
		--loading-text: var(--dark-mode-text);
		/* Update accordion colors for dark mode */
		--accordion-hover-bg: var(--dark-mode-hover);
		--accordion-hover-text: var(--dark-mode-text);
		--accordion-expanded-bg: var(--dark-mode-active);
		--accordion-expanded-text: var(--dark-mode-text);
		/* Update message colors for dark mode */
		--message-info-bg: var(--info-color);
		--message-info-text: var(--dark-mode-bg);
		--message-success-bg: var(--success-color);
		--message-success-text: var(--dark-mode-bg);
		--message-warning-bg: var(--warning-color);
		--message-warning-text: var(--dark-mode-bg);
		--message-error-bg: var(--error-color);
		--message-error-text: var(--dark-mode-bg);
		/* Update tab colors for dark mode */
		--tab-hover-highlight-bottom: var(--primary-color);
		--tab-text-color: var(--primary-color);
		--tab-hover-bg: var(--dark-mode-hover);
		--tab-selected-color: var(--primary-color);
		--tab-selected-shadow: var(--primary-color);
		--tab-selected-hover-bg: var(--dark-mode-active);
		--tab-close-icon-color: var(--dark-mode-text);
		/* Update scrollbar colors for dark mode */
		--scrollbar-track: var(--dark-mode-bg);
		--scrollbar-thumb: var(--dark-mode-border);
		--scrollbar-thumb-hover: var(--dark-mode-hover);
		/* Update selection colors for dark mode */
		--selection-bg: var(--dark-mode-hover);
		--selection-text: var(--dark-mode-text);
		/* Update placeholder colors for dark mode */
		--placeholder-color: rgba(245, 255, 242, 0.5);
		/* Update border colors for dark mode */
		--border-color: var(--dark-mode-border);
		--text-color: var(--dark-mode-text);
		/* Segmented UI control colors for dark mode */
		--segment-bg: var(--dark-mode-bg);
		--segment-text: var(--dark-mode-text);
		--segment-border: var(--dark-mode-border);
		--segment-hover-bg: var(--dark-mode-hover);
		--segment-hover-text: var(--dark-mode-text);
		--segment-active-bg: var(--dark-mode-active);
		--segment-active-text: var(--dark-mode-text);
		--segment-selected-bg: var(--secondary-color);
		--segment-selected-text: var(--light-color);
		--segment-selected-hover-bg: var(--accent-dark);
		--segment-selected-hover-text: var(--light-color);
		--segment-selected-active-bg: var(--accent-dark);
		--segment-selected-active-text: var(--light-color);


  .webix_switch_box {
    border: 2px solid var(--dark-mode-hover) !important;
    border-radius: 60px;
    box-sizing: border-box;
    color: var(--dark-mode-text) !important;
  }

  .webix_switch_box .webix_switch_text {
		background-color: var(--dark-mode-hover) !important;
		color: var(--dark-mode-text) !important;
	}

	.background-login-wrapper {
		background-color: #1a291c !important;
	}

	.webix_accordionitem_header {
		border-bottom: 1px solid var(--dark-mode-border) !important;
	}
}

.webix_checkbox_1 .webix_custom_checkbox {
	color: var(--accent-dark) !important;
}

.webix_custom_checkbox:focus {
	color: var(--accent-dark) !important;
}

.webix_switch_box .webix_switch_text {
	background-color: var(--accent-light);
	color: var(--dark-color);
}



/* Sidebar menu text color */
.webix_sidebar,
.webix_sidebar .webix_tree_item,
.webix_sidebar .webix_tree_item span,
.webix_sidebar .webix_tree_item.webix_selected span,
.webix_sidebar .webix_tree_item .webix_sidebar_icon,
.webix_sidebar .webix_tree_item .webix_sidebar_dir_icon {
	color: var(--nav-text) !important;
}

/* Grid header/footer */
.webix_ss_header,
.webix_ss_header td,
.webix_ss_footer,
.webix_ss_footer td {
	background: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

/* Table footer and scroll footer */
.webix_dtable .webix_ss_footer td,
.webix_dtable .webix_ss_vscroll_footer {
	background: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

.webix_ss_footer td {
	border-right: 1px solid var(--dark-mode-border);
	border-top: 1px solid var(--dark-mode-border);
}

.webix_dtable div.webix_ss_vscroll_footer {
	border-left-color: var(--dark-mode-border);
	border-top-color: var(--dark-mode-border);
}

/* Header styles */
.webix_dd_drag_column,
.webix_ss_header,
.webix_ss_header td,
.webix_ss_vscroll_header {
	background: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

.webix_ss_vscroll_header {
	border-bottom: 1px solid var(--dark-mode-border);
	border-left: 1px solid var(--dark-mode-border);
}

/* Sidebar popup */
.webix_sidebar_popup_title {
	background-color: var(--dark-mode-hover) !important;
}

/* Accordion collapsed state */
.webix_accordionitem.collapsed .webix_accordionitem_header .webix_accordionitem_button,
.webix_accordionitem.collapsed .webix_accordionitem_header .webix_accordionitem_label .webix_icon,
.webix_accordionitem.horizontal.collapsed .webix_accordionitem_header .webix_accordionitem_button,
.webix_accordionitem.horizontal.collapsed .webix_accordionitem_header .webix_accordionitem_label .webix_icon {
	color: var(--primary-color) !important;
}

/* Sidebar selected icons */
.webix_sidebar .webix_tree_item.webix_selected .webix_sidebar_dir_icon,
.webix_sidebar .webix_tree_item.webix_selected .webix_sidebar_icon,
.webix_sidebar .webix_tree_item.webix_sidebar_selected .webix_sidebar_dir_icon,
.webix_sidebar .webix_tree_item.webix_sidebar_selected .webix_sidebar_icon {
	color: var(--primary-color);
}

/* Input controls */
.webix_el_text input,
.webix_el_search input,
.webix_el_combo input,
.webix_el_datepicker input,
.webix_el_colorpicker input {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text);
	border-color: var(--dark-mode-border);
}

	.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 {
		background-color: var(--dark-mode-bg) !important;
		color: var(--dark-mode-text);
		border-color: var(--primary-color);
	}

/* Multicombo */
.webix_multicombo_tag,
.webix_multicombo_value {
	background-color: var(--dark-mode-hover);
	color: var(--dark-mode-text);
}

/* Switch box */
.webix_switch_box {
	background-color: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
}

	.webix_switch_box.webix_switch_on {
		background-color: var(--primary-color) !important;
		color: var(--dark-mode-bg) !important;
	}

/* Textarea */
.webix_el_textarea textarea {
	background-color: var(--dark-mode-bg);
	color: var(--dark-mode-text);
	border-color: var(--dark-mode-border);
}

	.webix_el_textarea textarea:focus {
		border-color: var(--primary-color);
	}

.webix_el_textarea .webix_inp_label {
	color: var(--dark-mode-text);
}

/* Fieldset */
.webix_fieldset fieldset {
	border-color: var(--dark-mode-border);
}

.webix_fieldset legend {
	color: var(--dark-mode-text);
}

/* Form elements */
.webix_el_colorpicker .webix_el_box,
.webix_el_combo .webix_el_box,
.webix_el_datepicker .webix_el_box,
.webix_el_richselect .webix_el_box,
.webix_el_search .webix_el_box {
	border-color: var(--dark-mode-border);
}

/* Scrollbars */
::-webkit-scrollbar-track {
	background: var(--dark-mode-bg);
}

::-webkit-scrollbar-thumb {
	background: var(--dark-mode-border);
}

	::-webkit-scrollbar-thumb:hover {
		background: var(--dark-mode-hover);
	}

/* Selection */
::selection {
	background-color: var(--dark-mode-hover);
	color: var(--dark-mode-text);
}

/* Placeholder */
::placeholder {
	color: rgba(245, 255, 242, 0.5);
}

/* Tab filler */
.webix_all_tabs .webix_tab_filler {
	background-color: var(--dark-mode-bg);
}

/* Segmented controls */
.webix_segment_0,
.webix_segment_1,
.webix_segment_N {
	background-color: rgba(111, 212, 47, 0.2);
	color: var(--dark-mode-text);
	border-color: var(--dark-mode-border);
}

.webix_segment_0:hover,
.webix_segment_1:hover,
.webix_segment_N:hover {
	background-color: rgba(111, 212, 47, 0.3);
}

.webix_segment_0:focus,
.webix_segment_1:focus,
.webix_segment_N:focus {
	background-color: rgba(111, 212, 47, 0.3);
}

.webix_segment_0:active,
.webix_segment_1:active,
.webix_segment_N:active {
	background-color: rgba(111, 212, 47, 0.4);
}

.webix_segment_0.webix_selected,
.webix_segment_1.webix_selected,
.webix_segment_N.webix_selected {
	background-color: var(--primary-color);
	color: var(--dark-mode-bg);
	border-color: var(--primary-color);
}

.webix_segment_0.webix_selected:hover,
.webix_segment_1.webix_selected:hover,
.webix_segment_N.webix_selected:hover {
	background-color: var(--accent-dark);
	color: var(--light-color);
}

.webix_segment_0.webix_selected:focus,
.webix_segment_1.webix_selected:focus,
.webix_segment_N.webix_selected:focus {
	background-color: var(--accent-dark);
	color: var(--light-color);
}

.webix_segment_0.webix_selected:active,
.webix_segment_1.webix_selected:active,
.webix_segment_N.webix_selected:active {
	background-color: var(--accent-dark);
	color: var(--light-color);
}

/* Toolbar buttons */
.toolbar_button button {
	background-color: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
}

.toolbar_button button:hover {
	background-color: var(--dark-mode-active) !important;
	color: var(--dark-mode-text) !important;
}

.toolbar_button_default button {
  background: var(--dark-mode-active) !important;
}

.toolbar_button_save button {
	background-color: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
}

.toolbar_button_save button:hover {
	background-color: var(--primary-color) !important;
	color: var(--dark-mode-bg) !important;
}

.toolbar_button_delete button {
	background-color: rgba(255, 82, 82, 0.3) !important;
	color: var(--dark-mode-text) !important;
}

.toolbar_button_delete button:hover {
	background-color: var(--error-color) !important;
	color: var(--dark-mode-bg) !important;
}

.toolbar_button_cancel button {
	background-color: var(--toolbar-button-cancel-bg) !important;
	color: var(--dark-mode-text) !important;
}

.toolbar_button_cancel button:hover {
	background-color: var(--dark-mode-active) !important;
	color: var(--dark-mode-text) !important;
}

.toolbar_button_new button {
	background-color: rgba(255, 193, 7, 0.3) !important;
	color: var(--dark-mode-text) !important;
}

.toolbar_button_new button:hover {
	background-color: var(--warning-color) !important;
	color: var(--dark-mode-bg) !important;
}

.toolbar_button_edit button {
	background-color: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
}

	.toolbar_button_edit button:hover {
		background-color: var(--primary-color) !important;
		color: var(--dark-mode-bg) !important;
	}

.toolbar_button_import button {
	background-color: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
}

	.toolbar_button_import button:hover {
		background-color: var(--primary-color) !important;
		color: var(--dark-mode-bg) !important;
	}

.toolbar_button_export button {
	background-color: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
}

	.toolbar_button_export button:hover {
		background-color: var(--primary-color) !important;
		color: var(--dark-mode-bg) !important;
	}

.toolbar_button_copy button {
	background-color: rgba(115, 115, 115, 0.3) !important;
	color: var(--dark-mode-text) !important;
}

	.toolbar_button_copy button:hover {
		background-color: var(--dark-mode-active) !important;
		color: var(--dark-mode-text) !important;
	}

.toolbar_button_ai button {
	background-color: rgba(255, 193, 7, 0.3) !important;
	color: var(--dark-mode-text) !important;
}

	.toolbar_button_ai button:hover {
		background-color: var(--warning-color) !important;
		color: var(--dark-mode-bg) !important;
	}
/* Wizard buttons */
.toolbar_button_wizard_finish button {
	background-color: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
}

	.toolbar_button_wizard_finish button:hover {
		background-color: var(--primary-color) !important;
		color: var(--dark-mode-bg) !important;
	}

.toolbar_button_wizard_next button {
	background-color: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
}

	.toolbar_button_wizard_next button:hover {
		background-color: var(--primary-color) !important;
		color: var(--dark-mode-bg) !important;
	}

.toolbar_button_wizard_back button {
	background-color: rgba(115, 115, 115, 0.3) !important;
	color: var(--dark-mode-text) !important;
}

	.toolbar_button_wizard_back button:hover {
		background-color: var(--dark-mode-active) !important;
		color: var(--dark-mode-text) !important;
	}

.toolbar_button_wizard_cancel button {
	background-color: rgba(255, 82, 82, 0.3) !important;
	color: var(--dark-mode-text) !important;
}

	.toolbar_button_wizard_cancel button:hover {
		background-color: var(--error-color) !important;
		color: var(--dark-mode-bg) !important;
	}
/* Login background */
.background-login-wrapper {
	background-image: url('/content/static/sc/img/sc_bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 100vh !important;
	background-color: #3b8909 !important;
}

/* input labels */
label,
.webix_inp_label,
.webix_form .webix_inp_label,
.webix_form label {
	color: var(--dark-mode-text) !important;
}

/* Richselect control */
.webix_view.webix_control.webix_el_richselect,
.webix_view.webix_control.webix_el_richselect input,
.webix_view.webix_control.webix_el_richselect .webix_inp_static,
.webix_view.webix_control.webix_el_richselect .webix_el_box {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

	.webix_view.webix_control.webix_el_richselect input::placeholder {
		color: var(--form-placeholder-text) !important;
	}

/* Text input and multicombo controls */
.webix_view.webix_control.webix_el_text,
.webix_view.webix_control.webix_el_text input,
.webix_view.webix_control.webix_multicombo,
.webix_view.webix_control.webix_multicombo input,
.webix_view.webix_control.webix_multicombo .webix_multicombo_tag,
.webix_view.webix_control.webix_multicombo .webix_multicombo_value {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

	.webix_view.webix_control.webix_el_text input::placeholder,
	.webix_view.webix_control.webix_multicombo input::placeholder {
		color: var(--form-placeholder-text) !important;
	}

/* Table header/filter cells */
.webix_hcell,
.webix_ss_filter,
.webix_ss_filter td {
	background-color: var(--dark-mode-hover) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

/* Last column/row in tables */
.webix_last,
.webix_last_row,
.webix_column.webix_last > div,
.webix_hs_center td.webix_last,
.webix_hs_right td.webix_last {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

/* Grid filter input */
.webix_ss_filter input,
.webix_hcell input {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

/* Multicombo input */
.webix_view.webix_control.webix_multicombo input,
.webix_multicombo input {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

/* Monaco editor label */
.webix_view.webix_control.webix_el_label,
.editor_label,
.webix_toolbar .webix_el_label {
	color: var(--dark-mode-text) !important;
}

/* Static input (read-only fields, etc.) */
.webix_inp_static {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

/* .webix_el_box */
.webix_el_box,
.webix_toolbar .webix_el_label .webix_el_box {
	color: var(--dark-mode-text) !important;
}

/* Tabbar control */
.webix_view.webix_control.webix_el_tabbar {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

/* Drag column and header styles */
.webix_dd_drag_column,
.webix_ss_header,
.webix_ss_header td,
.webix_ss_vscroll_header {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

/* Data table footer and scroll footer */
.webix_dtable .webix_ss_footer td,
.webix_dtable .webix_ss_vscroll_footer {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
	border-color: var(--dark-mode-border) !important;
}

/* Webix menu dropdown background and items */
.webix_menu,
.webix_menu .webix_list_item {
	background-color: var(--dark-mode-bg) !important;
	color: var(--dark-mode-text) !important;
}

	.webix_menu .webix_list_item:hover,
	.webix_menu .webix_list_item.webix_selected {
		background-color: var(--dark-mode-hover) !important;
		color: var(--dark-mode-text) !important;
	}

.webix_checkbox_1 .webix_custom_checkbox {
	color: var(--primary-color) !important;
}

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

}


/* Base elements */
.webix_view {
	background-color: var(--content-bg) !important;
	color: var(--content-text) !important;
	border-color: var(--border-color) !important;
  font-family: sans-serif, Tahoma, Arial, Helvetica, Verdana, Roboto;
}

/* HTML Heading Styles */
h1 {
  color: var(--dark-color);
  font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px 0;
  padding: 0;
  padding-bottom: 8px;
}

h2 {
  color: var(--dark-color);
  font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 14px 0;
  padding: 0;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 6px;
}

h3 {
  color: var(--dark-color);
  font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 12px 0;
  padding: 0;
}

h4 {
  color: var(--dark-color);
  font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 10px 0;
  padding: 0;
}

/* Dark mode heading styles */
@media (prefers-color-scheme: dark) {
  h1, h2, h3, h4 {
    color: var(--dark-mode-text);
  }
  
  h1 {
    border-bottom-color: var(--primary-color);
  }
  
  h2 {
    border-bottom-color: var(--accent-color);
  }
}

.webix_view.webix_form {
  background-color: var(--form-bg);
  border-color: var(--form-border);
}

/* Navigation elements */
.webix_accordionitem.collapsed .webix_accordionitem_header .webix_accordionitem_button, .webix_accordionitem.collapsed .webix_accordionitem_header .webix_accordionitem_label .webix_icon, .webix_accordionitem.horizontal.collapsed .webix_accordionitem_header .webix_accordionitem_button, .webix_accordionitem.horizontal.collapsed .webix_accordionitem_header .webix_accordionitem_label .webix_icon {
  color: var(--accent-dark) !important;
}

/* Sidebar menu - updated with larger size */
.webix_sidebar {
  background-color: var(--nav-bg);
  color: var(--nav-text);
}

.webix_sidebar .webix_tree_item.webix_selected .webix_sidebar_dir_icon, .webix_sidebar .webix_tree_item.webix_selected .webix_sidebar_icon, .webix_sidebar .webix_tree_item.webix_sidebar_selected .webix_sidebar_dir_icon, .webix_sidebar .webix_tree_item.webix_sidebar_selected .webix_sidebar_icon {
  color: var(--accent-dark);
}

.webix_sidebar .webix_tree_item {
  color: var(--nav-text);
  background-color: var(--nav-bg);
  border-radius: var(--sidebar-item-radius);
  margin-right: var(--sidebar-right-margin) !important;
  box-shadow: none !important;
  /* Size settings from height60 */
  height: 60px !important;
  line-height: 60px !important;
  font-size: 150%;
  padding-right: 10px !important;
}

/* Sidebar popup styles */
.webix_sidebar_popup_title {
  background-color: var(--accent-light) !important;
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

.webix_sidebar_popup {
  margin-top: 10px !important;
  margin-left: -5px !important; 
  border-top-right-radius: 20px !important;  
  border-bottom-right-radius: 20px !important;
}

/* Sidebar icon padding */
.webix_sidebar .webix_sidebar_icon {
  padding-right: 10px !important;
}

.webix_sidebar .webix_tree_item:hover {
  background-color: var(--table-hover-bg) !important;
  color: var(--table-hover-text) !important;
  border-radius: var(--sidebar-item-radius);
  margin-right: var(--sidebar-right-margin) !important;
}

.webix_sidebar .webix_tree_item.webix_selected {
  background-color: var(--table-selected-bg) !important;
  color: var(--table-selected-text) !important;
  border-radius: var(--sidebar-item-radius);
  margin-right: var(--sidebar-right-margin) !important;
}

/* Update selected sidebar item text color */
.webix_sidebar .webix_tree_item.webix_selected span {
  color: var(--secondary-color);
  font-weight: 600 !important;
}

/* Disabled sidebar menu item */
.webix_sidebar .webix_tree_item.webix_disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Headers and toolbars */
.webix_header {
  background-color: var(--header-bg);
  font-size: 16px;
  font-weight: 600;
  color: var(--header-text);
}

.webix_header:hover {
  background-color: var(--header-hover-bg);
  color: var(--header-hover-text);
}

/* List items and selectable elements */
.webix_list_item {
  color: var(--content-text);
  background-color: var(--content-bg);
  place-content: space-evenly;
}

.webix_list_item:hover {
  background-color: var(--state-hover-bg);
  color: var(--state-hover-text);
}

.webix_list_item.webix_selected {
  background-color: var(--state-selected-bg);
  color: var(--state-selected-text);
}

/* Accordions */
.webix_accordionitem {
  background-color: var(--content-bg);
  border-color: var(--control-border);
}

.webix_accordionitem_header {
  background-color: var(--header-bg);
  color: var(--header-text);
}

.webix_accordionitem_header:hover {
  background-color: var(--table-hover-bg) !important;
  color: var(--table-hover-text) !important;
}

/* Accordion states */
.webix_accordionitem_header,
.webix_accordionitem_header.collapsed,
.webix_accordionitem.horizontal.collapsed .webix_accordionitem_header,
.webix_accordionitem.vertical.collapsed .webix_accordionitem_header {
  background-color: var(--content-bg) !important;
  color: var(--content-text) !important;
  transition: background-color 0.2s ease;
}

/* Expanded state */
.webix_accordionitem:not(.collapsed) > .webix_accordionitem_header {
  background-color: var(--accordion-expanded-bg) !important;
  color: var(--accordion-expanded-text) !important;
  font-weight: 500;
}

.webix_accordionitem_header:hover,
.webix_accordionitem_header.collapsed:hover,
.webix_accordionitem.horizontal.collapsed .webix_accordionitem_header:hover,
.webix_accordionitem.vertical.collapsed .webix_accordionitem_header:hover {
  background-color: var(--accordion-hover-bg) !important;
  color: var(--accordion-hover-text) !important;
}

/* Accordion body */
.webix_accordionitem,
.webix_accordionitem.horizontal.collapsed,
.webix_accordionitem.vertical.collapsed {
  background-color: var(--content-bg) !important;
  border-color: var(--control-border) !important;
}

/* Data tables ----------------------- */
/* Main data table container with rounded corners */
.webix_dtable {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 2px solid var(--accent-color) !important;
  box-sizing: border-box !important;
  width: calc(100% - 4px) !important;
  margin: 0 auto !important;
}

/* Table header styles */
.webix_dtable .webix_ss_header {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

.webix_dtable .webix_ss_header td {
  color: var(--table-header-text);
  border: none;
  border-bottom: 1px solid var(--table-border);
  border-color: transparent;
}

/* Table body styles */
.webix_dtable .webix_ss_body .webix_column > div {
  background-color: var(--table-cell-bg);
  color: var(--table-cell-text);
  border: none;
  border-bottom: 1px solid var(--table-border);
}

/* Remove vertical borders */
.webix_dtable .webix_ss_body .webix_column,
.webix_dtable .webix_ss_header .webix_hcell {
  border-right: none;
}

/* Ensure table body has proper background */
.webix_dtable .webix_ss_body {
  background-color: var(--table-cell-bg);
}

/* Cell hover effects - disabled for individual cells */
.webix_dtable .webix_column > div:hover,
.webix_dtable .webix_column > div.webix_cell:hover,
.webix_dtable .webix_column > div.webix_cell.webix_row_hover:hover,
.webix_dtable .webix_ss_body .webix_cell:hover,
.webix_dtable .webix_ss_body .webix_column > div:hover {
    background-color: transparent !important;
    background: transparent !important;
}

/* Row hover effects - enabled for entire rows */
.webix_dtable .webix_column > div.webix_row_hover,
.webix_dtable .webix_ss_body .webix_column > div.webix_row_hover,
.webix_dtable .webix_column > div.webix_row_hover.webix_cell,
.webix_dtable .webix_column > div.webix_row_hover.webix_cell:hover,
.webix_table_row_hover,
.webix_dtable .webix_column > div.webix_table_row_hover,
.webix_dtable .webix_column > div.webix_table_row_hover:hover {
    background-color: var(--table-hover-bg) !important;
    color: var(--table-hover-text) !important;
}

/* Table hover style - utility class for DataTable config */
.webix_table_row_hover {
  background-color: var(--table-hover-bg) !important;
  color: var(--table-hover-text) !important;
}

/* Selected row state */
.webix_dtable .webix_column > div.webix_row_select,
.webix_dtable .webix_column > div.webix_selected,
.webix_dtable .webix_ss_body .webix_column > div.webix_row_select,
.webix_dtable .webix_ss_body .webix_column > div.webix_selected {
  background-color: var(--table-selected-bg) !important;
  color: var(--table-selected-text) !important;
}

/* Table footer styles */
.webix_dtable .webix_ss_footer {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.webix_dtable .webix_ss_footer tr:nth-child(2) td {
  border-top: 1px solid var(--accent-color);
}

.webix_dtable .webix_ss_footer td, 
.webix_dtable .webix_ss_vscroll_footer {
  background: var(--light-color);
  color: var(--dark-color);
  font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto;
  font-size: 9pt;
  font-weight: 500;
  letter-spacing: 0;
  border-color: transparent;
}

/* Last column border removal */
.webix_column.webix_last > div, 
.webix_hs_center td.webix_last, 
.webix_hs_right td.webix_last {
  border-right-width: 0;
}

/* Footer cell borders */
.webix_ss_footer td {
  border-right: 1px solid var(--accent-light);
  border-top: 1px solid var(--accent-light);
}

/* Scroll footer styles */
.webix_dtable div.webix_ss_vscroll_footer {
    border-left-color: var(--accent-light);
    border-top-color: var(--accent-color);
}

/* Vertical scroll header styles */
.webix_dtable div.webix_ss_vscroll_header {
    border-bottom-color: var(--accent-color);
}

/* Header cell font weight */
.webix_hcell {
  font-weight: 600;
}

/* Box sizing for all table elements */
.webix_block_selection, 
.webix_cell, 
.webix_hcell, 
.webix_ss_footer td, 
.webix_ss_header td, 
.webix_table_cell, 
.webix_view.webix_table_cell {
  box-sizing: border-box;
}

/* General view styles */
.webix_view a.webix_list_item, 
.webix_view div, 
.webix_view div.webix_inp_static:focus, 
.webix_view span, 
.webix_view.webix_window, 
button, 
input, 
select, 
textarea {
    outline: 0;
}

.webix_view div.zoom110 {
  transform: scale(1.1);
} 

.webix_view div.zoom120 {
  transform: scale(1.2);
} 

.webix_view.webix_window.zoom110 {
  transform: scale(1.1);
} 

.webix_view.webix_window.zoom120 {
  transform: scale(1.2);
} 

/* Drag column and header styles */
.webix_dd_drag_column, 
.webix_ss_header, 
.webix_ss_header td, 
.webix_ss_vscroll_header {
    background: var(--light-color);
    color: var(--dark-color);
    font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto;
    font-size: 9pt;
    font-weight: 500;
    letter-spacing: 0;
}

.webix_ss_vscroll_header {
    border-bottom: 1px solid var(--accent-light);
    border-left: 1px solid var(--accent-light);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

/* Tabs */
.webix_item_tab {
  background-color: var(--control-bg);
  color: var(--control-text);
  border-color: var(--control-border);
}

.webix_item_tab.webix_selected {
  background-color: var(--state-selected-bg);
  color: var(--state-selected-text);
}

.webix_item_tab.webix_selected .webix_icon {
  color: var(--accent-dark) !important;
}

/* Update selected tab styles */
.webix_all_tabs .webix_item_tab.webix_selected {
  color: var(--tab-selected-color);
  background-color: var(--content-bg);
  box-shadow: inset 0 -4px var(--tab-selected-shadow);
}

/* Update tab hover state */
.webix_all_tabs .webix_item_tab:hover {
  background-color: var(--tab-hover-bg);
  box-shadow: inset 0 -4px var(--tab-hover-highlight-bottom);
  color: var(--tab-text-color);
}

.webix_all_tabs .webix_item_tab.webix_selected:hover {
  background-color: var(--tab-selected-hover-bg);
  color: var(--tab-selected-color);
  box-shadow: inset 0 -4px var(--tab-selected-shadow);
}

.webix_all_tabs .webix_item_tab.webix_selected:focus {
  color: var(--tab-selected-color);
  box-shadow: inset 0 -4px var(--tab-selected-shadow);
}

/* Update default tab text color */
.webix_all_tabs .webix_item_tab {
  color: var(--secondary-color);
}

.webix_item_tab:hover {
  background-color: var(--state-hover-bg);
  color: var(--state-hover-text);
}

/* Windows and Popups */
.webix_window {
  background-color: var(--content-bg);
  border-color: var(--control-border);
}

.webix_win_head {
	background-color: var(--header-bg) !important;
	color: var(--header-text) !important;
	border-bottom: 1px solid var(--dark-mode-border) !important;
}

/* Windows and Popup Headers and toolbars */
.webix_window .webix_header {
  background-color: var(--content-bg);
  color: var(--header-text);
}

.webix_window .webix_header:hover {
  background-color: var(--content-bg);
  color: var(--header-hover-text);
  cursor: grab;
}



/* Tree component */
.webix_tree_item {
  color: var(--content-text);
  background-color: var(--content-bg);
}

.webix_tree_item.webix_selected {
  background-color: var(--state-selected-bg);
  color: var(--state-selected-text);
}

.webix_tree_item:hover {
  background-color: var(--state-hover-bg);
  color: var(--state-hover-text);
}

/* Menu */
.webix_menu .webix_list_item,
.webix_menu-x .webix_list_item {
  background-color: var(--nav-bg);
  color: var(--nav-text);
}

.webix_menu .webix_list_item:hover,
.webix_menu-x .webix_list_item:hover {
  background-color: var(--nav-hover-bg);
  color: var(--nav-hover-text);
}

.webix_menu .webix_list_item.webix_selected,
.webix_menu-x .webix_list_item.webix_selected {
  background-color: var(--nav-selected-bg);
  color: var(--nav-selected-text);
}

/* Tooltips */
.webix_tooltip {
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  border: 1px solid var(--tooltip-border);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-left: 10px; /* Add margin for the arrow */
  max-width: min(800px, 60vw); /* Limit width to either 800px or 60% of viewport width, whichever is smaller */
  width: fit-content; /* Allow tooltip to shrink to content size while respecting max-width */
}

/* Chat balloon arrow/pointer */
.webix_tooltip:before {
  content: "";
  position: absolute;
  top: 5px; /* Position vertically */
  left: -10px; /* Position to the left */
  border-width: 5px 10px 10px 0; /* Left-pointing triangle */
  border-style: solid;
  border-color: transparent var(--tooltip-border) transparent transparent;
}

.webix_tooltip:after {
  content: "";
  position: absolute;
  top: 5px; /* Match the before element */
  left: -8px; /* Slightly to the right of the before element */
  border-width: 4px 9px 9px 0; /* Slightly smaller triangle */
  border-style: solid;
  border-color: transparent var(--tooltip-bg) transparent transparent;
}

/* Animation for a smoother appearance */
.webix_tooltip {
  animation: balloon-pop 0.2s ease-out;
  transform-origin: left center; /* Changed origin point to match new direction */
}

@keyframes balloon-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}



/* Messages and notifications */
.webix_message {
  background-color: var(--message-info-bg);
  color: var(--message-info-text);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  animation: message-appear 0.3s ease-out;
}

/* Error message variant */
.webix_message.webix_error {
  background-color: var(--message-error-bg);
  color: var(--message-error-text);
}

/* Success message variant */
.webix_message.webix_success {
  background-color: var(--message-success-bg);
  color: var(--message-success-text);
}

/* Simple animation for message appearance */
@keyframes message-appear {
  0% {
      transform: translateY(-20px);
      opacity: 0;
  }

  100% {
      transform: translateY(0);
      opacity: 1;
  }
}

/* Loading and overlays */
.webix_loading {
  background-color: var(--loading-bg);
  color: var(--loading-text);
}

.webix_loading_overlay {
  background-color: var(--overlay-bg);
  color: var(--overlay-text);
}

.webix_modal {
  background-color: var(--modal-bg);
  color: var(--modal-text);
}

/* Toolbar - all states disabled */
.webix_toolbar,
.webix_view.webix_toolbar,
.webix_layout_toolbar.webix_toolbar {
  background-color: var(--content-bg) !important;
  color: var(--content-text) !important;
}

.webix_toolbar:hover,
.webix_view.webix_toolbar:hover,
.webix_layout_toolbar.webix_toolbar:hover,
.webix_toolbar:active,
.webix_view.webix_toolbar:active,
.webix_layout_toolbar.webix_toolbar:active {
  background-color: var(--content-bg) !important;
  color: var(--content-text) !important;
}

/* Section headers */
.webix_section {
  background-color: var(--header-bg);
  color: var(--header-text);
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
		background: var(--scrollbar-thumb-hover);
}

/* Selection styles */
::selection {
	background-color: var(--selection-bg);
	color: var(--selection-text);
}

/* Placeholder styles */
::placeholder {
	color: var(--placeholder-color);
}

/* Remove default focus styles for buttons */
button::-moz-focus-inner {
  border: 0;
}

/* Input controls - fix double border */
.webix_el_text input,
.webix_el_search input,
.webix_el_combo input,
.webix_el_datepicker input,
.webix_el_colorpicker input {
  border: 1px solid var(--control-border);
  background-color: var(--content-bg) !important;
}

.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 {
  border: 1px solid var(--primary-color);
  outline: none;
  background-color: var(--content-bg) !important;
}

.webix_multicombo_tag, .webix_multicombo_value {
  background-color: rgb(255, 255, 157);
  color: var(--dark-color);
  font-size: 100%;
  font-weight: 500;
}


.webix_switch_box {
	background-color: #f4f5f9 !important;
  color: var(--dark-color) !important;
}

	.webix_switch_box.webix_switch_on {
		background-color: var(--accent-color) !important;
    color: var(--dark-color) !important;
	}

	.webix_switch_box .webix_switch_text {
		padding-top: 2px
	}


/* Set background color for tab filler */
.webix_all_tabs .webix_tab_filler {
    background-color: var(--content-bg);
}


/* Common button styles */
.toolbar_button button,
.toolbar_button_save button,
.toolbar_button_delete button,
.toolbar_button_cancel button,
.toolbar_button_new button,
.toolbar_button_edit button,
.toolbar_button_import button,
.toolbar_button_export button,
.toolbar_button_copy button,
.toolbar_button_ai button {
    border-radius: 15px;
    padding: 6px 12px;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* Common button */
.toolbar_button button {
  background-color: var(--accent-color) !important;
  color: var(--dark-color) !important;
  line-height: unset !important;
}

.toolbar_button button .webix_icon_btn {
  color: var(--dark-color) !important;
}

.toolbar_button button:hover .webix_icon_btn {
  color: var(--light-color) !important;
}

.toolbar_button button:hover {
  background-color: var(--accent-dark) !important;
  color: var(--light-color) !important;
}

/* Save button */
.toolbar_button_save button {
    background-color: var(--accent-color) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_save button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_save button:active {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

/* Delete button */
.toolbar_button_delete button {
    background-color: rgb(255, 179, 179) !important; /* Light red */
    color: var(--dark-color) !important;
}

.toolbar_button_delete button:hover {
    background-color: var(--error-color) !important;
    color: var(--light-color) !important;
}

.toolbar_button_delete button:active {
    background-color: var(--error-color) !important;
    color: var(--light-color) !important;
}

/* Cancel button */
.toolbar_button_cancel button {
    background-color: var(--toolbar-button-cancel-bg) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_cancel button:hover {
    background-color: var(--dark-color) !important;
    color: var(--light-color) !important;
}

.toolbar_button_cancel button:active {
    background-color: var(--dark-color) !important;
    color: var(--light-color) !important;
}

/* New button - yellowish theme */
.toolbar_button_new button {
    background-color: #fcffb0 !important; /* Light yellow */
    color: var(--dark-color) !important;
}

.toolbar_button_new button:hover {
    background-color: #b7bd00 !important; /* Dark goldenrod */
    color: var(--light-color) !important;
}

.toolbar_button_new button:active {
    background-color: #b7bd00 !important;
    color: var(--light-color) !important;
}

/* Edit button */
.toolbar_button_edit button {
    background-color: var(--accent-color) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_edit button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

/* Import button */
.toolbar_button_import button {
    background-color: var(--accent-color) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_import button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

/* Export button */
.toolbar_button_export button {
    background-color: var(--accent-color) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_export button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

/* Copy button */
.toolbar_button_copy button {
    background-color: rgba(115, 115, 115, 0.8) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_copy button:hover {
    background-color: var(--dark-color) !important;
    color: var(--light-color) !important;
}

.toolbar_button_copy button:active {
    background-color: var(--dark-color) !important;
    color: var(--light-color) !important;
}

/* AI button */
.toolbar_button_ai button {
    background-color: rgba(190, 190, 5, 0.8) !important;
    color: var(--light-color) !important;
}

.toolbar_button_ai button:hover {
    background-color: rgba(190, 190, 5, 0.6) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_ai button:active {
    background-color: rgba(190, 190, 5, 0.8) !important;
    color: var(--light-color) !important;
}

/* Common icon styles */
.toolbar_button_save button:before,
.toolbar_button_delete button:before,
.toolbar_button_cancel button:before,
.toolbar_button_new button:before,
.toolbar_button_edit button:before,
.toolbar_button_import button:before,
.toolbar_button_export button:before,
.toolbar_button_copy button:before,
.toolbar_button_ai button:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}

/* Individual icons */
.toolbar_button_save button:before {
	content: "\f0c7";
}

.toolbar_button_delete button:before {
	content: "\f2ed";
}

.toolbar_button_cancel button:before {
	content: "\f0e2";
}

.toolbar_button_new button:before {
	content: "\f055";
}

.toolbar_button_edit button:before {
	content: "\f304";
}

.toolbar_button_import button:before {
	content: "\f56f";
}

.toolbar_button_export button:before {
	content: "\f56e";
}

.toolbar_button_copy button:before {
	content: "\f0c5";
}

.toolbar_button_ai button:before {
	content: "\f544";
}

/* Wizard button styles */
.toolbar_button_wizard_finish button,
.toolbar_button_wizard_next button,
.toolbar_button_wizard_back button,
.toolbar_button_wizard_cancel button {
    text-transform: uppercase;
    border-radius: 15px;
    padding: 6px 12px;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* Finish button */
.toolbar_button_wizard_finish button {
    background-color: var(--accent-color) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_wizard_finish button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_finish button:active {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_finish button:after {
    content: "\f560";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-left: 5px;
}

/* Next button */
.toolbar_button_wizard_next button {
    background-color: var(--accent-color) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_wizard_next button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_next button:active {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_next button:after {
    content: "\f356";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-left: 5px;
}

/* Back button */
.toolbar_button_wizard_back button {
	background-color: rgba(115, 115, 115, 0.3) !important;
    color: var(--dark-color) !important;
}

.toolbar_button_wizard_back button:hover {
    background-color: var(--dark-color) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_back button:active {
    background-color: var(--dark-color) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_back button:before {
    content: "\f355";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}

/* Cancel button */
.toolbar_button_wizard_cancel button {
    background-color: rgb(255, 179, 179) !important; /* Light red */
    color: var(--dark-color) !important;
}

.toolbar_button_wizard_cancel button:hover {
    background-color: var(--error-color) !important;
		color: var(--dark-mode-bg) !important;
}

.toolbar_button_wizard_cancel button:active {
    background-color: var(--error-color) !important;
		color: var(--dark-mode-bg) !important;
}

.toolbar_button_wizard_cancel button:before {
    content: "\f05e";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}

.toolbar_button_default button {
  background: var(--primary-color) !important;
}



/* Segmented UI Controls */
.webix_segment_0, .webix_segment_1, .webix_segment_N {
  -webkit-appearance: none;
  font-family: 'PT Sans', Tahoma;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0px;
  outline: none;
  background: var(--segment-bg);
  color: var(--segment-text);
  border: 1px solid var(--segment-border);
  cursor: pointer;
  padding: 0;
  /* Remove the general border-radius */
  border-radius: 0;
  /* Add a more visible greenish background */
  background-color: rgba(188, 255, 180, 0.3);
}

.webix_segment_0 {
  /* Only round the left side of the first button */
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.webix_segment_N {
  border: 1px solid var(--segment-border);
  height: 100%;
  /* Only round the right side of the last button */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: rgba(188, 255, 180, 0.3);
}

.webix_segment_N:first-child {
  /* If it's the only button, round both sides */
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.webix_segment_0:hover,
.webix_segment_1:hover,
.webix_segment_N:hover {
  /* Change hover background to a more greenish color */
  background-color: rgba(188, 255, 180, 0.5);
  color: var(--segment-hover-text);
}

.webix_segment_0:focus,
.webix_segment_1:focus,
.webix_segment_N:focus {
  /* Match focus state with hover */
  background-color: rgba(188, 255, 180, 0.5);
  color: var(--segment-hover-text);
}

.webix_segment_0:active,
.webix_segment_1:active,
.webix_segment_N:active {
  /* Slightly darker green for active state */
  background-color: rgba(188, 255, 180, 0.7);
  color: var(--segment-active-text);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.webix_segment_0.webix_selected,
.webix_segment_1.webix_selected,
.webix_segment_N.webix_selected {
  background: transparent;
  background-color: var(--segment-selected-bg);
  border-color: var(--segment-selected-bg);
  color: var(--segment-selected-text);
}

.webix_segment_0.webix_selected:hover,
.webix_segment_1.webix_selected:hover,
.webix_segment_N.webix_selected:hover {
  background-color: var(--segment-selected-hover-bg);
  color: var(--segment-selected-hover-text);
}

.webix_segment_0.webix_selected:focus,
.webix_segment_1.webix_selected:focus,
.webix_segment_N.webix_selected:focus {
  background-color: var(--segment-selected-hover-bg);
  color: var(--segment-selected-hover-text);
}

.webix_segment_0.webix_selected:active,
.webix_segment_1.webix_selected:active,
.webix_segment_N.webix_selected:active {
  background-color: var(--segment-selected-active-bg);
  color: var(--segment-selected-active-text);
}

.webix_all_segments .webix_segment_1,
.webix_all_segments .webix_segment_N {
  margin-left: 1px;
  border-left: none;
}

.webix_fieldset fieldset {
  border: 1px solid var(--border-color);
  margin: 0px;
  padding: 5px 8px;
}

.webix_fieldset legend {
  color: var(--text-color);
  font-size: 12px;
  padding: 0px 8px;
  text-transform: uppercase;
  transform: translateY(5px);
}

.webix_el_colorpicker .webix_el_box, .webix_el_combo .webix_el_box, .webix_el_datepicker .webix_el_box, .webix_el_richselect .webix_el_box, .webix_el_search .webix_el_box {
  border: 0px solid var(--table-header-bg);
  /*background-color: var(--table-header-bg);*/
}

/* Textarea styles */
.webix_el_textarea textarea {
  border: 1px solid var(--control-border);
  height: 100%;
  margin: 0;
  padding: 5px 12px;
  color: var(--content-text);
  resize: none;
  font-size: 14px;
  font-family: 'PT Sans', Tahoma;
  background-color: var(--control-bg);
  border-radius: 2px;
}

.webix_el_textarea textarea:focus {
  border: 1px solid var(--primary-color);
  outline: none;
}

.webix_el_textarea .webix_inp_label {
  padding-top: 10px;
  color: var(--content-text);
  font-size: 14px;
}

.webix_dtable .webix_select_mark > div.webix_row_select {
    box-shadow: inset 2px 0 var(--secondary-color) !important;
}