/* Beefree SDK High Contrast Theme */
:root {
  /* High contrast color palette */
  --main-primary: #000000;
  --main-secondary: #000000;
  --main-accent: #4400ff;
  --main-light: #ffffff;
  --main-dark: #000000;
  --main-background: #ffffff;
  --main-surface: #ffffff;
  --main-sidebar-background: #fff;
  --main-sidebar-border: #000000;
  
  /* Beefree SDK Variables - High Contrast */
  --inputs-background-color: var(--main-background) !important;
  --inputs-border-color: var(--main-sidebar-border) !important;
  --inputs-text-color: var(--main-dark) !important;
  --widget-bar-and-active-tab-background-color: var(--main-sidebar-background) !important;
  --active-tab-text-and-icon-color: var(--main-dark) !important;
  --not-active-tabs-background-color: var(--main-surface) !important;
  --widget-bar-border: var(--main-sidebar-border) !important;
  --widget-border-bottom-color: var(--main-sidebar-border) !important;
  --properties-section-title-background: var(--main-surface) !important;
  --properties-panel-title-background: var(--main-surface) !important;
  --properties-panel-text-icons-color: var(--main-dark) !important;
  --properties-panel-title-border: var(--main-secondary) !important;
  --input-number-background: var(--main-background) !important;
  --inputs-label-background-color: var(--main-background) !important;
  --widget-label-color: var(--main-dark) !important;
  --custom-brand-primary-color: var(--main-accent) !important;
  --custom-brand-secondary-color: var(--main-primary) !important;

  --tile-background-color: var(--main-background) !important;
  --tile-border-color: var(--main-secondary) !important;
  --widget-section-title-color: var(--main-dark) !important;
  --generic-border-light: var(--main-light) !important;

  --widget-background-toggle-off: var(--main-background) !important;
  --checkbox-background: var(--main-background) !important;
  --padding-preview: var(--main-background) !important;
  --row-border-radius-preview: var(--main-background) !important;
  --sidebar-row-layout-wrapper-background: var(--main-surface) !important;

  --icon-organizer-border-color: var(--main-dark) !important;
}


body.bee--cs {
  font-size: 14px;
}

/* Sidebar - High Contrast */
body.bee--cs .widget-bar--cs {
  background-color: var(--main-sidebar-background) !important;
  color: var(--main-light) !important;
  border: 3px solid var(--main-dark) !important;
  font-size: 14px;
}

/* Interactive elements - High contrast with yellow highlights */
body.bee--cs div.module-box:hover > button.icon-move,
body.bee--cs div.module-box.module-box--selected > button.icon-move,
body.bee--cs div.module-box.module-box--selected:hover > button.icon-move,
body.bee--cs div.module-box > button.icon-move,
body.bee--cs .module-box > .icon-move,
body.bee--cs .module-box--selected.mouseover:hover > .icon-move,
body.bee--cs .row-container > .icon-move,
body.bee--cs .row-container-outer.selected .row-container > .icon-move,

body.bee--cs .row-container-outer div.row-container.row-labels--cs:hover > button.icon-move,
body.bee--cs .row-container-outer div.row-container.row-labels--cs > button.icon-move,
body.bee--cs .module-box > .icon-move,
body.bee--cs .module-box--selected.mouseover:hover > .icon-move, body.bee--cs .row-container > .icon-move,
body.bee--cs .row-container-outer.selected .row-container > .icon-move {
  background-color: var(--main-accent) !important;
  color: var(--main-dark) !important;
  border: 2px solid var(--main-dark) !important;
}

body.bee--cs .row-container:hover > .icon-move, .module-box.mouseover:hover .icon-move {
  background-color: var(--main-accent) !important;
  color: var(--main-dark) !important;
  border: 2px solid var(--main-dark) !important;
}

div.sidebar--collapsible:hover div.sidebar__collapse-handle,
div.sidebar--collapsed div.sidebar__collapse-handle {
  background-color: var(--main-accent) !important;
  color: var(--main-dark) !important;
  border: 2px solid var(--main-dark) !important;
}

div.module-box:after,
div.module-box:not(.grabbed):after,
div.module-box--selected:after,
div.module-box--selected:hover:after,
body.bee--cs div.module-box--selected.mouseover:hover:after {
  outline: 3px solid var(--main-accent) !important;
  outline-color: var(--main-accent) !important;
}

.widget-bar.widget-bar--cs .properties-panel__title--cs {
  border: 3px solid var(--main-dark) !important;
  background-color: var(--main-light) !important;
  color: var(--main-dark) !important;
  font-weight: bold !important;
}

.widget-section__paddingpreview--cs {
  background-color: var(--main-background) !important;
  border: 2px solid var(--main-dark) !important;
}

.widgets-bar-columns__indicator--cs {
  background-color: var(--main-surface) !important;
}

.tabs__tablabel--cs {
  box-shadow: inset 0 3px 0 2px var(--main-dark);
}
.tabs__tablabel--cs[aria-selected="true"] {
  box-shadow: none;
}

.icon--color-base,
.icon--color-light {
  opacity: 0.8;
  fill: var(--main-dark) !important;
}

.sidebar-draggable--cs {
  color: var(--main-dark) !important;
  background-color: var(--main-light) !important;
}

.sidebar-draggable--cs svg,
.sidebar-draggable--cs svg path {
  fill: var(--main-dark) !important;
}

.wrapper-color-selector--cs input {
  background-color: var(--main-background) !important;
  border-color: var(--main-secondary) !important;
}

/* Page Stage - High Contrast */
.page-stage {
  background-color: var(--main-background) !important;
  border: 3px solid var(--main-dark) !important;
}

.radiogroup-button--cs {
  background-color: var(--main-background) !important;
  border: 2px solid var(--main-dark) !important;
  color: var(--main-dark) !important;
}

.radiogroup-button--cs:hover {
  background-color: var(--main-accent) !important;
  color: var(--main-dark) !important;
  border: 3px solid var(--main-dark) !important;
}

.radiogroup-button--cs.active--cs,
.radiogroup-button--cs.selected {
  background-color: var(--main-dark) !important;
  color: var(--main-light) !important;
  border: 3px solid var(--main-accent) !important;
}

/* Buttons - High Contrast */
.btn--cs {
  background-color: var(--main-dark) !important;
  border: 3px solid var(--main-dark) !important;
  color: var(--main-light) !important;
  font-weight: bold !important;
}

.btn--cs:hover {
  background-color: var(--main-accent) !important;
  border: 3px solid var(--main-dark) !important;
  color: var(--main-dark) !important;
}

.widgets-section__title--cs {
  color: var(--main-dark) !important;
  font-weight: bold !important;
  background-color: var(--main-light) !important;
  border: 2px solid var(--main-dark) !important;
  padding: 8px !important;
}

/* Form inputs - High Contrast */
input[type="text"]--cs,
input[type="number"]--cs,
textarea--cs,
select--cs {
  background-color: var(--main-background) !important;
  border: 3px solid var(--main-dark) !important;
  color: var(--main-dark) !important;
  font-weight: bold !important;
}

input[type="text"]:focus--cs,
input[type="number"]:focus--cs,
textarea:focus--cs,
select:focus--cs {
  background-color: var(--main-accent) !important;
  border: 3px solid var(--main-dark) !important;
  color: var(--main-dark) !important;
  outline: 2px solid var(--main-dark) !important;
}

/* Tabs - High Contrast */
.tab--cs.active {
  background-color: var(--main-dark) !important;
  color: var(--main-light) !important;
  border: 3px solid var(--main-accent) !important;
  font-weight: bold !important;
}

.tab--cs:not(.active) {
  background-color: var(--main-surface) !important;
  color: var(--main-dark) !important;
  border: 3px solid var(--main-dark) !important;
  font-weight: bold !important;
}

.tab--cs:not(.active):hover {
  background-color: var(--main-accent) !important;
  color: var(--main-dark) !important;
  border: 3px solid var(--main-dark) !important;
}

/* Additional high contrast styling */
.icon--color-base,
.icon--color-light {
  opacity: 1 !important;
  fill: var(--main-dark) !important;
}

/* Widget sections */
.widget-section__paddingpreview--cs {
  background-color: var(--main-background) !important;
  border: 2px solid var(--main-dark) !important;
}

.widgets-bar-columns__indicator--cs {
  background-color: var(--main-accent) !important;
  border: 2px solid var(--main-dark) !important;
}

.sidebar-draggable--cs {
  color: var(--main-dark) !important;
  background-color: var(--main-light) !important;
  border: 2px solid var(--main-dark) !important;
  font-weight: bold !important;
}

.wrapper-color-selector--cs input {
  background-color: var(--main-background) !important;
  border: 3px solid var(--main-dark) !important;
}

.image-selector-container--cs p,
.beeDynamicImage__description {
  color: var(--main-dark) !important;
}

.icon--color-base,
.icon--color-light {
  opacity: 0.2 !important;
}

.dropdown-custom--cs .dropdown-toggle {
  border-width: 3px !important;
}

.module-empty {
  background-color: var(--main-background) !important;
  color: var(--main-dark) !important;
}

/* row columns */
.rowlayout__columns--cs,
.widgets-section__columns-container {
  border: none !important;
}

/* Toggle widget */
.toggle-slider--cs {
  box-shadow: 0 0 0 2px var(--main-dark) !important;
}
.toggle-slider--cs::before {
  background-color: var(--main-dark) !important;
}

.toggle-wrapper--cs input:checked+.toggle-slider--cs::before {
  background-color: var(--main-light) !important;
}

/* Number selector */
.number-selector--cs button,
.number-selector--cs input {
  border: 3px solid var(--main-dark) !important;
  height: 36px !important;
}
.number-selector--cs input {
  border-left: none !important;
  border-right: none !important;
}

.input-text-boxed--cs label,
.input-text-boxed--cs input {
  border: 2px solid var(--main-dark) !important;
}

.widgets-section section > div {
  border-style: dashed;
}

/* Stage placeholder */
.stage-placeholder--cs .stage-placeholder-text--cs {
  color: var(--main-dark) !important;
}
.stage-placeholder--cs .stage-placeholder-icon--cs svg,
.stage-placeholder--cs .stage-placeholder-icon--cs svg path {
  fill: var(--main-dark) !important;
}
