/*
 * Precificação escala 5x2 (28/10/2026): só o que a plataforma ainda não tinha,
 * com os tokens do projeto, como no protótipo aprovado
 * (docs/precificacao-escala-5x2-prototipo/conteudo.html): a lista de grupos da
 * equipe e os degraus do aumento no resumo. Formulário, resumo, tabelas,
 * recolhíveis e a modal são os da plataforma (app.css).
 */

.pe5-team {
    display: grid;
    gap: var(--space-2);
}

.pe5-team__list {
    display: grid;
    gap: var(--space-2);
}

.pe5-team__list:empty {
    display: none;
}

.pe5-team__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.pe5-team__info {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.pe5-team__info strong {
    color: var(--ink);
    font-size: var(--font-size-md);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pe5-team__info small {
    color: var(--muted);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

.pe5-team__actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-2);
}

.pe5-team__total {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-1) 0;
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.pe5-team__total[hidden] {
    display: none;
}

.pe5-team__total strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.pe5-add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.pe5-step__label {
    display: grid;
    min-width: 0;
}

.pe5-step__label small {
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: 400;
}

.pe5-variation {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.pe5-subtitle {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--ink);
    font-size: var(--font-size-md);
    font-weight: 600;
}

.pe5-chosen {
    color: var(--success);
    font-weight: 600;
}

/* Campos que só valem para algumas formas de cobrir as horas. */
.calculator-form [data-pe5-show][hidden],
.calculator-form [data-pe5-slot][hidden],
.calculator-form [data-pe5-slot] > [hidden],
.pe5-modal [data-pe5-type][hidden] {
    display: none;
}

/* Hora extra e diária de cobertura sob a forma escolhida, no bloco da jornada. */
.calculator-form [data-pe5-slot="main"] {
    display: grid;
    gap: 14px;
}

.calculator-form [data-pe5-slot="main"]:empty {
    display: none;
}

/* Ajustes opcionais e os recolhíveis da modal: o recolhível da plataforma
   (.disclosure-item) com os campos por dentro, como na Escala 5x2. */
.pe5-options summary small {
    display: block;
    margin-top: var(--space-1);
    color: var(--muted);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.pe5-options > .form-grid,
.pe5-options [data-pe5-slot="options"],
.pe5-modal__more > .form-grid {
    margin: 0 var(--space-4) var(--space-4);
}

.pe5-options [data-pe5-slot="options"] {
    display: grid;
    gap: 14px;
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--line);
}

.pe5-options [data-pe5-slot="options"] .form-hint {
    margin: 0;
}

.pe5-modal__more {
    margin-top: var(--space-4);
}

/* Celular: o texto do grupo ocupa a largura toda e os ícones descem para a
   linha de baixo, em vez de espremer o texto ao lado deles; o botão de
   acrescentar ocupa a largura toda. */
@media (max-width: 47.5rem) {
    .pe5-team__row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .pe5-team__actions {
        justify-content: flex-end;
        padding-top: var(--space-2);
        border-top: var(--border-width) solid var(--line);
    }

    .pe5-team__total {
        display: grid;
        gap: var(--space-1);
    }

    .pe5-add .ghost-button {
        width: 100%;
        justify-content: center;
    }

    .pe5-options > .form-grid,
    .pe5-options [data-pe5-slot="options"],
    .pe5-modal__more > .form-grid {
        margin-inline: var(--space-3);
    }
}