/* Ajustes da marca eucorro.com sobre o Bootstrap 5.3 (amarelo #FFE200 + preto).
   Contrastes conferidos (WCAG AA): texto preto sobre amarelo 14,5:1; link dourado 5,4:1. */
:root, [data-bs-theme="light"] {
  --marca: #ffe200;
  --marca-hover: #f0d400;
  --sobre-marca: #111110;
  --cabecalho: #141413;
  --destaque: #fff6b8;
  --barra: #141413;
  --bs-body-bg: #f6f5f0;
  --bs-body-bg-rgb: 246, 245, 240;
  --bs-body-color: #1b1b19;
  --bs-secondary-color: #6b6a63;
  --bs-border-color: #e4e2da;
  --bs-link-color: #7a6200;
  --bs-link-color-rgb: 122, 98, 0;
  --bs-link-hover-color: #5c4a00;
  --bs-link-hover-color-rgb: 92, 74, 0;
  --bs-success: #1d7f4e;
  --bs-success-rgb: 29, 127, 78;
  --bs-danger: #c62f3a;
  --bs-danger-rgb: 198, 47, 58;
  --bs-focus-ring-color: rgba(20, 20, 19, 0.3);
}
[data-bs-theme="dark"] {
  --destaque: #2e2a10;
  --barra: #ffe200;
  --bs-body-bg: #121211;
  --bs-body-bg-rgb: 18, 18, 17;
  --bs-body-color: #f2f1ec;
  --bs-secondary-color: #a3a198;
  --bs-tertiary-bg: #1d1d1b;
  --bs-secondary-bg: #262624;
  --bs-border-color: #34332e;
  --bs-link-color: #ffe200;
  --bs-link-color-rgb: 255, 226, 0;
  --bs-link-hover-color: #fff07a;
  --bs-link-hover-color-rgb: 255, 240, 122;
  --bs-success: #4cc38a;
  --bs-success-rgb: 76, 195, 138;
  --bs-danger: #ff6b75;
  --bs-danger-rgb: 255, 107, 117;
  --bs-focus-ring-color: rgba(255, 226, 0, 0.35);
}
[data-bs-theme="dark"] .card { --bs-card-bg: #1d1d1b; }

/* Botão principal: amarelo com texto preto */
.btn-primary {
  --bs-btn-bg: var(--marca); --bs-btn-border-color: var(--marca); --bs-btn-color: var(--sobre-marca);
  --bs-btn-hover-bg: var(--marca-hover); --bs-btn-hover-border-color: var(--marca-hover); --bs-btn-hover-color: var(--sobre-marca);
  --bs-btn-active-bg: #e6cb00; --bs-btn-active-border-color: #e6cb00; --bs-btn-active-color: var(--sobre-marca);
  --bs-btn-disabled-bg: var(--marca); --bs-btn-disabled-border-color: var(--marca); --bs-btn-disabled-color: var(--sobre-marca);
  --bs-btn-focus-shadow-rgb: 255, 226, 0;
  font-weight: 500;
}
.form-control:focus, .form-select:focus { border-color: #b39a00; box-shadow: 0 0 0 0.25rem rgba(255, 226, 0, 0.35); }
.form-check-input:checked { background-color: #7a6200; border-color: #7a6200; }
.form-check-input:focus { border-color: #b39a00; box-shadow: 0 0 0 0.25rem rgba(255, 226, 0, 0.35); }
.pagination {
  --bs-pagination-active-bg: var(--cabecalho); --bs-pagination-active-border-color: var(--cabecalho);
  --bs-pagination-active-color: #fff; --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(255, 226, 0, 0.35);
}
[data-bs-theme="dark"] .pagination { --bs-pagination-active-bg: var(--marca); --bs-pagination-active-border-color: var(--marca); --bs-pagination-active-color: var(--sobre-marca); }
.progress { --bs-progress-bar-bg: var(--barra); }

/* Cabeçalho: logo, usuário e sair */
.topo { background: var(--cabecalho); border-bottom: 3px solid var(--marca); height: 59px; }
.topo .navbar-brand img { height: 34px; width: auto; display: block; }
.topo .usuario-menu { color: #c9c7bf; border: 1px solid #3a3934; }
.topo .usuario-menu:hover, .topo .usuario-menu[aria-expanded="true"] { color: #fff; border-color: #c9c7bf; }
.topo .dropdown-menu { min-width: 240px; }

/* Menu lateral (fixo em telas grandes; gaveta "offcanvas" em telas menores) */
@media (min-width: 992px) {
  .lateral {
    position: sticky; top: 59px; width: 240px; flex: 0 0 240px; height: calc(100vh - 59px);
    overflow-y: auto; border-right: 1px solid var(--bs-border-color);
  }
  [data-bs-theme="light"] .lateral { background: #fff; }
  [data-bs-theme="dark"] .lateral { background: #1d1d1b; }
}
.lateral .nav-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px;
  color: var(--bs-body-color); border-left: 3px solid transparent;
}
.lateral .nav-link .bi { font-size: 1.15rem; color: var(--bs-secondary-color); }
.lateral .nav-link:hover { background: var(--destaque); }
.lateral .nav-link.active { background: var(--destaque); color: var(--bs-body-color); border-left-color: var(--marca); font-weight: 600; }
.lateral .nav-link.active .bi { color: var(--bs-body-color); }

/* Login e telas sem menu */
.login { max-width: 380px; margin: 8vh auto 0; }
.login-logo { display: block; margin: 0 auto 8px; width: 220px; max-width: 80%; height: auto; }

/* Indicadores (números grandes) */
.indicador .numero { font-size: 2rem; font-weight: 600; line-height: 1.1; }

/* Coluna ID discreta */
td.id, th.id { width: 1%; white-space: nowrap; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.id-titulo { font-size: 0.9rem; font-weight: 400; color: var(--bs-secondary-color); }

/* Envio de fotos */
.seletor { border: 2px dashed var(--bs-border-color); background: transparent; }
.seletor.ativo { border-color: var(--bs-body-color); background: var(--destaque); }
.avisos li::before { content: "⚠ "; }
.lista-arquivos .arquivo { word-break: break-all; }
.lista-arquivos .situacao { width: 40%; }
.lista-arquivos .progress { height: 6px; }
.lista-arquivos tr.enviada .progress-bar { background: var(--bs-success); }
.lista-arquivos tr.enviada small { color: var(--bs-success); }
.lista-arquivos tr.duplicada .progress-bar { background: var(--bs-secondary-color); }
.lista-arquivos tr.erro .progress-bar { background: var(--bs-danger); }
.lista-arquivos tr.erro small { color: var(--bs-danger); }

/* Status das fotos */
.status-pendente, .status-processando { color: var(--bs-secondary-color); }
.status-concluida { color: var(--bs-success); }
.status-erro { color: var(--bs-danger); }

/* DataTables: barra de busca/paginação com respiro */
div.dt-container .dt-layout-row { margin: 0.5rem 0; }
/* Números e datas alinhados à esquerda como as demais colunas (o DataTables alinha à direita) */
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date { text-align: left; }
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-header { flex-direction: row; }

/* Gaveta do menu no celular com largura confortável */
.lateral.offcanvas-lg { --bs-offcanvas-width: 280px; }

/* Links com a cor da marca (o .link-primary do Bootstrap é azul) */
.link-marca { color: var(--bs-link-color); text-decoration: underline; cursor: pointer; margin: 0; }
.link-marca:hover { color: var(--bs-link-hover-color); }

/* Lista de envio: altura limitada com rolagem e cabeçalho fixo */
.lista-rolagem { max-height: 60vh; overflow-y: auto; }
.lista-rolagem .cabecalho-fixo th { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); box-shadow: inset 0 -1px 0 var(--bs-border-color); }
[data-bs-theme="light"] .lista-rolagem .cabecalho-fixo th { background: #fff; }
[data-bs-theme="dark"] .lista-rolagem .cabecalho-fixo th { background: #1d1d1b; }

/* Tela de edição: única que mostra a foto (versão menor) */
.foto-edicao { display: block; width: auto; height: auto; max-width: 100%; max-height: 70vh; }

/* Rostos detectados marcados sobre a foto (só na tela de edição) */
/* O quadro tem exatamente o tamanho da imagem, então as posições em % dos rostos coincidem */
.foto-rostos { position: relative; display: inline-block; max-width: 100%; }
.foto-rostos .rosto { position: absolute; border: 2px solid var(--marca); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); pointer-events: none; }

/* Tom Select com as cores da marca e no tema escuro */
.ts-wrapper.multi .ts-control > .item { background: var(--destaque); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: 6px; }
.ts-wrapper.focus .ts-control { border-color: #b39a00; box-shadow: 0 0 0 0.25rem rgba(255, 226, 0, 0.35); }
.ts-dropdown .active { background: var(--destaque); color: var(--bs-body-color); }
.ts-dropdown .option.disabled, .ts-dropdown [data-disabled] { opacity: 0.55; }
[data-bs-theme="dark"] .ts-control, [data-bs-theme="dark"] .ts-dropdown, [data-bs-theme="dark"] .ts-control input {
  background: #1d1d1b; color: var(--bs-body-color); border-color: var(--bs-border-color);
}