:root {
    --cor-fundo: #f1f3f7;
    --cor-texto: #1b2130;
    --cor-texto-suave: #5b6472;
    --cor-borda: #e1e5ec;
    --cor-primaria: #2952cc;
    --cor-primaria-escura: #1e3f9e;
    --cor-primaria-suave: #eaf0ff;
    --cor-erro: #b3261e;
    --cor-erro-bg: #fbeceb;
    --cor-sucesso: #1a7a4c;
    --cor-sucesso-bg: #e9f7f0;
    --cor-superficie: #ffffff;
    --cor-superficie-alt: #f7f8fb;
    --raio: 10px;
    --sombra: 0 1px 2px rgba(20, 25, 40, 0.06), 0 1px 8px rgba(20, 25, 40, 0.04);
    --sombra-hover: 0 4px 16px rgba(20, 25, 40, 0.10);
}

[data-bs-theme="dark"] {
    --cor-fundo: #14161c;
    --cor-texto: #e7e9f0;
    --cor-texto-suave: #9aa1b3;
    --cor-borda: #2c303b;
    --cor-primaria: #6d93ff;
    --cor-primaria-escura: #90aeff;
    --cor-primaria-suave: #1d2740;
    --cor-erro: #ff8a84;
    --cor-erro-bg: #3a1f1f;
    --cor-sucesso: #5fd897;
    --cor-sucesso-bg: #17301f;
    --cor-superficie: #1c1f28;
    --cor-superficie-alt: #23272f;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 8px rgba(0, 0, 0, 0.25);
    --sombra-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .bg-white { background-color: var(--cor-superficie) !important; color: var(--cor-texto); }
[data-bs-theme="dark"] .tela-login { background: linear-gradient(160deg, #1a1e2b 0%, var(--cor-fundo) 60%); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }

/* ---------- Topbar: agora e a navbar do Bootstrap (ver header.php), so um ajuste fino aqui ---------- */
.navbar .nav-link { font-weight: 600; font-size: 14.5px; }
.navbar .nav-link:hover { color: var(--cor-primaria); }

.form-inline { display: inline; margin: 0; }

.link-botao {
    background: none;
    border: none;
    color: var(--cor-primaria);
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.link-botao:hover { text-decoration: underline; }

.conteudo { max-width: 1500px; margin: 0 auto; min-height: calc(100vh - 60px); }

/* ---------- Login (estrutura do card agora e Bootstrap, so ajustes finos aqui) ---------- */
.tela-login {
    min-height: 75vh;
    background: linear-gradient(160deg, #eef2fb 0%, var(--cor-fundo) 60%);
}

.card-login { width: 100%; max-width: 380px; }

.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--cor-texto-suave); }
.campo input, .campo select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--cor-borda);
    border-radius: 7px;
    font-size: 14px;
    background: var(--cor-superficie);
    color: var(--cor-texto);
}
.campo input:focus, .campo select:focus, .filtros input:focus, .filtros select:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}
.campo input:disabled, .campo select:disabled { background: var(--cor-superficie-alt); color: var(--cor-texto-suave); }

/* ---------- Botoes ---------- */
.botao {
    background: var(--cor-primaria);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.botao:hover { background: var(--cor-primaria-escura); }
.botao-secundario { background: var(--cor-superficie); color: var(--cor-primaria); border: 1px solid var(--cor-borda); }
.botao-secundario:hover { background: var(--cor-primaria-suave); }
.botao-link { display: inline-flex; align-items: center; padding: 10px 6px; font-size: 14px; color: var(--cor-texto-suave); }

/* ---------- Alertas ---------- */
.alerta { padding: 11px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.alerta-erro { background: var(--cor-erro-bg); color: var(--cor-erro); border: 1px solid #f2c6c3; }
.alerta-sucesso { background: var(--cor-sucesso-bg); color: var(--cor-sucesso); border: 1px solid #bfe3cf; }

/* ---------- Cabecalho de pagina ---------- */
.pagina-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

/* ---------- KPIs ---------- */
.kpis { margin-bottom: 20px; }
.kpi-card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-left: 3px solid currentColor;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 14px 16px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.kpi-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-1px); }
.kpi-titulo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.kpi-valor { font-size: 21px; font-weight: 800; color: var(--cor-texto); }

/* ---------- Filtros ---------- */
.filtros-topo {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.painel-filtros {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 4px 16px 16px;
    margin-bottom: 16px;
}
.painel-filtros summary {
    cursor: pointer;
    padding: 12px 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--cor-texto-suave);
}
.filtros, .filtros-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtros input, .filtros select, .filtros-topo input, .filtros-topo select {
    padding: 8px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 7px;
    font-size: 13.5px;
    background: var(--cor-superficie);
    color: var(--cor-texto);
}
.filtros input[type=text], .filtros-topo input[type=text] { flex: 1 1 auto; min-width: 180px; }

.resumo-lista { color: var(--cor-texto-suave); font-size: 13px; margin: 0 0 10px; }

/* ---------- Tabelas ---------- */
.tabela-scroll { overflow-x: auto; border-radius: var(--raio); box-shadow: var(--sombra); }

table.tabela-dados {
    width: 100%;
    border-collapse: collapse;
    background: var(--cor-superficie);
    border-radius: var(--raio);
    overflow: hidden;
}
table.tabela-dados th, table.tabela-dados td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--cor-borda);
    text-align: left;
    font-size: 13.5px;
    white-space: nowrap;
}
table.tabela-dados th {
    background: var(--cor-superficie-alt);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cor-texto-suave);
    position: sticky;
    top: 0;
}
table.tabela-dados tbody tr:hover td { background-color: var(--cor-superficie-alt); }
table.tabela-dados tbody tr:last-child td { border-bottom: none; }

.th-ordenavel { color: inherit; display: inline-block; }
.th-ordenavel:hover { color: var(--cor-primaria); text-decoration: none; }

.link-linha { color: var(--cor-texto); font-weight: 600; }
.link-linha:hover { color: var(--cor-primaria); text-decoration: none; }

.badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
    letter-spacing: .02em;
}
.badge-vermelho { background: #fbe3e1; color: #a4271f; }
.badge-azul { background: #e1ecff; color: #1e4fbf; }
.badge-cinza { background: #e9e9ec; color: #55555c; }
.badge-obs { background: #f1eaff; color: #6b3fc4; text-transform: none; }
.badge-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .02em;
}

.paginacao { display: flex; gap: 16px; align-items: center; margin-top: 16px; font-size: 14px; }

/* ---------- Progresso de sincronizacao ---------- */
.sync-widget { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sync-progresso { width: 260px; max-width: 60vw; }
.sync-barra {
    width: 100%;
    height: 8px;
    background: var(--cor-borda);
    border-radius: 999px;
    overflow: hidden;
}
.sync-barra-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cor-primaria), #5b8def);
    transition: width .3s ease;
}
.sync-status { font-size: 11.5px; color: var(--cor-texto-suave); margin-top: 4px; text-align: right; }

@media (max-width: 640px) {
    .pagina-cabecalho { align-items: stretch; }
    .sync-widget { align-items: stretch; }
    .sync-progresso { width: 100%; max-width: none; }
    .sync-status { text-align: left; }
}

/* ---------- Filtros: separador e ordenacao ---------- */
.filtros-separador { flex-basis: 100%; height: 0; margin: 0; }
.rotulo-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cor-texto-suave); }

.campos-opcionais {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cor-borda);
}
.campos-opcionais-rotulo { font-size: 12px; font-weight: 700; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.campo-opcional-toggle { font-size: 13px; color: var(--cor-texto-suave); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* ---------- Cards de cliente ---------- */
.lista-clientes { display: flex; flex-direction: column; gap: 8px; }

.cliente-card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 8px;
    box-shadow: var(--sombra);
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: box-shadow .15s ease;
}
.cliente-card:hover { box-shadow: var(--sombra-hover); }

.cliente-card .chk-cliente { margin-top: 4px; width: 16px; height: 16px; flex-shrink: 0; }

.cliente-corpo { flex: 1; min-width: 0; }

.cliente-linha1, .cliente-linha2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    overflow: hidden;
}
.cliente-linha1 { margin-bottom: 3px; }

.cliente-nome { font-weight: 700; color: var(--cor-texto); font-size: 14.5px; }
.cliente-nome:hover { color: var(--cor-primaria); text-decoration: none; }

.cliente-linha1 .campo-opcional { color: var(--cor-texto-suave); font-size: 13px; }
.cliente-linha2 { font-size: 13px; color: var(--cor-texto-suave); }
.cliente-linha2 .cliente-valor { font-weight: 700; color: var(--cor-texto); font-size: 15px; }
.cliente-linha2 [data-campo="cnpj"], .cliente-linha2 [data-campo="cidade"] { font-size: 14px; color: var(--cor-texto); font-weight: 500; }
.cliente-linha2 > span:not(:last-child)::after { content: '\00b7'; margin-left: 10px; color: var(--cor-borda); }

.badge-campo {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--cor-superficie-alt);
    color: var(--cor-texto-suave);
}

/* Toggle de campos opcionais (controlado via JS/localStorage, ver painel.js) */
body.ocultar-campo-fantasia [data-campo="fantasia"],
body.ocultar-campo-cnpj [data-campo="cnpj"],
body.ocultar-campo-cidade [data-campo="cidade"],
body.ocultar-campo-formapgto [data-campo="formapgto"],
body.ocultar-campo-ultimoacesso [data-campo="ultimoacesso"],
body.ocultar-campo-certificado [data-campo="certificado"],
body.ocultar-campo-representante [data-campo="representante"] {
    display: none !important;
}

/* ---------- Barra de edicao em massa ---------- */
.barra-selecao {
    background: var(--cor-primaria-suave);
    border: 1px solid #c7d7fb;
    border-radius: var(--raio);
    padding: 12px 16px;
    margin-bottom: 12px;
}
.barra-selecao-linha { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--cor-primaria-escura); }
.barra-selecao-campos { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.campo-massa { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 7px; padding: 6px 10px; }
.campo-massa select, .campo-massa input[type=text] { padding: 4px 6px; border: 1px solid var(--cor-borda); border-radius: 5px; font-size: 12.5px; }

/* ---------- Responsivo ---------- */
@media (max-width: 640px) {
    .pagina-cabecalho { flex-direction: column; align-items: stretch; }
    .filtros, .filtros-topo { flex-direction: column; align-items: stretch; }
    .filtros input, .filtros select, .filtros-topo input, .filtros-topo select { width: 100%; flex: none; }
    .rotulo-inline { flex-direction: column; align-items: stretch; gap: 4px; }
    .rotulo-inline select { width: 100%; }

    .cliente-card { flex-wrap: wrap; }
    .cliente-linha2 > span:not(:last-child)::after { content: none; }
    .cliente-linha2 { flex-direction: column; align-items: flex-start; gap: 2px; }

    .barra-selecao-campos { flex-direction: column; align-items: stretch; }
    .campo-massa { justify-content: space-between; }
}

/* ---------- Overlay de carregamento (consultas/acoes que podem demorar) ---------- */
.overlay-carregando {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 23, 0.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay-carregando[hidden] { display: none; }