/* GrapesJS Light Theme Overrides - Scoped to avoid affecting the rest of the app */

#grapes-root, #grapes-root * { 
  color-scheme: light !important; 
}

/* Core backgrounds */
#grapes-root .gjs-one-bg     { background: #ffffff !important; }
#grapes-root .gjs-two-bg     { background: #f8fafc !important; }   /* light panel bg */
#grapes-root .gjs-three-bg   { background: #e5e7eb !important; }   /* borders */

/* Core text colors */
#grapes-root .gjs-one-color  { color: #111827 !important; }        /* nearly black */
#grapes-root .gjs-two-color  { color: #374151 !important; }
#grapes-root .gjs-three-color{ color: #6b7280 !important; }

/* Form elements */
#grapes-root .gjs-field,
#grapes-root .gjs-select,
#grapes-root .gjs-input-holder input,
#grapes-root .gjs-input-holder select,
#grapes-root .gjs-input-holder textarea {
  background: #fff !important; 
  color: #111 !important; 
  border-color: #e5e7eb !important;
}

/* Panels and buttons */
#grapes-root .gjs-pn-panel, 
#grapes-root .gjs-pn-buttons,
#grapes-root .gjs-pn-views {
  background: #fff !important; 
  color: #111 !important; 
  border-color: #e5e7eb !important;
}

#grapes-root .gjs-pn-views {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Canvas and frame */
#grapes-root .gjs-cv-canvas,
#grapes-root .gjs-frame,
#grapes-root .gjs-frame-wrapper {
  background: #fff !important;
}

/* Block manager */
#grapes-root .gjs-blocks-c {
  background: #fff !important;
}

#grapes-root .gjs-block {
  background: #fff !important;
  border-color: #e5e7eb !important;
  color: #111 !important;
}

#grapes-root .gjs-block:hover {
  background: #f3f4f6 !important;
}

/* Style manager */
#grapes-root .gjs-sm-sectors,
#grapes-root .gjs-sm-sector {
  background: #fff !important;
  border-color: #e5e7eb !important;
}

#grapes-root .gjs-sm-sector .gjs-sm-title {
  background: #f9fafb !important;
  color: #111 !important;
}

#grapes-root .gjs-sm-property {
  background: #fff !important;
  color: #111 !important;
}

/* Layer manager */
#grapes-root .gjs-lm-layers,
#grapes-root .gjs-layer {
  background: #fff !important;
  color: #111 !important;
}

#grapes-root .gjs-layer:hover {
  background: #f3f4f6 !important;
}

/* Trait manager */
#grapes-root .gjs-trt-traits,
#grapes-root .gjs-trt-trait {
  background: #fff !important;
  color: #111 !important;
}

/* Toolbar */
#grapes-root .gjs-toolbar {
  background: #fff !important;
  border-color: #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px !important;
  gap: 2px !important;
}

#grapes-root .gjs-toolbar-item {
  color: #111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 4px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

#grapes-root .gjs-toolbar-item:hover {
  background-color: #f3f4f6 !important;
}

#grapes-root .gjs-toolbar-item.gjs-toolbar-item-active {
  background-color: #e5e7eb !important;
}

/* Component selection outline */
#grapes-root .gjs-comp-selected {
  outline: 2px solid #3b82f6 !important;
}

/* Field focus states */
#grapes-root .gjs-field:focus {
  border-color: #3b82f6 !important;
}

/* Blocks grid: more compact layout */
#grapes-root .gjs-blocks-c { 
  display: grid; 
  grid-template-columns: repeat(4, minmax(0,1fr)); 
  gap: 4px;
  padding: 8px;
}

#grapes-root .gjs-block { 
  min-height: 56px; 
  padding: 6px; 
  border-radius: 6px; 
  margin: 0;
  width:100%;
}

#grapes-root .gjs-block__media svg,
#grapes-root .gjs-block__media img {
  max-width: 28px; 
  max-height: 28px;
}

#grapes-root .gjs-block-label { 
  font-size: 11px;
  margin-top: 4px;
}

/* Reduce headers/padding in the blocks sidebar */
#grapes-root .gjs-block-category {
  margin-bottom: 4px;
}

#grapes-root .gjs-title { 
  font-size: 11px; 
  padding: 4px 8px;
}

/* ===== Right panel scrolling: Blocks / Layers / Styles / Traits ===== */
#grapes-root .editor-row {                /* outer row that holds canvas + right panel */
  min-height: 0 !important;
  height: 600px !important; /* fixed height instead of vh-based */
}

#grapes-root .panel__right {              /* right column wrapper */
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
}

/* Right side panel container - Enhanced scrolling */
#grapes-root .gjs-pn-views-container {
   display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Individual panel sections scrolling */
#grapes-root .gjs-sm-sectors,
#grapes-root .gjs-trt-traits,
#grapes-root .gjs-lm-layers {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Each concrete panel container: make sure they can scroll within */
#grapes-root .blocks-container,
#grapes-root .layers-container,
#grapes-root .styles-container,
#grapes-root .traits-container,
#grapes-root .panel-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Block manager scrolling */
#grapes-root .gjs-blocks-c {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Make sectors (accordion) a bit tighter */
#grapes-root .gjs-sm-sector-title {
  padding: 6px 10px; 
  font-size: 12px;
}

/* Enhanced Active tab indicator and navigation */
#grapes-root .gjs-pn-buttons {
  position: relative;
  display: flex;
}

#grapes-root .gjs-pn-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: #6b7280 !important;
  padding: 8px 12px !important;
  position: relative;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

#grapes-root .gjs-pn-btn:hover {
  color: #374151 !important;
  background: #f9fafb !important;
}

#grapes-root .gjs-pn-btn.gjs-pn-active {
  color: #3b82f6 !important;
  border-bottom-color: #3b82f6 !important;
  background: #ffffff !important;
  font-weight: 500 !important;
}

/* Enhanced form controls with visible borders */
#grapes-root .gjs-field,
#grapes-root .gjs-select,
#grapes-root .gjs-input-holder input,
#grapes-root .gjs-input-holder select,
#grapes-root .gjs-input-holder textarea {
  background: #ffffff !important; 
  color: #111827 !important; 
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

#grapes-root .gjs-field:focus,
#grapes-root .gjs-input-holder input:focus,
#grapes-root .gjs-input-holder select:focus,
#grapes-root .gjs-input-holder textarea:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

/* Color picker and specialized inputs */
#grapes-root .gjs-field-color-picker,
#grapes-root .gjs-field-color {
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
}

/* Dropdown selectors */
#grapes-root .gjs-select {
  appearance: none !important;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%236b7280" d="M8 10.5L4 6.5h8l-4 4z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
}

#grapes-root .gjs-field select {
  padding: 0 20px 0 0 !important
}

.gjs-devices-c{
  padding:0 !important;
}

/* Device selector modifications */
#grapes-root .gjs-pn-device-label,
#grapes-root .gjs-device-label {
  display: none !important;
}

#grapes-root .gjs-pn-device-c,
#grapes-root .gjs-device-select,
#grapes-root .gjs-pn-device select {
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 12px !important;
  min-width: 80px !important;
}

/* Wrapper */
[data-gjs-type="wrapper"] { 
  min-height: 300px !important; 
  padding: 20px !important; 
}