/* =====================================================================
   PADRÃO DE TELAS DE LISTA (referência: /pagina_captura)
   Doc: .ai/guidelines/ui.lista.md
   Escopo: classe .ui-lista no .container da view. Carregado em layouts/app.blade.php
   logo após v2-base.css (de onde vêm os tokens --v2-*).
   ===================================================================== */
:root {
    --ui-cor-marca: var(--v2-primary-dark);    /* #006d73: branco 6.1:1 */
    --ui-cor-marca-hover: #005a5f;
    --ui-cor-editar: #0b5ed7;                  /* branco 5.9:1 */
    --ui-cor-editar-hover: #0a4fb5;
    --ui-cor-perigo: var(--v2-danger);         /* #b42318: branco 6.5:1 */
    --ui-cor-perigo-hover: #8f1c13;
    --ui-cor-neutra: #374151;
    --ui-borda-neutra: #ced4da;
    --ui-fundo-neutro: #eef2f4;
    --ui-fundo-cabecalho: #f8fafb;
    --ui-btn-altura: 36px;
    --ui-acao-tamanho: 32px;
    --ui-transicao: 150ms ease;
}

/* ===== Cabeçalho do card: título à esquerda, botões à direita ===== */
.ui-lista .ui-lista-header {
    gap: var(--v2-space-3);
}

.ui-lista .ui-lista-header .panel-title {
    margin: 0;
}

.ui-lista-header-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--v2-space-2);
    margin-left: auto;
}

/* Boxes/painéis informativos no cabeçalho (ex.: totais): sem margem/float herdados */
.ui-lista .ui-lista-header-acoes .panel {
    margin: 0;
}

.ui-lista .ui-lista-header-acoes > * {
    float: none;
}

/* Checkbox dentro do filtro: alinhado à altura dos campos */
.ui-lista .ui-filtro .form-check-input {
    width: 20px;
    height: 20px;
    margin: 8px 0;
}

/* ===== Botões: uma única escala, sem escopo (servem em listas, forms e modais) ===== */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--ui-btn-altura);
    padding: 8px 16px;
    font-size: var(--v2-font-base);
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    border-radius: var(--v2-radius);
    transition: color var(--ui-transicao), background-color var(--ui-transicao), border-color var(--ui-transicao), box-shadow var(--ui-transicao);
}

.ui-btn-primario {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ui-cor-marca);
    --bs-btn-border-color: var(--ui-cor-marca);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ui-cor-marca-hover);
    --bs-btn-hover-border-color: var(--ui-cor-marca-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--ui-cor-marca-hover);
    --bs-btn-active-border-color: var(--ui-cor-marca-hover);
    --bs-btn-focus-shadow-rgb: 0, 109, 115;
}

.ui-btn-secundario {
    --bs-btn-color: var(--ui-cor-neutra);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--ui-borda-neutra);
    --bs-btn-hover-color: var(--v2-text);
    --bs-btn-hover-bg: #f1f5f5;
    --bs-btn-hover-border-color: #adb5bd;
    --bs-btn-active-color: var(--v2-text);
    --bs-btn-active-bg: #e4ecec;
    --bs-btn-active-border-color: #adb5bd;
    --bs-btn-focus-shadow-rgb: 0, 139, 139;
}

.ui-btn-perigo {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ui-cor-perigo);
    --bs-btn-border-color: var(--ui-cor-perigo);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ui-cor-perigo-hover);
    --bs-btn-hover-border-color: var(--ui-cor-perigo-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--ui-cor-perigo-hover);
    --bs-btn-active-border-color: var(--ui-cor-perigo-hover);
    --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

/* ===== Filtros: form-inline com label acima, alinhado pela base ===== */
.ui-lista .ui-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--v2-space-3);
    margin: 0;
}

.ui-lista .ui-filtro .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--v2-space-1);
    margin: 0;
}

.ui-lista .ui-filtro label {
    margin: 0;
    font-size: var(--v2-font-small);
    font-weight: 600;
    color: var(--v2-text-muted);
    white-space: nowrap;
}

.ui-lista .ui-filtro .form-control,
.ui-lista .ui-filtro .form-select {
    width: auto;
    min-width: 150px;
    height: var(--ui-btn-altura);
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: var(--v2-font-base);
}

.ui-lista .ui-filtro input[type="file"].form-control {
    min-width: 260px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(var(--ui-btn-altura) - 2px);
}

.ui-filtro-botoes {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--v2-space-2);
    margin-left: auto;
}

/* Barra acima da tabela (importação, ações em massa): esquerda e direita */
.ui-lista-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--v2-space-3);
    margin-bottom: var(--v2-space-4);
    padding-bottom: var(--v2-space-4);
    border-bottom: 1px solid var(--v2-border);
}

.ui-lista-toolbar .ui-filtro-botoes {
    margin-left: 0;
}

.ui-lista-massa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v2-space-2);
    margin-left: auto;
}

/* ===== Tabela: scroll horizontal só dentro do card ===== */
.ui-lista-tabela {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ui-lista .ui-lista-tabela .table {
    margin-bottom: 0;
}

.ui-lista .table > thead > tr > th {
    background: var(--ui-fundo-cabecalho);
    white-space: nowrap;
}

.ui-lista .table > tbody > tr > td {
    transition: background-color var(--ui-transicao);
}

.ui-lista .ui-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-lista .ui-nowrap {
    white-space: nowrap;
}

.ui-lista .ui-lista-vazio {
    padding: var(--v2-space-5) var(--v2-space-4);
    text-align: center;
    color: var(--v2-text-muted);
}

/* ===== Coluna Ações: botões 32x32 lado a lado, nunca quebram ===== */
.ui-lista .ui-col-acoes {
    width: 1%;
    white-space: nowrap;
}

.ui-acoes {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.ui-lista .ui-acao {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--ui-acao-tamanho);
    height: var(--ui-acao-tamanho);
    padding: 0;
    font-size: var(--v2-font-base);
    line-height: 1;
    border-radius: var(--v2-radius);
    transition: color var(--ui-transicao), background-color var(--ui-transicao), border-color var(--ui-transicao), box-shadow var(--ui-transicao);
}

.ui-lista .ui-acao i {
    font-size: var(--v2-font-base);
}

.ui-lista .ui-acao-ver {
    --bs-btn-color: var(--ui-cor-neutra);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--ui-borda-neutra);
    --bs-btn-hover-color: var(--v2-text);
    --bs-btn-hover-bg: #f1f5f5;
    --bs-btn-hover-border-color: #adb5bd;
    --bs-btn-active-bg: #e4ecec;
    --bs-btn-focus-shadow-rgb: 0, 139, 139;
}

.ui-lista .ui-acao-editar {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ui-cor-editar);
    --bs-btn-border-color: var(--ui-cor-editar);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ui-cor-editar-hover);
    --bs-btn-hover-border-color: var(--ui-cor-editar-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--ui-cor-editar-hover);
    --bs-btn-focus-shadow-rgb: 11, 94, 215;
}

.ui-lista .ui-acao-neutro {
    --bs-btn-color: var(--ui-cor-neutra);
    --bs-btn-bg: var(--ui-fundo-neutro);
    --bs-btn-border-color: var(--ui-fundo-neutro);
    --bs-btn-hover-color: var(--v2-text);
    --bs-btn-hover-bg: #dde4e8;
    --bs-btn-hover-border-color: #dde4e8;
    --bs-btn-active-bg: #cfd8dd;
    --bs-btn-focus-shadow-rgb: 55, 65, 81;
}

.ui-lista .ui-acao-excluir {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ui-cor-perigo);
    --bs-btn-border-color: var(--ui-cor-perigo);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ui-cor-perigo-hover);
    --bs-btn-hover-border-color: var(--ui-cor-perigo-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--ui-cor-perigo-hover);
    --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

/* Valor + botão de copiar na mesma linha (ex.: token de Integrações) */
.ui-lista-copiar {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--v2-space-2);
    white-space: nowrap;
}

/* ===== Badges (.label legado do BS3): mesmo padding/raio, cores AA ===== */
.ui-lista .label {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: 999px;
    color: var(--ui-cor-neutra);
    background-color: var(--ui-fundo-neutro);
}

.ui-lista .label-success { color: #0f5132; background-color: #d1e7dd; }
.ui-lista .label-danger { color: #8f1c13; background-color: #fde8e7; }
.ui-lista .label-primary { color: #0a4fb5; background-color: #dbeafe; }
.ui-lista .label-warning { color: #664d03; background-color: #fff3cd; }
.ui-lista .label-info { color: #055160; background-color: #cff4fc; }
.ui-lista .label-default { color: var(--ui-cor-neutra); background-color: var(--ui-fundo-neutro); }

/* ===== Responsivo ===== */
@media (max-width: 1023.98px) {
    .ui-lista .ui-filtro .form-control,
    .ui-lista .ui-filtro .form-select {
        min-width: 130px;
    }
}

@media (max-width: 767.98px) {
    .ui-lista .ui-filtro .form-group {
        flex: 1 1 calc(50% - var(--v2-space-3));
    }

    .ui-lista .ui-filtro .form-control,
    .ui-lista .ui-filtro .form-select {
        width: 100%;
        min-width: 0;
    }

    .ui-filtro-botoes {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 479.98px) {
    .ui-lista .ui-filtro .form-group {
        flex-basis: 100%;
    }

    .ui-lista .ui-filtro input[type="file"].form-control {
        min-width: 0;
    }

    .ui-lista-header-acoes {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-btn,
    .ui-lista .ui-acao,
    .ui-lista .table > tbody > tr > td {
        transition: none;
    }
}

/* ===== Formulário em card (ex.: /colaborador/dados): grade de campos, dados em lista e rodapé de ações ===== */
.ui-lista .ui-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--v2-space-3) var(--v2-space-4);
}

.ui-lista .ui-form-grid .form-group {
    margin: 0;
}

.ui-lista .ui-form-grid label {
    margin-bottom: var(--v2-space-1);
    font-size: var(--v2-font-small);
    font-weight: 600;
    color: var(--v2-text-muted);
}

/* Rodapé de ações: aviso "(*)" opcional à esquerda; botões sempre à direita, secundários antes
   e o primário por último. Sem escopo .ui-lista (como .ui-btn): vale em qualquer formulário. */
.ui-form-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--v2-space-3);
    width: 100%;
    margin-top: var(--v2-space-4);
    font-size: var(--v2-font-small);
    color: var(--v2-text-muted);
}

.ui-form-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--v2-space-2);
    margin-left: auto;
}

/* Um botão solto direto no rodapé (forma antiga, ainda aceita) */
.ui-form-acoes > .ui-btn {
    margin-left: auto;
}

/* Form legado em grade (.form-group.col-*): o v2-base.css deixa o <form> flex com margem -8px */
form > .ui-form-acoes,
fieldset > .ui-form-acoes {
    flex: 0 0 100%;
}

form:has(> .form-group[class*="col-"]) > .ui-form-acoes,
fieldset:has(> .form-group[class*="col-"]) > .ui-form-acoes {
    padding: 0 8px;
}

.ui-lista .ui-form-divisor {
    margin: var(--v2-space-4) 0;
    border-color: var(--v2-border);
}

.ui-lista .ui-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--v2-space-3) var(--v2-space-4);
    margin: var(--v2-space-4) 0 0;
}

.ui-lista .ui-dados > div {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-1);
    min-width: 0;
}

.ui-lista .ui-dados dt {
    font-size: var(--v2-font-small);
    font-weight: 600;
    color: var(--v2-text-muted);
}

.ui-lista .ui-dados dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--v2-text);
}

.ui-lista .ui-dados-apoio {
    color: var(--v2-text-muted);
}

.ui-lista .panel-body > .ui-dados:first-child,
.ui-lista .ui-assinatura-aviso + .ui-dados {
    margin-top: 0;
}

.ui-lista .ui-assinatura-aviso {
    margin: 0 0 var(--v2-space-4);
}

.ui-lista .ui-assinatura-aviso .aviso {
    margin-bottom: 0;
}