/* =============================================================
   Artsopolis Octave Theme — Front-end Submission Form
   Left-rail Tabbed Workspace

   Applies the same left-sidebar tabbed layout used on the admin
   edit screens (admin-detail-tabs.css) to the front-end submission
   forms in /dashboard/submit-*/. Unlike the admin version — which
   has to reorganize WordPress's own meta-box DOM at runtime — this
   markup is authored directly in the form templates, so no field is
   ever moved: only shown/hidden by dashboard-submit-tabs.js. Saving,
   required-field handling, and every existing behind-the-scenes
   validation script keep working unmodified.

   Built entirely on the theme's existing custom properties
   (--color-*, --font-*, --space-*, --radius-*, --shadow-*) so it
   automatically follows the Customizer Brand Kit, the same as the
   rest of the front end.
   ============================================================= */

.ao-form-tabs {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: start;
  background: var(--color-bg-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

/* -----------------------------------------------------------------------
   Left rail
   ----------------------------------------------------------------------- */
.ao-form-tabs__nav {
  background: var(--color-bg-warm);
  border-right: 1px solid var(--color-rule);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: stretch;
  position: sticky;
  top: calc(60px + var(--space-6));
}

.ao-form-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ao-form-tabs__tab:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-ink);
}

.ao-form-tabs__tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ao-form-tabs__tab-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--color-ink-muted);
}

/* Completion checkmark — sits to the left of the icon on the handful of
   tabs that have a defined "done" state (see dashboard-submit-tabs.js).
   The space is reserved on every tab (even the ones that never receive
   .is-complete) so every tab's icon lines up at the same x position. */
.ao-form-tabs__tab-check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--color-success);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.ao-form-tabs__tab-check svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ao-form-tabs__tab.is-complete .ao-form-tabs__tab-check {
  opacity: 1;
  transform: scale(1);
}

.ao-form-tabs__tab.is-active {
  background: var(--color-bg-card);
  color: var(--color-accent-dark);
  box-shadow: var(--shadow-sm);
}

.ao-form-tabs__tab.is-active .ao-form-tabs__tab-icon {
  color: var(--color-accent);
}

/* Marks a tab whose panel contains a field flagged aria-invalid, so the
   person can spot which section needs attention without visiting every tab. */
.ao-form-tabs__tab.has-error {
  color: var(--color-error);
}

.ao-form-tabs__tab.has-error .ao-form-tabs__tab-icon {
  color: var(--color-error);
}

.ao-form-tabs__tab-error-dot {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-error);
  margin-left: auto;
  flex-shrink: 0;
}

/* Static "this section has a required field" marker — set once on load by
   dashboard-submit-tabs.js from the same required-field shapes
   validateRequiredFields() enforces, so it can't drift out of sync with an
   admin-configured required custom field. Independent of whether the
   requirement is currently satisfied (that's what .has-error / .is-complete
   are for) — this only ever says "there's something mandatory in here."
   Matches the existing .ao-form__label--required asterisk convention. */
.ao-form-tabs__tab--required .ao-form-tabs__tab-label::after {
  /* A regular space here lets the browser treat "*" as its own wrappable
     word — on a narrow sidebar tab whose label already wraps to two lines
     (e.g. "Admin Contact"), the asterisk was landing orphaned on a third
     line by itself. \00A0 is a non-breaking space, so the asterisk always
     wraps together with whichever line the preceding word ends up on. */
  content: '\00A0*';
  color: var(--color-accent);
}

.ao-form-tabs__tab.has-error .ao-form-tabs__tab-error-dot {
  display: block;
}

/* -----------------------------------------------------------------------
   Panels
   ----------------------------------------------------------------------- */
.ao-form-tabs__panels {
  min-width: 0; /* let inner content shrink instead of overflowing the grid */
}

/* .ao-form-tabs__stack is a plain wrapper again. From 2.107.0 to 2.118.1 it
   was a one-cell grid holding every Event-form panel at once (inactive ones
   visibility:hidden), so the column was always as tall as the TALLEST panel
   and the Submit block under it kept one fixed position across tab changes.
   Jeff reversed that in 2.119.0: users could not find the Submit button,
   because on most tabs it sat a whole screen below the panel's last field.
   Inactive panels are display:none on every form now, so the submit row
   (.ao-form-submit-row, below) follows the active panel.

   The !important guards against hosts that run CSS purgers which drop state
   rules a static crawl never sees "used"; activateTab() in
   dashboard-submit-tabs.js sets the same display toggle inline as well. */
.ao-form-tabs__stack {
  min-width: 0;
}

.ao-form-tabs__panel {
  display: none !important;
  padding: var(--space-3) var(--space-8) var(--space-8); /* top padding trimmed — no panel-title heading sits above the fields anymore */
}

.ao-form-tabs__panel.is-active {
  display: block !important;
}

/* -----------------------------------------------------------------------
   Submit row (Event form) — theme 2.119.0
   Sits 60px below the active panel's last field: that field's own bottom
   margin (.ao-form__field, --space-5 = 20px) + the panel's bottom padding
   (--space-8 = 32px) + the 8px here. The note comes first, the button
   directly under it; both are centred in the panel's content width (same
   side padding as the panel) and the button spans 30% of that width. The
   button is rendered disabled (grey) until dashboard-submit-tabs.js's
   updateSubmitButtonState() finds every required field filled in.
   ----------------------------------------------------------------------- */
.ao-form-submit-row {
  margin-top: calc(60px - var(--space-8) - var(--space-5));
  padding: 0 var(--space-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.ao-form-submit-row__note {
  flex: 0 0 100%;
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.ao-form-submit-row .ao-form__submit {
  width: 30%;
  min-width: 220px; /* keeps "Submit Event for Review" on one line in a narrow column */
  max-width: 100%;
  margin-top: 0;
}

.ao-form-submit-row .ao-form__submit:disabled,
.ao-form-submit-row .ao-form__submit:disabled:hover {
  background: #b9bec5;
  color: #ffffff;
  cursor: not-allowed;
}

.ao-form-submit-row__after {
  margin: var(--space-3) var(--space-8) 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* A panel's own first .ao-form__section already sits right at the top of
   the panel (there's no panel-title heading above it anymore — the active
   tab label in the left rail serves that purpose), so its top
   divider/spacing (meant to separate stacked sections on the old
   single-column layout) would just be redundant here. */
.ao-form-tabs__panel .ao-form__section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* -----------------------------------------------------------------------
   Responsive — collapse the rail above the panel on narrow screens.
   ----------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ao-form-tabs {
    grid-template-columns: 1fr !important;
  }

  .ao-form-tabs__nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--color-rule);
  }

  .ao-form-tabs__tab {
    width: auto;
  }

  .ao-form-tabs__tab-error-dot {
    margin-left: 0;
  }

  .ao-form-tabs__panel {
    padding: var(--space-3) var(--space-5) var(--space-6);
  }

  /* Keep the submit row 60px under the last field and flush with the
     panel's narrower side padding at this width (see the base rule). */
  .ao-form-submit-row {
    margin-top: calc(60px - var(--space-6) - var(--space-5));
    padding: 0 var(--space-5);
  }

  .ao-form-submit-row__after {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
}

@media (max-width: 480px) {
  .ao-form-tabs__nav {
    gap: var(--space-1);
  }

  .ao-form-tabs__tab {
    font-size: var(--text-xs);
    padding: var(--space-2);
  }
}