/*
 * CAMADA 6 — COMPONENTES · FORMULÁRIOS
 *
 * Conteúdo permitido: tudo que é campo de formulário, em qualquer página —
 * os campos do Bootstrap (.form-control, .form-group, .has-error), os
 * controles nativos, o skin do ion.rangeSlider e o assistente do jQuery Steps
 * (.wizard), além dos blocos de formulário criados pelo Mafmine.
 *
 * Regra prática: se a resposta para "o que é isso?" for "um campo, um rótulo
 * de campo ou o container de um passo do formulário", é aqui.
 * Campos que só existem dentro de um módulo (ex.: .esg-table-input) ficam no
 * arquivo daquele módulo.
 */


/* ==========================================================================
   1. CAMPOS DO BOOTSTRAP
   ========================================================================== */

.form-control {
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    background-color: var(--color-white);
}

.form-control:disabled {
    border-color: var(--color-border);
    color: var(--color-muted);
    background-color: var(--color-surface-muted);
    cursor: not-allowed;
    opacity: 1;
}

.form-control:focus {
    border-color: var(--color-info) !important;
    outline: var(--outline-focus);
    outline-offset: 1px;
    box-shadow: var(--shadow-sm);
}

/* Estados de validação: js/page.login.js e js/page.criarNovo*.js aplicam as classes. */
.has-success :is(.control-label, .checkbox) {
    color: var(--color-success);
}

.has-error :is(.control-label, .checkbox) {
    color: var(--color-danger);
}

.has-success .form-control {
    border-color: var(--color-success);
}

.has-error .form-control {
    border-color: var(--color-danger);
}

.has-success .form-control:focus {
    border-color: var(--color-success);
    box-shadow: var(--shadow-sm);
}

.has-error .form-control:focus {
    border-color: var(--color-danger);
    box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   2. CONTROLES NATIVOS
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-secondary);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: var(--outline-focus);
    outline-offset: 2px;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    accent-color: var(--color-muted);
}


/* ==========================================================================
   3. BLOCOS DE FORMULÁRIO DO MAFMINE
   ========================================================================== */

.spaced-form-group {
    margin-top: 10px;
}

.label-with-help-tool {
    padding-bottom: 5px;
}

.checkbox-wrapper {
    display: flex;
    flex-direction: column;
}

.checkbox-wrapper input {
    margin: 10px 5px 10px 0;
}

.checkbox-wrapper span {
    display: flex;
    align-items: center;
}

.csv-values {
    min-height: 400px;
    height: 300px;
}

/* Editor de fórmulas: "variável = expressão" em três colunas coladas. */
.formula-variable-column {
    padding-right: 0;
}

.formula-equals-column {
    margin: 0;
    padding: 0;
    line-height: 30px;
    text-align: center;
}

.formula-expression-column {
    padding: 0;
}

.formula,
.variavel {
    font-size: 9px;
}

.valor-variavel {
    color: var(--color-danger);
}


/* ==========================================================================
   4. ION RANGE SLIDER — o skin usado pelo Mafmine é o "flat"
   ========================================================================== */

.irs--flat .irs-line,
.irs--flat .irs-shadow,
.irs--flat .irs-grid-pol {
    background-color: var(--color-border);
}

.irs--flat .irs-bar {
    background-color: var(--color-range-slider);
}

.irs--flat .irs-handle > i:first-child {
    background-color: var(--color-range-slider);
}

.irs--flat .irs-handle.state_hover > i:first-child,
.irs--flat .irs-handle:hover > i:first-child {
    background-color: var(--color-range-slider);
}

.irs--flat .irs-min,
.irs--flat .irs-max {
    color: var(--color-primary);
    background-color: var(--color-surface-muted);
}

.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
    color: var(--color-white);
    background-color: var(--color-range-slider);
}

.irs--flat .irs-from::before,
.irs--flat .irs-to::before,
.irs--flat .irs-single::before {
    border-top-color: var(--color-range-slider);
}

.irs--flat .irs-grid-text {
    color: var(--color-muted);
}

.irs-disabled {
    opacity: .55;
}


/* ==========================================================================
   5. ASSISTENTE DE PASSOS (jQuery Steps)
   ========================================================================== */

/* O #form é o elemento que o jQuery Steps transforma em .wizard. */
#form {
    overflow: visible !important;
}

.wizard > .content {
    overflow: visible !important;
}

/*
 * Cores dos passos: só no perfil "mafmine" de js/themes.js.
 * Este bloco vem ANTES das regras de .disabled/.error de propósito: o
 * jquery.steps marca o passo atual com .error na validação, e nesse caso o
 * vermelho de .error é que deve vencer — por ordem, já que a especificidade
 * das duas regras é a mesma.
 */
@scope (:root[data-theme="mafmine"]) {

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active {
    color: var(--color-white);
    background-color: var(--color-secondary);
}

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
    color: var(--color-white);
    background-color: var(--color-secondary);
}

}

.wizard > .content {
    border: var(--border-thin);
    border-color: var(--color-fieldset-ibox-frame);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 2px 6px var(--color-fieldset-ibox-frame);
}

.wizard > .content > .body {
    box-sizing: border-box;
    border: var(--border-thin);
    border-color: var(--color-fieldset-ibox-frame);
    border-left: 2px solid var(--color-fieldset-ibox-frame);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    background: var(--gradient-card);
}

.wizard > .content > .body h2,
.wizard > .content > .body h3,
.wizard > .content > .body h4,
.wizard > .content > .body label {
    color: var(--color-primary);
}

.wizard > .content > .body input,
.wizard > .content > .body select,
.wizard > .content > .body textarea {
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    background-color: var(--color-white);
}

.wizard > .content > .body :is(input, select, textarea):disabled {
    border-color: var(--color-border);
    color: var(--color-muted);
    background-color: var(--color-surface-muted);
    cursor: not-allowed;
    opacity: 1;
}

.wizard > .content > .body input:focus,
.wizard > .content > .body select:focus,
.wizard > .content > .body textarea:focus {
    border-color: var(--color-info) !important;
    outline: var(--outline-focus);
    outline-offset: 1px;
    box-shadow: var(--shadow-sm);
}

.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active {
    box-sizing: border-box;
    border: var(--border-thin-transparent);
}

.wizard > .steps a:focus:not(:focus-visible),
.wizard > .actions a:focus:not(:focus-visible) {
    outline: none;
}

.wizard > .steps a:focus-visible,
.wizard > .actions a:focus-visible {
    outline: var(--outline-focus);
    outline-offset: 2px;
}

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active,
.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
    border: var(--border-thin);
    color: var(--color-muted);
    background: var(--color-surface-muted);
}

.wizard > .steps .current a,
.wizard > .steps .done a,
.wizard > .steps .error a,
.wizard > .actions a {
    box-shadow: var(--shadow-sm);
}

.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active {
    border-color: var(--color-danger);
    color: var(--color-white);
    background: var(--color-danger);
}


/* ==========================================================================
   6. MOBILE
   ========================================================================== */

@media (max-width: 991px) {

    .form-group {
        margin-bottom: 14px;
    }

    /*
     * 16px é o mínimo que impede o Safari/iOS de dar zoom automático ao focar o
     * campo — abaixo disso a página inteira salta de escala a cada toque.
     */
    .form-control,
    .wizard > .content > .body input,
    .wizard > .content > .body select,
    .wizard > .content > .body textarea {
        font-size: 16px;
    }

    .wizard > .content > .body label {
        font-size: 13px;
    }

    .wizard > .content > .body h1 {
        font-size: 20px;
        line-height: 1.25;
    }

    /* -- No máximo 2 passos por linha -------------------------------------- */

    .wizard > .steps > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .wizard > .steps > ul > li {
        display: flex;
        width: 50%;
        float: none;
    }

    .wizard > .steps > ul > li > a,
    .wizard > .steps > ul > li > a:hover,
    .wizard > .steps > ul > li > a:active {
        display: flex;
        width: auto;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 2px;
        align-items: center;
        justify-content: flex-start;
        margin: 0 4px 8px;
        padding: 10px 8px;
        font-size: 13px;
        line-height: 1.25;
        overflow-wrap: anywhere;
        text-align: center;
        white-space: normal;
    }

    .wizard > .steps .number {
        font-size: 1em;
        font-weight: 700;
        opacity: .85;
    }

    /*
     * O corpo do wizard é position:absolute com height:95% sobre um .content de
     * min-height:35em. Em telas estreitas o conteúdo cresce muito além disso e
     * passa por cima dos botões Anterior/Próximo/Salvar. Em mobile ele volta ao
     * fluxo normal e o container cresce junto. Seguro porque module.steps.js usa
     * o transitionEffect padrão (none), que não posiciona o corpo por JS.
     */
    .wizard > .content {
        min-height: 0;
        margin: .5em 0;
    }

    .wizard > .content > .body {
        position: relative;
        width: auto;
        height: auto;
        float: none;
        padding: 14px;
    }

    .wizard > .actions > ul {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .wizard > .actions > ul > li {
        float: none;
        margin: 0;
    }

    .wizard > .actions a {
        padding: 10px 16px;
    }
}