/* Skin das telas do shinymanager — login, troca de senha e modo admin.
   Entra via secure_app(theme = ...), por cima do Bootstrap 3 dessas telas.

   IMPORTANTE: o shinymanager troca de tela dentro do MESMO documento; depois
   do login, o app (bslib/BS5 + styles.css) monta na mesma página com este
   arquivo ainda carregado. Por isso nenhuma regra aqui pode ser global:
   tudo vive sob .panel-auth (login e troca de senha) ou sob o body que
   contém a tela de admin (via :has). Regra solta em body/.btn/h3 vaza para
   o dashboard — foi o que aconteceu na primeira versão.

   A linguagem é a do dash: barras amarelas de contorno preto (assinatura do
   login), tinta #1F2937, Inter. Amarelo de botão um ponto mais fundo que o
   #FFFF00 dos gráficos: em área grande, o neon puro vibra contra o branco. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --sm-amarelo: #FFE81C;
  --sm-amarelo-escuro: #F5D90A;
  --sm-tinta: #111827;
  --sm-texto: #1F2937;
  --sm-mudo: #8A8F98;
  --sm-borda: #E7E7EA;
  --sm-fundo: #F7F7F5;
  --sm-anel: rgba(245, 217, 10, 0.45);
}

/* ============ Login e troca de senha (overlay .panel-auth) ============ */

.panel-auth {
  background-color: var(--sm-fundo);
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  color: var(--sm-texto);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Os br e o div-espaçador que o shinymanager usa para empurrar o cartão;
   o posicionamento aqui é do flex acima. */
.panel-auth > br,
.panel-auth > div[style*="height"],
.panel-auth .panel-body br {
  display: none;
}

.panel-auth > .row {
  width: 100%;
  margin: 0;
}

.panel-auth > .row > [class*="col-sm-"] {
  float: none;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 16px;
}

.panel-auth .panel.panel-primary {
  background: #fff;
  border: 1px solid var(--sm-borda);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 16px 40px -12px rgba(16, 24, 40, 0.08);
}

.panel-auth .panel-body {
  padding: 44px 40px 36px;
}

/* Assinatura: um mini gráfico de barras, o mesmo desenho dos gráficos do
   dash — amarelo neon com contorno preto, em miniatura. */
.login-grafico {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 28px;
  margin-bottom: 22px;
}

.login-grafico span {
  width: 8px;
  border-radius: 2px;
  background: #FFFF00;
  border: 1.5px solid #111;
  transform-origin: bottom;
}

.login-grafico span:nth-child(1) { height: 12px; }
.login-grafico span:nth-child(2) { height: 20px; }
.login-grafico span:nth-child(3) { height: 15px; }
.login-grafico span:nth-child(4) { height: 28px; }
.login-grafico span:nth-child(5) { height: 23px; }

@media (prefers-reduced-motion: no-preference) {
  .login-grafico span {
    animation: login-barra-cresce 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }
  .login-grafico span:nth-child(2) { animation-delay: 0.06s; }
  .login-grafico span:nth-child(3) { animation-delay: 0.12s; }
  .login-grafico span:nth-child(4) { animation-delay: 0.18s; }
  .login-grafico span:nth-child(5) { animation-delay: 0.24s; }
}

@keyframes login-barra-cresce {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.login-eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sm-mudo);
  margin-bottom: 8px;
}

.panel-auth h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sm-tinta);
  margin: 0 0 28px;
}

/* Subtítulo instrutivo sob o título, sem mexer no markup do shinymanager. */
#auth-shinymanager-auth-head::after {
  content: "Use o usuário e a senha fornecidos pelo administrador.";
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--sm-mudo);
}

/* Só no login os rótulos saem de cena (os campos falam por placeholder);
   na troca de senha eles ficam, porque lá não há placeholder. */
#auth-user_id-label,
#auth-user_pwd-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.panel-auth .form-control {
  height: 52px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--sm-texto);
  background: #fff;
  border: 1px solid var(--sm-borda);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.panel-auth .form-control::placeholder {
  color: var(--sm-mudo);
}

.panel-auth .form-control:focus {
  border-color: var(--sm-tinta);
  box-shadow: 0 0 0 3px var(--sm-anel);
  outline: none;
}

.panel-auth .form-group {
  margin-bottom: 14px;
}

#auth-container-btn-ok {
  margin-top: 10px;
}

.panel-auth .btn-primary {
  height: 52px;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--sm-tinta);
  background-color: var(--sm-amarelo);
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
  transition: background-color 0.15s ease;
}

.panel-auth .btn-primary:hover,
.panel-auth .btn-primary:focus,
.panel-auth .btn-primary:active {
  color: var(--sm-tinta);
  background-color: var(--sm-amarelo-escuro);
  outline: none;
}

.panel-auth .btn-primary:focus {
  box-shadow: 0 0 0 3px var(--sm-anel);
}

#auth-result_auth {
  margin-top: 16px;
}

.panel-auth .alert {
  margin-bottom: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid #F3D2D5;
  background: #FBEFF0;
  color: #8A2A33;
}

/* ============ Modo administrador ============ */
/* Escopo: só quando a tela de admin está no documento. Os elementos têm ids
   do módulo (admin-*); o :has evita qualquer vazamento para o dashboard. */

body:has(#admin-table_users) {
  background-color: var(--sm-fundo);
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  color: var(--sm-texto);
  -webkit-font-smoothing: antialiased;
}

body:has(#admin-table_users) .navbar {
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--sm-borda);
}

body:has(#admin-table_users) .navbar .navbar-brand,
body:has(#admin-table_users) .navbar a {
  color: var(--sm-tinta);
  font-weight: 600;
}

body:has(#admin-table_users) h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sm-tinta);
  margin-top: 32px;
}

body:has(#admin-table_users) h3 .fas,
body:has(#admin-table_users) h3 .far {
  color: var(--sm-mudo);
  font-size: 16px;
  margin-right: 6px;
}

body:has(#admin-table_users) hr {
  border-top-color: var(--sm-borda);
}

body:has(#admin-table_users) .btn {
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
}

/* Amarelo só nas duas ações primárias; o resto fica quieto. */
#admin-add_user,
.admin-bases-enviar {
  color: var(--sm-tinta) !important;
  background-color: var(--sm-amarelo) !important;
  border: none !important;
  padding: 10px 18px;
  width: auto !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

#admin-add_user:hover, #admin-add_user:focus,
.admin-bases-enviar:hover, .admin-bases-enviar:focus {
  background-color: var(--sm-amarelo-escuro) !important;
  color: var(--sm-tinta) !important;
}

body:has(#admin-table_users) .btn-primary:not(#admin-add_user):not(.admin-bases-enviar),
body:has(#admin-table_users) .btn-secondary {
  color: var(--sm-texto);
  background-color: #fff;
  border: 1px solid var(--sm-borda);
}

body:has(#admin-table_users) .btn-primary:not(#admin-add_user):not(.admin-bases-enviar):hover,
body:has(#admin-table_users) .btn-secondary:hover {
  background-color: var(--sm-fundo);
  color: var(--sm-tinta);
  border-color: var(--sm-borda);
}

body:has(#admin-table_users) .btn-danger {
  border: none;
}

body:has(#admin-table_users) table.dataTable {
  font-size: 14px;
}

body:has(#admin-table_users) table.dataTable thead th {
  font-weight: 700;
  color: var(--sm-tinta);
}

/* Bloco "Bases do dashboard", inserido pelo app no topo da coluna do admin. */
.admin-bases-nota {
  max-width: 640px;
  font-size: 14px;
  color: var(--sm-mudo);
  line-height: 1.5;
  margin-bottom: 18px;
}

.admin-bases-campos {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.admin-bases-campos .form-group {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-bases-campos label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sm-texto);
}

.admin-bases-campos .form-control {
  border-radius: 0 10px 10px 0;
  border-color: var(--sm-borda);
  box-shadow: none;
}

.admin-bases-campos .btn-file {
  border-radius: 10px 0 0 10px;
  background: #fff;
  border: 1px solid var(--sm-borda);
  color: var(--sm-texto);
  font-weight: 600;
}

.admin-bases-campos .progress {
  border-radius: 8px;
  height: 8px;
  margin-top: 8px;
  margin-bottom: 0;
}

.admin-bases-campos .progress-bar {
  background-color: var(--sm-amarelo-escuro);
}