/* ============================================================================
 * Petite Fleur — Design System v0.1
 * ============================================================================
 * CSS puro,
sem build. Editar este arquivo diretamente — recarrega no browser.
 * Tudo escopado em .ds-scope para conviver com Bootstrap 3 legado.
 * Identidade administrativa: base branca/cinza,
primário índigo e semânticas
 * claras.
 * Carregado pela view via @section('styles'):
 *   <link rel="stylesheet" href="{{ asset('css/ds/ds.css') }}?v=1">
 * ============================================================================
 */

/* ----------------------------------------------------------------------------
 * 1. TOKENS — CSS custom properties dentro de .ds-scope
 * --------------------------------------------------------------------------*/
.ds-scope{
    /* Cores — Brand */
    --ds-color-primary:        #1B3A5C;
    --ds-color-primary-hover:  #0D1F33;
    --ds-color-primary-tint:   #E6ECF3;
    --ds-color-primary-soft:   #F2F5F9;
    --ds-color-on-primary:     #FFFFFF;

    /* Cores — Neutros */
    --ds-color-bg:             #FFFFFF;
    --ds-color-surface:        #FFFFFF;
    --ds-color-surface-tabs:   #FFFFFF;
    /* Os dois beges abaixo tem hoje o MESMO valor, mas papeis diferentes:
       -header e o cabecalho de card; -alt e toda superficie auxiliar (cabecalho
       de tabela, quadro de conversao, faixa de abas, linha zebrada, rodape de
       card/modal, campo desabilitado). Separados para poderem divergir. */
    --ds-color-surface-header: #F8F5F3;
    --ds-color-surface-alt:    #F8F5F3;
    --ds-color-surface-hover:  #F6F8FC;
    --ds-color-border:         #E6EAF2;
    --ds-color-border-strong:  #D6DCE8;
    /* Equivalente bege do -strong, para borda que precisa contrastar com fundo
       bege ou branco sem puxar para o azul (ex.: o trilho dos blocos de kit). */
    --ds-color-border-beige:   #DED4CC;
    --ds-color-text:           #0F1F3A;
    --ds-color-text-muted:     #64748B;
    --ds-color-text-faint:     #9AA7BC;

    /* Cores — Semânticas (com tint para ícone/badge) */
    --ds-color-danger:         #EF4444;
    --ds-color-danger-strong:  #DC2626;
    --ds-color-danger-tint:    #FEE2E2;
    --ds-color-warning:        #F59E0B;
    --ds-color-warning-strong: #D97706;
    --ds-color-warning-tint:   #FEF3C7;
    --ds-color-warning-dark:        #C2410C;
    --ds-color-warning-dark-strong: #9A3412;
    --ds-color-warning-dark-tint:   #FED7AA;
    --ds-color-warning-deep-tint:   #FDE68A;
    --ds-color-warning-deep-strong: #78350F;
    --ds-color-success:        #22C55E;
    --ds-color-success-strong: #16A34A;
    --ds-color-success-tint:   #DCFCE7;
    --ds-color-info:           #3B82F6;
    --ds-color-info-strong:    #2563EB;
    --ds-color-info-tint:      #DBEAFE;

    /* Tipografia */
    --ds-font-display:         "Lato", "Gotham", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-font-ui:              "Lato", "Gotham", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Raios */
    --ds-radius-sm:            6px;
    --ds-radius-md:            8px;
    --ds-radius-lg:            10px;
    --ds-radius-pill:          999px;

    /* Sombras */
    --ds-shadow-sm:            0 1px 2px rgba(15, 31, 58, .04);
    --ds-shadow-md:            0 8px 24px rgba(15, 31, 58, .06);
    --ds-shadow-lg:            0 20px 48px rgba(15, 31, 58, .14);
    --ds-shadow-focus:         0 0 0 3px rgba(91, 92, 226, .18);

    /* Transições */
    --ds-transition-fast:      120ms ease-out;
    --ds-transition-base:      180ms ease-out;
    --ds-transition-slow:      280ms ease-out;
}

/* ----------------------------------------------------------------------------
 * 2. RESET ESCOPADO
 * --------------------------------------------------------------------------*/
.ds-scope{
    font-family: var(--ds-font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ds-color-text);
}
.ds-scope *,
.ds-scope *::before,
.ds-scope *::after{ box-sizing: border-box; }

.ds-scope h1,
.ds-scope h2,
.ds-scope h3,
.ds-scope h4,
.ds-scope h5,
.ds-scope h6{
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ds-color-text);
}

.ds-scope p{ margin: 0 0 12px; }

.ds-scope a{
    color: var(--ds-color-primary);
    text-decoration: none;
    transition: color var(--ds-transition-fast);
}
.ds-scope a:hover{
    color: var(--ds-color-primary-hover);
    text-decoration: underline;
}

.ds-scope button{
    font-family: inherit;
    cursor: pointer;
}

.ds-scope :focus-visible{
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
    box-shadow: var(--ds-shadow-focus);
}

/* ----------------------------------------------------------------------------
 * 3. TIPOGRAFIA — utilitários
 * --------------------------------------------------------------------------*/
.ds-scope .ds-display{
    font-family: var(--ds-font-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.ds-scope .ds-display--xl{ font-size: 32px; }
.ds-scope .ds-display--lg{ font-size: 28px; }
.ds-scope .ds-display--md{ font-size: 24px; }

.ds-scope .ds-text--xs{ font-size: 12px; }
.ds-scope .ds-text--sm{ font-size: 13px; }
.ds-scope .ds-text--md{ font-size: 14px; }
.ds-scope .ds-text--lg{ font-size: 16px; }
.ds-scope .ds-text--muted{ color: var(--ds-color-text-muted); }
.ds-scope .ds-text--faint{ color: var(--ds-color-text-faint); }
.ds-scope .ds-text--bold{ font-weight: 700; }
.ds-scope .ds-text--medium{ font-weight: 500; }
.ds-scope .ds-text--right{ text-align: right; }
.ds-scope .ds-text--center{ text-align: center; }
.ds-scope .ds-text--nowrap{ white-space: nowrap; }

/* ----------------------------------------------------------------------------
 * 4. UTILITÁRIOS — espaçamento e flex
 * --------------------------------------------------------------------------*/
.ds-scope .ds-stack > * + *{ margin-top: 16px; }
.ds-scope .ds-stack--sm > * + *{ margin-top: 8px; }
.ds-scope .ds-stack--lg > * + *{ margin-top: 24px; }

.ds-scope .ds-mt-0{ margin-top: 0; }
.ds-scope .ds-mt-1{ margin-top: 4px; }
.ds-scope .ds-mt-2{ margin-top: 8px; }
.ds-scope .ds-mt-3{ margin-top: 12px; }
.ds-scope .ds-mt-4{ margin-top: 16px; }
.ds-scope .ds-mt-6{ margin-top: 24px; }
.ds-scope .ds-mb-0{ margin-bottom: 0; }
.ds-scope .ds-mb-2{ margin-bottom: 8px; }
.ds-scope .ds-mb-3{ margin-bottom: 12px; }
.ds-scope .ds-mb-4{ margin-bottom: 16px; }
.ds-scope .ds-mb-6{ margin-bottom: 24px; }

.ds-scope .ds-flex{ display: flex; }
.ds-scope .ds-flex--col{ flex-direction: column; }
.ds-scope .ds-flex--wrap{ flex-wrap: wrap; }
.ds-scope .ds-flex--center{ align-items: center; justify-content: center; }
.ds-scope .ds-flex--between{ justify-content: space-between; }
.ds-scope .ds-flex--end{ justify-content: flex-end; }
.ds-scope .ds-flex--ai-center{ align-items: center; }
.ds-scope .ds-flex--ai-end{ align-items: flex-end; }
.ds-scope .ds-gap-1{ gap: 4px; }
.ds-scope .ds-gap-2{ gap: 8px; }
.ds-scope .ds-gap-3{ gap: 12px; }
.ds-scope .ds-gap-4{ gap: 16px; }
.ds-scope .ds-gap-6{ gap: 24px; }
.ds-scope .ds-grow-1{ flex: 1 1 auto; }
.ds-scope .ds-shrink-0{ flex-shrink: 0; }

/* ----------------------------------------------------------------------------
 * 5. BUTTON
 * --------------------------------------------------------------------------*/
.ds-scope .ds-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    font-family: var(--ds-font-ui);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-color-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ds-transition-fast),
                border-color var(--ds-transition-fast),
                color var(--ds-transition-fast),
                box-shadow var(--ds-transition-fast);
    user-select: none;
}
.ds-scope .ds-button:hover{ text-decoration: none; }
.ds-scope .ds-button[disabled],
.ds-scope .ds-button.ds-is-disabled{
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
.ds-scope .ds-button__icon{
    display: inline-flex;
    align-items: center;
    font-size: 1em;
}

.ds-scope .ds-button--primary{
    background: var(--ds-color-primary);
    color: var(--ds-color-on-primary);
    border-color: var(--ds-color-primary);
}
.ds-scope .ds-button--primary:hover{
    background: var(--ds-color-primary-hover);
    border-color: var(--ds-color-primary-hover);
    color: var(--ds-color-on-primary);
}

.ds-scope .ds-button--secondary{
    background: transparent;
    color: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
}
.ds-scope .ds-button--secondary:hover{
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-primary-hover);
}

.ds-scope .ds-button--ghost{
    background: transparent;
    color: var(--ds-color-text-muted);
    border-color: transparent;
}
.ds-scope .ds-button--ghost:hover{
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-text);
}
.ds-scope .ds-button--ghost.ds-button--danger-on-hover:hover{
    background: var(--ds-color-danger-tint);
    color: var(--ds-color-danger-strong);
}

.ds-scope .ds-button--danger{
    background: var(--ds-color-danger);
    color: #fff;
    border-color: var(--ds-color-danger);
}
.ds-scope .ds-button--danger:hover{
    background: var(--ds-color-danger-strong);
    border-color: var(--ds-color-danger-strong);
}

/* Ação reversível/de atenção — ex.: "Desaprovar" no detalhe do pedido
   (equivalente ao `btn btn-warning` do legado). Única sólida sem texto branco:
   o âmbar é claro demais. Usa o azul da marca (mesmo do --secondary). */
.ds-scope .ds-button--warning{
    background: var(--ds-color-warning);
    color: var(--ds-color-primary);
    border-color: var(--ds-color-warning);
}
.ds-scope .ds-button--warning:hover{
    background: var(--ds-color-warning-strong);
    border-color: var(--ds-color-warning-strong);
    color: var(--ds-color-primary);
}

.ds-scope .ds-button--success{
    background: var(--ds-color-success);
    color: #fff;
    border-color: var(--ds-color-success);
}
.ds-scope .ds-button--success:hover{
    background: var(--ds-color-success-strong);
    border-color: var(--ds-color-success-strong);
}

.ds-scope .ds-button--sm{
    padding: 4px 12px;
    font-size: 13px;
    border-radius: var(--ds-radius-sm);
}
.ds-scope .ds-button--lg{
    padding: 12px 20px;
    font-size: 16px;
}

/* Segmented control (seletor de modo) — ex.: Aprovado | Aberto.
   Trilho com borda e item ativo destacado como "pílula" branca. */
.ds-scope .ds-segmented{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    /* Trilho tintado para separar da página e destacar a "pílula" ativa branca */
    background: var(--ds-color-primary-tint);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-pill);
}
.ds-scope .ds-segmented__item{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    border: 0;
    background: transparent;
    color: var(--ds-color-text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--ds-radius-pill);
    cursor: pointer;
    transition: color var(--ds-transition-fast), background var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}
.ds-scope .ds-segmented__item:hover,
.ds-scope .ds-segmented__item:focus{
    color: var(--ds-color-text);
    text-decoration: none;
}
.ds-scope .ds-segmented__item--active,
.ds-scope .ds-segmented__item--active:hover,
.ds-scope .ds-segmented__item--active:focus{
    background: var(--ds-color-surface);
    color: var(--ds-color-primary);
    /* Borda hairline (via ring) + leve elevação para a pílula ativa saltar do trilho */
    box-shadow: 0 0 0 1px var(--ds-color-border-strong), var(--ds-shadow-sm);
}

/* Legenda de contagem sob o segmented control (ex.: "142 pedidos · 380 parcelas").
   Métrica secundária, sempre visível e alinhada ao seletor. */
.ds-scope .ds-segmented-caption{
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--ds-color-text-muted);
    white-space: nowrap;
}
.ds-scope .ds-segmented-caption strong{
    font-weight: 700;
    color: var(--ds-color-text);
}
.ds-scope .ds-segmented-caption__sep{
    margin: 0 4px;
    color: var(--ds-color-border-strong);
}
.ds-scope .ds-button--icon-only{
    padding: 8px;
    width: 36px;
    height: 36px;
}

/* ----------------------------------------------------------------------------
 * 6. CARD (substitui .ibox)
 * --------------------------------------------------------------------------*/
.ds-scope .ds-card{
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
    margin-bottom: 22px;
}
.ds-scope .ds-card__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-color-border);
    background-color: var(--ds-color-surface-header);
}
/* EXCECAO: quando o cabecalho do card encosta direto na tabela, os dois beges
   (o do header e o do thead) viram um bloco unico e o titulo se perde dentro
   dele. Nesses casos o header volta ao branco - o contraste e o que separa o
   titulo dos nomes de coluna. Acontece nos detalhes de pedido, degustacao,
   orcamento e transferencia, e na lista de item de custo. */
.ds-scope .ds-card__header:has(+ .ds-data-table-wrap),
.ds-scope .ds-card__header:has(+ .table-responsive),
.ds-scope .ds-card__header:has(+ table){
    background-color: var(--ds-color-surface);
}
.ds-scope .ds-card__title{
    font-family: var(--ds-font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--ds-color-text);
    margin: 0;
}
/* Ações do cabeçalho do card (à direita do título). NÃO usar .ds-row-actions aqui:
   aquela é a barra de ícones das linhas de tabela e vem em cinza-claro de propósito,
   o que apaga um botão com rótulo. */
.ds-scope .ds-card__actions{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ds-scope .ds-card__body{ padding: 20px; }
.ds-scope .ds-card__body--flush{ padding: 0; }
.ds-scope .ds-card__footer{
    padding: 16px 20px;
    border-top: 1px solid var(--ds-color-border);
    background: var(--ds-color-surface-alt);
}

/* Card denso — opt-in. Reduz espaçamentos internos para formulários compactos. */
.ds-scope .ds-card--dense > .ds-card__header{ padding: 12px 16px; }
.ds-scope .ds-card--dense > .ds-card__body{ padding: 14px 16px; }
.ds-scope .ds-card--dense .ds-form-field{ margin-bottom: 8px; }
.ds-scope .ds-card--dense .ds-form-grid{ gap: 4px 12px; }
.ds-scope .ds-card--dense .ds-form-field__static{ padding: 0 0 4px; min-height: 24px; }

/* ----------------------------------------------------------------------------
 * 7. PAGE HEADER
 * --------------------------------------------------------------------------*/
.ds-scope .ds-page-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 0;
    margin-bottom: 12px;
}
.ds-scope .ds-page-header__main{
    flex: 1 1 auto;
    min-width: 0;
}
.ds-scope .ds-page-header__title-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
.ds-scope .ds-page-header__title{
    font-family: var(--ds-font-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ds-color-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.ds-scope .ds-page-header__title-suffix{
    display: inline-flex;
    align-items: center;
}
.ds-scope .ds-page-header__breadcrumb{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    color: var(--ds-color-text-faint);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-scope .ds-page-header__breadcrumb li + li::before{
    content: "›";
    margin: 0 8px 0 0;
    color: var(--ds-color-text-faint);
}
.ds-scope .ds-page-header__breadcrumb a{ color: var(--ds-color-text-muted); }
.ds-scope .ds-page-header__breadcrumb a:hover{ color: var(--ds-color-primary); }
.ds-scope .ds-page-header__actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .ds-scope .ds-page-header{
        flex-direction: column;
        align-items: stretch;
    }
}

/* ----------------------------------------------------------------------------
 * 8. BADGE
 * --------------------------------------------------------------------------*/
.ds-scope .ds-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 100px;
    white-space: nowrap;
}
.ds-scope .ds-badge__icon{ font-size: 0.85em; }

.ds-scope .ds-badge--neutral{
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-text-muted);
    border: 1px solid var(--ds-color-border);
}
.ds-scope .ds-badge--success{ background: var(--ds-color-success-tint); color: var(--ds-color-success-strong); }
.ds-scope .ds-badge--warning{ background: var(--ds-color-warning-tint); color: var(--ds-color-warning-strong); }
.ds-scope .ds-badge--danger{ background: var(--ds-color-danger-tint);  color: var(--ds-color-danger-strong);  }
.ds-scope .ds-badge--info{ background: var(--ds-color-info-tint);    color: var(--ds-color-info-strong);    }

.ds-scope .ds-badge--tag-avulso{ background: #EAF3DE; color: #3B6D11; }
.ds-scope .ds-badge--tag-evento{ background: #E6F1FB; color: #185FA5; }
.ds-scope .ds-badge--tag-corporativo{ background: #FAEEDA; color: #633806; }
.ds-scope .ds-badge--tag-degustacao{ background: #EFE5E8; color: #6B4452; }
.ds-scope .ds-badge--tag-transferencia{ background: #ECEAF3; color: #4A4566; }
.ds-scope .ds-badge--tag-epoc{ background: #DFF1F0; color: #0F6E68; }

.ds-scope .ds-badge--tag-avulso::before,
.ds-scope .ds-badge--tag-evento::before,
.ds-scope .ds-badge--tag-corporativo::before,
.ds-scope .ds-badge--tag-degustacao::before,
.ds-scope .ds-badge--tag-transferencia::before,
.ds-scope .ds-badge--tag-epoc::before{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ds-scope .ds-badge--solid.ds-badge--success{ background: var(--ds-color-success); color: #fff; }
.ds-scope .ds-badge--solid.ds-badge--warning{ background: var(--ds-color-warning); color: #fff; }
.ds-scope .ds-badge--solid.ds-badge--danger{ background: var(--ds-color-danger);  color: #fff; }
.ds-scope .ds-badge--solid.ds-badge--info{ background: var(--ds-color-info);    color: #fff; }

/* ----------------------------------------------------------------------------
 * 9. KPI GRID — cards de indicador
 * --------------------------------------------------------------------------*/
.ds-scope .ds-kpi-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ds-scope .ds-kpi{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border);
    border-left: 4px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-sm);
    transition: box-shadow var(--ds-transition-fast),
                transform var(--ds-transition-fast);
}
.ds-scope .ds-kpi:hover{
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-1px);
}
.ds-scope .ds-kpi__icon{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-pill);
    font-size: 16px;
}
.ds-scope .ds-kpi__main{
    flex: 1 1 auto;
    min-width: 0;
}
.ds-scope .ds-kpi__label{
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-color-text-muted);
    margin-bottom: 4px;
    line-height: 1.3;
}
.ds-scope .ds-kpi__value{
    font-family: var(--ds-font-ui);
    font-size: 24px;
    font-weight: 700;
    color: var(--ds-color-text);
    line-height: 1.2;
    margin-bottom: 4px;
}
.ds-scope .ds-kpi__sublabel{
    font-size: 12px;
    color: var(--ds-color-text-faint);
    line-height: 1.3;
}
.ds-scope .ds-kpi__breakdown{
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--ds-color-border);
}
.ds-scope .ds-kpi__breakdown-item{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
}
.ds-scope .ds-kpi__breakdown-label{
    color: var(--ds-color-text-faint);
}
.ds-scope .ds-kpi__breakdown-value{
    color: var(--ds-color-text-muted);
    font-weight: 600;
}
.ds-scope .ds-kpi__columns{
    display: flex;
    gap: 16px;
    margin-top: 2px;
}
.ds-scope .ds-kpi__column{
    flex: 1 1 0;
    min-width: 0;
}
.ds-scope .ds-kpi__column + .ds-kpi__column{
    padding-left: 16px;
    border-left: 1px solid var(--ds-color-border);
}
.ds-scope .ds-kpi__column-label{
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-color-text-muted);
    margin-bottom: 4px;
    line-height: 1.3;
}
.ds-scope .ds-kpi__column-value{
    font-family: var(--ds-font-ui);
    font-size: 24px;
    font-weight: 700;
    color: var(--ds-color-text);
    line-height: 1.2;
    margin-bottom: 4px;
}
.ds-scope .ds-kpi__column-sublabel{
    font-size: 12px;
    color: var(--ds-color-text-faint);
    line-height: 1.3;
}
/* Variant POR COLUNA. Quando o card agrupa N colunas (ex.: a mesma métrica em
   UN, KG e L), o estado não é um só — uma unidade pode estar boa e a outra não.
   A barra do card fica neutra e a cor vive no número de cada coluna. */
.ds-scope .ds-kpi__column-value--danger { color: var(--ds-color-danger-strong);  }
.ds-scope .ds-kpi__column-value--warning{ color: var(--ds-color-warning-strong); }
.ds-scope .ds-kpi__column-value--success{ color: var(--ds-color-success-strong); }
.ds-scope .ds-kpi__column-value--info   { color: var(--ds-color-info-strong);    }
/* Tooltip precisa se anunciar: title sozinho é invisível. */
.ds-scope .ds-kpi[title],
.ds-scope .ds-kpi__column[title]{ cursor: help; }
.ds-scope .ds-kpi__column[title] .ds-kpi__column-label{
    border-bottom: 1px dotted var(--ds-color-border-strong);
    display: inline-block;
}
/* Cor da barra lateral por variant */
.ds-scope .ds-kpi--danger{ border-left-color: var(--ds-color-danger);  }
.ds-scope .ds-kpi--warning{ border-left-color: var(--ds-color-warning); }
.ds-scope .ds-kpi--success{ border-left-color: var(--ds-color-success); }
.ds-scope .ds-kpi--info{ border-left-color: var(--ds-color-info);    }
.ds-scope .ds-kpi--neutral{ border-left-color: var(--ds-color-border-strong); }

/* Ícone do KPI (opcional — pode não ser usado) */
.ds-scope .ds-kpi--danger  .ds-kpi__icon{ background: var(--ds-color-danger-tint);  color: var(--ds-color-danger-strong);  }
.ds-scope .ds-kpi--warning .ds-kpi__icon{ background: var(--ds-color-warning-tint); color: var(--ds-color-warning-strong); }
.ds-scope .ds-kpi--success .ds-kpi__icon{ background: var(--ds-color-success-tint); color: var(--ds-color-success-strong); }
.ds-scope .ds-kpi--info    .ds-kpi__icon{ background: var(--ds-color-info-tint);    color: var(--ds-color-info-strong);    }
.ds-scope .ds-kpi--neutral .ds-kpi__icon{ background: var(--ds-color-surface-alt);  color: var(--ds-color-text-muted);     }

/* ----------------------------------------------------------------------------
 * 10. DATA TABLE
 * --------------------------------------------------------------------------*/
.ds-scope .ds-data-table-wrap{
    position: relative;
    overflow-x: auto;
    background: var(--ds-color-surface);
}
.ds-scope .ds-data-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--ds-color-text);
}
.ds-scope .ds-data-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ds-color-border);
    white-space: nowrap;
}
.ds-scope .ds-data-table thead th.ds-data-table__th-sortable{
    user-select: none;
    padding: 0;
}
.ds-scope .ds-data-table thead th.ds-data-table__th-sortable .ds-data-table__sort-link{
    display: block;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
    transition: color var(--ds-transition-fast);
}
.ds-scope .ds-data-table--compact thead th.ds-data-table__th-sortable .ds-data-table__sort-link{
    padding: 8px 12px;
}
.ds-scope .ds-data-table thead th.ds-data-table__th-sortable .ds-data-table__sort-link:hover{
    color: var(--ds-color-primary-hover);
    text-decoration: none;
}
.ds-scope .ds-data-table thead th.ds-data-table__th-sortable .ds-data-table__sort-link::after{
    content: " ⇅";
    opacity: 0.4;
    font-weight: normal;
}
.ds-scope .ds-data-table thead th.ds-is-sorted-asc .ds-data-table__sort-link::after{ content: " ↑"; opacity: 1; color: var(--ds-color-primary); }
.ds-scope .ds-data-table thead th.ds-is-sorted-desc .ds-data-table__sort-link::after{ content: " ↓"; opacity: 1; color: var(--ds-color-primary); }

.ds-scope .ds-data-table tbody td{
    padding: 12px 16px;
    border-bottom: 1px solid var(--ds-color-border);
    vertical-align: middle;
}
.ds-scope .ds-data-table tbody tr{
    background: var(--ds-color-surface);
    transition: background-color var(--ds-transition-fast);
}
.ds-scope .ds-data-table tbody tr:hover{ background: var(--ds-color-surface-hover); }
.ds-scope .ds-data-table tbody tr:last-child td{ border-bottom: none; }
/* Linha divergente: barra lateral discreta em vez de pintar a linha inteira -
   quando quase tudo diverge, a linha toda tingida deixa de destacar qualquer
   coisa. O realce fica só na célula que difere (.ds-cell--diverge). */
.ds-scope .ds-data-table tbody tr.ds-row--diverge td:first-child{
    box-shadow: inset 3px 0 0 var(--ds-color-warning);
}
/* Sem fundo: a divergência já é sinalizada pela barra lateral da linha, pelo ícone
   e pela cor do texto - pintar a célula deixava a tabela pesada. */
.ds-scope .ds-data-table tbody td.ds-cell--diverge{
    color: var(--ds-color-warning-strong);
}
.ds-scope .ds-data-table tbody td.ds-cell--diverge a{ color: var(--ds-color-warning-strong); }
.ds-scope .ds-cell__diverge-icon{
    margin-right: 6px;
    font-size: 12px;
    color: var(--ds-color-warning-strong);
}
/* Valor que confere não compete por atenção com o que diverge */
.ds-scope .ds-data-table tbody td.ds-cell--muted{ color: var(--ds-color-text-muted); }

.ds-scope .ds-data-table .ds-data-table__empty{
    padding: 32px 20px;
    text-align: center;
    color: var(--ds-color-text-faint);
    font-size: 14px;
}

.ds-scope .ds-data-table--compact thead th{ padding: 8px 12px; }
.ds-scope .ds-data-table--compact tbody td{ padding: 8px 12px; }

/* Tabela de comparação (ex.: solicitação de degustação x cadastro do cliente):
   a 1ª coluna é o nome do campo e se comporta como rótulo, não como dado - por isso
   encolhe até o conteúdo (width: 1%) em vez de dividir a largura com as demais. */
.ds-scope .ds-data-table--compare th:first-child,
.ds-scope .ds-data-table--compare td:first-child{
    width: 1%;
    white-space: nowrap;
}
.ds-scope .ds-data-table--compare tbody td:first-child{
    font-weight: 600;
    color: var(--ds-color-text-muted);
}

/* Largura pela soma das colunas, e não pela do card: com poucas colunas curtas o
   width:100% espalhava os valores por toda a linha. */
.ds-scope .ds-data-table--fit{
    width: auto;
    min-width: 520px;
    max-width: 100%;
}


/* Coluna sticky-left */
.ds-scope .ds-data-table th.ds-data-table__sticky-left,
.ds-scope .ds-data-table td.ds-data-table__sticky-left{
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ds-color-surface);
    transition: background-color var(--ds-transition-fast);
}
.ds-scope .ds-data-table thead th.ds-data-table__sticky-left{
    z-index: 3;
    background: var(--ds-color-surface-alt);
}
.ds-scope .ds-data-table tbody tr:hover td.ds-data-table__sticky-left{
    background: var(--ds-color-surface-hover);
}

/* Coluna sticky-right (caso seja usada em outras telas) */
.ds-scope .ds-data-table th.ds-data-table__sticky-right,
.ds-scope .ds-data-table td.ds-data-table__sticky-right{
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--ds-color-surface);
    box-shadow: -4px 0 8px rgba(15, 31, 58, .04);
    transition: background-color var(--ds-transition-fast);
}
.ds-scope .ds-data-table thead th.ds-data-table__sticky-right{
    z-index: 3;
    background: var(--ds-color-surface-alt);
}
.ds-scope .ds-data-table tbody tr:hover td.ds-data-table__sticky-right{
    background: var(--ds-color-surface-hover);
}

.ds-scope .ds-data-table .ds-cell--right{ text-align: right; }
.ds-scope .ds-data-table .ds-cell--center{ text-align: center; }
.ds-scope .ds-data-table .ds-cell--mono{ font-variant-numeric: tabular-nums; }
.ds-scope .ds-data-table .ds-cell--nowrap{ white-space: nowrap; }

.ds-scope .ds-data-table .ds-row-actions{
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------
 * 11. FILTER TOOLBAR
 * --------------------------------------------------------------------------*/
.ds-scope .ds-filter-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--ds-color-surface);
    border-bottom: 1px solid var(--ds-color-border);
}
.ds-scope .ds-filter-toolbar__chips{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--ds-color-text-muted);
}
.ds-scope .ds-filter-toolbar__label{
    font-weight: 500;
    color: var(--ds-color-text);
}
.ds-scope .ds-chip{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--ds-color-primary-tint);
    color: var(--ds-color-primary-hover);
    border-radius: var(--ds-radius-pill);
    font-size: 12px;
    font-weight: 500;
}
.ds-scope .ds-chip__remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border-radius: var(--ds-radius-pill);
    background: transparent;
    color: inherit;
    font-size: 10px;
    line-height: 1;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--ds-transition-fast),
                background var(--ds-transition-fast);
}
.ds-scope .ds-chip__remove:hover{
    opacity: 1;
    background: rgba(15, 31, 58, .10);
}
.ds-scope .ds-filter-toolbar__counter{
    font-size: 13px;
    color: var(--ds-color-text-faint);
    white-space: nowrap;
}
.ds-scope .ds-filter-toolbar__separator{
    color: var(--ds-color-text-faint);
    margin: 0 4px;
}
.ds-scope .ds-filter-toolbar__actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
 * 11.1 CARD — Variante com toolbar e cabeçalho da tabela fixos no topo
 * --------------------------------------------------------------------------*/
.ds-scope .ds-card--sticky-header > .ds-filter-toolbar.ds-is-pinned,
.ds-scope .ds-card--sticky-header > .ds-tabs.ds-is-pinned{
    position: fixed;
    top: 0;
    z-index: 4;
    background: var(--ds-color-surface);
    box-shadow: 0 2px 4px rgba(15, 31, 58, .04);
    border-left: 1px solid var(--ds-color-border);
    border-right: 1px solid var(--ds-color-border);
}
.ds-scope .ds-sticky-thead-clone{
    position: fixed;
    z-index: 5;
    overflow: hidden;
    display: none;
    background: var(--ds-color-surface-alt);
    box-shadow: 0 2px 4px rgba(15, 31, 58, .08);
    border-left: 1px solid var(--ds-color-border);
    border-right: 1px solid var(--ds-color-border);
}
.ds-scope .ds-sticky-thead-clone > table{
    margin: 0;
    border-collapse: collapse;
}

/* Barra de rolagem horizontal fixa na base da janela (ds.sticky-hscroll-script).
   A barra que o navegador desenha para o .ds-data-table-wrap fica na BASE dele, no fim
   da tabela; esta é a mesma barra trazida para a janela enquanto a tabela ocupa a tela,
   na outra ponta do que o clone do <thead> faz no topo. */
.ds-scope .ds-sticky-hscroll{
    position: fixed;
    bottom: 0;
    z-index: 5;
    display: none;
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--ds-color-surface-alt);
    border-top: 1px solid var(--ds-color-border);
    box-shadow: 0 -2px 4px rgba(15, 31, 58, .08);
    scrollbar-width: thin;
    scrollbar-color: var(--ds-color-border-strong) var(--ds-color-surface-alt);
}
/* Só existe para dar largura ao curso da barra; nada é visto dentro dela. */
.ds-scope .ds-sticky-hscroll > div{
    height: 1px;
}
/* A barra CLÁSSICA, e não a de overlay: em sistema com scrollbar sobreposta ela ficaria
   invisível até alguém rolar - inútil para um controle que existe para ser encontrado. */
.ds-scope .ds-sticky-hscroll::-webkit-scrollbar{
    height: 10px;
}
.ds-scope .ds-sticky-hscroll::-webkit-scrollbar-track{
    background: var(--ds-color-surface-alt);
}
.ds-scope .ds-sticky-hscroll::-webkit-scrollbar-thumb{
    background: var(--ds-color-border-strong);
    border-radius: var(--ds-radius-pill);
}

/* ----------------------------------------------------------------------------
 * 12. PAGINATION
 * --------------------------------------------------------------------------*/
.ds-scope .ds-pagination{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--ds-color-surface);
    border-top: 1px solid var(--ds-color-border);
    font-size: 13px;
}
.ds-scope .ds-pagination__info{ color: var(--ds-color-text-faint); }
.ds-scope .ds-pagination__nav{
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-scope .ds-pagination__nav li{ display: inline-flex; }
.ds-scope .ds-pagination__nav a,
.ds-scope .ds-pagination__nav span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-color-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: background var(--ds-transition-fast),
                color var(--ds-transition-fast);
}
.ds-scope .ds-pagination__nav a:hover{
    background: var(--ds-color-primary-tint);
    color: var(--ds-color-primary-hover);
    text-decoration: none;
}
.ds-scope .ds-pagination__nav .active span,
.ds-scope .ds-pagination__nav .ds-is-active{
    background: var(--ds-color-primary);
    color: var(--ds-color-on-primary);
}
.ds-scope .ds-pagination__nav .disabled span,
.ds-scope .ds-pagination__nav .ds-is-disabled{
    opacity: 0.4;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
 * 13. MODAL — reveste o modal Bootstrap 3 quando dentro de .ds-scope
 * --------------------------------------------------------------------------*/
.ds-scope .modal-dialog{ margin-top: 6vh; }

.ds-scope .modal-content{
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-lg);
    background: var(--ds-color-surface);
    overflow: hidden;
}

.ds-scope .modal-header{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-color-border);
    background: var(--ds-color-surface);
}
.ds-scope .modal-header .close{
    margin-left: auto;
    opacity: 0.5;
    font-size: 20px;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity var(--ds-transition-fast);
}
.ds-scope .modal-header .close:hover{ opacity: 1; }

.ds-scope .modal-title{
    font-family: var(--ds-font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--ds-color-text);
    margin: 0;
}

.ds-scope .ds-modal__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-color-primary-tint);
    color: var(--ds-color-primary);
    font-size: 16px;
    flex-shrink: 0;
}
.ds-scope .ds-modal__icon--success{ background: var(--ds-color-success-tint); color: var(--ds-color-success-strong); }
.ds-scope .ds-modal__icon--warning{ background: var(--ds-color-warning-tint); color: var(--ds-color-warning-strong); }
.ds-scope .ds-modal__icon--danger{ background: var(--ds-color-danger-tint);  color: var(--ds-color-danger-strong);  }
.ds-scope .ds-modal__icon--info{ background: var(--ds-color-info-tint);    color: var(--ds-color-info-strong);    }

.ds-scope .modal-body{
    padding: 20px;
    background: var(--ds-color-surface);
}
/* Cards usados para agrupar seções dentro do modal não deixam folga extra no fim */
.ds-scope .modal-body > .ds-card:last-child{ margin-bottom: 0; }

.ds-scope .modal-footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--ds-color-border);
    background: var(--ds-color-surface-alt);
    text-align: right;
}

/* Backdrop fica fora do .ds-scope (BS3 anexa ao body),
por isso usa hex
   diretamente — custom properties não estão disponíveis aqui. */
.modal-backdrop.in{
    background-color: #0F1F3A;
    opacity: 0.55;
}

/* Tooltip do Bootstrap 3 — ampliar para URLs longas (tooltip é renderizado
   fora do .ds-scope,
mas como ds.css só carrega em telas DS,
vale só aqui) */
.tooltip-inner{
    max-width: 480px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    word-break: break-all;
}

/* ----------------------------------------------------------------------------
 * 13b. MODAL — variante DRAWER (painel lateral à direita)
 * --------------------------------------------------------------------------*/
/* Aplique adicionando a classe .ds-drawer-modal no <div class="modal">       */

.ds-drawer-modal .modal-dialog{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 560px;
    max-width: 100vw;
    margin: 0;
    pointer-events: auto;
}

.ds-drawer-modal .modal-body{
    padding: 24px 28px;
}

.ds-drawer-modal .modal-content{
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border: none;
    box-shadow: var(--ds-shadow-lg);
    min-height: 0;
}

/* O <form> da view envolve modal-body + modal-footer.
   Precisa virar flex column para o body herdar a altura disponível e rolar. */
.ds-drawer-modal .modal-content > form{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Header e footer fixos; body com scroll */
.ds-drawer-modal .modal-header,
.ds-drawer-modal .modal-footer{
    flex-shrink: 0;
}
.ds-drawer-modal .modal-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile — drawer ocupa toda a tela */
@media (max-width: 600px){
    .ds-drawer-modal .modal-dialog { width: 100%; }
}

/* ----------------------------------------------------------------------------
 * 14. FORM FIELD
 * --------------------------------------------------------------------------*/
.ds-scope .ds-form-field{
    display: block;
    margin-bottom: 16px;
}
.ds-scope .ds-form-field__label{
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-color-text);
    margin-bottom: 4px;
}
.ds-scope .ds-form-field__required{
    color: var(--ds-color-danger);
    margin-left: 4px;
}
.ds-scope .ds-form-field__input,
.ds-scope .ds-form-field__select,
.ds-scope .ds-form-field__textarea{
    display: block;
    width: 100%;
    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);
    transition: border-color var(--ds-transition-fast),
                box-shadow var(--ds-transition-fast);
}
.ds-scope .ds-form-field__input::placeholder,
.ds-scope .ds-form-field__textarea::placeholder{ color: var(--ds-color-text-faint); }

/* Campo com ícone à esquerda (ex.: data com calendário). Wrapper em block para
   que a mensagem de validação (.help-block, injetada após o input pelo error.js)
   permaneça no fluxo block, logo abaixo do campo — e não ao lado dele. */
.ds-scope .ds-field-icon{ position: relative; }
/* top fixo (alinhado ao input) em vez de 50%: a mensagem de erro injetada pelo
   error.js entra como filho do wrapper e aumenta sua altura — com 50% o ícone
   seria centralizado sobre input+mensagem e desceria para fora do campo. */
.ds-scope .ds-field-icon > i.fa{
    position: absolute;
    left: 12px;
    top: 12px;
    color: var(--ds-color-text-muted);
    pointer-events: none;
}
.ds-scope .ds-field-icon > .ds-form-field__input{ padding-left: 32px; }

.ds-scope .ds-form-field__input:focus,
.ds-scope .ds-form-field__select:focus,
.ds-scope .ds-form-field__textarea:focus{
    border-color: var(--ds-color-primary);
    outline: none;
    box-shadow: var(--ds-shadow-focus);
}
.ds-scope .ds-form-field__input[disabled],
.ds-scope .ds-form-field__input[readonly],
.ds-scope .ds-form-field__select[disabled],
.ds-scope .ds-form-field__textarea[disabled]{
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-text-muted);
    cursor: not-allowed;
}
.ds-scope .ds-form-field__textarea{
    min-height: 80px;
    resize: vertical;
}

.ds-scope .ds-form-field__help{
    margin-top: 4px;
    font-size: 12px;
    color: var(--ds-color-text-faint);
}
.ds-scope .ds-form-field__static{
    display: block;
    margin: 0;
    padding: 8px 0;
    min-height: 38px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ds-color-text);
    word-break: break-word;
}
.ds-scope .ds-form-field__static--block{
    white-space: pre-wrap;
}
.ds-scope .ds-form-field__error{
    margin-top: 4px;
    font-size: 12px;
    color: var(--ds-color-danger-strong);
}

.ds-scope .ds-form-field--error .ds-form-field__input,
.ds-scope .ds-form-field--error .ds-form-field__select,
.ds-scope .ds-form-field--error .ds-form-field__textarea{
    border-color: var(--ds-color-danger);
}
.ds-scope .ds-form-field--error .ds-form-field__input:focus,
.ds-scope .ds-form-field--error .ds-form-field__select:focus,
.ds-scope .ds-form-field--error .ds-form-field__textarea:focus{
    box-shadow: 0 0 0 3px var(--ds-color-danger-tint);
}

.ds-scope .ds-form-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 16px;
}
@media (min-width: 768px) {
    .ds-scope .ds-form-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Opt-out das 2 colunas padrão: lista empilhada em qualquer largura. */
    .ds-scope .ds-form-grid--1{ grid-template-columns: 1fr; }
    .ds-scope .ds-form-grid--address-row{ grid-template-columns: minmax(0, 2fr) minmax(96px, 1fr); }
    .ds-scope .ds-form-field--col-start-2{ grid-column-start: 2; }
}
@media (min-width: 992px) {
    .ds-scope .ds-form-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ds-scope .ds-form-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ds-scope .ds-form-field--col-2{ grid-column: span 2; }
.ds-scope .ds-form-field--row-start{ grid-column-start: 1; }

/* Seção nomeada dentro de um card, para separar assuntos sem quebrar em vários
   cards. A legenda reusa o mesmo tratamento tipográfico do thead do ds-data-table
   (seção 10), para não introduzir um estilo novo no DS. */
.ds-scope .ds-fieldset + .ds-fieldset{
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ds-color-border);
}
.ds-scope .ds-fieldset__legend{
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-color-text-muted);
}

/* Seções em colunas: cada ds-fieldset vira uma coluna vertical com os campos
   empilhados, e a divisória passa a ser vertical. Aproveita a largura do card em
   vez de empilhar faixas com muito espaço vazio à direita. Abaixo de 992px as
   seções voltam a empilhar (regras do bloco acima). */
@media (min-width: 992px) {
    .ds-scope .ds-fieldset-group--cols{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ds-scope .ds-fieldset-group--cols > .ds-fieldset{ padding-right: 24px; }
    .ds-scope .ds-fieldset-group--cols > .ds-fieldset:last-child{ padding-right: 0; }
    .ds-scope .ds-fieldset-group--cols > .ds-fieldset + .ds-fieldset{
        margin-top: 0;
        padding-top: 0;
        padding-left: 24px;
        border-top: none;
        border-left: 1px solid var(--ds-color-border);
    }
}
/* Dentro de cada coluna os campos seguem em 2 colunas (regra base do
   .ds-form-grid a partir de 768px); campos longos usam --col-2 para ocupar
   a largura inteira da seção. */

/* Compatibilidade com plugins legados (Select2/datepicker esperam .form-control) */
.ds-scope .ds-form-field__input.form-control,
.ds-scope .ds-form-field__select.form-control{
    height: auto;
}
.ds-scope .ds-form-field__input.form-control:not(:focus),
.ds-scope .ds-form-field__select.form-control:not(:focus){
    box-shadow: none;
}

.ds-scope .input-daterange.ds-form-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Filtro rápido acima do card (Intervalo de Dias + Status Montagem + OK).
   O "até" é texto puro, sem a caixa do input-group-addon legado. */
.ds-scope .ds-quick-filter{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.ds-scope .ds-page-header__actions .ds-quick-filter{
    margin-bottom: 0;
    align-self: flex-start;
}
.ds-scope .ds-quick-filter .ds-form-field{ margin: 0; }
.ds-scope .ds-quick-filter__daterange{
    display: flex;
    align-items: center;
    gap: 8px;
}
.ds-scope .ds-quick-filter__daterange input{ width: 120px; }
.ds-scope .ds-quick-filter__sep{
    flex: 0 0 auto;
    color: var(--ds-color-text-faint);
    font-size: 13px;
}
/* O separador mantém a classe legada .input-group-addon (hook do error.js para
   posicionar a mensagem ABAIXO do intervalo), mas sem a caixa do Bootstrap. */
.ds-scope .ds-quick-filter__sep.input-group-addon,
.ds-scope .ds-daterange__sep.input-group-addon{
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    width: auto;
    white-space: nowrap;
}
.ds-scope .ds-quick-filter select{ min-width: 200px; }
/* Mensagem de validação (inserida pelo error.js após o intervalo) flutua abaixo,
   sem empurrar os demais campos da linha. O :not() evita pegar o próprio container
   do intervalo, que também recebe a classe .has-error (bordas vermelhas). */
.ds-scope .ds-quick-filter .ds-form-field{ position: relative; }
.ds-scope .ds-quick-filter .ds-form-field > .has-error:not(.input-daterange){
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    white-space: nowrap;
    z-index: 1;
}
/* Reserva espaço abaixo só quando há erro de validação (a mensagem flutua na área),
   evitando que ela encoste no card da tabela. */
.ds-scope .ds-quick-filter:has(.input-daterange.has-error){ margin-bottom: 36px; }

/* Indicador de intervalo de datas (pill) — padding amplo do legado + fundo navy */
.ds-scope .order-date-indicator{
    display: inline-block;
    padding: 4px 16px;
    background-color: var(--ds-color-primary);
    color: #fff;
    border-radius: 15px;
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 6px;
}

/* Variação com separador textual ("até") entre os inputs — paridade com o legado */
.ds-scope .input-daterange.ds-daterange--with-sep{
    display: flex;
    align-items: center;
    gap: 8px;
}
.ds-scope .ds-daterange--with-sep input{
    flex: 1 1 0;
    min-width: 0;
}
.ds-scope .ds-daterange__sep{
    flex: 0 0 auto;
    color: var(--ds-color-text-faint);
    font-size: 13px;
}

/* ----------------------------------------------------------------------------
 * 15. IMPORT — dropzone de upload e bloco de arquivo selecionado
 * --------------------------------------------------------------------------*/
.ds-scope .ds-import-dropzone{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    border: 2px dashed var(--ds-color-border-strong);
    border-radius: var(--ds-radius-md);
    background: var(--ds-color-surface-alt);
    text-align: center;
}
.ds-scope .ds-import-dropzone__icon{
    font-size: 36px;
    color: var(--ds-color-text-faint);
}
.ds-scope .ds-import-dropzone__hint{
    margin: 0;
}

.ds-scope .ds-import-selected{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--ds-color-success-tint);
    border-radius: var(--ds-radius-md);
}
.ds-scope .ds-import-selected__icon{
    color: var(--ds-color-success-strong);
    font-size: 20px;
}
.ds-scope .ds-import-selected__name{
    flex: 1 1 auto;
    font-weight: 500;
    color: var(--ds-color-text);
    word-break: break-all;
}
.ds-scope .ds-import-selected__remove{
    color: var(--ds-color-danger);
    cursor: pointer;
    transition: color var(--ds-transition-fast);
}
.ds-scope .ds-import-selected__remove:hover{
    color: var(--ds-color-danger-strong);
}

/* Override do bootstrap-datepicker.css que zera o raio dos inputs De/Até */
.ds-scope .input-daterange input,
.ds-scope .input-daterange input:first-child,
.ds-scope .input-daterange input:last-child{
    border-radius: var(--ds-radius-sm);
    text-align: left;
}

/* ----------------------------------------------------------------------------
 * 16. PAYMENT DISCHARGE — variação visual administrativa
 *     (também aplicada ao escopo .ds-followup-calendar)
 * --------------------------------------------------------------------------*/
.ds-scope.ds-payment-discharge:not(.modal),
.ds-scope.ds-followup-calendar:not(.modal),
.ds-scope.ds-followup-rule:not(.modal) {
    min-height: calc(100vh - 1px);
    background: var(--ds-color-bg);
    color: var(--ds-color-text);
}

.ds-scope.ds-payment-discharge .wrapper-content,
.ds-scope.ds-followup-calendar .wrapper-content{
    background: var(--ds-color-bg);
    padding: 20px 24px 28px !important;
}

.ds-scope.ds-payment-discharge a:not(.ds-button),
.ds-scope.ds-followup-calendar a:not(.ds-button){
    color: var(--ds-color-primary);
    font-weight: 700;
}
.ds-scope.ds-payment-discharge a:not(.ds-button):hover,
.ds-scope.ds-followup-calendar a:not(.ds-button):hover{
    color: var(--ds-color-primary-hover);
}

.ds-scope.ds-payment-discharge .ds-page-header,
.ds-scope.ds-followup-calendar .ds-page-header{
    align-items: flex-start;
    padding: 0;
    margin-bottom: 18px;
}
.ds-scope.ds-payment-discharge .ds-page-header__title,
.ds-scope.ds-followup-calendar .ds-page-header__title{
    font-family: var(--ds-font-ui);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ds-color-text);
    margin-bottom: 8px;
}
.ds-scope.ds-payment-discharge .ds-page-header__breadcrumb,
.ds-scope.ds-followup-calendar .ds-page-header__breadcrumb{
    gap: 6px;
    font-size: 12px;
    color: var(--ds-color-text-faint);
}
.ds-scope.ds-payment-discharge .ds-page-header__breadcrumb li + li::before,
.ds-scope.ds-followup-calendar .ds-page-header__breadcrumb li + li::before{
    content: "/";
    margin-right: 6px;
    color: var(--ds-color-text-faint);
}
.ds-scope.ds-payment-discharge .ds-page-header__breadcrumb a,
.ds-scope.ds-followup-calendar .ds-page-header__breadcrumb a{
    color: var(--ds-color-text-faint);
    font-weight: 600;
}
.ds-scope.ds-payment-discharge .ds-page-header__actions,
.ds-scope.ds-followup-calendar .ds-page-header__actions{
    padding-top: 0;
}

.ds-scope.ds-payment-discharge .ds-button--icon-only,
.ds-scope.ds-followup-calendar .ds-button--icon-only{
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
}
.ds-scope.ds-payment-discharge .ds-button--primary,
.ds-scope.ds-followup-calendar .ds-button--primary{
    background: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
    color: var(--ds-color-on-primary);
    box-shadow: 0 8px 18px rgba(27, 58, 92, .18);
}
.ds-scope.ds-payment-discharge a.ds-button--primary,
.ds-scope.ds-followup-calendar a.ds-button--primary{
    color: var(--ds-color-on-primary);
}
.ds-scope.ds-payment-discharge .ds-button--primary:hover,
.ds-scope.ds-followup-calendar .ds-button--primary:hover{
    background: var(--ds-color-primary-hover);
    border-color: var(--ds-color-primary-hover);
    color: var(--ds-color-on-primary);
}
.ds-scope.ds-payment-discharge a.ds-button--primary:hover,
.ds-scope.ds-followup-calendar a.ds-button--primary:hover{
    color: var(--ds-color-on-primary);
}
.ds-scope.ds-payment-discharge .ds-button--ghost,
.ds-scope.ds-followup-calendar .ds-button--ghost{
    color: var(--ds-color-text-muted);
}
.ds-scope.ds-payment-discharge .ds-button--ghost:hover,
.ds-scope.ds-followup-calendar .ds-button--ghost:hover{
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-primary);
}
.ds-scope.ds-payment-discharge .ds-button--ghost.ds-button--danger-on-hover:hover,
.ds-scope.ds-followup-calendar .ds-button--ghost.ds-button--danger-on-hover:hover{
    background: #FFF1F2;
    color: var(--ds-color-danger-strong);
}

.ds-scope.ds-payment-discharge .ds-kpi-grid,
.ds-scope.ds-followup-calendar .ds-kpi-grid{
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
/* Modifier para grids com 3 KPIs (ex.: Controle Semanal · Recheios) — uma linha
   só, sem a quarta coluna vazia do grid padrão. */
.ds-scope.ds-payment-discharge .ds-kpi-grid.ds-kpi-grid--3,
.ds-scope.ds-followup-calendar .ds-kpi-grid.ds-kpi-grid--3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 991px){
    .ds-scope.ds-payment-discharge .ds-kpi-grid.ds-kpi-grid--3,
    .ds-scope.ds-followup-calendar .ds-kpi-grid.ds-kpi-grid--3{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px){
    .ds-scope.ds-payment-discharge .ds-kpi-grid.ds-kpi-grid--3,
    .ds-scope.ds-followup-calendar .ds-kpi-grid.ds-kpi-grid--3{
        grid-template-columns: 1fr;
    }
}
/* Modifier para grids com 6 KPIs (ex.: detalhe de assessoria) — uma linha só. */
.ds-scope.ds-payment-discharge .ds-kpi-grid.ds-kpi-grid--6,
.ds-scope.ds-followup-calendar .ds-kpi-grid.ds-kpi-grid--6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.ds-scope.ds-payment-discharge .ds-kpi-grid--6 .ds-kpi,
.ds-scope.ds-followup-calendar .ds-kpi-grid--6 .ds-kpi{
    padding: 14px 14px;
    min-height: 80px;
}
@media (max-width: 1199.98px){
    .ds-scope.ds-payment-discharge .ds-kpi-grid.ds-kpi-grid--6,
    .ds-scope.ds-followup-calendar .ds-kpi-grid.ds-kpi-grid--6{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px){
    .ds-scope.ds-payment-discharge .ds-kpi-grid.ds-kpi-grid--6,
    .ds-scope.ds-followup-calendar .ds-kpi-grid.ds-kpi-grid--6{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.ds-scope.ds-payment-discharge .ds-kpi,
.ds-scope.ds-followup-calendar .ds-kpi{
    align-items: flex-start;
    min-height: 92px;
    padding: 18px 20px;
    border: 1px solid var(--ds-color-border);
    border-left: 1px solid var(--ds-color-border);
    border-top: 3px solid var(--ds-color-border-strong);
    border-radius: 10px;
    background: var(--ds-color-surface);
    box-shadow: var(--ds-shadow-sm);
}
.ds-scope.ds-payment-discharge .ds-kpi--danger,
.ds-scope.ds-followup-calendar .ds-kpi--danger{
    border-top-color: var(--ds-color-danger);
}
.ds-scope.ds-payment-discharge .ds-kpi--warning,
.ds-scope.ds-followup-calendar .ds-kpi--warning{
    border-top-color: var(--ds-color-warning);
}
.ds-scope.ds-payment-discharge .ds-kpi--success,
.ds-scope.ds-followup-calendar .ds-kpi--success{
    border-top-color: var(--ds-color-success);
}
.ds-scope.ds-payment-discharge .ds-kpi--info,
.ds-scope.ds-followup-calendar .ds-kpi--info{
    border-top-color: var(--ds-color-info);
}
.ds-scope.ds-payment-discharge .ds-kpi:hover,
.ds-scope.ds-followup-calendar .ds-kpi:hover{
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-1px);
}
.ds-scope.ds-payment-discharge .ds-kpi__label,
.ds-scope.ds-followup-calendar .ds-kpi__label{
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-color-text-muted);
    margin-bottom: 5px;
}
.ds-scope.ds-payment-discharge .ds-card,
.ds-scope.ds-followup-calendar .ds-card{
    border: 1px solid var(--ds-color-border);
    border-radius: 10px;
    background: var(--ds-color-surface);
    box-shadow: var(--ds-shadow-sm);
}

.ds-scope.ds-payment-discharge .ds-filter-toolbar,
.ds-scope.ds-followup-calendar .ds-filter-toolbar{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 56px;
    padding: 12px 16px;
    background: var(--ds-color-surface);
    border-bottom: 1px solid var(--ds-color-border);
}
.ds-scope.ds-payment-discharge .ds-filter-toolbar__chips,
.ds-scope.ds-followup-calendar .ds-filter-toolbar__chips{
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
}
.ds-scope.ds-payment-discharge .ds-filter-toolbar__actions,
.ds-scope.ds-followup-calendar .ds-filter-toolbar__actions{
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: auto;
}
.ds-scope.ds-payment-discharge .ds-filter-toolbar__label,
.ds-scope.ds-followup-calendar .ds-filter-toolbar__label{
    font-weight: 800;
    color: var(--ds-color-text);
}
.ds-scope.ds-payment-discharge .ds-chip,
.ds-scope.ds-followup-calendar .ds-chip{
    min-height: 28px;
    padding: 5px 9px;
    background: #FFFFFF;
    color: var(--ds-color-text);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}
.ds-scope.ds-payment-discharge .ds-chip__remove,
.ds-scope.ds-followup-calendar .ds-chip__remove{
    color: var(--ds-color-text-faint);
    font-size: 11px;
}
.ds-scope.ds-payment-discharge .ds-chip__remove:hover,
.ds-scope.ds-followup-calendar .ds-chip__remove:hover{
    background: var(--ds-color-surface-hover);
    color: var(--ds-color-danger-strong);
}
.ds-scope.ds-payment-discharge .ds-filter-toolbar__counter,
.ds-scope.ds-followup-calendar .ds-filter-toolbar__counter{
    color: var(--ds-color-text-faint);
    font-weight: 700;
}
.ds-scope.ds-payment-discharge .ds-filter-toolbar__separator,
.ds-scope.ds-followup-calendar .ds-filter-toolbar__separator{
    color: var(--ds-color-border-strong);
}

.ds-scope.ds-payment-discharge .ds-data-table-wrap,
.ds-scope.ds-followup-calendar .ds-data-table-wrap{
    background: var(--ds-color-surface);
}
.ds-scope.ds-payment-discharge .ds-data-table,
.ds-scope.ds-followup-calendar .ds-data-table{
    font-size: 13px;
    color: var(--ds-color-text);
}
.ds-scope.ds-payment-discharge .ds-data-table thead th,
.ds-scope.ds-payment-discharge .ds-data-table thead th.ds-data-table__sticky-left,
.ds-scope.ds-followup-calendar .ds-data-table thead th,
.ds-scope.ds-followup-calendar .ds-data-table thead th.ds-data-table__sticky-left{
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-primary);
    border-bottom: 1px solid var(--ds-color-border);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
}
.ds-scope.ds-payment-discharge .ds-data-table thead th.ds-data-table__th-sortable .ds-data-table__sort-link,
.ds-scope.ds-followup-calendar .ds-data-table thead th.ds-data-table__th-sortable .ds-data-table__sort-link{
    padding: 13px 14px;
}
.ds-scope.ds-payment-discharge .ds-data-table--compact thead th.ds-data-table__th-sortable .ds-data-table__sort-link,
.ds-scope.ds-followup-calendar .ds-data-table--compact thead th.ds-data-table__th-sortable .ds-data-table__sort-link{
    padding: 13px 14px;
}
.ds-scope.ds-payment-discharge .ds-data-table thead th.ds-data-table__th-sortable .ds-data-table__sort-link:hover,
.ds-scope.ds-followup-calendar .ds-data-table thead th.ds-data-table__th-sortable .ds-data-table__sort-link:hover{
    color: var(--ds-color-primary-hover);
}
.ds-scope.ds-payment-discharge .ds-data-table thead th.ds-data-table__th-sortable .ds-data-table__sort-link::after,
.ds-scope.ds-followup-calendar .ds-data-table thead th.ds-data-table__th-sortable .ds-data-table__sort-link::after{
    color: var(--ds-color-text-faint);
    opacity: .65;
}
.ds-scope.ds-payment-discharge .ds-data-table thead th.ds-is-sorted-asc .ds-data-table__sort-link::after,
.ds-scope.ds-payment-discharge .ds-data-table thead th.ds-is-sorted-desc .ds-data-table__sort-link::after,
.ds-scope.ds-followup-calendar .ds-data-table thead th.ds-is-sorted-asc .ds-data-table__sort-link::after,
.ds-scope.ds-followup-calendar .ds-data-table thead th.ds-is-sorted-desc .ds-data-table__sort-link::after{
    color: var(--ds-color-primary);
}
.ds-scope.ds-payment-discharge .ds-data-table tbody td,
.ds-scope.ds-followup-calendar .ds-data-table tbody td{
    padding: 13px 14px;
    border-bottom: 1px solid var(--ds-color-border);
    color: #1D3354;
}
.ds-scope.ds-payment-discharge .ds-data-table--compact tbody td,
.ds-scope.ds-followup-calendar .ds-data-table--compact tbody td{
    padding: 13px 14px;
}
.ds-scope.ds-payment-discharge .ds-data-table tbody tr,
.ds-scope.ds-payment-discharge .ds-data-table td.ds-data-table__sticky-left,
.ds-scope.ds-followup-calendar .ds-data-table tbody tr,
.ds-scope.ds-followup-calendar .ds-data-table td.ds-data-table__sticky-left{
    background: var(--ds-color-surface);
}
.ds-scope.ds-payment-discharge .ds-data-table tbody tr:hover,
.ds-scope.ds-payment-discharge .ds-data-table tbody tr:hover td.ds-data-table__sticky-left,
.ds-scope.ds-followup-calendar .ds-data-table tbody tr:hover,
.ds-scope.ds-followup-calendar .ds-data-table tbody tr:hover td.ds-data-table__sticky-left{
    background: var(--ds-color-primary-tint);
}
.ds-scope.ds-payment-discharge .ds-data-table td strong,
.ds-scope.ds-followup-calendar .ds-data-table td strong{
    color: var(--ds-color-text);
    font-weight: 800;
}
.ds-scope.ds-payment-discharge .ds-row-actions .ds-button,
.ds-scope.ds-followup-calendar .ds-row-actions .ds-button{
    color: var(--ds-color-text-faint);
}
.ds-scope.ds-payment-discharge .ds-row-actions .ds-button:hover,
.ds-scope.ds-followup-calendar .ds-row-actions .ds-button:hover{
    color: var(--ds-color-primary);
}
.ds-scope.ds-payment-discharge .omie-error-row td,
.ds-scope.ds-followup-calendar .omie-error-row td{
    background: #FFF8F8;
}

.ds-scope.ds-payment-discharge .ds-pagination,
.ds-scope.ds-followup-calendar .ds-pagination{
    min-height: 58px;
    padding: 12px 16px;
    background: var(--ds-color-surface);
    border-top: 1px solid var(--ds-color-border);
}
.ds-scope.ds-payment-discharge .ds-pagination__info,
.ds-scope.ds-followup-calendar .ds-pagination__info{
    color: var(--ds-color-text-faint);
    font-weight: 700;
}
.ds-scope.ds-payment-discharge .ds-pagination__info strong,
.ds-scope.ds-followup-calendar .ds-pagination__info strong{
    color: var(--ds-color-text-faint);
}
.ds-scope.ds-payment-discharge .ds-pagination__nav,
.ds-scope.ds-followup-calendar .ds-pagination__nav{
    gap: 6px;
}
.ds-scope.ds-payment-discharge .ds-pagination__nav a,
.ds-scope.ds-payment-discharge .ds-pagination__nav span,
.ds-scope.ds-followup-calendar .ds-pagination__nav a,
.ds-scope.ds-followup-calendar .ds-pagination__nav span{
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--ds-color-text-muted);
    font-weight: 800;
}
.ds-scope.ds-payment-discharge .ds-pagination__nav a:hover,
.ds-scope.ds-followup-calendar .ds-pagination__nav a:hover{
    background: var(--ds-color-primary-soft);
    color: var(--ds-color-primary);
}
.ds-scope.ds-payment-discharge .ds-pagination__nav .active span,
.ds-scope.ds-payment-discharge .ds-pagination__nav .ds-is-active,
.ds-scope.ds-followup-calendar .ds-pagination__nav .active span,
.ds-scope.ds-followup-calendar .ds-pagination__nav .ds-is-active{
    background: var(--ds-color-primary);
    color: var(--ds-color-on-primary);
    box-shadow: 0 8px 18px rgba(27, 58, 92, .18);
}

.ds-scope.ds-payment-discharge .ds-card--sticky-header > .ds-filter-toolbar.ds-is-pinned,
.ds-scope.ds-followup-calendar .ds-card--sticky-header > .ds-filter-toolbar.ds-is-pinned{
    box-shadow: 0 10px 24px rgba(15, 31, 58, .08);
}
.ds-scope.ds-payment-discharge .ds-sticky-thead-clone,
.ds-scope.ds-followup-calendar .ds-sticky-thead-clone{
    background: var(--ds-color-surface-alt);
    box-shadow: 0 10px 24px rgba(15, 31, 58, .08);
}

.ds-scope.ds-payment-discharge .modal-content,
.ds-scope.ds-followup-calendar .modal-content{
    border-radius: 10px;
}
.ds-scope.ds-payment-discharge.ds-drawer-modal .modal-content,
.ds-scope.ds-followup-calendar.ds-drawer-modal .modal-content{
    border-radius: 0;
}
.ds-scope.ds-payment-discharge .ds-form-field__label,
.ds-scope.ds-followup-calendar .ds-form-field__label{
    font-weight: 800;
    color: var(--ds-color-text);
}
.ds-scope.ds-payment-discharge .ds-form-field__input,
.ds-scope.ds-payment-discharge .ds-form-field__select,
.ds-scope.ds-payment-discharge .ds-form-field__textarea,
.ds-scope.ds-followup-calendar .ds-form-field__input,
.ds-scope.ds-followup-calendar .ds-form-field__select,
.ds-scope.ds-followup-calendar .ds-form-field__textarea{
    border-color: var(--ds-color-border-strong);
    border-radius: 8px;
}
.ds-scope.ds-payment-discharge .ds-import-dropzone,
.ds-scope.ds-followup-calendar .ds-import-dropzone{
    padding: 36px 24px;
    border: 1px dashed var(--ds-color-border-strong);
    border-radius: 10px;
    background: var(--ds-color-surface-alt);
}
.ds-scope.ds-payment-discharge .ds-import-dropzone__icon,
.ds-scope.ds-followup-calendar .ds-import-dropzone__icon{
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ds-color-primary-tint);
    color: var(--ds-color-primary);
    font-size: 20px;
}
.ds-scope.ds-payment-discharge .ds-import-dropzone__hint,
.ds-scope.ds-followup-calendar .ds-import-dropzone__hint{
    color: var(--ds-color-text-faint);
    font-weight: 600;
}
.ds-scope.ds-payment-discharge .ds-import-selected,
.ds-scope.ds-followup-calendar .ds-import-selected{
    padding: 14px 16px;
    background: var(--ds-color-success-tint);
    border: 1px solid rgba(34, 197, 94, .24);
    border-radius: 10px;
}
.ds-scope.ds-payment-discharge .ds-import-selected__name,
.ds-scope.ds-followup-calendar .ds-import-selected__name{
    font-weight: 700;
}

@media (max-width: 991px) {
    .ds-scope.ds-payment-discharge .ds-kpi-grid,
.ds-scope.ds-followup-calendar .ds-kpi-grid{
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .ds-scope.ds-payment-discharge .wrapper-content,
.ds-scope.ds-followup-calendar .wrapper-content{
        padding: 16px 12px 24px !important;
    }
    .ds-scope.ds-payment-discharge .ds-page-header__actions,
.ds-scope.ds-payment-discharge .ds-filter-toolbar__actions,
.ds-scope.ds-followup-calendar .ds-page-header__actions,
.ds-scope.ds-followup-calendar .ds-filter-toolbar__actions{
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .ds-scope.ds-payment-discharge .ds-kpi-grid,
.ds-scope.ds-followup-calendar .ds-kpi-grid{
        grid-template-columns: 1fr;
    }

    /* Mobile — botões do toolbar de filtro ocupam a largura igualmente
       (evita os botões "flutuando" à esquerda com espaço vazio à direita).
       Permite também a faixa de chips quebrar acima das ações. */
    .ds-scope.ds-payment-discharge .ds-filter-toolbar,
.ds-scope.ds-followup-calendar .ds-filter-toolbar{
        flex-wrap: wrap;
    }
    .ds-scope.ds-payment-discharge .ds-filter-toolbar__actions .ds-button,
.ds-scope.ds-followup-calendar .ds-filter-toolbar__actions .ds-button{
        flex: 1 1 0;
        justify-content: center;
    }
}

/* Header com filtro rápido (relatórios): o filtro rápido é largo demais para
   caber ao lado do título em tablets. Abaixo de 1200px empilha título/breadcrumb
   acima do filtro, evitando a sobreposição vista em retrato. */
@media (max-width: 1199.98px) {
    .ds-scope.ds-payment-discharge .ds-page-header:has(.ds-quick-filter),
.ds-scope.ds-followup-calendar .ds-page-header:has(.ds-quick-filter){
        flex-direction: column;
        align-items: stretch;
    }
    .ds-scope.ds-payment-discharge .ds-page-header:has(.ds-quick-filter) .ds-page-header__actions,
.ds-scope.ds-followup-calendar .ds-page-header:has(.ds-quick-filter) .ds-page-header__actions{
        width: 100%;
    }
}

/* ----------------------------------------------------------------------------
 * Select2 dentro do sub-escopo ds-payment-discharge (modais E páginas).
 * Espelha o tratamento de ds-followup-calendar para que selects com select2
 * — drawers de filtro, formulários como Assessorias create/edit — usem o
 * visual do DS sem CSS adicional na tela.
 * --------------------------------------------------------------------------*/
.ds-scope.ds-payment-discharge .select2-container {
    width: 100% !important;
    font-family: var(--ds-font-ui);
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    background: var(--ds-color-surface) !important;
    border: 1px solid var(--ds-color-border-strong) !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: border-color var(--ds-transition-fast),
                box-shadow var(--ds-transition-fast);
}
.ds-scope.ds-payment-discharge .select2-container--default.select2-container--focus .select2-selection--single,
.ds-scope.ds-payment-discharge .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ds-color-primary) !important;
    box-shadow: var(--ds-shadow-focus) !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100% !important;
    padding: 0 38px 0 12px !important;
    color: var(--ds-color-text) !important;
    font-size: 14px !important;
    line-height: 36px !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ds-color-text-faint) !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--single .select2-selection__clear {
    height: 36px !important;
    margin-right: 22px !important;
    color: var(--ds-color-text-muted) !important;
    font-size: 18px !important;
    line-height: 34px !important;
}
/* Select2 múltiplo — espelha o single para filtros multi-seleção
 * (Tipo Pedido, Origem, Prioridade, Status Montagem, etc.). */
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100% !important;
    min-height: 38px !important;
    padding: 2px 8px !important;
    background: var(--ds-color-surface) !important;
    border: 1px solid var(--ds-color-border-strong) !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: border-color var(--ds-transition-fast),
                box-shadow var(--ds-transition-fast);
}

/* ---- DRAWER DE FILTRO: o multiplo tem de poder CRESCER (PETI-1323) ----
 *
 * css/main.css:2702 declara `.select2-container--default .select2-selection--multiple
 * { height: 34px }` — ALTURA FIXA num controle que empilha pilhas. Ela e carregada
 * DEPOIS da @section('styles') das telas, entao vence; e o `min-height: 38px` acima
 * nao resolve, porque min-height eleva o piso e a caixa continua sem acompanhar o
 * conteudo. Com dois ou tres nomes longos marcados ("Biscoito de chocolate sem
 * farinha | Petite Fleur") as pilhas da segunda linha imprimem FORA da borda, por
 * cima do que vem abaixo.
 *
 * O SELETOR NAO LEVA `.ds-scope` NA FRENTE, e isso e deliberado: no markup dos
 * drawers `ds-scope` e `id="modal-filter"` estao no MESMO elemento
 * (`<div class="modal inmodal ds-scope ... " id="modal-filter">`), entao
 * `.ds-scope #modal-filter` exigiria um ancestral que nao existe e o seletor nunca
 * casaria. Foi assim que estas regras nasceram, e o sintoma era exatamente o que
 * elas consertam — placeholder cortado e pilha fora da borda, com a folha carregada
 * e nenhuma regra aplicada. Mesmo defeito, ainda de pe, em report-assembly.css:881.
 *
 * O ESCOPO E `#modal-filter`, E NAO A FOLHA TODA. A §7.17.4 de docs/design-system.md
 * recusou o conserto global — e com razao: a altura fixa da main.css afeta todo
 * select2 multiplo do sistema (degustacao, pedido), onde as opcoes sao curtas e
 * cabem numa linha. `#modal-filter` alcanca so os drawers de FILTRO, que e onde o
 * controle cresce, e todos eles querem este conserto. Antes desta regra havia tres
 * copias locais dele (ficha-tecnica.css, report-assembly.css e
 * item-custo/partials/fontes-styles); com as cinco telas da PETI-1323 seriam oito.
 * As tres copias ficam onde estao — sao duplicatas inofensivas, e remove-las e
 * limpeza separada.
 *
 * O !important e o que vence a main.css: ela e mais especifica em nada, mas a folha
 * do DS desenha este controle com !important em cada propriedade, e sem ele a
 * declaracao de altura da main.css volta a valer pela ordem do documento.
 */
#modal-filter .select2-container--default .select2-selection--multiple {
    height: auto !important;
}

/* O PLACEHOLDER IMPRIMIA CORTADO ("Todos os codi...").
 *
 * O select2 dimensiona o campo de busca em resizeSearch(), e nestes drawers a
 * inicializacao acontece com o DRAWER AINDA FECHADO: a medida de referencia sai
 * errada (~100px), menos do que "Todos os codigos" pede. Nao e margem de folha — e
 * medida tirada de um elemento sem largura.
 *
 * Com o <li> em flex e o campo em 100% dele, a largura passa a ser o que sobra da
 * linha: vazio, o campo ocupa a caixa inteira e o placeholder cabe; com pilhas, ele
 * fica com o resto da ultima linha. Nao depende de medida tirada com o drawer
 * fechado. O !important vence o style="width: ..." que o select2 escreve no proprio
 * elemento.
 */
#modal-filter .select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 80px;
    min-width: 80px;
}
#modal-filter .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 0;
}

.ds-scope.ds-payment-discharge .select2-container--default.select2-container--focus .select2-selection--multiple,
.ds-scope.ds-payment-discharge .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ds-color-primary) !important;
    box-shadow: var(--ds-shadow-focus) !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 3px 4px 3px 0 !important;
    padding: 2px 8px !important;
    background: var(--ds-color-primary-soft) !important;
    color: var(--ds-color-primary) !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    line-height: 20px !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 5px !important;
    color: var(--ds-color-primary) !important;
    font-weight: 700;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 30px !important;
    margin-top: 0 !important;
    padding: 0 4px !important;
    color: var(--ds-color-text) !important;
    font-size: 14px !important;
    font-family: var(--ds-font-ui);
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: var(--ds-color-text-faint) !important;
}
.ds-scope.ds-payment-discharge .select2-dropdown {
    border: 1px solid var(--ds-color-border-strong) !important;
    border-radius: 8px !important;
    box-shadow: var(--ds-shadow-md, 0 10px 24px rgba(15, 31, 58, .10)) !important;
    overflow: hidden;
    z-index: 1060 !important;
}
.ds-scope.ds-payment-discharge .select2-container--open .select2-dropdown--above {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
.ds-scope.ds-payment-discharge .select2-container--open .select2-dropdown--below {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
.ds-scope.ds-payment-discharge .select2-search--dropdown {
    padding: 8px !important;
    background: var(--ds-color-surface) !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 34px !important;
    padding: 7px 10px !important;
    color: var(--ds-color-text) !important;
    border: 1px solid var(--ds-color-border-strong) !important;
    border-radius: 8px !important;
    outline: none !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ds-color-primary) !important;
    box-shadow: var(--ds-shadow-focus) !important;
}
.ds-scope.ds-payment-discharge .select2-results__option {
    padding: 8px 12px !important;
    color: var(--ds-color-text) !important;
    font-size: 14px !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--ds-color-primary) !important;
    color: var(--ds-color-on-primary) !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--ds-color-primary-soft) !important;
    color: var(--ds-color-primary) !important;
    font-weight: 700 !important;
}
.ds-scope.ds-payment-discharge .select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background: var(--ds-color-primary) !important;
    color: var(--ds-color-on-primary) !important;
}

/* ----------------------------------------------------------------------------
 * CARD ROW — Grid horizontal para múltiplos ds-card lado a lado
 * Padrão: 3 colunas em desktop (proporção 5/4/3, mesma do layout legado),
 * empilha em telas menores. Para 2 cards use .ds-card-row--2.
 * --------------------------------------------------------------------------*/
.ds-scope .ds-card-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 22px;
}
.ds-scope .ds-card-row > .ds-card{ margin-bottom: 0; }
@media (min-width: 992px){
    .ds-scope .ds-card-row{ grid-template-columns: 5fr 4fr 3fr; }
    .ds-scope .ds-card-row--equal{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ds-scope .ds-card-row--2{ grid-template-columns: 1fr 1fr; }
}

/* Em cards estreitos (dentro de .ds-card-row), o form-grid colapsa para 1 coluna
   abaixo de ~1200px para não espremer demais os inputs. */
@media (min-width: 992px) and (max-width: 1199.98px){
    .ds-scope .ds-card-row .ds-form-grid{ grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
 * CARD COLS — colunas internas de UM ds-card (telas de detalhe/edição).
 * Substitui a ds-card-row de múltiplos cards: os dados básicos ficam num único
 * card "Dados Básicos" com grupos lado a lado e divisória vertical, como no
 * layout legado. Empilha em <992px com divisória horizontal.
 * --------------------------------------------------------------------------*/
.ds-scope .ds-card__cols{ display: grid; grid-template-columns: 1fr; gap: 16px; }
.ds-scope .ds-card__cols > *{ min-width: 0; }
@media (min-width: 992px){
    .ds-scope .ds-card__cols{ grid-template-columns: 5fr 4fr 3fr; gap: 0; }
    .ds-scope .ds-card__cols--2{ grid-template-columns: 1fr 1fr; }
    .ds-scope .ds-card__cols > * + *{
        border-left: 1px solid var(--ds-color-border);
        margin-left: 20px; padding-left: 20px;
    }
}
/* O .ds-form-grid interno mantém as 2 colunas padrão (e-mails | telefones,
   logradouro | número, etc.), reproduzindo as sub-colunas do layout legado. */
@media (max-width: 991.98px){
    .ds-scope .ds-card__cols > * + *{ border-top: 1px solid var(--ds-color-border); padding-top: 16px; }
}
/* subtítulo de grupo interno (substitui o <h3 class="m-b-sm"> legado) */
.ds-scope .ds-card__subtitle{
    margin: 0 0 12px; font-size: 13px; font-weight: 600;
    color: var(--ds-color-text-muted); text-transform: uppercase; letter-spacing: .04em;
}

/* ----------------------------------------------------------------------------
 * ALERT
 * Mensagem de feedback (erro de validação, info, sucesso, aviso).
 * Substitui .alert .alert-* do Bootstrap 3 dentro do escopo DS.
 * --------------------------------------------------------------------------*/
.ds-scope .ds-alert{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: var(--ds-radius-md);
    border-left: 3px solid transparent;
    font-size: 14px;
    line-height: 1.5;
}
.ds-scope .ds-alert__icon{
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
}
.ds-scope .ds-alert__body{
    flex: 1;
    min-width: 0;
}
.ds-scope .ds-alert__list{
    margin: 0;
    padding-left: 18px;
}
.ds-scope .ds-alert__list > li + li{ margin-top: 4px; }
.ds-scope .ds-alert__close{
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 0 4px;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    transition: opacity var(--ds-transition-fast);
}
.ds-scope .ds-alert__close:hover{ opacity: 1; }

.ds-scope .ds-alert--danger{
    background: var(--ds-color-danger-tint);
    border-left-color: var(--ds-color-danger-strong);
    color: var(--ds-color-danger-strong);
}
.ds-scope .ds-alert--warning{
    background: var(--ds-color-warning-tint);
    border-left-color: var(--ds-color-warning-strong);
    color: var(--ds-color-warning-strong);
}
.ds-scope .ds-alert--success{
    background: var(--ds-color-success-tint);
    border-left-color: var(--ds-color-success-strong);
    color: var(--ds-color-success-strong);
}
.ds-scope .ds-alert--info{
    background: var(--ds-color-info-tint);
    border-left-color: var(--ds-color-info-strong);
    color: var(--ds-color-info-strong);
}

/* ----------------------------------------------------------------------------
 * FORM FIELD — variante com botão acoplado (addon)
 * Modificador para ds-form-field que encosta um botão lateral ao input.
 * Uso típico: campo CEP com busca, campo de cópia com botão "Copiar", etc.
 * --------------------------------------------------------------------------*/
.ds-scope .ds-form-field--with-addon .ds-form-field__addon-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
/* Mensagem de erro injetada pelo error.js legado (insertAfter no input) */
.ds-scope .ds-form-field--with-addon .ds-form-field__addon-wrap > .help-block{
    flex: 1 0 100%;
    order: 99;
}
.ds-scope .ds-form-field--with-addon .ds-form-field__input{
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.ds-scope .ds-form-field--with-addon .ds-form-field__addon-button{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0 12px;
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-text-muted);
    border: 1px solid var(--ds-color-border-strong);
    border-top-right-radius: var(--ds-radius-sm);
    border-bottom-right-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: background var(--ds-transition-fast),
                color var(--ds-transition-fast),
                border-color var(--ds-transition-fast);
}
.ds-scope .ds-form-field--with-addon .ds-form-field__addon-button:hover{
    background: var(--ds-color-primary-tint);
    color: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
}
.ds-scope .ds-form-field--with-addon .ds-form-field__input:focus{
    box-shadow: none;
}
.ds-scope .ds-form-field--with-addon .ds-form-field__addon-wrap:focus-within{
    border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow-focus);
}
.ds-scope .ds-form-field--with-addon .ds-form-field__addon-wrap:focus-within .ds-form-field__input,
.ds-scope .ds-form-field--with-addon .ds-form-field__addon-wrap:focus-within .ds-form-field__addon-button{
    border-color: var(--ds-color-primary);
}

/* ----------------------------------------------------------------------------
 * Compatibilidade com error.js legado dentro do escopo DS
 * O error.js injeta <span class="help-block"> e adiciona .has-error no closestDiv.
 * Estes estilos alinham o visual com o DS sem precisar tocar no JS.
 * --------------------------------------------------------------------------*/
.ds-scope .help-block{
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--ds-color-danger-strong);
}
.ds-scope .has-error .ds-form-field__input,
.ds-scope .has-error .ds-form-field__select,
.ds-scope .has-error .ds-form-field__textarea,
.ds-scope .ds-form-field__addon-wrap.has-error .ds-form-field__input,
.ds-scope .ds-form-field__addon-wrap.has-error .ds-form-field__addon-button{
    border-color: var(--ds-color-danger);
}


/* ----------------------------------------------------------------------------
 * Tabs (DS canônico) — navegação por abas server-rendered.
 * Usado em telas de detalhe com múltiplas seções (ex.: assessoria/show).
 * Faixa horizontal logo abaixo do header do card; item ativo com underline.
 * --------------------------------------------------------------------------*/
.ds-scope .ds-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ds-color-border);
    background: var(--ds-color-surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ds-scope .ds-tabs::-webkit-scrollbar { display: none; height: 0; }
.ds-scope .ds-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    color: var(--ds-color-text-muted);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--ds-transition-fast), border-color var(--ds-transition-fast), background var(--ds-transition-fast);
}
.ds-scope .ds-tabs__item:hover,
.ds-scope .ds-tabs__item:focus {
    color: var(--ds-color-text);
    background: var(--ds-color-surface-alt);
    text-decoration: none;
}
.ds-scope .ds-tabs__item--active {
    color: var(--ds-color-primary);
    border-bottom-color: var(--ds-color-primary);
}
.ds-scope .ds-tabs__item--active:hover,
.ds-scope .ds-tabs__item--active:focus {
    color: var(--ds-color-primary);
    background: transparent;
}
.ds-scope .ds-tabs__icon {
    font-size: 13px;
}
.ds-scope .ds-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--ds-color-border);
}
.ds-scope .ds-tabs__item--active .ds-tabs__count {
    background: var(--ds-color-primary-tint);
    color: var(--ds-color-primary);
    border-color: var(--ds-color-primary-tint);
}

/* ----------------------------------------------------------------------------
 * Tabs — variante "boxed" (aba de arquivo/pasta estilo legado, cores do DS).
 * A faixa fica numa superfície levemente acinzentada; a aba ATIVA vira uma
 * caixa branca elevada, com borda topo/laterais, que "encaixa" no conteúdo
 * branco abaixo (borda inferior coberta) — o efeito de aba de pasta.
 * Opt-in via classe ds-tabs--boxed.
 * --------------------------------------------------------------------------*/
/* Faixa de abas fica FORA do card (sobre o bg da página): sem borda/sombra
   própria, encostada à esquerda. A baseline é a borda superior do card abaixo;
   só a aba ATIVA "perfura" essa borda (margin -1px + borda inferior branca),
   encaixando no conteúdo. O card mantém seu frame/sombra laterais (a tabela
   continua emoldurada). */
.ds-scope .ds-tabs--boxed {
    align-items: flex-end;
    gap: 3px;
    padding: 8px 0 0;
    background: transparent;
    border-bottom: none; /* remove a baseline herdada da base .ds-tabs; a baseline é a borda superior do card (evita linha dupla/grossa) */
    overflow: visible;   /* a base .ds-tabs usa overflow-x:auto (=> overflow-y:auto), que recortaria a borda/sombra que cobre a borda do card */
    position: relative;
    z-index: 1;          /* faixa pinta ACIMA do card (irmão posterior) p/ a aba ativa cobrir a borda */
}
/* Card de conteúdo logo abaixo da faixa de abas: mantém borda/sombra (a tabela
   continua com frame lateral), só aplaina os cantos superiores para a aba ativa
   encaixar numa borda reta. Sub-escopo p/ vencer .ds-payment-discharge .ds-card. */
.ds-scope .ds-card--tabbed,
.ds-scope.ds-payment-discharge .ds-card--tabbed,
.ds-scope.ds-followup-calendar .ds-card--tabbed {
    /* !important porque o followup.css (carregado após o ds.css) re-arredonda
       .ds-followup-calendar .ds-card com border-radius:10px; opt-in, então é seguro. */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.ds-scope .ds-tabs--boxed .ds-tabs__item {
    padding: 9px 16px;
    border: 1px solid transparent;
    border-top-left-radius: var(--ds-radius-md);
    border-top-right-radius: var(--ds-radius-md);
}
.ds-scope .ds-tabs--boxed .ds-tabs__item:hover,
.ds-scope .ds-tabs--boxed .ds-tabs__item:focus {
    color: var(--ds-color-text);
    background: var(--ds-color-surface-hover);
    border-color: var(--ds-color-border);
    border-bottom-color: transparent;
}
/* Aba ativa: caixa branca. Uma sombra branca de 1px logo ABAIXO da aba
   (box-shadow 0 1px 0) pinta sobre a borda superior do card e a apaga só nesse
   trecho — determinístico, sem depender de overlap de margem. */
.ds-scope .ds-tabs--boxed .ds-tabs__item--active,
.ds-scope .ds-tabs--boxed .ds-tabs__item--active:hover,
.ds-scope .ds-tabs--boxed .ds-tabs__item--active:focus {
    position: relative;
    z-index: 1;
    color: var(--ds-color-primary);
    background: var(--ds-color-surface-tabs);
    border-color: var(--ds-color-border);
    border-bottom-color: var(--ds-color-surface-tabs);
    box-shadow: 0 1px 0 0 var(--ds-color-surface-tabs);
}
/* Sticky: faixa de abas grudada no topo no scroll (posicionada via JS). Fundo
   opaco da página para não vazar conteúdo por trás; a aba ativa encaixa na
   toolbar fixada logo abaixo. */
.ds-scope .ds-tabs--boxed.ds-is-pinned {
    position: fixed;
    top: 0;
    z-index: 4;
    background: var(--ds-color-bg);
}

/* ----------------------------------------------------------------------------
 * Delivery cards — grid responsivo de cards de endereço de entrega.
 * Usado em customer/show/delivery (aba Endereços).
 * --------------------------------------------------------------------------*/
.ds-scope .ds-delivery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.ds-scope .ds-delivery-card .ds-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ds-scope .ds-delivery-card .ds-card__title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-scope .ds-delivery-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--ds-color-text);
}
.ds-scope .ds-delivery-card__list li {
    line-height: 1.5;
}
.ds-scope .ds-delivery-card__list .fa {
    color: var(--ds-color-text-faint);
    margin-right: 4px;
}
.ds-scope .ds-delivery-card__list strong {
    color: var(--ds-color-text-muted);
    font-weight: 600;
    margin-right: 4px;
}

/* ============================================================
   Tabela estática (detalhe/formulário) — visual DS reutilizável
   Para tabelas manuais fora do componente .ds-data-table
   (ex.: Conta Corrente, Usuários Vinculados).
   ============================================================ */
.ds-scope .ds-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}
.ds-scope .ds-table thead th{
    background: var(--ds-color-surface-alt);
    color: var(--ds-color-primary);
    border-bottom: 1px solid var(--ds-color-border);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: left;
    padding: 11px 14px;
    white-space: nowrap;
}
.ds-scope .ds-table tbody td{
    padding: 11px 14px;
    border-bottom: 1px solid var(--ds-color-border);
    color: #1D3354;
    vertical-align: middle;
}
.ds-scope .ds-table tbody tr:last-child td{ border-bottom: 0; }
.ds-scope .ds-table--striped tbody tr:nth-child(even){ background: var(--ds-color-surface-alt); }
.ds-scope .ds-table--hover tbody tr:hover{ background: var(--ds-color-primary-tint); }
.ds-scope .ds-table .ds-cell--right{ text-align: right; }
.ds-scope .ds-table .ds-cell--center{ text-align: center; }
.ds-scope .ds-table .ds-row-actions{ display: inline-flex; gap: 4px; white-space: nowrap; }

/* ============================================================
   Barra de progresso (upload) — visual DS
   JS legado seta width% em .ds-progress__bar (classe .progress-bar preservada)
   ============================================================ */
.ds-scope .ds-progress{
    height: 6px;
    background: var(--ds-color-surface-alt);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-pill);
    overflow: hidden;
}
.ds-scope .ds-progress__bar{
    height: 100%;
    width: 0;
    background: var(--ds-color-primary);
    border-radius: var(--ds-radius-pill);
    transition: width var(--ds-transition-base);
}

/* ============================================================
   Checkbox/radio DS (input nativo estilizado) — substitui pretty-checkbox
   ============================================================ */
.ds-scope .ds-check{
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}
.ds-scope .ds-check input[type="checkbox"],
.ds-scope .ds-check input[type="radio"]{
    width: 16px;
    height: 16px;
    margin: 0;
    margin-top: 1px;
    accent-color: var(--ds-color-primary);
    cursor: pointer;
    flex: 0 0 auto;
}
.ds-scope .ds-check__label{
    font-size: 13px;
    color: var(--ds-color-text);
    line-height: 1.45;
}
.ds-scope .ds-check-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}