/**
 * Stepper - Figma Design System Arenito Override
 *
 * Sobrescreve o visual do stepper com as specs do Figma Arenito.
 * Estados: padrão (active + inactive), completed, editing.
 *
 * Estrutura HTML:
 * .stepper-form-layout__stepper-sidebar
 *   ul.stepper
 *     li.step.step-active
 *       .detail-step
 *         .icon-step > i.material-icons
 *         .text-step > span.step-label
 *
 * @version 1.0.0
 * @date 2026-04-07
 */

/* ==========================================================================
   Container do Stepper (sidebar esquerda)
   ========================================================================== */

.stepper-form-layout__stepper-sidebar {
    background: #ECEDF2 !important;
    border-right: 1px solid #CED3E2 !important;
    padding: 40px 24px 40px 72px !important;
    width: 290px !important;
    min-width: 290px !important;
    cursor: default !important;
    user-select: none !important;
}

.stepper-form-layout__stepper-sidebar,
.stepper-form-layout__stepper-sidebar * {
    cursor: default !important;
    pointer-events: none !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar {
    background: #1D2333 !important;
    border-right-color: rgba(224, 226, 235, 0.16) !important;
}

/* ==========================================================================
   Stepper — Layout vertical
   ========================================================================== */

.stepper-form-layout__stepper-sidebar ul.stepper {
    display: flex !important;
    flex-direction: column !important;
    gap: 52px !important;
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   Step Item — Base
   ========================================================================== */

.stepper-form-layout__stepper-sidebar .step {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;
    position: relative !important;
    margin: 0 !important;
    height: 36px !important;
}

.stepper-form-layout__stepper-sidebar .step .detail-step {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;
    height: 36px !important;
    width: 100% !important;
}

/* ==========================================================================
   Conector entre steps (linha vertical)
   ========================================================================== */

/* Conector: 16px abaixo do step, 20px de altura, 16px antes do próximo step */
.stepper-form-layout__stepper-sidebar .step::after {
    content: '' !important;
    position: absolute !important;
    left: 18px !important;
    top: calc(36px + 16px) !important;
    width: 1px !important;
    height: 20px !important;
    background: #CED3E2 !important;
    border: none !important;
}

.stepper-form-layout__stepper-sidebar .step:last-child::after {
    display: none !important;
}

/* ==========================================================================
   Ícone do Step — Estado Inativo (padrão)
   ========================================================================== */

.stepper-form-layout__stepper-sidebar .stepper .step .icon-step {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: 1px solid #CED3E2 !important;
    color: #394360 !important;
    box-shadow: none !important;
}

.stepper-form-layout__stepper-sidebar .stepper .icon-step .material-icons {
    font-size: 16px !important;
    color: #394360 !important;
}

.stepper-form-layout__stepper-sidebar .stepper .icon-step [data-icon],
.stepper-form-layout__stepper-sidebar .stepper .icon-step svg {
    width: 16px !important;
    height: 16px !important;
    color: #394360 !important;
}

/* ==========================================================================
   Título do Step — Estado Inativo (padrão)
   ========================================================================== */

.stepper-form-layout__stepper-sidebar .text-step {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.stepper-form-layout__stepper-sidebar .step-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    color: #394360 !important;
    margin: 0 !important;
}

/* ==========================================================================
   Estado ATIVO (step atual)
   ========================================================================== */

.stepper-form-layout__stepper-sidebar .stepper .step-active .icon-step {
    background: var(--color-primary, #C90A0A) !important;
    border: none !important;
    color: #F6F6F9 !important;
}

.stepper-form-layout__stepper-sidebar .stepper .step-active .icon-step .material-icons {
    color: #F6F6F9 !important;
}

.stepper-form-layout__stepper-sidebar .stepper .step-active .icon-step [data-icon],
.stepper-form-layout__stepper-sidebar .stepper .step-active .icon-step svg {
    width: 16px !important;
    height: 16px !important;
    color: #F6F6F9 !important;
}

.stepper-form-layout__stepper-sidebar .step-active .step-label {
    font-weight: 500 !important;
    color: #12151F !important;
}

/* Conector após o step ativo */
.stepper-form-layout__stepper-sidebar .step-active::after {
    background: #7A839F !important;
}

/* ==========================================================================
   Estado CONCLUÍDO (step-completed)
   ========================================================================== */

.stepper-form-layout__stepper-sidebar .stepper .step-completed .icon-step {
    background: #DDE4D2 !important;
    border: none !important;
    color: #519000 !important;
}

.stepper-form-layout__stepper-sidebar .stepper .step-completed .icon-step .material-icons {
    color: #519000 !important;
}

.stepper-form-layout__stepper-sidebar .stepper .step-completed .icon-step [data-icon],
.stepper-form-layout__stepper-sidebar .stepper .step-completed .icon-step svg {
    width: 16px !important;
    height: 16px !important;
    color: #519000 !important;
}

.stepper-form-layout__stepper-sidebar .step-completed .step-label {
    font-weight: 500 !important;
    color: #1A2E00 !important;
}

/* Conector após step concluído */
.stepper-form-layout__stepper-sidebar .step-completed::after {
    background: #519000 !important;
}

/* ==========================================================================
   Estado EDITANDO (voltou para etapa concluída)
   ========================================================================== */

/* Step sendo editado */
.stepper-form-layout__stepper-sidebar .stepper .step-editing .icon-step {
    background: transparent !important;
    border: 1px solid #7A839F !important;
    color: #12151F !important;
}

.stepper-form-layout__stepper-sidebar .stepper .step-editing .icon-step .material-icons {
    color: #12151F !important;
}

.stepper-form-layout__stepper-sidebar .stepper .step-editing .icon-step [data-icon],
.stepper-form-layout__stepper-sidebar .stepper .step-editing .icon-step svg {
    width: 16px !important;
    height: 16px !important;
    color: #12151F !important;
}

.stepper-form-layout__stepper-sidebar .step-editing .step-label {
    font-weight: 500 !important;
    color: #12151F !important;
}

/* Conector após editing */
.stepper-form-layout__stepper-sidebar .step-editing::after {
    background: #CED3E2 !important;
}

/* Completed steps ficam dimmed quando há editing */
.stepper-form-layout__stepper-sidebar:has(.step-editing) .step-completed .step-label {
    font-weight: 400 !important;
    color: #7A839F !important;
}

/* ==========================================================================
   Stepper Legado (GTA e similares)
   Container: .new-form-layout__stepper-sidebar
   Estrutura: .step > .detail-step > .icon-step + p > strong + small
   ========================================================================== */

/* Container legado */
.new-form-layout__stepper-sidebar {
    background: #ECEDF2 !important;
    border-right: 1px solid #CED3E2 !important;
    padding: 40px 24px 40px 72px !important;
    width: 290px !important;
    min-width: 290px !important;
    cursor: default !important;
    user-select: none !important;
}

.new-form-layout__stepper-sidebar,
.new-form-layout__stepper-sidebar * {
    cursor: default !important;
    pointer-events: none !important;
}

/* Lista do stepper legado */
.new-form-layout__stepper-sidebar > ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 52px !important;
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Step legado */
.new-form-layout__stepper-sidebar .step {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;
    position: relative !important;
    margin: 0 !important;
    height: 36px !important;
}

.new-form-layout__stepper-sidebar .step .detail-step {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;
    height: 36px !important;
    width: 100% !important;
}

/* Conector legado */
.new-form-layout__stepper-sidebar .step::after {
    content: '' !important;
    position: absolute !important;
    left: 18px !important;
    top: calc(36px + 16px) !important;
    width: 1px !important;
    height: 20px !important;
    background: #CED3E2 !important;
    border: none !important;
}

.new-form-layout__stepper-sidebar .step:last-child::after {
    display: none !important;
}

/* Ícone legado — inativo */
.new-form-layout__stepper-sidebar .icon-step {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: 1px solid #CED3E2 !important;
    color: #394360 !important;
    box-shadow: none !important;
    font-size: 16px !important;
}

.new-form-layout__stepper-sidebar .icon-step i {
    font-size: 16px !important;
    color: #394360 !important;
}

.new-form-layout__stepper-sidebar .icon-step [data-icon],
.new-form-layout__stepper-sidebar .icon-step svg {
    width: 16px !important;
    height: 16px !important;
    color: #394360 !important;
}

.new-form-layout__stepper-sidebar .step-active .icon-step [data-icon],
.new-form-layout__stepper-sidebar .step-active .icon-step svg,
.new-form-layout__stepper-sidebar .icon-step.step-active [data-icon],
.new-form-layout__stepper-sidebar .icon-step.step-active svg {
    color: #F6F6F9 !important;
}

.new-form-layout__stepper-sidebar .step-completed .icon-step [data-icon],
.new-form-layout__stepper-sidebar .step-completed .icon-step svg {
    color: #519000 !important;
}

/* Título legado — inativo */
.new-form-layout__stepper-sidebar .step .detail-step p {
    margin: 0 !important;
    flex: 1 !important;
}

.new-form-layout__stepper-sidebar .step .detail-step p strong {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    color: #394360 !important;
}

.new-form-layout__stepper-sidebar .step .detail-step p small {
    display: none !important;
}

/* Legado — Ativo */
.new-form-layout__stepper-sidebar .step-active .icon-step,
.new-form-layout__stepper-sidebar .icon-step.step-active {
    background: var(--color-primary, #C90A0A) !important;
    border: none !important;
    color: #F6F6F9 !important;
}

.new-form-layout__stepper-sidebar .step-active .icon-step i,
.new-form-layout__stepper-sidebar .icon-step.step-active i {
    color: #F6F6F9 !important;
}

.new-form-layout__stepper-sidebar .step-active .detail-step p strong {
    font-weight: 500 !important;
    color: #12151F !important;
}

.new-form-layout__stepper-sidebar .step-active::after {
    background: #7A839F !important;
}

/* Legado — Concluído */
.new-form-layout__stepper-sidebar .step-completed .icon-step {
    background: #DDE4D2 !important;
    border: none !important;
    color: #519000 !important;
}

.new-form-layout__stepper-sidebar .step-completed .icon-step i {
    color: #519000 !important;
}

.new-form-layout__stepper-sidebar .step-completed .detail-step p strong {
    font-weight: 500 !important;
    color: #1A2E00 !important;
}

.new-form-layout__stepper-sidebar .step-completed::after {
    background: #519000 !important;
}

/* Legado — Editing */
.new-form-layout__stepper-sidebar .step-editing .icon-step {
    background: transparent !important;
    border: 1px solid #7A839F !important;
    color: #12151F !important;
}

.new-form-layout__stepper-sidebar .step-editing .icon-step i {
    color: #12151F !important;
}

.new-form-layout__stepper-sidebar .step-editing .detail-step p strong {
    font-weight: 500 !important;
    color: #12151F !important;
}

/* Legado — Completed dimmed quando editing */
.new-form-layout__stepper-sidebar:has(.step-editing) .step-completed .detail-step p strong {
    font-weight: 400 !important;
    color: #7A839F !important;
}

/* Também para stepper-form-layout (usa p strong em vez de step-label) */
.stepper-form-layout__stepper-sidebar .step .detail-step p {
    margin: 0 !important;
    flex: 1 !important;
}

.stepper-form-layout__stepper-sidebar .step .detail-step p strong {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    color: #394360 !important;
}

.stepper-form-layout__stepper-sidebar .step .detail-step p small {
    display: none !important;
}

.stepper-form-layout__stepper-sidebar .step-active .detail-step p strong {
    font-weight: 500 !important;
    color: #12151F !important;
}

.stepper-form-layout__stepper-sidebar .step-completed .detail-step p strong {
    font-weight: 500 !important;
    color: #1A2E00 !important;
}

.stepper-form-layout__stepper-sidebar .step-editing .detail-step p strong {
    font-weight: 500 !important;
    color: #12151F !important;
}

.stepper-form-layout__stepper-sidebar:has(.step-editing) .step-completed .detail-step p strong {
    font-weight: 400 !important;
    color: #7A839F !important;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .icon-step {
    border-color: rgba(224, 226, 235, 0.16) !important;
    color: #A2A8B9 !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .icon-step .material-icons,
[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .icon-step [data-icon] {
    color: #A2A8B9 !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .step-label {
    color: #A2A8B9 !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .step::after {
    background: rgba(224, 226, 235, 0.16) !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .step-active .icon-step {
    background: #3F68FB !important;
    color: #F6F6F9 !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .step-active .icon-step .material-icons,
[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .step-active .icon-step [data-icon] {
    color: #F6F6F9 !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .step-active .step-label {
    color: #E0E2EB !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .step-completed .icon-step {
    background: #1B2C2B !important;
    color: #519000 !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .step-completed .icon-step .material-icons,
[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .step-completed .icon-step [data-icon] {
    color: #519000 !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .step-completed .step-label {
    color: #B3D684 !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .step-completed::after {
    background: #519000 !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .stepper .step-editing .icon-step {
    border-color: #A2A8B9 !important;
    color: #E0E2EB !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar .step-editing .step-label {
    color: #E0E2EB !important;
}

[data-theme="dark"] .stepper-form-layout__stepper-sidebar:has(.step-editing) .step-completed .step-label {
    color: #A2A8B9 !important;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 768px) {
    .stepper-form-layout__stepper-sidebar {
        width: 100% !important;
        min-width: auto !important;
        padding: 24px !important;
        border-right: none !important;
        border-bottom: 1px solid #CED3E2 !important;
    }
}