/**
* @license
* Copyright 2020 Sébastien CANET
* SPDX-License-Identifier: BSD-3-Clause
*/

/* CSS specific added for the theme */

body {
    background-color: #006468;
}
#separator {
    background-color: #006468;
}
#helpModal_header {
    background-color: #006468;
}
#keyboard_nav_header {
    background-color: #006468;
}
#buttonsMenuPopupInside,
#buttonsToolsPopupInside,
#buttonsIotPopupInside{
    background-color: #006468;
    padding: 5px;
}
.config_content {
    background-color: #006468;
}
.modal-header, .modal-footer {
    background-color: #006468;
}
.accordion {
  background-color: #006468;
}
.accordion:hover {
  color: #006468;
}
.active {
    color: #006468;
  background-color: #FFCC00;
}
.collapsibleButton {
    background-color: #006468;
}
.active:after {
    color: #006468;
}
#lateral-panel-setup-label {
    color: #006468;
}
.closeModal:hover,
.closeModal:focus {
    color: #FFCC00;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsibleButton:hover {
    background-color: #FFCC00;
}

/* enhance sliders behavior */
input:checked + .slider {
  background-color: #17a1a5;
}
input:focus + .slider {
  box-shadow: 0 0 1px #17a1a5;
}
input:checked + .slider:before {
  -webkit-transform: translateY(27px);
  -ms-transform: translateY(27px);
  transform: translateY(27px);
}

/**
 * @fileoverview Toolbox modification, override css style
 * Modern icon-based design - shadcn professional & playful for kids
 * @source https://blocklycodelabs.dev/codelabs/custom-toolbox
 */

/* Modern, clean toolbox background - professional design */
.blocklyToolboxDiv,
.blocklyToolbox {
  background: #FAFAFA !important; /* Subtle off-white for depth */
  border-right: 1px solid #E5E7EB !important; /* Refined border */
  box-shadow: none !important;
  padding: 6px 4px !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  min-width: 180px !important;
  width: 180px !important;
}

/* Toolbox contents with crisp, neat spacing */
.blocklyToolboxContents {
  padding: 4px 2px !important;
  gap: 1px !important;
}

/* Category styling - crisp and neat design */
.blocklyToolboxCategory {
  height: auto !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  margin-bottom: 1px !important;
  padding: 4px 6px !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  background-color: transparent !important;
  position: relative !important;
}

/* Content container - flex layout for icon + label */
.blocklyToolboxCategory .blocklyTreeRowContentContainer {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  pointer-events: none !important;
}

/* Icon styling - colorful square background */
.blocklyToolboxCategory .icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  color: #FFFFFF !important; /* White icons */
  font-size: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  /* Background color set by addColourBorder_ */
}

/* Refined shine effect on icons - professional gradient */
.blocklyToolboxCategory .icon::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 45% !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) !important;
  pointer-events: none !important;
  border-radius: 8px 8px 0 0 !important;
  z-index: 1 !important;
}

/* Professional hover effect for icons */
.blocklyToolboxCategory:hover .icon {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Category label - black text */
.blocklyToolboxCategoryLabel,
.blocklyTreeLabel {
  color: hsl(222.2 47.4% 11.2%) !important; /* Black text */
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 0.2s ease !important;
}

/* Label hover effect */
.blocklyToolboxCategory:hover .blocklyToolboxCategoryLabel,
.blocklyToolboxCategory:hover .blocklyTreeLabel {
  color: hsl(222.2 47.4% 8%) !important;
}

/* Selected state - professional highlight */
.blocklyToolboxCategory.blocklyToolboxSelected {
  background-color: #F3F4F6 !important;
  border-left: 2px solid #6366F1 !important;
  padding-left: 4px !important;
}

/* Specific category selected state */
.blocklyToolbox .cat-io .blocklyToolboxCategory.blocklyToolboxSelected,
.blocklyToolboxCategory.blocklyToolboxSelected {
  background-color: #F3F4F6 !important;
  border-left: 2px solid #6366F1 !important;
  padding-left: 4px !important;
}

/* Professional hover state */
.blocklyToolboxCategory:hover {
  background-color: #F9FAFB !important;
}

/* Tree row compatibility - crisp and neat styling */
.blocklyTreeRow {
  padding: 4px 6px !important;
  border-radius: 6px !important;
  height: auto !important;
  margin-bottom: 1px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.3 !important;
  border-left: none !important;
  position: relative !important;
}

/* Remove left border from category rows */
.blocklyToolboxCategory .blocklyTreeRow {
  border-left: none !important;
  padding-left: 6px !important; /* Use same padding as other sides */
}

/* Remove any pseudo-element borders */
.blocklyToolboxCategory::before,
.blocklyTreeRow::before,
.blocklyToolboxCategory::after,
.blocklyTreeRow::after {
  display: none !important;
  content: none !important;
}

/* Remove all left borders from toolbox categories */
.blocklyToolboxCategory,
.blocklyTreeRow {
  border-left: none !important;
  border-left-color: transparent !important;
  border-left-width: 0 !important;
}

/* Category icon container - colorful square background */
.blocklyTreeIcon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  /* Background color will be set by addColourBorder_ */
}

/* Refined shine effect on icon container */
.blocklyTreeIcon::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 45% !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) !important;
  pointer-events: none !important;
  border-radius: 8px 8px 0 0 !important;
  z-index: 1 !important;
}

/* Professional hover effect for icon container */
.blocklyToolboxCategory:hover .blocklyTreeIcon {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Icon SVG/Image - white icons inside colored squares */
.blocklyTreeIcon svg,
.blocklyTreeIcon img {
  width: 16px !important;
  height: 16px !important;
  filter: none !important;
  color: #FFFFFF !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Icon styling - white icons in colored squares */
.customIcon {
  color: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Lucide icons in toolbox - white color */
.customIcon[data-lucide] {
  width: 14px !important;
  height: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make sure Lucide SVG paths are white */
.customIcon[data-lucide] svg,
.blocklyTreeIcon[data-lucide] svg {
  color: #FFFFFF !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.customIcon[data-lucide] svg path,
.customIcon[data-lucide] svg circle,
.customIcon[data-lucide] svg rect,
.customIcon[data-lucide] svg line,
.customIcon[data-lucide] svg polyline,
.customIcon[data-lucide] svg polygon,
.blocklyTreeIcon svg path,
.blocklyTreeIcon svg circle,
.blocklyTreeIcon svg rect,
.blocklyTreeIcon svg line,
.blocklyTreeIcon svg polyline,
.blocklyTreeIcon svg polygon {
  stroke: #FFFFFF !important;
  stroke-width: 2 !important;
  fill: none !important;
}

/* Ensure SVG is visible and properly sized and centered */
.blocklyTreeIcon svg,
.customIcon[data-lucide] svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
  position: relative !important;
  z-index: 2 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Ensure icon elements inside containers are centered */
.blocklyTreeIcon > i,
.blocklyTreeIcon > .customIcon,
.blocklyToolboxCategory .icon > i,
.blocklyToolboxCategory .icon > .customIcon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Tree separator - subtle divider */
.blocklyTreeSeparator {
  height: 1px !important;
  background: hsl(214.3 31.8% 91.4%) !important;
  margin: 3px 4px !important;
  border: none !important;
}

/* Smooth scrollbar for toolbox */
.blocklyToolboxDiv::-webkit-scrollbar,
.blocklyToolbox::-webkit-scrollbar {
  width: 8px;
}

.blocklyToolboxDiv::-webkit-scrollbar-track,
.blocklyToolbox::-webkit-scrollbar-track {
  background: hsl(210 40% 96.1%);
  border-radius: 4px;
}

.blocklyToolboxDiv::-webkit-scrollbar-thumb,
.blocklyToolbox::-webkit-scrollbar-thumb {
  background: hsl(215.4 16.3% 46.9%);
  border-radius: 4px;
}

.blocklyToolboxDiv::-webkit-scrollbar-thumb:hover,
.blocklyToolbox::-webkit-scrollbar-thumb:hover {
  background: hsl(215.4 16.3% 40%);
}