/* ===================================================================
   app/static/css/style.css
   Visual completo e polido do Banco de Questoes
=================================================================== */

/* --- Variaveis de cor --- */
:root {
  --cor-primaria: #2563eb;
  --cor-primaria-escura: #1d4ed8;
  --cor-primaria-clara: #eff6ff;
  --cor-fundo: #f1f5f9;
  --cor-card: #ffffff;
  --cor-texto: #1e293b;
  --cor-texto-suave: #64748b;
  --cor-borda: #e2e8f0;
  --cor-correta: #16a34a;
  --cor-correta-fundo: #f0fdf4;
  --cor-correta-borda: #bbf7d0;
  --sombra-suave: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --sombra-card: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.05);
  --raio: 10px;
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* --- Navbar --- */
.navbar {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  padding-top: .65rem;
  padding-bottom: .65rem;
}

.navbar-brand {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.2px;
}

.navbar .nav-link {
  font-size: .88rem;
  font-weight: 500;
  padding: .4rem .75rem !important;
  border-radius: 6px;
  transition: background .15s;
}

.navbar .nav-link:hover { background: rgba(255,255,255,.12); }

.navbar .dropdown-menu {
  border: none;
  box-shadow: var(--sombra-card);
  border-radius: var(--raio);
  font-size: .9rem;
}

/* --- Cards --- */
.card {
  border-radius: var(--raio) !important;
  background-color: var(--cor-card);
  box-shadow: var(--sombra-card);
  border: 1px solid var(--cor-borda) !important;
}

.card-body { padding: 1.5rem; }

/* --- Botoes --- */
.btn {
  border-radius: 8px;
  font-weight: 500;
  font-size: .88rem;
  transition: all .15s ease;
}

.btn-primary {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.btn-primary:hover {
  background-color: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,.3);
}

.btn-outline-primary { color: var(--cor-primaria); border-color: var(--cor-primaria); }
.btn-outline-primary:hover { background-color: var(--cor-primaria-clara); color: var(--cor-primaria); border-color: var(--cor-primaria); }

/* --- Formularios --- */
.form-control, .form-select {
  border-radius: 8px;
  border-color: var(--cor-borda);
  font-size: .9rem;
  padding: .55rem .85rem;
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus, .form-select:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.form-label { font-size: .88rem; margin-bottom: .35rem; }

/* --- Tabelas --- */
.table { font-size: .88rem; }
.table thead th {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cor-texto-suave);
  background-color: #f8fafc;
  border-bottom: 1px solid var(--cor-borda);
  padding: .75rem 1rem;
}
.table td { padding: .75rem 1rem; vertical-align: middle; }
.table-hover tbody tr:hover { background-color: var(--cor-primaria-clara); }

/* --- Badges --- */
.badge { border-radius: 6px; font-weight: 500; }

/* --- Alertas flash --- */
.alert {
  border-radius: var(--raio);
  border: none;
  font-size: .9rem;
  box-shadow: var(--sombra-suave);
}

/* --- Paginacao --- */
.page-link {
  border-radius: 6px !important;
  margin: 0 2px;
  border: 1px solid var(--cor-borda);
  color: var(--cor-primaria);
  font-size: .85rem;
}
.page-item.active .page-link { background-color: var(--cor-primaria); border-color: var(--cor-primaria); }

/* --- Cards de autenticacao (login, cadastro) --- */
.card-auth {
  max-width: 440px;
  margin: 2rem auto;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

.card-auth .card-body { padding: 2.2rem 2rem; }

/* --- Dashboard admin: cards de estatistica --- */
.card-stat {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: var(--sombra-card);
  transition: transform .2s, box-shadow .2s;
  text-align: center;
  padding: 1.5rem 1rem;
}

.card-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

.card-stat .stat-icone {
  font-size: 2.5rem;
  display: block;
  margin-bottom: .75rem;
}

.card-stat .stat-numero {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .25rem;
}

.card-stat .stat-label { color: var(--cor-texto-suave); font-size: .85rem; }

/* --- Questoes: alternativas --- */
.alternativa-correta {
  background-color: var(--cor-correta-fundo);
  border: 1.5px solid var(--cor-correta-borda);
  border-radius: 8px;
  padding: .65rem .9rem;
}

.alternativa-incorreta {
  background-color: #fafafa;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: .65rem .9rem;
}

.icone-correto { color: var(--cor-correta); }

/* --- Barra de busca --- */
.input-group-lg .form-control { font-size: .95rem; }

/* --- Input group: remove borda dupla entre campos adjacentes --- */
.input-group .form-control:not(:last-child) { border-right: none; }
.input-group .btn-outline-secondary { border-color: var(--cor-borda); background: #fff; color: var(--cor-texto-suave); }
.input-group .btn-outline-secondary:hover { background: #f1f5f9; }

/* --- Chips de tags no formulario de pergunta --- */
#containerChipsTags .badge {
  font-size: .85rem;
  padding: .4rem .65rem;
  border-radius: 20px;
}

/* --- Rodape --- */
footer {
  background-color: #f8fafc !important;
  border-top: 1px solid var(--cor-borda) !important;
  color: var(--cor-texto-suave);
  font-size: .8rem;
  padding: 1rem 0;
}

/* --- Utilitarios --- */
.text-primary { color: var(--cor-primaria) !important; }
.bg-primary   { background-color: var(--cor-primaria) !important; }
.border-primary { border-color: var(--cor-primaria) !important; }

/* --- Responsividade extra --- */
@media (max-width: 576px) {
  .card-body { padding: 1.25rem 1rem; }
  .card-auth .card-body { padding: 1.5rem 1.1rem; }
  .table-responsive { font-size: .82rem; }
}


/* ===================================================================
   MODO ESCURO (Sugestao 5)
   Ativado adicionando data-theme="dark" na tag <html>.
   O JavaScript em dark_mode.js faz essa troca e salva no localStorage.
=================================================================== */
[data-theme="dark"] {
  --cor-fundo: #0f172a;
  --cor-card: #1e293b;
  --cor-texto: #e2e8f0;
  --cor-texto-suave: #94a3b8;
  --cor-borda: #334155;
  --cor-primaria-clara: #1e3a5f;
  --cor-correta-fundo: #14532d;
  --cor-correta-borda: #166534;
}

[data-theme="dark"] body { background-color: var(--cor-fundo); color: var(--cor-texto); }
[data-theme="dark"] .card { background-color: var(--cor-card); border-color: var(--cor-borda) !important; }
[data-theme="dark"] .table { color: var(--cor-texto); }
[data-theme="dark"] .table-light, [data-theme="dark"] thead.table-light th { background-color: #1e293b !important; color: var(--cor-texto-suave); }
[data-theme="dark"] .table-hover tbody tr:hover { background-color: #1e3a5f; }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
  background-color: #1e293b; border-color: var(--cor-borda); color: var(--cor-texto);
}
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
  background-color: #1e293b; color: var(--cor-texto);
}
[data-theme="dark"] .form-control::placeholder { color: var(--cor-texto-suave); }
[data-theme="dark"] .input-group-text { background-color: #1e293b; border-color: var(--cor-borda); color: var(--cor-texto-suave); }
[data-theme="dark"] .dropdown-menu { background-color: #1e293b; border-color: var(--cor-borda); }
[data-theme="dark"] .dropdown-item { color: var(--cor-texto); }
[data-theme="dark"] .dropdown-item:hover { background-color: #334155; }
[data-theme="dark"] .dropdown-item-text { color: var(--cor-texto-suave); }
[data-theme="dark"] .dropdown-divider { border-color: var(--cor-borda); }
[data-theme="dark"] .alert-info { background-color: #1e3a5f; border-color: #2563eb; color: #93c5fd; }
[data-theme="dark"] .alert-warning { background-color: #451a03; border-color: #92400e; color: #fcd34d; }
[data-theme="dark"] .alert-success { background-color: #14532d; border-color: #166534; color: #86efac; }
[data-theme="dark"] .alert-danger { background-color: #450a0a; border-color: #991b1b; color: #fca5a5; }
[data-theme="dark"] .bg-light { background-color: #1e293b !important; }
[data-theme="dark"] footer { background-color: #1e293b !important; border-color: var(--cor-borda) !important; }
[data-theme="dark"] .page-link { background-color: #1e293b; border-color: var(--cor-borda); color: #93c5fd; }
[data-theme="dark"] .page-item.active .page-link { background-color: var(--cor-primaria); }
[data-theme="dark"] .alternativa-incorreta { background-color: #1e293b; border-color: var(--cor-borda); }
[data-theme="dark"] .progress { background-color: #334155; }
[data-theme="dark"] .border { border-color: var(--cor-borda) !important; }
[data-theme="dark"] .text-muted { color: var(--cor-texto-suave) !important; }
[data-theme="dark"] .badge.bg-light { background-color: #334155 !important; color: var(--cor-texto) !important; }
[data-theme="dark"] .collapse .card { background-color: #1e293b; }

/* Botao de toggle do modo escuro */
#btnDarkMode {
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: white;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .82rem;
  transition: all .2s;
}
#btnDarkMode:hover { background: rgba(255,255,255,.15); }


/* ===================================================================
   CORREÇÕES DE TEXTO NO MODO ESCURO
   O Bootstrap fixa cores em vários elementos — aqui garantimos que
   todo texto fique legível independente do componente usado.
=================================================================== */

/* Textos gerais */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] span:not(.badge),
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th { color: var(--cor-texto); }

/* Textos dentro de cards */
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-body *:not(.badge):not(.btn):not(.progress-bar) {
  color: var(--cor-texto);
}

/* Textos suaves (muted) ficam mais claros no escuro */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .card-body .text-muted,
[data-theme="dark"] .form-text { color: #94a3b8 !important; }

/* Labels de formulário */
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label { color: var(--cor-texto) !important; }

/* Tabelas */
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { color: var(--cor-texto) !important; }

/* Links dentro de cards */
[data-theme="dark"] a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item) {
  color: #93c5fd;
}
[data-theme="dark"] a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):hover {
  color: #bfdbfe;
}

/* Textos de estatísticas e numeros grandes */
[data-theme="dark"] .stat-numero,
[data-theme="dark"] .stat-label { color: var(--cor-texto); }

/* Alertas customizados */
[data-theme="dark"] .alert { color: inherit; }

/* Textos de progresso */
[data-theme="dark"] .progress-bar { color: #fff; }

/* Input group addon */
[data-theme="dark"] .input-group-text { color: #94a3b8; }

/* Kbd (tecla) */
[data-theme="dark"] kbd {
  background-color: #334155;
  color: var(--cor-texto);
}

/* Small/código inline */
[data-theme="dark"] small,
[data-theme="dark"] .small { color: #94a3b8; }

/* Textos dos botoes outline no modo escuro ficam mais visiveis */
[data-theme="dark"] .btn-outline-secondary {
  color: #94a3b8;
  border-color: #475569;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #334155;
  color: var(--cor-texto);
  border-color: #64748b;
}

/* Linha divisoria */
[data-theme="dark"] hr,
[data-theme="dark"] .dropdown-divider { border-color: #334155; }

/* Card stat icone */
[data-theme="dark"] .card-stat .stat-icone { opacity: .9; }

/* Collapse / paineis */
[data-theme="dark"] .collapse .form-check-label { color: var(--cor-texto) !important; }

/* Timeline de procedimentos */
[data-theme="dark"] .card.flex-grow-1 * { color: var(--cor-texto); }

/* Paginacao */
[data-theme="dark"] .page-link { color: #93c5fd; }
[data-theme="dark"] .page-item.disabled .page-link { color: #475569; }


/* ===================================================================
   CORRECOES ESPECIFICAS DE TABELAS NO MODO ESCURO
=================================================================== */

/* Todos os textos dentro de células de tabela ficam claros */
[data-theme="dark"] .table td,
[data-theme="dark"] .table td *,
[data-theme="dark"] .table td a,
[data-theme="dark"] .table td span:not(.badge),
[data-theme="dark"] .table td small { color: #cbd5e1 !important; }

/* Textos marcados como muted dentro de tabelas ficam mais claros */
[data-theme="dark"] .table td.text-muted,
[data-theme="dark"] .table td .text-muted { color: #94a3b8 !important; }

/* Cabecalhos de tabela */
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table th { color: #94a3b8 !important; }

/* fw-semibold e fw-bold dentro de tabelas */
[data-theme="dark"] .table td.fw-semibold,
[data-theme="dark"] .table td .fw-semibold,
[data-theme="dark"] .table td.fw-bold,
[data-theme="dark"] .table td .fw-bold { color: #e2e8f0 !important; }

/* Botoes outline dentro de tabelas no modo escuro:
   os icones precisam de fundo/borda visiveis */
[data-theme="dark"] .table .btn-outline-primary {
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
}
[data-theme="dark"] .table .btn-outline-primary:hover {
  background-color: #1e3a5f !important;
  color: #bfdbfe !important;
}
[data-theme="dark"] .table .btn-outline-success {
  color: #86efac !important;
  border-color: #22c55e !important;
}
[data-theme="dark"] .table .btn-outline-success:hover {
  background-color: #14532d !important;
  color: #bbf7d0 !important;
}
[data-theme="dark"] .table .btn-outline-danger {
  color: #fca5a5 !important;
  border-color: #ef4444 !important;
}
[data-theme="dark"] .table .btn-outline-danger:hover {
  background-color: #450a0a !important;
  color: #fecaca !important;
}
[data-theme="dark"] .table .btn-outline-warning {
  color: #fcd34d !important;
  border-color: #f59e0b !important;
}

/* Icones bi dentro de botoes de tabela */
[data-theme="dark"] .table .btn i { color: inherit !important; }

/* Links dentro de tabelas (badges/codigos clicaveis) */
[data-theme="dark"] .table td a.badge { color: #fff !important; }
[data-theme="dark"] .table td a:not(.badge):not(.btn) { color: #93c5fd !important; }


/* ===================================================================
   CORRECAO DEFINITIVA DE TABELAS NO MODO ESCURO
   Usando html[data-theme] para maxima especificidade e sobrescrever
   qualquer regra do Bootstrap ou classes utilitarias.
=================================================================== */

/* Todos os textos em linhas de tabela ficam claros */
html[data-theme="dark"] tbody tr td { color: #e2e8f0 !important; }
html[data-theme="dark"] tbody tr td.text-muted { color: #cbd5e1 !important; }
html[data-theme="dark"] tbody tr td .text-muted { color: #cbd5e1 !important; }
html[data-theme="dark"] tbody tr td.small { color: #e2e8f0 !important; }
html[data-theme="dark"] tbody tr td .small { color: #cbd5e1 !important; }
html[data-theme="dark"] tbody tr td.fw-semibold { color: #f1f5f9 !important; }
html[data-theme="dark"] tbody tr td .fw-semibold { color: #f1f5f9 !important; }

/* Hover nas linhas */
html[data-theme="dark"] .table-hover tbody tr:hover td { color: #f1f5f9 !important; }

/* Botoes de acao dentro de td */
html[data-theme="dark"] tbody tr td .btn-outline-primary {
  color: #93c5fd !important; border-color: #3b82f6 !important;
}
html[data-theme="dark"] tbody tr td .btn-outline-success {
  color: #86efac !important; border-color: #22c55e !important;
}
html[data-theme="dark"] tbody tr td .btn-outline-danger {
  color: #fca5a5 !important; border-color: #ef4444 !important;
}
html[data-theme="dark"] tbody tr td .btn-outline-warning {
  color: #fcd34d !important; border-color: #f59e0b !important;
}
html[data-theme="dark"] tbody tr td .btn i { color: inherit !important; }


/* ===================================================================
   CORRECAO DO FUNDO DAS TABELAS NO MODO ESCURO
   O Bootstrap define background branco em tr/td — precisamos
   sobrescrever isso para o texto claro ficar visivel.
=================================================================== */
html[data-theme="dark"] .table { background-color: transparent !important; }
html[data-theme="dark"] .table tbody tr { background-color: var(--cor-card) !important; }
html[data-theme="dark"] .table tbody td { background-color: transparent !important; }
html[data-theme="dark"] .table-hover tbody tr:hover { background-color: #1e3a5f !important; }
html[data-theme="dark"] .table-hover tbody tr:hover td { background-color: transparent !important; }
html[data-theme="dark"] .table thead tr { background-color: #1e293b !important; }
html[data-theme="dark"] .table thead th { background-color: transparent !important; }


/* ===================================================================
   CORRECAO DO FUNDO BRANCO RESIDUAL NAS TABELAS
   O Bootstrap 5 usa --bs-table-bg como variavel interna da tabela.
   Sobrescrevendo ela e o container table-responsive eliminamos o
   fundo branco que aparece entre as linhas e embaixo da tabela.
=================================================================== */
html[data-theme="dark"] .table {
  --bs-table-bg: var(--cor-card);
  --bs-table-striped-bg: #263345;
  --bs-table-hover-bg: #1e3a5f;
  --bs-table-border-color: var(--cor-borda);
}
html[data-theme="dark"] .table-responsive {
  background-color: var(--cor-card) !important;
  border-radius: var(--raio);
}
html[data-theme="dark"] .card-body.p-0 {
  background-color: var(--cor-card) !important;
  border-radius: var(--raio);
}


/* ===================================================================
   CORRECAO DO BOTAO DE MOSTRAR/OCULTAR SENHA NO MODO ESCURO
=================================================================== */
html[data-theme="dark"] .input-group .btn-outline-secondary {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .input-group .btn-outline-secondary:hover {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .input-group .btn-outline-secondary i {
  color: inherit !important;
}