/* ==========================================================================
   BOSS Central - tema visual (cinza claro/escuro, Rubik, glassmorphism)
   Carregado DEPOIS do bootstrap/sb-admin/estilo (que continuam vindo do
   BOSS_TATICA externo) para sobrescrever com o novo visual, sem precisar
   reescrever o HTML das ~850 telas existentes - tudo aqui trabalha em cima
   das classes do Bootstrap 3 que o sistema ja usa (.panel, .btn, .navbar...).

   OBS: comentarios deste arquivo sao escritos sem acentos de proposito -
   um upload anterior por FTP em modo texto/ASCII corrompeu os caracteres
   acentuados (viravam "é", "—" etc.). Isso nao quebra o CSS em si (os
   seletores e valores sao todos ASCII puro), mas para nao depender do
   cliente de FTP acertar UTF-8 toda vez que este arquivo for reenviado,
   os comentarios ficam só em ASCII.
   ========================================================================== */

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

:root {
  --gray-50:  #f5f6f8;
  --gray-100: #eceef1;
  --gray-200: #dfe2e7;
  --gray-300: #c9ced6;
  --gray-400: #a6adb8;
  --gray-500: #7d8590;
  --gray-600: #5b626c;
  --gray-700: #3e444c;
  --gray-800: #292d33;
  --gray-900: #1a1d21;

  --accent: #2b52d6;
  --accent-dark: #16266b;

  --glass-blur: 16px;

  --radius-lg: 16px;
  --radius-md: 12px;
}

/* -------------------------------------------------------------------------
   Tipografia - Rubik em tudo, mais peso em titulos, menos em texto simples
   ------------------------------------------------------------------------- */
html, body {
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--gray-200);
}

/* :not(.login-page) - sem isso, esse !important vira shorthand "background"
   e zera o background-image da tela de login (que e' setado em body.login-page
   logo abaixo), mesmo aquele seletor sendo mais especifico.
   O painel inteiro (navbar + sidebar + conteudo) usa o MESMO cinza escuro -
   nao so a navbar/sidebar - por pedido explicito: "a parte interna da
   interface e' para seguir o mesmo design do sidebar". */
body:not(.login-page) {
  background: linear-gradient(180deg, var(--gray-800) 0%, var(--gray-900) 100%) !important;
}

h1, h2, h3, h4,
.page-header,
.panel-title,
.login-title,
.navbar-brand {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gray-100);
}

.page-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 10px;
}

p, span, li, label, td, th, .form-control, .btn {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
}

small, .help-block, .text-muted, .label {
  font-weight: 300;
  color: var(--gray-400) !important;
}

.btn { font-weight: 500; letter-spacing: .01em; }

/* -------------------------------------------------------------------------
   Fundo geral - mesmo cinza escuro do sidebar/navbar, com um brilho sutil
   pra dar contra-luz ao glassmorphism dos paineis (que agora sao "vidro
   claro sobre fundo escuro", nao mais cartoes brancos).
   ------------------------------------------------------------------------- */
#page-wrapper {
  background:
    radial-gradient(circle at 15% 0%, rgba(43, 82, 214, 0.22), transparent 45%),
    radial-gradient(circle at 100% 30%, rgba(43, 82, 214, 0.16), transparent 40%),
    linear-gradient(180deg, var(--gray-800) 0%, var(--gray-900) 100%) !important;
  min-height: 100vh;
  /* o rodape agora e' fixo (46px) - essa margem evita que o fim do
     conteudo role pra baixo dele quando a pagina tem scroll. */
  padding-bottom: 56px;
}

/* -------------------------------------------------------------------------
   Entrada dos elementos internos - sobem de baixo ate a posicao original,
   com um leve escalonamento entre os blocos para dar sensacao de "cascata".
   ------------------------------------------------------------------------- */
@keyframes bossSobe {
  0%   { opacity: 0; transform: translateY(110px); }
  100% { opacity: 1; transform: translateY(0); }
}

#page-wrapper > .row {
  animation-name: bossSobe;
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(.16, .84, .32, 1.1);
  animation-fill-mode: both;
}
#page-wrapper > .row:nth-of-type(1) { animation-delay: .05s; }
#page-wrapper > .row:nth-of-type(2) { animation-delay: .18s; }
#page-wrapper > .row:nth-of-type(3) { animation-delay: .31s; }
#page-wrapper > .row:nth-of-type(4) { animation-delay: .44s; }
#page-wrapper > .row:nth-of-type(n+5) { animation-delay: .55s; }

/* -------------------------------------------------------------------------
   Paineis dos modulos - glassmorfismo sutil (aplica em cima do que ja existe)
   ------------------------------------------------------------------------- */
.panel.panel-default,
.jumbotron {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  color: var(--gray-200);
}

.jumbotron h1, .jumbotron h2, .jumbotron h3 { color: var(--gray-100); }

.panel.panel-default > .panel-heading {
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  color: var(--gray-100);
  padding: 14px 18px;
}

.panel.panel-default > .panel-body {
  background: transparent;
}

/* Bootstrap poe fundo branco solido em list-group/well por padrao - sem
   isso ficam caixas brancas "flutuando" dentro do painel de vidro escuro. */
.list-group-item {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--gray-200);
}
.list-group-item:hover, .list-group-item:focus {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff;
}
.well {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--gray-200);
}

.table {
  color: var(--gray-200);
  background-color: transparent !important;
}
.table > thead > tr > th {
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  font-weight: 600;
  color: var(--gray-300);
  background-color: transparent !important;
}

/* As telas de modulo (banner.php e afins) escrevem a listra da tabela na
   marra, com class="odd"/"even" no PHP (nao com o CSS nth-child do
   Bootstrap), e o DataTables tambem usa essas mesmas classes literais -
   os dois vinham com fundo branco fixo por baixo do nosso tema. */
.table > tbody > tr,
.table > tbody > tr.odd,
.table > tbody > tr.even,
.table > tbody > tr > td,
.table > tbody > tr > th,
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
table.dataTable tbody tr > td,
table.dataTable tbody tr > th {
  background-color: transparent !important;
  color: var(--gray-200) !important;
}
.table.table-striped > tbody > tr:nth-of-type(odd),
.table > tbody > tr.odd,
table.dataTable tbody tr.odd {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
.table > tbody > tr:hover,
.table > tbody > tr.odd:hover,
.table > tbody > tr.even:hover,
table.dataTable tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.09) !important;
}
.table > tbody > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* -------------------------------------------------------------------------
   Campos de formulario - vidro escuro em vez do branco solido do Bootstrap.
   ------------------------------------------------------------------------- */
.form-control {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: var(--gray-100) !important;
  border-radius: 8px;
  box-shadow: none !important;
}
.form-control:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(43, 82, 214, 0.25) !important;
  color: #ffffff !important;
}
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.form-control[disabled], .form-control[readonly] {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--gray-400) !important;
}
select.form-control option {
  color: var(--gray-900);
}
.input-group-addon {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--gray-200);
}

/* -------------------------------------------------------------------------
   Rodape - fixo na base da tela (o JS de rodape.php ja reserva 46px de
   altura pra ele no calculo do #page-wrapper; so faltava a posicao fixa e
   as cores do tema).
   ------------------------------------------------------------------------- */
.rodape {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: linear-gradient(180deg, var(--gray-800) 0%, var(--gray-900) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 12px 20px !important;
  margin: 0 !important;
  height: 46px;
  box-sizing: border-box;
}
.rodape p {
  color: var(--gray-400) !important;
  margin: 0;
  font-size: 12px;
}
.rodape img {
  opacity: .5;
  max-height: 22px;
}
.rodape img:hover {
  opacity: 1;
}

/* -------------------------------------------------------------------------
   Navbar superior e menu lateral - mesmo cinza escuro dos dois, para formar
   um unico bloco visual (topo + lateral) ao redor do conteudo claro.
   ------------------------------------------------------------------------- */
.navbar-default.navbar-static-top {
  background: linear-gradient(180deg, var(--gray-800) 0%, var(--gray-900) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.navbar-default.navbar-static-top .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.navbar-default .navbar-nav > li > a,
.detallhe-usuario-topo > li > a,
.detallhe-usuario-topo .dropdown-toggle {
  color: var(--gray-200) !important;
}
.detallhe-usuario-topo > li > a:hover,
.detallhe-usuario-topo .dropdown-toggle:hover {
  color: #ffffff !important;
}

/* O Bootstrap poe um fundo cinza-claro solido no link quando o dropdown
   esta aberto (.open > a) - por isso o "Tatica" ficava com uma caixa clara
   atras do texto branco, parecendo um hover quebrado. */
.detallhe-usuario-topo > li.open > a,
.detallhe-usuario-topo > li.open > a:hover,
.detallhe-usuario-topo > li.open > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.detallhe-usuario-topo select.form-control {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.detallhe-usuario-topo select.form-control option {
  color: var(--gray-900);
}

.dropdown-menu.dropdown-user {
  background: var(--gray-800);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.dropdown-menu.dropdown-user > li > a {
  color: var(--gray-200);
}
.dropdown-menu.dropdown-user > li > a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.dropdown-menu.dropdown-user .divider {
  background-color: rgba(255, 255, 255, 0.08);
}

.navbar-static-side.menu-lateral {
  background: linear-gradient(180deg, var(--gray-800) 0%, var(--gray-900) 100%) !important;
}

/* O sb-admin.css externo poe uma linha clara (#e7e7e7) embaixo de CADA
   <li> do menu lateral (".navbar-static-side ul li") - sem isso, essas
   bordas brancas ficam cortando o sidebar escuro em fatias. */
.navbar-static-side ul li {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

#side-menu > li > a {
  color: var(--gray-300) !important;
  font-weight: 500;
  border-radius: 8px;
  margin: 2px 8px;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Icones (agora Font Awesome, nao mais glyphicon) com largura fixa e mais
   respiro ate o texto - antes ficavam quase colados. */
#side-menu i.fa {
  width: 18px;
  margin-right: 12px;
  text-align: center;
  font-size: 14px;
}
#side-menu .nav-second-level > li > a {
  padding-left: 44px;
}

#side-menu > li > a:hover,
#side-menu > li > a:focus,
#side-menu > li.active > a {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-left-color: var(--accent);
}

/* Submenu (Contato, Blog) - sem isso os itens ficavam sem cor definida e
   pareciam "vazar" um estilo claro por cima do sidebar escuro. */
#side-menu .nav-second-level {
  background: rgba(0, 0, 0, 0.15);
}
#side-menu .nav-second-level > li > a {
  color: var(--gray-400) !important;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#side-menu .nav-second-level > li > a:hover,
#side-menu .nav-second-level > li > a:focus,
#side-menu .nav-second-level > li.active > a {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-left-color: var(--accent);
}
/* O estilo.css externo tem ".nav>li>.nav>li.active{background:#e7e7e7}"
   pintando o PROPRIO <li> (nao o <a> de dentro) de cinza claro - por
   isso o item ativo do submenu (ex.: "Mensagens") continuava branco
   mesmo com o <a> escuro por cima. Zera o fundo do <li> tambem. */
#side-menu .nav-second-level > li.active {
  background: transparent !important;
}

/* -------------------------------------------------------------------------
   Botoes - cinza escuro/acento, mantendo cores de estado (sucesso/erro)
   ------------------------------------------------------------------------- */
.btn-default {
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-400) !important;
  color: var(--gray-700) !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-default:hover,
.btn-default:focus {
  background: var(--gray-400) !important;
  border-color: var(--gray-500) !important;
  color: #ffffff !important;
}

.btn-primary, .btn-info {
  background: var(--accent);
  border-color: var(--accent);
}

/* ==========================================================================
   TELA DE LOGIN - background com espaco reservado + card com glassmorphism
   ========================================================================== */

body.login-page {
  margin: 0;
  min-height: 100vh;
  background-color: var(--accent-dark);
  background-image: url('../login_background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

/* A imagem desktop deixa o espaco vazio do lado esquerdo/centro - o card
   entra ali, sem invadir os logos (canto superior esquerdo, "Tatica" ao
   centro-direita e o segundo logo no canto inferior direito). */
.login-scene {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(28px, 9vw, 150px);
  padding-right: 24px;
  perspective: 1600px;
}

.login-card-3d {
  width: 100%;
  max-width: 400px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.login-glass {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 25px 70px rgba(4, 8, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  padding: 38px 34px;
  color: #ffffff;
}

.login-title {
  color: #ffffff;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 22px;
  opacity: .95;
}

.login-glass .input-group { margin-bottom: 14px; }

.login-glass .form-control {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-radius: 10px;
  height: 44px;
}
.login-glass .form-control:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}
.login-glass .form-control::placeholder { color: rgba(255, 255, 255, 0.65); }

.login-glass .input-group-addon {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-radius: 10px 0 0 10px;
}

.login-glass .msgerro {
  color: #ffd9d9;
  background: rgba(220, 53, 69, 0.25);
  border: 1px solid rgba(255, 120, 120, 0.4);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  margin: 6px 0 0;
}

.login-glass .checkbox a,
.login-glass .checkbox h6 {
  color: rgba(255, 255, 255, 0.8);
}

.login-glass #captcha {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.login-glass .attCaptcha {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn-entrar {
  background: linear-gradient(135deg, #3d68ff, var(--accent-dark));
  border: none;
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 10px;
  padding: 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-entrar:hover {
  box-shadow: 0 8px 24px rgba(61, 104, 255, 0.45);
  transform: translateY(-1px);
  color: #fff;
}
.btn-entrar:active { transform: translateY(0); }
.btn-entrar[disabled] { opacity: .6; pointer-events: none; }

/* Giro 3D em profundidade ao clicar em Entrar -----------------------------
   rotateY (nao rotateZ) e' o que de fato usa o perspective do .login-scene:
   o card gira "para dentro da tela", como uma carta virando no espaco, e
   nao gira "de cabeca para baixo" feito um ponteiro de relogio (era o
   problema da versao anterior com rotateZ). 0 a 360 graus sempre volta
   identico ao repouso, entao o mesmo giro toca igual para sucesso e erro;
   so DEPOIS que ele termina e' que a tela reage ao resultado real da
   autenticacao (ver enviarLogin() em login.php). */
@keyframes bossGira {
  0%   { transform: rotateY(0deg) scale(1); }
  50%  { transform: rotateY(180deg) scale(.88); }
  100% { transform: rotateY(360deg) scale(1); }
}
.login-card-3d.girando {
  animation: bossGira .7s cubic-bezier(.45, .05, .55, .95);
  backface-visibility: visible;
}

/* Aplicada so depois que o giro termina E deu certo, para o "some" antes
   de navegar pra tela seguinte. */
.login-card-3d.saindo {
  transition: opacity .25s ease, transform .25s ease;
  opacity: 0;
  transform: scale(.92);
}

/* Balanco curto quando da erro, depois do giro voltar ao repouso. */
@keyframes bossBalancoErro {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.login-card-3d.erro-balanco {
  animation: bossBalancoErro .3s ease-in-out;
}

/* Mobile: usa a imagem vertical, logos ficam no topo, card abaixo -------- */
@media (max-width: 767px) {
  body.login-page {
    background-image: url('../login_background_mobile.png');
    background-position: top center;
    align-items: flex-start;
  }
  .login-scene {
    justify-content: center;
    padding: 0 20px;
    padding-top: 20vh;
    perspective: 1000px;
  }
  .login-card-3d { max-width: 440px; }
  .login-glass { padding: 30px 24px; }
}

@media (max-width: 380px) {
  .login-scene { padding-top: 16vh; }
}