/* static/css/app.css — SCAR design system: skin de tokens sobre Bootstrap + componentes .scar-*.
   Requer static/css/tokens.css carregado antes deste arquivo. */

/* ============ CANVAS E CONTEÚDO (substitui o <style> inline de base.html) ============ */
body, html { background-color: var(--scar-bg) !important; background-image: none !important; }
.main-wrapper { background-color: var(--scar-bg) !important; min-height: 100vh; background-image: none !important; }
.main-content { background-color: var(--scar-bg); font-family: var(--scar-font); }

body .main-content .bg-light { background-color: var(--scar-surface-alt) !important; }
body .main-content .bg-secondary { background-color: var(--scar-neutral-soft) !important; }
body .main-content .table-light, body .main-content .table thead.bg-light { background-color: var(--scar-surface-alt) !important; }

/* ============ CARDS (.card nativo do Bootstrap, usado em quase toda tela) ============ */
.main-content .card:not([class*="bg-grd-"]) {
  background: var(--scar-surface) !important;
  border-color: var(--scar-border) !important;
  border-radius: var(--scar-radius-lg);
  box-shadow: var(--scar-shadow-sm);
}
.main-content .card-header:not([class*="bg-grd-"]) {
  background: transparent !important;
  border-color: var(--scar-border) !important;
  color: var(--scar-text) !important;
  font-weight: 700;
  padding: var(--scar-space-3) var(--scar-card-pad);
}
.main-content .card-body { color: var(--scar-text-subtle) !important; padding: var(--scar-card-pad); }
.main-content .card-footer:not([class*="bg-grd-"]) {
  background: transparent !important;
  border-color: var(--scar-border) !important;
  padding: var(--scar-space-2) var(--scar-card-pad);
  color: var(--scar-text-muted);
  font-size: var(--scar-text-xs);
}

/* ============ TABELAS ============ */
.main-content table.table { border-color: var(--scar-border); }
.main-content table td, .main-content table th { color: var(--scar-text-subtle) !important; padding: var(--scar-row-pad-y) var(--scar-row-pad-x); }
.main-content table thead th {
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--scar-text-muted) !important; background: var(--scar-surface-alt);
  border-bottom: 1px solid var(--scar-border); position: sticky; top: 0; z-index: var(--scar-z-sticky);
}
.main-content table.table-hover tbody tr:hover td { background: var(--scar-surface-alt); }

/* ============ SUPERFÍCIES E LINHAS COM STATUS (theme-aware; consolidado dos <style>
   locais de apuracao_detalhe_partial.html, cargas_rejeitadas.html, clientes_com_valor.html
   e historico_cargas.html — substituem Tailwind bg-white/bg-zinc-*/bg-emerald-50 que não
   acompanhavam data-bs-theme). Única definição canônica: não redeclarar localmente. ============ */
.scar-bg-surface { background: var(--scar-surface) !important; }
.scar-bg-alt { background: var(--scar-surface-alt) !important; }
.scar-bg-success { background: var(--scar-primary-soft) !important; }
.scar-row-hover-alt:hover { background: var(--scar-surface-alt) !important; }
.scar-row-hover-success:hover { background: var(--scar-primary-soft) !important; }
.scar-row-hover-warning:hover { background: var(--scar-warning-soft) !important; }
.scar-row-hover-danger:hover { background: var(--scar-danger-soft) !important; }
.scar-row-hover-info:hover { background: var(--scar-info-soft) !important; }

/* Linhas de status com fundo permanente (substituem bg-red-50/bg-amber-50/bg-blue-50
   hover:bg-*-100 do Tailwind, que não acompanhavam dark mode e produziam texto
   ilegível contra --scar-text-subtle forçado acima). */
.scar-row--danger  { background: var(--scar-danger-soft); }
.scar-row--danger:hover  { filter: brightness(0.97); }
.scar-row--warning { background: var(--scar-warning-soft); }
.scar-row--warning:hover { filter: brightness(0.97); }
.scar-row--info    { background: var(--scar-info-soft); }
.scar-row--info:hover    { filter: brightness(0.97); }
.scar-row--success { background: var(--scar-primary-soft); }
.scar-row--success:hover { filter: brightness(0.97); }

/* ============ BADGES nativos (fallback de contraste; preferir .scar-badge em markup novo) ============ */
.main-content .badge.bg-opacity-10 { opacity: 1; }
.main-content .badge.bg-primary.bg-opacity-10 { background: var(--scar-primary-soft) !important; color: var(--scar-primary-text) !important; }
.main-content .badge.bg-success.bg-opacity-10 { background: var(--scar-primary-soft) !important; color: var(--scar-primary-text) !important; }
.main-content .badge.bg-warning.bg-opacity-10 { background: var(--scar-warning-soft) !important; color: var(--scar-warning-text) !important; }
.main-content .badge.bg-danger.bg-opacity-10 { background: var(--scar-danger-soft) !important; color: var(--scar-danger-text) !important; }
.main-content .badge.bg-info.bg-opacity-10 { background: var(--scar-info-soft) !important; color: var(--scar-info-text) !important; }
.main-content .badge.bg-secondary.bg-opacity-10 { background: var(--scar-neutral-soft) !important; color: var(--scar-neutral-text) !important; }

/* ============ BOTÕES nativos: raio e foco alinhados aos tokens ============ */
.main-content .btn { border-radius: var(--scar-radius-md); font-weight: 600; }
.main-content .btn:focus-visible { outline: 2px solid var(--scar-primary); outline-offset: 2px; }
.main-content .btn-primary { background-color: var(--scar-primary) !important; border-color: var(--scar-primary) !important; }

/* ============ MODAIS (Bootstrap .modal nativo) ============ */
.main-content ~ .modal .modal-content, .modal .modal-content {
  border-radius: var(--scar-radius-lg); border: 1px solid var(--scar-border);
  background: var(--scar-surface); box-shadow: var(--scar-shadow-lg);
}
.modal .modal-header { border-bottom: 1px solid var(--scar-border); font-weight: 700; font-size: 14.5px; padding: 14px 18px; }
.modal .modal-body { padding: 18px; font-size: 13.5px; color: var(--scar-text-subtle); }
.modal .modal-footer { border-top: 1px solid var(--scar-border); padding: 14px 18px; gap: 8px; }
.modal .btn-close:focus { box-shadow: 0 0 0 2px var(--scar-primary); }

/* Modais longos: manter cabecalho e rodape visiveis em telas baixas. */
.modal-dialog-scrollable {
  max-height: calc(100vh - 1rem);
  max-height: calc(100dvh - 1rem);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
  min-height: 0;
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } }

/* ============ FORMULÁRIOS nativos ============ */
body .main-content .form-control,
body .main-content .form-select,
body .main-content textarea.form-control {
  color: var(--scar-text) !important;
  -webkit-text-fill-color: var(--scar-text) !important;
  caret-color: var(--scar-text) !important;
  background: var(--scar-surface) !important;
  border-color: var(--scar-border-strong) !important;
  border-radius: var(--scar-radius-md);
}
body .main-content .form-control::placeholder { color: var(--scar-text-muted) !important; opacity: 1 !important; }
body .main-content .form-control:focus, body .main-content .form-select:focus {
  border-color: var(--scar-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--scar-primary) 20%, transparent) !important;
}
body .main-content .is-invalid { border-color: var(--scar-danger) !important; }
.main-content .invalid-feedback { color: var(--scar-danger); font-size: 12px; }

/* ============ TIPOGRAFIA / TEXTOS AUXILIARES ============ */
.main-content h1, .main-content h2, .main-content h3,
.main-content h4, .main-content h5, .main-content h6 { color: var(--scar-text); }
.main-content .bg-grd-primary h1, .main-content .bg-grd-primary h2, .main-content .bg-grd-primary h3,
.main-content .bg-grd-primary h4, .main-content .bg-grd-primary h5, .main-content .bg-grd-primary h6,
.main-content .bg-grd-warning h1, .main-content .bg-grd-warning h2, .main-content .bg-grd-warning h3,
.main-content .bg-grd-warning h4, .main-content .bg-grd-warning h5, .main-content .bg-grd-warning h6,
.main-content .alert h1, .main-content .alert h2, .main-content .alert h3,
.main-content .alert h4, .main-content .alert h5, .main-content .alert h6 { color: inherit !important; }
.main-content .form-label, .main-content label.form-label, .main-content legend,
.main-content .form-text, .main-content small { color: var(--scar-text-subtle); }
.main-content .text-muted, .main-content .text-secondary:not(.btn):not(.badge) { color: var(--scar-text-muted) !important; }
.main-content a.text-decoration-none:not(.btn):not(.nav-link) { color: var(--scar-text); }

/* ============ PAGINAÇÃO ============ */
.main-content .pagination .page-link { color: var(--scar-text-subtle); border-color: var(--scar-border); border-radius: var(--scar-radius-sm); }
.main-content .pagination .page-item.active .page-link {
  background-color: var(--scar-primary) !important; border-color: var(--scar-primary) !important; color: #ffffff !important;
}

/* ============ BREADCRUMB nativo ============ */
.main-content .breadcrumb-item, .main-content .breadcrumb-item.active,
.main-content .breadcrumb-item a { color: var(--scar-text-subtle); }
.main-content .breadcrumb-item.active { color: var(--scar-text); font-weight: 600; }

/* ============ ALERTAS ============ */
.main-content .alert { border-radius: var(--scar-radius-lg); border: 0; }

/* =====================================================================
   COMPONENTES NOVOS .scar-* — sem equivalente Bootstrap direto.
   Inserção aditiva nos templates: não substituem markup existente,
   preenchem lacunas (breadcrumb, filtro, empty-state, toast, loading).
   ===================================================================== */

.scar-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; font-family: var(--scar-font); border: 1px solid transparent; }
.scar-badge--success { background: var(--scar-primary-soft); color: var(--scar-primary-text); }
.scar-badge--warning { background: var(--scar-warning-soft); color: var(--scar-warning-text); }
.scar-badge--danger  { background: var(--scar-danger-soft);  color: var(--scar-danger-text); }
.scar-badge--info    { background: var(--scar-info-soft);    color: var(--scar-info-text); }
.scar-badge--neutral { background: var(--scar-neutral-soft); color: var(--scar-neutral-text); }

.scar-btn { font-family: var(--scar-font); font-weight: 600; border-radius: var(--scar-radius-md); border: 1px solid transparent; cursor: pointer; transition: filter .12s, background .12s; }
.scar-btn:focus-visible { outline: 2px solid var(--scar-primary); outline-offset: 2px; }
.scar-btn--sm { padding: 7px 14px; font-size: 13px; }
.scar-btn--md { padding: 10px 18px; font-size: 14.5px; }
.scar-btn--primary   { background: var(--scar-primary); color: #ffffff; }
.scar-btn--primary:hover { filter: brightness(0.92); }
[data-bs-theme="dark"] .scar-btn--primary { color: #022c22; }
.scar-btn--secondary { background: var(--scar-surface-alt); color: var(--scar-text); border-color: var(--scar-border); }
.scar-btn--ghost     { background: transparent; color: var(--scar-text-subtle); border-color: var(--scar-border-strong); }
.scar-btn--danger    { background: transparent; color: var(--scar-danger); border-color: var(--scar-danger); }
.scar-btn--icon      { padding: 8px; border-radius: var(--scar-radius-md); }
.scar-btn:disabled   { opacity: .5; cursor: not-allowed; }

.scar-form-group { margin-bottom: var(--scar-space-4); }
.scar-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--scar-text-subtle); margin-bottom: 6px; }
.scar-input, .scar-select, textarea.scar-input { width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: var(--scar-text-sm); border-radius: var(--scar-radius-md); border: 1px solid var(--scar-border-strong); background: var(--scar-surface); color: var(--scar-text); font-family: var(--scar-font); }
.scar-input:focus, .scar-select:focus { outline: none; border-color: var(--scar-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--scar-primary) 20%, transparent); }
.scar-input.is-invalid { border-color: var(--scar-danger); }
.scar-form-error { font-size: 12px; color: var(--scar-danger); margin-top: 5px; }
.scar-form-help { font-size: 12px; color: var(--scar-text-muted); margin-top: 5px; }

.scar-filter-bar { display: flex; gap: 10px; padding: 14px; background: var(--scar-surface-alt); border: 1px solid var(--scar-border); border-radius: var(--scar-radius-lg); margin-bottom: var(--scar-space-4); flex-wrap: wrap; }
.scar-filter-bar .scar-input { flex: 2; min-width: 160px; }
.scar-filter-bar .scar-select { flex: 1; min-width: 110px; }
@media (max-width: 992px) {
  .scar-filter-bar { flex-direction: column; }
  .scar-filter-bar.is-collapsed .scar-filter-bar-fields { display: none; }
}

.scar-breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--scar-text-muted); margin-bottom: 14px; flex-wrap: wrap; }
.scar-breadcrumb a { color: var(--scar-text-muted); text-decoration: none; }
.scar-breadcrumb a:hover { color: var(--scar-primary); text-decoration: underline; }
.scar-breadcrumb [aria-current="page"] { color: var(--scar-text); font-weight: 600; }
.scar-breadcrumb-sep { color: var(--scar-border-strong); }

.scar-toast-region { position: fixed; z-index: var(--scar-z-toast); display: flex; flex-direction: column; gap: 10px; padding: 16px; pointer-events: none; }
.scar-toast-region--bottom-right { bottom: 0; right: 0; }
.scar-toast { pointer-events: auto; padding: 12px 16px; border-radius: var(--scar-radius-md); font-size: 13.5px; font-weight: 600; box-shadow: var(--scar-shadow-md); border-left: 3px solid; max-width: 320px; animation: scarToastIn .18s ease-out; }
.scar-toast--success { background: var(--scar-primary-soft); color: var(--scar-primary-text); border-left-color: var(--scar-primary); }
.scar-toast--danger  { background: var(--scar-danger-soft);  color: var(--scar-danger-text);  border-left-color: var(--scar-danger); }
@keyframes scarToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .scar-toast { animation: none; } }

.scar-empty-state { text-align: center; padding: 36px 24px; background: var(--scar-surface-alt); border: 1px dashed var(--scar-border-strong); border-radius: var(--scar-radius-xl); }
.scar-empty-state .material-icons-outlined { font-size: 36px; color: var(--scar-text-muted); margin-bottom: 8px; }
.scar-empty-state h3 { font-size: 15.5px; font-weight: 700; color: var(--scar-text); margin: 0 0 6px; }
.scar-empty-state p { font-size: 13.5px; color: var(--scar-text-muted); margin: 0 0 16px; max-width: 320px; margin-left: auto; margin-right: auto; }

.scar-loading-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--scar-border); z-index: var(--scar-z-sticky); opacity: 0; transition: opacity .15s; }
.scar-loading-bar.htmx-request, .scar-loading-bar.htmx-indicator.htmx-request { opacity: 1; }
.scar-loading-bar-fill { position: absolute; inset: 0; width: 40%; background: var(--scar-primary); animation: scarLoadingSweep 1.2s ease-in-out infinite; }
@keyframes scarLoadingSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .scar-loading-bar-fill { animation: none; width: 100%; } }

.scar-card { background: var(--scar-surface); border: 1px solid var(--scar-border); border-radius: var(--scar-radius-lg); box-shadow: var(--scar-shadow-sm); overflow: hidden; margin-bottom: var(--scar-space-4); }
.scar-card-header { display: flex; justify-content: space-between; align-items: center; padding: var(--scar-space-3) var(--scar-card-pad); border-bottom: 1px solid var(--scar-border); font-family: var(--scar-font); font-weight: 700; font-size: var(--scar-text-sm); color: var(--scar-text); }
.scar-card-action { font-size: var(--scar-text-xs); color: var(--scar-primary); font-weight: 600; text-decoration: none; }
.scar-card-body { padding: var(--scar-card-pad); font-family: var(--scar-font); font-size: var(--scar-text-sm); color: var(--scar-text-subtle); }
.scar-card-footer { padding: var(--scar-space-2) var(--scar-card-pad); border-top: 1px solid var(--scar-border); font-size: var(--scar-text-xs); color: var(--scar-text-muted); }

.scar-table { width: 100%; border-collapse: collapse; background: var(--scar-surface); border: 1px solid var(--scar-border); border-radius: var(--scar-radius-lg); overflow: hidden; }
.scar-table thead th { text-align: left; padding: var(--scar-row-pad-y) var(--scar-row-pad-x); font-family: var(--scar-font); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--scar-text-muted); background: var(--scar-surface-alt); border-bottom: 1px solid var(--scar-border); position: sticky; top: 0; z-index: var(--scar-z-sticky); }
.scar-table td { padding: var(--scar-row-pad-y) var(--scar-row-pad-x); font-family: var(--scar-font); font-size: var(--scar-text-sm); color: var(--scar-text-subtle); border-bottom: 1px solid var(--scar-border); }
.scar-table tbody tr:hover td { background: var(--scar-surface-alt); }
.scar-table .scar-table-empty td { text-align: center; padding: var(--scar-space-6); color: var(--scar-text-muted); }

/* ============ WORKSPACE (Alocação Express, Apuração por Entidade) ============ */
.scar-workspace { display: grid; grid-template-columns: 2fr 1fr; gap: 0; border: 1px solid var(--scar-border); border-radius: var(--scar-radius-lg); overflow: hidden; }
.scar-workspace.entidade-workspace { grid-template-columns: 1fr; }
.scar-workspace-main { padding: var(--scar-card-pad); background: var(--scar-surface); }
.scar-workspace-side { padding: var(--scar-card-pad); background: var(--scar-surface-alt); border-left: 1px solid var(--scar-border); display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 992px) { .scar-workspace { grid-template-columns: 1fr; } .scar-workspace-side { border-left: 0; border-top: 1px solid var(--scar-border); } }

/* ============ KPI cards clicáveis (dashboards) ============ */
.scar-kpi-card { background: var(--scar-surface); border: 1px solid var(--scar-border); border-radius: var(--scar-radius-lg); padding: var(--scar-card-pad); box-shadow: var(--scar-shadow-sm); transition: box-shadow .12s, border-color .12s; }
a.scar-kpi-card, .scar-kpi-card[role="button"] { display: block; text-decoration: none; cursor: pointer; }
a.scar-kpi-card:hover, .scar-kpi-card[role="button"]:hover { box-shadow: var(--scar-shadow-md); border-color: var(--scar-border-strong); }
.scar-kpi-value { font-size: 30px; font-weight: 800; color: var(--scar-text); margin: 6px 0; }