/* ============================================================
   TMS FORMS — Padronização global de formulários
   Carregado após tms-ui-standardization, antes de emitente_theme
   ============================================================ */

/* ── Variáveis de formulário ─────────────────────────────── */
:root {
    --form-label-size:      0.75rem;
    --form-label-weight:    600;
    --form-label-color:     var(--gray-600, #475569);
    --form-label-mb:        0.3rem;
    --form-input-height:    2.25rem;
    --form-input-padding-y: 0.4rem;
    --form-input-padding-x: 0.7rem;
    --form-input-size:      0.8375rem;
    --form-input-radius:    0.5rem;
    --form-input-border:    var(--gray-300, #d1d5db);
    --form-input-bg:        #fff;
    --form-input-color:     var(--gray-800, #1e293b);
    --form-focus-ring:      rgba(37, 99, 235, 0.18);
    --form-focus-border:    var(--tms-cor-botao, var(--primary-color, #2563eb));
    --form-row-gap-x:       0.75rem;
    --form-row-gap-y:       0.875rem;
    --form-section-gap:     1.25rem;
}

/* ── Labels ──────────────────────────────────────────────── */
.form-label,
label.form-label {
    font-size:     var(--form-label-size) !important;
    font-weight:   var(--form-label-weight) !important;
    color:         var(--form-label-color) !important;
    margin-bottom: var(--form-label-mb) !important;
    line-height:   1.35 !important;
    display:       block;
}

/* Labels dentro de filter form ficam menores e uppercase — mantém contexto próprio */
.tms-filter-form .form-label {
    font-size:  0.68rem !important;
    color:      var(--gray-500, #64748b) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem !important;
}

/* Labels de checkbox/radio — inline, sem margin alterada */
.form-check-label {
    font-size:   var(--form-input-size) !important;
    font-weight: 500 !important;
    color:       var(--gray-700, #374151) !important;
    margin-bottom: 0 !important;
    cursor: pointer;
}

/* ── Inputs, selects, textareas ──────────────────────────── */
.form-control,
.form-select {
    min-height:    var(--form-input-height) !important;
    padding:       var(--form-input-padding-y) var(--form-input-padding-x) !important;
    font-size:     var(--form-input-size) !important;
    font-weight:   400;
    color:         var(--form-input-color) !important;
    background:    var(--form-input-bg) !important;
    border:        1px solid var(--form-input-border) !important;
    border-radius: var(--form-input-radius) !important;
    transition:    border-color 0.18s ease, box-shadow 0.18s ease !important;
    line-height:   1.5;
}

/* Select: padding-end para a seta nativa */
.form-select {
    padding-right: 2.25rem !important;
    background-position: right 0.65rem center !important;
    background-size: 14px 10px !important;
}

/* Textarea — não fixa altura */
textarea.form-control {
    min-height:  5rem !important;
    resize:      vertical;
    line-height: 1.55;
}

/* Textarea pequeno (ex.: observações inline) */
textarea.form-control.form-control-sm {
    min-height: 3.5rem !important;
}

/* Input color picker */
.form-control-color {
    min-height:    2.5rem !important;
    padding:       0.25rem !important;
    border-radius: var(--form-input-radius) !important;
    border:        1.5px solid var(--form-input-border) !important;
    cursor:        pointer;
    width:         100%;
}

/* ── Estados de foco ─────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--form-focus-border) !important;
    box-shadow:   0 0 0 3px var(--form-focus-ring) !important;
    outline:      none !important;
}

/* ── Estados de validação ────────────────────────────────── */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--error-color, #ef4444) !important;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16) !important;
}
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success-color, #10b981) !important;
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16) !important;
}
.invalid-feedback {
    font-size: 0.72rem !important;
    margin-top: 0.2rem !important;
    color: var(--error-color, #ef4444) !important;
}

/* ── Inputs disabled / readonly ──────────────────────────── */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background: var(--gray-50, #f8fafc) !important;
    color:      var(--gray-500, #64748b) !important;
    cursor:     not-allowed;
    opacity:    1;
}

/* ── Espaçamento de linhas em contextos de formulário ────── */

/* Rows dentro de modais, cards de formulário e abas — gutter vertical padrão */
.modal-body .row,
.tms-form-card .row,
.tab-content .row {
    --bs-gutter-x: var(--form-row-gap-x);
    --bs-gutter-y: var(--form-row-gap-y);
}

/* Exceção: rows com g-* explícito respeitam seu próprio gutter */
.modal-body .row.g-2,
.tms-form-card .row.g-2,
.tab-content .row.g-2 { --bs-gutter-x: 0.5rem;  --bs-gutter-y: 0.5rem;  }

.modal-body .row.g-3,
.tms-form-card .row.g-3,
.tab-content .row.g-3 { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }

.modal-body .row.g-4,
.tms-form-card .row.g-4,
.tab-content .row.g-4 { --bs-gutter-x: 1rem;    --bs-gutter-y: 1rem;    }

/* ── Grupos de formulário: cols com mb-* dentro de rows com gutter ── */
/* Cols que carregam mb-3/mb-4 como classe única — o gutter já garante espaço */
.modal-body .row.g-3 > [class*="col-"].mb-3,
.modal-body .row.g-3 > [class*="col-"].mb-4,
.modal-body .row.g-4 > [class*="col-"].mb-3,
.modal-body .row.g-4 > [class*="col-"].mb-4 {
    margin-bottom: 0 !important;
}

/* ── Input groups ────────────────────────────────────────── */
.input-group .form-control,
.input-group .form-select {
    border-radius: 0 !important;
}
.input-group .form-control:first-child,
.input-group .form-select:first-child {
    border-radius: var(--form-input-radius) 0 0 var(--form-input-radius) !important;
}
.input-group .form-control:last-child,
.input-group .form-select:last-child {
    border-radius: 0 var(--form-input-radius) var(--form-input-radius) 0 !important;
}
.input-group-text {
    font-size:     var(--form-input-size) !important;
    padding:       var(--form-input-padding-y) var(--form-input-padding-x) !important;
    background:    var(--gray-50, #f8fafc) !important;
    border:        1px solid var(--form-input-border) !important;
    color:         var(--gray-500, #64748b) !important;
    min-height:    var(--form-input-height) !important;
}

/* ── Checkboxes e radios ─────────────────────────────────── */
.form-check {
    padding-left: 1.6rem;
    margin-bottom: 0.35rem;
}
.form-check-input {
    width:         1rem !important;
    height:        1rem !important;
    margin-top:    0.2rem;
    border:        1.5px solid var(--form-input-border) !important;
    border-radius: 0.25rem !important;
    cursor:        pointer;
    transition:    border-color 0.18s, background-color 0.18s, box-shadow 0.18s;
}
.form-check-input:checked {
    background-color: var(--form-focus-border) !important;
    border-color:     var(--form-focus-border) !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--form-focus-ring) !important;
    outline:    none !important;
}
.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

/* ── Seções de formulário (cards internos) ───────────────── */
.tms-form-section {
    margin-bottom: var(--form-section-gap);
}
.tms-form-section:last-child {
    margin-bottom: 0;
}
.tms-form-section-title {
    font-size:      0.68rem;
    font-weight:    700;
    color:          var(--gray-500, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding-bottom: 0.5rem;
    border-bottom:  1px solid var(--gray-200, #e5e7eb);
    margin-bottom:  0.75rem;
}

/* ── Formulários em modais ───────────────────────────────── */
.tms-standard-modal .modal-body {
    padding: 1.1rem 1.25rem !important;
}

.tms-standard-modal .modal-body .form-label {
    font-size:      var(--form-label-size) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight:    var(--form-label-weight) !important;
    color:          var(--form-label-color) !important;
    margin-bottom:  var(--form-label-mb) !important;
}

/* ── Formulários de página inteira ───────────────────────── */
.tms-form-card {
    border:        1px solid var(--gray-200, #e5e7eb) !important;
    border-radius: 0.875rem !important;
    background:    #fff !important;
    padding:       1.5rem !important;
}

/* ── Filtros (barra de pesquisa) ─────────────────────────── */
.tms-filter-form {
    background:    #fff;
    border:        1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.75rem;
    padding:       0.875rem 1rem;
}
.tms-filter-form .form-control,
.tms-filter-form .form-select {
    min-height: 2.1rem !important;
    padding:    0.3rem 0.65rem !important;
    font-size:  0.8125rem !important;
}

/* ── Formulários de configurações / emitentes ────────────── */
.emitente-pane-dados .form-label,
.emitente-pane-financeiro .form-label,
.emitente-pane-fiscal .form-label,
.emitente-pane-logos .form-label {
    color: var(--gray-600, #475569) !important;
}

/* ── Campos pequenos (sm) ────────────────────────────────── */
.form-control-sm,
.form-select-sm {
    min-height:    1.875rem !important;
    padding:       0.25rem 0.55rem !important;
    font-size:     0.78rem !important;
    border-radius: 0.375rem !important;
}

/* ── Texto de ajuda (form-text) ──────────────────────────── */
.form-text {
    font-size:  0.7rem !important;
    color:      var(--gray-400, #94a3b8) !important;
    margin-top: 0.2rem !important;
}

/* ── Responsive: telas pequenas ──────────────────────────── */
@media (max-width: 575.98px) {
    :root {
        --form-row-gap-x: 0.5rem;
        --form-row-gap-y: 0.625rem;
    }

    .tms-form-card {
        padding: 1rem !important;
    }

    .tms-standard-modal .modal-body {
        padding: 0.875rem 1rem !important;
    }
}

@media (max-width: 767.98px) {
    .tms-filter-form {
        padding: 0.625rem 0.75rem;
    }
}