/**
 * @file
 * Admin fixes for Drupal Claro theme vertical tabs layout issues.
 */

/* ==========================================================================
   Vertical Tabs Toggle Button
   ========================================================================== */

.vertical-tabs-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-bottom: 10px;
  background-color: #003ecc;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vertical-tabs-toggle-btn:hover {
  background-color: #0032a8;
}

.vertical-tabs-toggle-btn:focus {
  outline: 2px solid #003ecc;
  outline-offset: 2px;
}

.vertical-tabs-toggle-btn .toggle-icon {
  font-size: 10px;
}

.vertical-tabs-toggle-btn.collapsed {
  background-color: #555;
}

.vertical-tabs-toggle-btn.collapsed:hover {
  background-color: #333;
}

/* ==========================================================================
   Vertical Tabs Overflow Fixes
   ========================================================================== */

/* Fix vertical tabs overflow issues */
.vertical-tabs {
  overflow: visible;
}

.vertical-tabs__items {
  overflow: visible;
  transition: margin-left 0.2s ease;
}

.vertical-tabs__pane {
  overflow: visible;
}

/* Prevent fields from being cut off */
.layout-region__content {
  overflow: visible;
}

/* ==========================================================================
   Paragraphs & Field Group Fixes
   ========================================================================== */

/* Fix paragraph dropbuttons being hidden */
.paragraphs-dropbutton-wrapper {
  overflow: visible;
}

.field--widget-paragraphs .dropbutton-wrapper {
  overflow: visible;
}

/* Fix field group overflow */
.field-group-tabs-wrapper {
  overflow: visible;
}

.horizontal-tabs,
.horizontal-tabs-panes {
  overflow: visible;
}

/* ==========================================================================
   Form Elements Width Fixes
   ========================================================================== */

/* Fix overlapping of collapsible fields in smaller screens */
.text-full.form-element {
  width: 100%;
}

/* Ensure all form elements have proper width */
.form-element--type-text,
.form-element--type-textarea,
.form-element--type-select,
.form-element--type-email,
.form-element--type-url,
.form-element--type-tel,
.form-element--type-number {
  max-width: 100%;
}

/* Fix for text format wrappers */
.js-text-format-wrapper,
.text-format-wrapper {
  max-width: 100%;
}

/* ==========================================================================
   CKEditor Fixes
   ========================================================================== */

/* Fix CKEditor in vertical tabs */
.vertical-tabs__pane .ck-editor,
.field-group-tab .ck-editor {
  max-width: 100%;
}

.vertical-tabs__pane .ck.ck-editor__editable,
.field-group-tab .ck.ck-editor__editable {
  max-width: 100%;
}