/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* App header: dark purple nav bar matching Figma design */
[data-component="header"] {
  --header-height: 4.5rem; /* 72px */
  --background: oklch(0.20 0.14 293); /* --color-brand-purple-975 */
  --border: rgba(252, 252, 253, 0.15); /* subtle white divider */
}

/* Override inner container: 40px padding, centred at 1980px max-width */
[data-component="header"] [data-header-part="inner"] {
  max-width: 1980px;
  margin-inline: auto;
  padding-inline: 2.5rem;
  gap: 0;
}

/* Modal: closed dialogs must stay hidden even when Tailwind sets display:flex.
   dialog:not([open]) has specificity (0-1-1) which beats .flex (0-1-0). */
dialog:not([open]) {
  display: none;
}

/* Modal backdrop: dark blur overlay matching Figma */
dialog::backdrop {
  background: rgba(7, 2, 15, 0.2);
  backdrop-filter: blur(12px);
}


/* Wizard modal step transitions: slide+fade when a new step enters the frame */
.wizard-step {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}

@starting-style {
  .wizard-step {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* Page sub-header section (company context below nav bar) */
.app-page-header {
  background-color: oklch(0.20 0.14 293); /* same as nav bar */
}

.app-page-header > * {
  max-width: 1980px;
  margin-inline: auto;
  padding: 2.5rem 2.5rem 4rem; /* 40px top, 40px sides, 64px bottom */
}