/* Wizard shell -- the canonical creation-flow chrome (navy step rail +
   progress + main column + step stack). Promoted from AddProject.razor.css
   2026-07-28 when AddContractor became the second consumer (the layer
   rule: any value used twice moves one layer up). Page-specific step
   bodies stay in each wizard page's scoped css. Source references:
   ledgerwise-ui ProjectCreateModal / SendProposalStepper. */

.pw-shell {
    display: grid;
    grid-template-columns: var(--lw-wizard-rail-width) minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
    background: var(--lw-bg-muted);
}

/* -- Left rail (navy sidebar) -- */
.pw-rail {
    display: flex;
    flex-direction: column;
    background: var(--lw-primary-dark);
}

.pw-rail__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 24px;
    border-bottom: 1px solid var(--lw-sidebar-border);
}

.pw-rail__emblem {
    width: 22px;
    height: 22px;
}

.pw-rail__wordmark {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    font-family: var(--lw-font-family-heading, inherit);
}

.pw-rail__progress {
    padding: 20px 24px 4px;
}

.pw-rail__progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pw-rail__progress-label {
    font-size: 12px;
    line-height: 18px;
    color: var(--lw-sidebar-text-hover);
}

.pw-rail__progress-count {
    font-size: 12px;
    line-height: 18px;
    color: var(--lw-sidebar-text-subtle);
    font-variant-numeric: tabular-nums;
}

.pw-rail__progress-track {
    margin-top: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--lw-sidebar-progress-track);
    overflow: hidden;
}

/* Brand-gradient fill with the reference's perpetual shimmer (the modal cycles
   background-position over a 200%-wide gradient, 4s linear loop). */
.pw-rail__progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #3980A5, #5ba3c4, #EEB66F);
    background-size: 200% 100%;
    animation: pw-shimmer 4s linear infinite;
    transition: width 0.4s ease;
}

@keyframes pw-shimmer {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
}

.pw-rail__steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pw-rail__step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease;
}

.pw-rail__step:hover:not(:disabled) {
    background: var(--lw-sidebar-hover-bg);
}

.pw-rail__step.is-active {
    background: var(--lw-sidebar-active-bg);
}

.pw-rail__step:disabled {
    cursor: default;
}

.pw-rail__accent {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    background: var(--lw-primary-gold);
    clip-path: polygon(0 0, 100% 3px, 100% calc(100% - 3px), 0 100%);
}

.pw-rail__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.pw-rail__icon .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.35) !important;
    transition: color 0.15s ease;
}

.pw-rail__step.is-active .pw-rail__icon .mud-icon-root {
    color: #fff !important;
}

.pw-rail__step.is-complete .pw-rail__icon .mud-icon-root {
    color: rgba(255, 255, 255, 0.7) !important;
}

.pw-rail__label {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-rail__step.is-active .pw-rail__label {
    color: #fff;
}

.pw-rail__step.is-complete .pw-rail__label {
    color: rgba(255, 255, 255, 0.8);
}

.pw-rail__ring {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pw-rail__ring--done {
    background: var(--lw-primary-blue);
}

.pw-rail__ring--done .mud-icon-root {
    width: 10px;
    height: 10px;
    font-size: 10px;
    color: #fff !important;
}

/* Reference StepDonutRing 0%-active state: 2px white/15 ring with a slow
   breathe (opacity 0.4 -> 1 -> 0.4, 2.5s ease-in-out loop). */
.pw-rail__ring--active {
    border: 2px solid rgba(255, 255, 255, 0.15);
    animation: pw-ring-breathe 2.5s ease-in-out infinite;
}

@keyframes pw-ring-breathe {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.pw-rail__ring--locked {
    border: 2px solid rgba(255, 255, 255, 0.08);
}

/* -- Main content -- */
.pw-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.pw-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    /* Bottom padding clears the fixed OnboardingStepFooter (73px) plus the
       normal 40px step-body breathing room. */
    padding: 32px 40px 113px;
}

.pw-step-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.pw-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Review step stacks its cards at gap-5 (20px) in the reference. */
.pw-stack--lg {
    gap: 20px;
}

/* Accent text-link action used in ControlCard headers and owner-card rows
   (reference: text-[13px] font-medium text-brand-accent, 14px leading icon,
   hover fades to accent/80). */
.pw-cc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--lw-primary-blue);
    transition: opacity 0.15s ease;
}

.pw-cc-link:hover {
    opacity: 0.8;
}

.pw-cc-link .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: currentColor !important;
}

.pw-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Footer chrome lives in the shared OnboardingStepFooter (fixed, clears the
   rail via --lw-wizard-rail-width). */