/**
 * Katacart Layout Builder Styling
 * ERA-style layout builder with live preview
 * Complementary styles for layout-builder-rocketship-style.css
 */

/* ========================================
   PRIMARY TABS - Positioned top right
   ======================================== */

/* Target the primary tabs container - position at top right */
.layout-builder-enabled nav.tabs,
.layout-builder-enabled .tabs-wrapper,
body.path-layout-builder nav.tabs,
body.path-layout-builder .tabs-wrapper {
  position: fixed;
  top: 48px;
  right: 16px;
  z-index: 101;
  display: flex;
  justify-content: flex-end;
  width: auto;
  background: transparent;
  border-bottom: none;
  margin-bottom: 0;
  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 - ERA Style
   ======================================== */

/* Main form actions styling handled in rocketship-style.css */
/* These are supplementary styles */

/* Ensure form actions are fixed at bottom */
.layout-builder__actions,
.layout-builder-form .form-actions.js-form-wrapper.form-wrapper:last-child {
  /* Main styling in rocketship-style.css */
}

/* All action bar button styling is handled in rocketship-style.css */

/* ========================================
   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;
  }
}