/**
 * Katacart Layout Builder Styling
 * Only affects: Top tabs and Bottom action bar
 * Does NOT affect: Internal Layout Builder buttons (Configure, Add section, etc.)
 */

/* ========================================
   PRIMARY TABS (View, Edit, Delete, Layout, etc.)
   Move to right side - ONLY ON LAYOUT BUILDER PAGES
   ======================================== */

/* Target the primary tabs container - ONLY on Layout Builder pages */
.layout-builder-enabled nav.tabs,
.layout-builder-enabled .tabs-wrapper,
body.path-layout-builder nav.tabs,
body.path-layout-builder .tabs-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid var(--stroke-default, #e5e7eb);
  margin-bottom: var(--spacing-24, 24px);
  padding: 0;
}

/* Primary tabs list - ONLY on Layout Builder pages */
.layout-builder-enabled ul.tabs.primary,
body.path-layout-builder ul.tabs.primary {
  display: flex !important;
  justify-content: flex-end !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: var(--spacing-8, 8px);
  flex-wrap: wrap;
}

.layout-builder-enabled ul.tabs.primary li,
body.path-layout-builder ul.tabs.primary li {
  margin: 0 !important;
  display: inline-flex !important;
}

/* All tab links including Delete - ONLY on Layout Builder pages */
.layout-builder-enabled ul.tabs.primary li a,
.layout-builder-enabled ul.tabs.primary li.is-active a,
body.path-layout-builder ul.tabs.primary li a,
body.path-layout-builder ul.tabs.primary li.is-active a {
  display: inline-flex !important;
  align-items: center;
  padding: var(--spacing-10, 10px) var(--spacing-20, 20px) !important;
  background-color: var(--background-white, #ffffff) !important;
  color: var(--content-on-white-primary, #001123) !important;
  border: 1px solid var(--stroke-default, #e5e7eb) !important;
  border-radius: var(--corner-radius-8, 8px) !important;
  text-decoration: none !important;
  font-size: var(--font-size-14, 14px) !important;
  font-weight: var(--font-weight-medium-14, 500) !important;
  transition: all var(--transition-base, 0.2s ease) !important;
  white-space: nowrap;
}

.layout-builder-enabled ul.tabs.primary li a:hover,
body.path-layout-builder ul.tabs.primary li a:hover {
  background-color: var(--background-secondary, #f9fafb) !important;
  border-color: var(--color-primary, #002823) !important;
}

/* Active tab styling */
.layout-builder-enabled ul.tabs.primary li.is-active a,
.layout-builder-enabled ul.tabs.primary li a.is-active,
body.path-layout-builder ul.tabs.primary li.is-active a,
body.path-layout-builder ul.tabs.primary li a.is-active {
  background-color: var(--color-primary, #002823) !important;
  color: var(--content-on-primary, #ffffff) !important;
  border-color: var(--color-primary, #002823) !important;
}

/* IMPORTANT: Override delete/remove link styling - Works on ALL pages including layout edit */
.layout-builder-enabled ul.tabs.primary li a[href*="delete"],
.layout-builder-enabled ul.tabs.primary li a[href*="remove"],
body.path-layout-builder ul.tabs.primary li a[href*="delete"],
body.path-layout-builder ul.tabs.primary li a[href*="remove"],
body[class*="layout"] ul.tabs.primary li a[href*="delete"],
body[class*="layout"] ul.tabs.primary li a[href*="remove"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  clip: auto !important;
  overflow: visible !important;
  background-color: var(--background-white, #ffffff) !important;
  color: var(--content-on-white-primary, #001123) !important;
  border: 1px solid var(--stroke-default, #e5e7eb) !important;
  border-radius: var(--corner-radius-8, 8px) !important;
}

.layout-builder-enabled ul.tabs.primary li a[href*="delete"]:hover,
.layout-builder-enabled ul.tabs.primary li a[href*="remove"]:hover,
body.path-layout-builder ul.tabs.primary li a[href*="delete"]:hover,
body.path-layout-builder ul.tabs.primary li a[href*="remove"]:hover,
body[class*="layout"] ul.tabs.primary li a[href*="delete"]:hover,
body[class*="layout"] ul.tabs.primary li a[href*="remove"]:hover {
  background-color: var(--background-secondary, #f9fafb) !important;
  border-color: var(--color-primary, #002823) !important;
  color: var(--content-on-white-primary, #001123) !important;
}

/* Ensure tabs__link class styling doesn't interfere */
.layout-builder-enabled ul.tabs.primary .tabs__link,
body.path-layout-builder ul.tabs.primary .tabs__link,
body[class*="layout"] ul.tabs.primary .tabs__link {
  display: inline-flex !important;
  padding: var(--spacing-10, 10px) var(--spacing-20, 20px) !important;
  background-color: var(--background-white, #ffffff) !important;
  color: var(--content-on-white-primary, #001123) !important;
  border: 1px solid var(--stroke-default, #e5e7eb) !important;
  border-bottom: 1px solid var(--stroke-default, #e5e7eb) !important;
  border-radius: var(--corner-radius-8, 8px) !important;
}

/* ========================================
   BOTTOM ACTION BAR ONLY
   Save layout, Discard, Revert buttons
   ======================================== */

/* Target the specific actions div at bottom of layout builder */
.layout-builder__actions,
.layout-builder-form .form-actions.js-form-wrapper.form-wrapper:last-child {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--background-primary) !important;
  padding: var(--spacing-16) var(--spacing-24) !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin: 0 !important;
  border: none !important;
}

/* Wrapper for buttons inside actions */
.layout-builder__actions .form-actions,
.layout-builder__actions > div {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin: 0;
}

/* Save Layout Button - Primary Action (specific class) */
.layout-builder__actions .button--primary,
.layout-builder__actions input[type="submit"][value="Save layout"],
.layout-builder__actions input[id*="save"],
.layout-builder__actions .js-form-submit.button--primary {
  background-color: var(--color-accent, #82dcb4) !important;
  color: var(--content-on-primary) !important;
  border: none !important;
  padding: var(--spacing-12) var(--spacing-32) !important;
  border-radius: var(--corner-radius-pill) !important;
  font-size: var(--font-size-14) !important;
  font-weight: var(--font-weight-semibold-14) !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  height: auto !important;
  line-height: normal !important;
}

.layout-builder__actions .button--primary:hover,
.layout-builder__actions input[type="submit"][value="Save layout"]:hover {
  background-color: #6dd4b0 !important;
  color: var(--color-forest-green-200, #002823) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Discard Changes Link/Button */
.layout-builder__actions a[href*="discard"],
.layout-builder__actions .button--danger,
.layout-builder__actions a:not(.button--primary):not([id*="revert"]) {
  background-color: transparent !important;
  color: var(--color-error, #fa5046) !important;
  border: 2px solid var(--color-error, #fa5046) !important;
  padding: var(--spacing-12) var(--spacing-24) !important;
  border-radius: var(--corner-radius-pill) !important;
  font-size: var(--font-size-14) !important;
  font-weight: var(--font-weight-medium-14) !important;
  text-decoration: none !important;
  transition: all var(--transition-base) !important;
  display: inline-flex !important;
  align-items: center;
}

.layout-builder__actions a[href*="discard"]:hover,
.layout-builder__actions .button--danger:hover {
  background-color: var(--color-error, #fa5046) !important;
  color: white !important;
}

/* Revert to Defaults Button */
.layout-builder__actions input[type="submit"][value*="Revert"],
.layout-builder__actions .button:not(.button--primary):not(.button--danger),
.layout-builder__actions input[id*="revert"] {
  background-color: transparent !important;
  color: var(--content-on-primary) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  padding: var(--spacing-12) var(--spacing-24) !important;
  border-radius: var(--corner-radius-pill) !important;
  font-size: var(--font-size-14) !important;
  font-weight: var(--font-weight-medium-14) !important;
  transition: all var(--transition-base) !important;
  height: auto !important;
  line-height: normal !important;
}

.layout-builder__actions .button:not(.button--primary):not(.button--danger):hover,
.layout-builder__actions input[type="submit"][value*="Revert"]:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Checkbox styling in actions */
.layout-builder__actions .form-checkbox {
  margin-right: var(--spacing-8);
}

.layout-builder__actions label {
  color: var(--content-on-primary);
  font-size: var(--font-size-14);
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

/* ========================================
   HIDE UNNECESSARY ELEMENTS
   ======================================== */

/* Hide revision information vertical tabs in Layout Builder */
.layout-builder-form .vertical-tabs,
.layout-builder-form .form-item--no-label,
.layout-builder-form #edit-advanced,
.layout-builder-form .entity-content-form-revision-information {
  display: none !important;
}

/* Hide keyboard shortcuts */
.layout-builder-keyboard-shortcuts {
  display: none !important;
}

/* Hide the main form content area above Layout Builder sections */
.layout-builder-form > .form-item,
.layout-builder-form > .form-wrapper:not(.layout-builder__actions):not(.form-actions),
.layout-builder-form > details:not(.layout-builder__section),
.layout-builder__layout {
  /* Only hide if it's not the layout builder content itself */
}

/* Target specific form elements that should be hidden in Layout Builder */
.layout-builder-form .field--name-title,
.layout-builder-form .field--name-body,
.layout-builder-form > .field,
.layout-builder-form > .form-item:not([class*="layout-builder"]) {
  display: none !important;
}

/* Hide form elements above the layout sections but keep layout builder UI */
.layout-builder__layout + .form-item,
.layout-builder__layout ~ .form-item:not([class*="layout-builder"]) {
  display: none !important;
}

/* ========================================
   CONTENT SPACING
   Add bottom padding to prevent content
   from being hidden by fixed action bar
   ======================================== */

.layout-builder-enabled .region-content,
.layout-builder-form .region-content {
  padding-bottom: 100px;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
  ul.tabs.primary {
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }

  .layout-builder__actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .layout-builder__actions .form-actions,
  .layout-builder__actions > div {
    flex-direction: column;
    width: 100%;
  }

  .layout-builder__actions .button,
  .layout-builder__actions input[type="submit"],
  .layout-builder__actions a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}