/* ===================================
   STAT CARDS — painel resumo (v2)
   =================================== */
.stat-card {
  border-radius: 12px;
  border: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: default;
}
.stat-card.accent-primary   { box-shadow: inset 4px 0 0 #0d6efd, 0 1px 4px rgba(0,0,0,.07) !important; }
.stat-card.accent-success   { box-shadow: inset 4px 0 0 #198754, 0 1px 4px rgba(0,0,0,.07) !important; }
.stat-card.accent-warning   { box-shadow: inset 4px 0 0 #ffc107, 0 1px 4px rgba(0,0,0,.07) !important; }
.stat-card.accent-info      { box-shadow: inset 4px 0 0 #0dcaf0, 0 1px 4px rgba(0,0,0,.07) !important; }
.stat-card.accent-purple    { box-shadow: inset 4px 0 0 #6f42c1, 0 1px 4px rgba(0,0,0,.07) !important; }
.stat-card.accent-secondary { box-shadow: inset 4px 0 0 #6c757d, 0 1px 4px rgba(0,0,0,.07) !important; }
.stat-card.accent-teal      { box-shadow: inset 4px 0 0 #20c997, 0 1px 4px rgba(0,0,0,.07) !important; }
.stat-card.accent-body      { box-shadow: inset 4px 0 0 #adb5bd, 0 1px 4px rgba(0,0,0,.07) !important; }

.stat-card:hover { transform: translateY(-3px); }
.stat-card.accent-primary:hover   { box-shadow: inset 4px 0 0 #0d6efd, 0 6px 16px rgba(13,110,253,.14) !important; }
.stat-card.accent-success:hover   { box-shadow: inset 4px 0 0 #198754, 0 6px 16px rgba(25,135,84,.14) !important; }
.stat-card.accent-warning:hover   { box-shadow: inset 4px 0 0 #ffc107, 0 6px 16px rgba(255,193,7,.14) !important; }
.stat-card.accent-info:hover      { box-shadow: inset 4px 0 0 #0dcaf0, 0 6px 16px rgba(13,202,240,.14) !important; }
.stat-card.accent-purple:hover    { box-shadow: inset 4px 0 0 #6f42c1, 0 6px 16px rgba(111,66,193,.14) !important; }
.stat-card.accent-secondary:hover { box-shadow: inset 4px 0 0 #6c757d, 0 6px 16px rgba(108,117,125,.14) !important; }
.stat-card.accent-teal:hover      { box-shadow: inset 4px 0 0 #20c997, 0 6px 16px rgba(32,201,151,.14) !important; }
.stat-card.accent-body:hover      { box-shadow: inset 4px 0 0 #adb5bd, 0 6px 16px rgba(173,181,189,.14) !important; }

/* Círculo do ícone (stat + action cards) */
.icon-wrap {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-wrap-sm { width: 44px; height: 44px; border-radius: 10px; font-size: 1.1rem; }
.icon-wrap-md { width: 48px; height: 48px; font-size: 1.2rem; }

.icon-wrap-primary   { background: rgba(13,110,253,.12);  color: #0d6efd; }
.icon-wrap-success   { background: rgba(25,135,84,.12);   color: #198754; }
.icon-wrap-warning   { background: rgba(255,193,7,.18);   color: #997404; }
.icon-wrap-info      { background: rgba(13,202,240,.15);  color: #087990; }
.icon-wrap-purple    { background: rgba(111,66,193,.12);  color: #6f42c1; }
.icon-wrap-secondary { background: rgba(108,117,125,.12); color: #6c757d; }
.icon-wrap-teal      { background: rgba(32,201,151,.15);  color: #13795b; }
.icon-wrap-body      { background: rgba(173,181,189,.20); color: #6c757d; }

.text-teal { color: #13795b !important; }
:root[data-theme="dark"] .text-teal { color: #5eead4 !important; }

.stat-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ===================================
   ACTION CARDS — atalhos do painel (v2)
   =================================== */
.action-card {
  border: none !important;
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.10) !important;
}
.action-card-footer {
  font-size: .78rem;
  font-weight: 600;
  color: var(--link);
  background: transparent;
  border-top: none;
  padding-top: 0;
}

/* ===================================
   SKIP LINK (§19.15) — escondido até receber foco por teclado
   =================================== */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: .5rem 1rem;
  background: var(--bg-card);
  color: var(--link);
  border: 2px solid var(--link);
  border-radius: var(--radius-sm, 6px);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-2);
}

#main-content:focus {
  outline: none;
}

/* ===================================
   FOCUS-VISIBLE — componentes clicáveis customizados (§19.5#2, §19.7#4, §19.15)
   Bootstrap já trata .btn / .form-control. Aqui só o que é custom.
   =================================== */
.stat-card:focus-visible,
.action-card:focus-visible,
.action-card a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  transform: translateY(-3px);
}

/* Linhas de tabela clicáveis (role="button" / data-bs-toggle="modal") */
tr[role="button"]:focus-visible,
.table tr[data-bs-toggle="modal"]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -2px;
}

/* Links da sidebar (menu compartilhado de todos os perfis) */
.app-menu a:focus-visible,
.menu-dropdown-toggle:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -2px;
}


/* ===================================
   THEME TOKENS
   =================================== */

/* Light (default) */
:root {
  --bg-main: #f8f9fa;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-nav: #ffffff;

  --text-main: #212529;
  --text-muted: #5a6268;

  --border-color: #dee2e6;

  --link: #0d6efd;
  --link-hover: #0a58ca;

  /* Raio */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Sombras (claro) */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-3: 0 10px 24px rgba(16, 24, 40, .12);

  /* Espaçamentos semânticos */
  --gap-section: 1.5rem;
  --gap-stack:   1rem;
  --gap-inline:  .5rem;

  /* Estados */
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-danger:  #dc3545;
  --color-info:    #0dcaf0;

  /* Superfícies semânticas (derivadas) */
  --surface-success: color-mix(in srgb, var(--color-success) 10%, var(--bg-card));
  --surface-warning: color-mix(in srgb, var(--color-warning) 10%, var(--bg-card));
  --surface-danger:  color-mix(in srgb, var(--color-danger)  10%, var(--bg-card));
  --surface-info:    color-mix(in srgb, var(--color-info)    10%, var(--bg-card));

  /* Faixas de rendimento */
  --faixa-alto:  var(--color-success);
  --faixa-medio: var(--color-warning);
  --faixa-baixo: var(--color-danger);
}

/* System dark fallback (quando NÃO há override manual) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-main: #282a36;     /* Dracula */
    --bg-card: #1e1f29;
    --bg-elevated: #2a2c3a;
    --bg-nav:  #21222c;

    --text-main: #f8f8f2;
    --text-muted: #bfbfbf;

    --border-color: #44475a;

    --link: #8be9fd;
    --link-hover: color-mix(in srgb, #8be9fd 80%, #ffffff);

    --shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --shadow-2: 0 4px 12px rgba(0,0,0,.50);
    --shadow-3: 0 10px 24px rgba(0,0,0,.55);
  }
}

/* Manual override: DARK (Dracula) */
:root[data-theme="dark"] {
  --bg-main: #282a36;
  --bg-card: #1e1f29;
  --bg-elevated: #2a2c3a;
  --bg-nav:  #21222c;

  --text-main: #f8f8f2;
  --text-muted: #bfbfbf;

  --border-color: #44475a;

  --link: #8be9fd;
  --link-hover: color-mix(in srgb, #8be9fd 80%, #ffffff);

  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 4px 12px rgba(0,0,0,.50);
  --shadow-3: 0 10px 24px rgba(0,0,0,.55);
}

/* Manual override: LIGHT */
:root[data-theme="light"] {
  --bg-main: #f8f9fa;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-nav: #ffffff;

  --text-main: #212529;
  --text-muted: #5a6268;

  --border-color: #dee2e6;

  --link: #0d6efd;
  --link-hover: #0a58ca;
}

/* ===================================
   APPLY TOKENS (global)
   =================================== */

html, body {
  background-color: var(--bg-main);
  color: var(--text-main);
}

.app-root {
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* Bootstrap components harmonizados */
.card, .modal-content {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
}

.navbar {
  background-color: var(--bg-nav) !important;
}

hr, .border, .border-top, .border-bottom, .border-start, .border-end {
  border-color: var(--border-color) !important;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* Botão flutuante do tema */
.theme-toggle-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

/* ===================================
   FORM + TEXT FIX (Bootstrap friendly)
   Cole no FINAL do CSS global
   =================================== */

/* Tokens extras (opcional, mas ajuda muito) */
:root {
  --input-bg: var(--bg-card);
  --input-text: var(--text-main);
  --input-border: var(--border-color);
  --input-placeholder: color-mix(in srgb, var(--text-muted) 85%, transparent);
  --focus-ring: color-mix(in srgb, var(--link) 30%, transparent);
}

/* Força herança de cor em textos “soltos” */
body, .app-root,
p, span, small, label, legend, li,
h1,h2,h3,h4,h5,h6,
.form-label, .form-text, .col-form-label,
.table, .list-group, .breadcrumb, .dropdown-menu {
  color: var(--text-main);
}

/* Texto “muted” coerente no dark */
.text-muted, .form-text, .invalid-feedback, .valid-feedback {
  color: var(--text-muted) !important;
}

/* Base dos formulários */
.form-control,
.form-select,
.form-control-plaintext,
.form-check-input,
.input-group-text {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}

/* Placeholder (muito importante no dark) */
.form-control::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1;
}

/* Focus */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--link) !important;
  box-shadow: 0 0 0 .25rem var(--focus-ring) !important;
}

/* Campos desabilitados */
.form-control:disabled,
.form-select:disabled {
  opacity: .85;
  background-color: color-mix(in srgb, var(--input-bg) 70%, #0000) !important;
}

/* Checkbox / radio preenchimento no dark */
.form-check-input:checked {
  background-color: var(--link) !important;
  border-color: var(--link) !important;
}

/* Tabelas */
.table {
  --bs-table-bg: var(--bg-card);
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-color);
}
.table thead {
  background-color: var(--bg-main);
}
.table thead th {
  color: var(--text-main);
  border-color: var(--border-color);
}

/* Dropdown */
.dropdown-menu {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
.dropdown-item {
  color: var(--text-main) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: color-mix(in srgb, var(--link) 12%, transparent) !important;
}

/* Modal */
.modal-content {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

/* Botão “X” do modal (no dark ele some fácil) */
.btn-close {
  filter: invert(1) grayscale(100%);
}
:root[data-theme="light"] .btn-close {
  filter: none;
}

/* Cards / List group */
.card, .list-group-item {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

/* `bg-white` é literal no Bootstrap — no dark vira faixa branca dentro do card.
   Reescreve-se para a superfície do card no dark (cobrindo card-header, card-footer
   e qualquer outro elemento que use `.bg-white` como "fundo de painel"). */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .card-header.bg-white,
:root[data-theme="dark"] .card-footer.bg-white {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .bg-white,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .card-header.bg-white,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .card-footer.bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
  }
}

/* `bg-light` — no dark continua #f8f9fa, causando texto branco sobre fundo branco.
   Mesma estratégia do bg-white: remapeia para a superfície elevada. */
:root[data-theme="dark"] .bg-light {
  background-color: var(--bg-elevated) !important;
  color: var(--text-main) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .bg-light {
    background-color: var(--bg-elevated) !important;
    color: var(--text-main) !important;
  }
}

/* `table-light` — variante de tabela do Bootstrap com cores fixas (não segue
   data-bs-theme). No dark, linhas/theads de grupo continuam claros. Remapeia
   as variáveis --bs-table-* para as superfícies do tema escuro. */
:root[data-theme="dark"] .table-light {
  --bs-table-bg: var(--bg-elevated);
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: var(--bg-elevated);
  --bs-table-striped-color: var(--text-main);
  --bs-table-active-bg: var(--bg-elevated);
  --bs-table-active-color: var(--text-main);
  --bs-table-hover-bg: var(--bg-elevated);
  --bs-table-hover-color: var(--text-main);
  color: var(--text-main);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .table-light {
    --bs-table-bg: var(--bg-elevated);
    --bs-table-color: var(--text-main);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-elevated);
    --bs-table-striped-color: var(--text-main);
    --bs-table-active-bg: var(--bg-elevated);
    --bs-table-active-color: var(--text-main);
    --bs-table-hover-bg: var(--bg-elevated);
    --bs-table-hover-color: var(--text-main);
    color: var(--text-main);
  }
}

/* `bg-success-subtle` / `border-success-subtle` — versão escura legível */
:root[data-theme="dark"] .bg-success-subtle {
  background-color: rgba(25, 135, 84, .15) !important;
  color: var(--text-main) !important;
}
:root[data-theme="dark"] .border-success-subtle {
  border-color: rgba(25, 135, 84, .35) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .bg-success-subtle {
    background-color: rgba(25, 135, 84, .15) !important;
    color: var(--text-main) !important;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .border-success-subtle {
    border-color: rgba(25, 135, 84, .35) !important;
  }
}

/* Links em navs */
.nav-link { color: var(--text-main); }
.nav-link:hover { color: var(--link-hover); }

/* Corrige AUTOFILL do Chrome (fica branco/amarelo) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--input-text) !important;
  box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}