/* ============================================================================
 * Design System — Camada de COMPATIBILIDADE de modais legadas
 *
 * Escopo: .ds-scope.modal (modais de formulário/filtro do Bootstrap 3)
 *
 * Objetivo: trazer para o visual do DS as modais que ainda usam o markup
 * legado do Bootstrap (i.modal-icon, .form-group > label, .form-control,
 * .input-group, .btn btn-*), sem precisar reescrever campo a campo cada
 * modal — basta adicionar `ds-scope ds-payment-discharge` (+ `ds-drawer-modal`
 * nos filtros) no container e garantir que ds.css esteja carregado na página.
 *
 * Espelha a filosofia do confirm-modal.css (auto-estiliza inputs crus), mas
 * para os modais de formulário/drawer, não os de confirmação (Modal() JS).
 *
 * As regras EXCLUEM os componentes DS já refatorados (.ds-form-field__*,
 * .ds-button) para não conflitar com as modais já migradas (deliver-receive,
 * filtros das listagens, etc.). O chrome do modal (.modal-header/.modal-title/
 * .close/.modal-body/.modal-footer), select2 e .help-block já são tratados por
 * ds.css — aqui cobrimos o que falta.
 *
 * Depende dos tokens (--ds-*) declarados em .ds-scope no ds.css.
 * ==========================================================================*/

/* ----------------------------------------------------------------------------
 * 1. Header — ícone legado (i.modal-icon) + ordenação robusta
 * O ds.css usa flex no .modal-header; no markup legado o .close vem ANTES do
 * ícone/título, então fixamos a ordem visual via `order` (independe do DOM).
 * --------------------------------------------------------------------------*/
.ds-scope .modal-header .modal-icon,
.ds-scope .modal-header .ds-modal__icon{ order: 1; }
.ds-scope .modal-header .modal-title{ order: 2; }
.ds-scope .modal-header .close{ order: 3; margin-left: auto; }

/* Ícone legado <i class="fa ... modal-icon"> vira a pílula do DS */
.ds-scope .modal-header i.modal-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-color-primary-tint);
    color: var(--ds-color-primary);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
 * 2. Campos de formulário legados (exclui os já DS: .ds-form-field__*)
 * --------------------------------------------------------------------------*/
.ds-scope.modal .form-control:not(.ds-form-field__input):not(.ds-form-field__select):not(.ds-form-field__textarea){
    display: block;
    width: 100%;
    height: auto;
    padding: 8px 12px;
    font-family: var(--ds-font-ui);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-sm);
    box-shadow: none;
    transition: border-color var(--ds-transition-fast),
                box-shadow var(--ds-transition-fast);
}
.ds-scope.modal textarea.form-control:not(.ds-form-field__textarea){
    min-height: 80px;
    resize: vertical;
}
.ds-scope.modal .form-control:not(.ds-form-field__input):not(.ds-form-field__select):not(.ds-form-field__textarea)::placeholder{
    color: var(--ds-color-text-faint);
}
.ds-scope.modal .form-control:not(.ds-form-field__input):not(.ds-form-field__select):not(.ds-form-field__textarea):focus{
    border-color: var(--ds-color-primary);
    outline: none;
    box-shadow: var(--ds-shadow-focus);
}
.ds-scope.modal .form-control[disabled]:not(.ds-form-field__input):not(.ds-form-field__select),
.ds-scope.modal .form-control[readonly]:not(.ds-form-field__input):not(.ds-form-field__select){
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-text-muted);
    cursor: not-allowed;
}

/* Label do campo (.form-group > label) — exclui labels de i-checks/checkbox */
.ds-scope.modal .form-group > label:not(.ds-form-field__label){
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-color-text);
    margin-bottom: 4px;
}
/* Marcador de obrigatório: <small>*</small> ou * dentro do label */
.ds-scope.modal .form-group > label small{
    color: var(--ds-color-danger);
    font-weight: 500;
}
.ds-scope.modal .form-group{ margin-bottom: 16px; }

/* ----------------------------------------------------------------------------
 * 3. input-group (campo com addon, ex.: data com ícone de calendário)
 * --------------------------------------------------------------------------*/
/* :not() dos separadores DS (ds-daterange/ds-quick-filter) — esses são "até"
   sem caixa, já tratados no ds.css; não podem reganhar a borda do Bootstrap. */
.ds-scope.modal .input-group-addon:not(.ds-daterange__sep):not(.ds-quick-filter__sep){
    background: var(--ds-color-surface-alt);
    border: 1px solid var(--ds-color-border-strong);
    color: var(--ds-color-text-muted);
    border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
}
.ds-scope.modal .input-group .form-control:not(.ds-form-field__input){
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
}
/* addon à direita (menos comum) */
.ds-scope.modal .input-group-btn + .input-group-addon:not(.ds-daterange__sep):not(.ds-quick-filter__sep),
.ds-scope.modal .input-group .form-control + .input-group-addon:not(.ds-daterange__sep):not(.ds-quick-filter__sep){
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
}

/* select nativo com seta legada dentro de .select-wrapper — só herda o input */

/* ----------------------------------------------------------------------------
 * 4. Botões (.btn btn-*) — rodapé recebe tratamento completo do DS;
 * demais botões (no corpo) recebem só cor + raio para não distorcer tamanhos.
 * Não afeta .ds-button (nome de classe distinto).
 * --------------------------------------------------------------------------*/
.ds-scope.modal .btn{
    border-radius: var(--ds-radius-md);
    box-shadow: none;
    text-shadow: none;
    transition: background-color var(--ds-transition-fast),
                border-color var(--ds-transition-fast),
                color var(--ds-transition-fast);
}
.ds-scope .modal-footer .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    font-family: var(--ds-font-ui);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
.ds-scope .modal-footer .btn-sm,
.ds-scope .modal-footer .btn-xs{ padding: 6px 12px; font-size: 13px; }

/* Variantes de cor (corpo + rodapé) */
.ds-scope.modal .btn-primary{
    background: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
    color: var(--ds-color-on-primary);
}
.ds-scope.modal .btn-primary:hover,
.ds-scope.modal .btn-primary:focus{
    background: var(--ds-color-primary-hover);
    border-color: var(--ds-color-primary-hover);
    color: var(--ds-color-on-primary);
}
.ds-scope.modal .btn-success{
    background: var(--ds-color-success);
    border-color: var(--ds-color-success);
    color: #fff;
}
.ds-scope.modal .btn-success:hover,
.ds-scope.modal .btn-success:focus{
    background: var(--ds-color-success-strong);
    border-color: var(--ds-color-success-strong);
    color: #fff;
}
.ds-scope.modal .btn-danger{
    background: var(--ds-color-danger);
    border-color: var(--ds-color-danger);
    color: #fff;
}
.ds-scope.modal .btn-danger:hover,
.ds-scope.modal .btn-danger:focus{
    background: var(--ds-color-danger-strong);
    border-color: var(--ds-color-danger-strong);
    color: #fff;
}
.ds-scope.modal .btn-info{
    background: var(--ds-color-info);
    border-color: var(--ds-color-info);
    color: #fff;
}
.ds-scope.modal .btn-info:hover,
.ds-scope.modal .btn-info:focus{
    background: var(--ds-color-info-strong);
    border-color: var(--ds-color-info-strong);
    color: #fff;
}
.ds-scope.modal .btn-warning{
    background: var(--ds-color-warning);
    border-color: var(--ds-color-warning);
    color: #fff;
}
.ds-scope.modal .btn-warning:hover,
.ds-scope.modal .btn-warning:focus{
    background: var(--ds-color-warning-strong);
    border-color: var(--ds-color-warning-strong);
    color: #fff;
}
/* Botão neutro/cancelar (btn-white/btn-default) — secundário neutro */
.ds-scope.modal .btn-white,
.ds-scope.modal .btn-default{
    background: var(--ds-color-surface);
    border-color: var(--ds-color-border-strong);
    color: var(--ds-color-text);
}
.ds-scope.modal .btn-white:hover,
.ds-scope.modal .btn-default:hover,
.ds-scope.modal .btn-white:focus,
.ds-scope.modal .btn-default:focus{
    background: var(--ds-color-surface-alt);
    border-color: var(--ds-color-border-strong);
    color: var(--ds-color-text);
}

/* ----------------------------------------------------------------------------
 * 5. Tabela legada dentro de modal (ex.: histórico do pedido)
 * --------------------------------------------------------------------------*/
.ds-scope.modal .table{
    font-size: 13px;
    color: var(--ds-color-text);
    margin-bottom: 0;
}
.ds-scope.modal .table > thead > tr > th{
    font-weight: 700;
    color: var(--ds-color-primary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ds-color-border);
    padding: 8px 10px;
}
.ds-scope.modal .table > tbody > tr > td{
    border-top: 1px solid var(--ds-color-border);
    padding: 8px 10px;
    vertical-align: middle;
}
.ds-scope.modal .table-striped > tbody > tr:nth-of-type(odd){
    background: var(--ds-color-surface-alt);
}
.ds-scope.modal .table-hover > tbody > tr:hover{
    background: var(--ds-color-primary-tint);
}

/* ----------------------------------------------------------------------------
 * 6. Célula de quantidade do picker de kit (modal "Adicionar Produto")
 * A célula concentra, na mesma linha: o número da qtd + lápis (.edit) e, no
 * modo edição, o input (.edit-input) + cancelar/confirmar (.edit-qtd). No markup
 * legado esses controles ficam colados. Damos um respiro horizontal entre eles
 * sem alterar o markup (usado em order/tasting/budget/transfer, create + edit).
 * Alvos: .btn-round.edit (lápis), .btn-round.edit-qtd (X e ✓), .edit-input.
 * --------------------------------------------------------------------------*/
.ds-scope.modal .btn-round.edit,
.ds-scope.modal .btn-round.edit-qtd,
.ds-scope.modal .edit-input{
    margin-left: 10px;
    vertical-align: middle;
}

/* O input inline de quantidade (.edit-input) NÃO é .form-control nem campo DS,
 * então o foco caía no outline nativo do navegador (anel "solto" em volta do
 * campo, que se sobrepõe/some atrás dos botões vizinhos). Aqui o foco é marcado
 * SOBRE o input (borda + anel INSET), nunca por fora — assim não invade os
 * botões ao lado. Inline e pequeno (sem forçar display:block/width:100%). */
.ds-scope.modal .edit-input{
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-sm);
    box-shadow: none;
    text-align: center;
    transition: border-color var(--ds-transition-fast),
                box-shadow var(--ds-transition-fast);
}
.ds-scope.modal .edit-input:focus{
    border-color: var(--ds-color-primary);
    outline: none;
    /* anel SOBRE o input (inset), não ao redor — 0 spread externo, sem halo */
    box-shadow: inset 0 0 0 1px var(--ds-color-primary);
}

/* ----------------------------------------------------------------------------
 * 7. Reconciliações após a camada passar a valer (.ds-scope.modal)
 * --------------------------------------------------------------------------*/

/* 7a. Campo "Qt." da .add-product-form (adicionar produto ao kit).
 * A form usa layout de tabela (.d-table) com largura própria por célula; o
 * main.css define o campo em 60px. A regra .form-control da seção 2
 * (width:100%/display:block) tem especificidade maior e achatava o "Qt" dentro
 * da célula shrink-to-fit (~26px, sem mostrar o valor). Restaura a largura. */
.ds-scope.modal .add-product-form .d-table-cell:nth-child(2) > .form-control:not(.ds-form-field__input){
    width: 60px;
}

/* 7b. Botões que são <a class="btn"> (ex.: #add-to-kit-table, botões redondos).
 * O DS pinta links do escopo com a cor primária
 * (.ds-scope.ds-payment-discharge a:not(.ds-button)); num <a class="btn-primary">
 * isso deixava texto/ícone na MESMA cor do fundo (navy sobre navy, sem
 * contraste). Reafirma a cor de cada variante com especificidade suficiente. */
.ds-scope.modal a.btn-primary:not(.ds-button){ color: var(--ds-color-on-primary); }
.ds-scope.modal a.btn-success:not(.ds-button),
.ds-scope.modal a.btn-danger:not(.ds-button),
.ds-scope.modal a.btn-info:not(.ds-button),
.ds-scope.modal a.btn-warning:not(.ds-button){ color: #fff; }
.ds-scope.modal a.btn-white:not(.ds-button),
.ds-scope.modal a.btn-default:not(.ds-button){ color: var(--ds-color-text); }

/* 7c. .add-product-form (picker de kit) com table-layout automático: um nome de
 * produto longo no select2 do "Código do Produto" estica a 1ª coluna, empurra as
 * colunas "Qt"/botão para fora da largura do modal e o botão "+" some. Fixa a
 * largura das colunas (mesma estratégia já usada em #form-config no main.css) e
 * faz o select2 truncar com reticências em vez de esticar. */
.ds-scope.modal .add-product-form{
    table-layout: fixed;
    width: 100%;
}
.ds-scope.modal .add-product-form .d-table-cell:nth-child(2){ width: 76px; }
.ds-scope.modal .add-product-form .d-table-cell:nth-child(3){ width: 52px; }
.ds-scope.modal .add-product-form .select2-container{
    width: 100% !important;
    min-width: 0 !important;
}
.ds-scope.modal .add-product-form .select2-selection__rendered{
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 20px;
}