/* =====================================================================
   TEMA CLARO — referencia: o print do painel Betuxo.
   Claro e limpo, NAO "antigo": sans moderna, acento verde, canto suave,
   tabela sem grade, menu com pilula no item ativo e icone em cada linha.

   Carrega DEPOIS do tropa.css. Pra voltar atras basta tirar a linha do
   <link> no header.php: nada do tema antigo foi apagado.

   Minha primeira tentativa so trocou cor e fonte. O Bruno: "tu ainda nao
   mudou o front, so as cores e os textos" e "ficou antigo ate demais".
   Aqui o layout e' refeito: espacamento, hierarquia, densidade da tabela
   e o desenho do menu.
   ===================================================================== */

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --dtn-charcoal:   #FFFFFF;
  --dtn-charcoal-2: #FFFFFF;
  --dtn-graphite:   #E5E7EB;
  --dtn-graphite-2: #D1D5DB;
  --dtn-ice-white:  #111827;

  --ambient-bg: none;
  --bg:      #FFFFFF;
  --bg-elev: #FFFFFF;
  --card-bg: #FFFFFF;

  --glass-bg:        #FFFFFF;
  --glass-bg-hover:  #F9FAFB;
  --glass-bg-active: #FEF2F2;
  --glass-border:        #E5E7EB;
  --glass-border-strong: #D1D5DB;

  --blur-strong: none;
  --blur-medium: none;
  --blur-light:  none;

  --text:          #111827;
  --text-muted:    #6B7280;
  --text-dim:      #9CA3AF;
  --text-inverted: #FFFFFF;

  --accent:       #E8121B;
  --accent-hover: #C00F17;
  --accent-glow:  none;
  --accent-text:  #FFFFFF;

  --success: #059669;
  --danger:  #B91C1C;
  --warning: #D97706;
  --info:    #2563EB;

  --shadow-float: none;
  --shadow-hover: none;
  --shadow-press: none;
  --neon-glow:    none;

  --ln:      #E5E7EB;
  --ln-soft: #F3F4F6;
  --r:       10px;
  --r-sm:    8px;

  color-scheme: light;
}

/* ── TIRA O VIDRO ───────────────────────────────────────────────────── */
/* O tema original e' glassmorphism: desfoque, gradiente, sombra em camadas
   e ::before/::after desenhando brilho em dezenas de seletores. Neutralizar
   um a um deixaria sobra. */
*, *::before, *::after {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}
.card::before, .card::after,
.card--highlight::before,
.sidebar::before, .sidebar::after,
.topbar::before, .topbar::after,
body::before, body::after {
  content: none !important;
  background: none !important;
}

/* ── BASE ───────────────────────────────────────────────────────────── */
html, body { background: #FFFFFF !important; color: var(--text); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif !important;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.02em; }
h1 { font-size: 26px; font-weight: 700; margin: 0 0 18px; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── LAYOUT ─────────────────────────────────────────────────────────── */
.layout  { background: #FFFFFF; gap: 0 !important; }
.content { background: #FFFFFF; padding: 26px 30px !important; }

/* ── SIDEBAR ────────────────────────────────────────────────────────── */
.sidebar {
  background: #FFFFFF !important;
  border: 0 !important;
  border-right: 1px solid var(--ln) !important;
  border-radius: 0 !important;
  padding: 0 0 20px !important;
  margin: 0 !important;
  width: 248px;
  min-width: 248px;
}

.sidebar .logo {
  padding: 26px 20px 20px;
  margin: 0;
  border-bottom: 1px solid var(--ln);
  text-align: center;
}
/* ── LOGO: SEM FILTRO ─────────────────────────────────────────────────
   O painel.css pinta a logo de BRANCO com
   filter: brightness(0) invert(1) drop-shadow(...), porque a arte do Tropa
   era escura e o tema era escuro. A logo da detonabet ja' vem na cor certa
   pro fundo claro: a bomba e o "bet" em #111827, o vermelho da marca
   preservado. Qualquer filtro aqui apaga ela.

   'none' precisa estar ESCRITO. Nao escrever nada deixa a regra do
   painel.css valendo, e ai' a logo fica branca no branco: invisivel. */
.sidebar .logo img,
.auth-logo,
.topbar-logo img,
img[src*="logo"] {
  filter: none !important;
}

.sidebar .logo img {
  /* a arte e' deitada (500x87), entao 130px deixava ela com 23px de altura */
  max-width: 172px;
  height: auto;
  /* SEM filtro: a logo da detonabet ja' vem tratada pro fundo claro, com a
     bomba e o "bet" em #111827 e o vermelho da marca preservado. Qualquer
     brightness() aqui apagaria o vermelho junto. */
}

.sidebar nav { padding: 16px 12px 0; }

/* Rotulo de secao, igual ao "GERENCIAMENTO" da referencia */
.sidebar nav::before {
  content: "Gerenciamento";
  display: block;
  padding: 0 10px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px !important;
  margin: 1px 0 !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: #374151 !important;
  font-size: 14px;
  font-weight: 500;
  transition: background 120ms ease !important;
}
.sidebar nav a:hover {
  background: #F9FAFB !important;
  color: var(--text) !important;
  transform: none !important;
}
.sidebar nav a.active {
  background: #FEF2F2 !important;
  /* vermelho ESCURO aqui: o claro sobre esse fundo media 4,40:1, abaixo do
     minimo. O escuro mede 5,78:1 e e' o mesmo vermelho pro olho. */
  color: var(--accent-hover) !important;
  font-weight: 600;
}

/* Icone por CSS (mascara + currentColor): a referencia tem um por item e
   assim nao preciso mexer no markup do header.php. Pega a cor do link, entao
   fica cinza no normal e vermelho no ativo sozinho. */
.sidebar nav a::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ic) center / 18px 18px no-repeat;
          mask: var(--ic) center / 18px 18px no-repeat;
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/></svg>");
}
.sidebar nav a[href$="/admin"]::before,
.sidebar nav a[href$="/gerente"]::before,
.sidebar nav a[href$="/afiliado"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='20' x2='18' y2='10'/><line x1='12' y1='20' x2='12' y2='4'/><line x1='6' y1='20' x2='6' y2='14'/></svg>");
}
.sidebar nav a[href*="usuarios"]::before,
.sidebar nav a[href*="rede"]::before,
.sidebar nav a[href*="equipe"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/></svg>");
}
.sidebar nav a[href*="acordos"]::before,
.sidebar nav a[href*="configuracoes"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 5L2 7'/></svg>");
}
.sidebar nav a[href*="link"]::before,
.sidebar nav a[href*="contas"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5'/><path d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.5-1.5'/></svg>");
}
.sidebar nav a[href*="saques"]::before,
.sidebar nav a[href*="comissoes"]::before,
.sidebar nav a[href*="ganhos"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>");
}
.sidebar nav a[href*="periodos"]::before,
.sidebar nav a[href*="tabela"]::before,
.sidebar nav a[href*="importar"]::before,
.sidebar nav a[href*="logs"]::before,
.sidebar nav a[href*="plataformas"]::before,
.sidebar nav a[href*="sync"]::before,
.sidebar nav a[href*="solicitacoes"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='3' y1='10' x2='21' y2='10'/><line x1='9' y1='4' x2='9' y2='22'/></svg>");
}
/* DETONA_ICONES_MENU - itens Betuxo (gerente): Resultados, Deals, Gerentes.
   O "Meus Links" ja casa com href*="link" existente. Essas regras ficam DEPOIS
   das genericas (acordos/configuracoes/usuarios) de proposito, pra sobrescrever. */

/* Resultados: linha de grafico subindo (trending-up) */
.sidebar nav a[href$="/resultados"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 6 13.5 15.5 8.5 10.5 1 18'/><polyline points='17 6 23 6 23 12'/></svg>");
}

/* Configuracoes de Deals: % (badge de percentual) */
.sidebar nav a[href$="/deals"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='5' x2='5' y2='19'/><circle cx='6.5' cy='6.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>");
}

/* Meus Gerentes: hierarquia (user+network) */
.sidebar nav a[href$="/gerentes"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7' r='3'/><path d='M3 20v-1a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v1'/><circle cx='17' cy='8' r='2'/><path d='M22 15v-.5a3 3 0 0 0-3-3h-1'/></svg>");
}

.sidebar nav a[href*="sair"]::before,
.sidebar nav a[href*="logout"]::before {
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
}
.sidebar nav a[href*="sair"],
.sidebar nav a[href*="logout"] {
  color: var(--danger) !important;
  margin-top: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--ln) !important;
  border-radius: 0 !important;
}

/* ── TOPBAR ─────────────────────────────────────────────────────────── */
.topbar {
  background: #FFFFFF !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ln) !important;
  border-radius: 0 !important;
  padding: 14px 30px !important;
  margin: -26px -30px 24px !important;
}

.platform-switch { display: flex; gap: 6px; }
.platform-switch a {
  padding: 6px 13px !important;
  border: 1px solid var(--ln) !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: var(--text-muted) !important;
  font-size: 13px;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.platform-switch a.active {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: var(--accent) !important;
  font-weight: 600;
}

.theme-toggle {
  border: 1px solid var(--ln) !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: var(--text-muted) !important;
  padding: 7px !important;
}

/* ── CARDS ──────────────────────────────────────────────────────────── */
.card {
  background: #FFFFFF !important;
  border: 1px solid var(--ln) !important;
  border-radius: var(--r) !important;
  padding: 16px 18px !important;
  margin-bottom: 16px;
  transition: border-color 120ms ease !important;
}
.card:hover { transform: none !important; border-color: var(--glass-border-strong) !important; }
.card--highlight { background: #FFFFFF !important; border-color: var(--ln) !important; }

/* rotulo do card de metrica: na referencia e' texto normal, nao caixa alta */
.card > .text-muted:first-child {
  font-size: 13px;
  color: var(--text-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.card h2, .card h3 { letter-spacing: -0.03em; }

/* ── TABELA: linha horizontal so, sem grade ─────────────────────────── */
.table, table { width: 100%; border-collapse: collapse !important; font-size: 14px; }

.table thead th, table thead th {
  background: #FFFFFF !important;
  color: var(--text-muted) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ln) !important;
  padding: 11px 12px !important;
  font-weight: 500;
  font-size: 13px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.table td, table td {
  border: 0 !important;
  border-bottom: 1px solid var(--ln-soft) !important;
  padding: 13px 12px !important;
  color: var(--text);
  background: transparent;
  vertical-align: middle;
}
.table tbody tr:last-child td, table tbody tr:last-child td { border-bottom: 0 !important; }
.table tbody tr:nth-child(even) td, table tbody tr:nth-child(even) td { background: transparent; }
.table tbody tr:hover td, table tbody tr:hover td { background: #F9FAFB !important; }

/* ── BOTOES ─────────────────────────────────────────────────────────── */
.btn {
  font-family: inherit !important;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  background: #FFFFFF !important;
  color: var(--text) !important;
  cursor: pointer;
  transition: background 120ms ease !important;
}
.btn:hover, .btn:active { transform: none !important; }

.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #FFFFFF !important;
}
.btn-primary:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }

.btn-secondary, .btn-ghost {
  background: #FFFFFF !important;
  border-color: var(--ln) !important;
  color: var(--text) !important;
  font-weight: 500;
}
.btn-secondary:hover, .btn-ghost:hover { background: #F9FAFB !important; }

/* ── FORMULARIOS ────────────────────────────────────────────────────── */
input, select, textarea {
  font-family: inherit !important;
  font-size: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--ln) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  padding: 9px 11px !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .12) !important;
}
.form-label, label {
  color: var(--text-muted) !important;
  font-size: 13px;
  font-weight: 500;
}

/* ── BADGES ─────────────────────────────────────────────────────────── */
.badge, .tag, .pill {
  display: inline-block;
  border: 1px solid var(--ln) !important;
  border-radius: 6px !important;
  background: #F9FAFB !important;
  color: var(--text-muted) !important;
  padding: 3px 10px !important;
  font-size: 12px;
  font-weight: 500;
}
.badge-success, .badge--success { background: #ECFDF5 !important; border-color: #A7F3D0 !important; color: #047857 !important; }
.badge-danger,  .badge--danger  { background: #FEF2F2 !important; border-color: #FECACA !important; color: #B91C1C !important; }
.badge-warning, .badge--warning { background: #FFFBEB !important; border-color: #FDE68A !important; color: #B45309 !important; }

.text-muted  { color: var(--text-muted) !important; }
.text-accent { color: var(--accent) !important; }

/* Nada de filtro nas logos: elas ja' vem na cor certa pro fundo claro.
   Antes isso existia porque a arte do Tropa era branca. */
.auth-logo { max-width: 230px; height: auto; }

/* ── ROTULOS ESCRITOS NO style= DA PAGINA ───────────────────────────── */
/* O painel escreve os rotulos de card direto no atributo style, tipo
   style="font-size:11px;text-transform:uppercase". Regra por classe perde
   pro inline, entao aqui eu seleciono PELO proprio style e devolvo o rotulo
   ao texto normal da referencia. */
.card [style*="uppercase"],
.topbar [style*="uppercase"] {
  text-transform: none !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: var(--text-muted) !important;
}

/* numero grande do card */
.card h2[style], .card h3[style] { font-size: 26px !important; font-weight: 700 !important; }

/* =====================================================================
   ESTRUTURA — o que faltava de verdade.
   Medido no painel: .layout vinha com padding 12px e max-width 1600px, e a
   sidebar com 96px de altura (so o tamanho do conteudo dela) e sticky.
   Resultado: menu descolado da esquerda e a coluna morrendo no meio da tela.
   Na referencia a sidebar encosta na borda e vai de cima a baixo.
   ===================================================================== */

/* 1) Tira o respiro do container: a coluna tem que encostar na borda */
.layout {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh;
  align-items: stretch !important;
}

/* 2) Sidebar: colada na esquerda e de altura cheia, rolando sozinha */
.sidebar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 0 0 248px !important;
  align-self: stretch !important;
}

/* 3) Conteudo ocupa o resto, sem teto artificial */
.content {
  max-width: none !important;
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* 4) Topbar: faixa do conteudo, encostada no topo, sem margem negativa
      improvisada. Fica grudada ao rolar, como na referencia. */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 20;
  margin: -26px -30px 22px !important;
  width: auto !important;
  border-radius: 0 !important;
}

/* 5) No celular a sidebar vira faixa do topo, nao coluna de tela inteira */
@media (max-width: 900px) {
  .sidebar {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    flex: 1 1 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ln) !important;
  }
  .layout { flex-wrap: wrap; }
  .content { padding: 18px !important; }
  .topbar  { margin: -18px -18px 16px !important; padding: 12px 18px !important; }
}

/* =====================================================================
   BLOCO DO USUARIO NA SIDEBAR  (markup novo no header.php)
   A referencia mostra o papel em destaque sob a logo e, abaixo, quem esta
   logado. Nao dava pra fazer so com CSS: o nome existia uma vez so, na topbar.
   ===================================================================== */

/* papel em destaque logo abaixo da logo */
.sb-papel {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* quem esta logado */
.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ln);
}
.sb-user__av {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ln);
  border-radius: 999px;
  background: #F9FAFB;
  color: var(--text-muted);
}
.sb-user__av svg { width: 17px; height: 17px; }

.sb-user__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-user__papel {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sb-user__nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* a logo perde a borda: quem fecha o bloco agora e o .sb-user */
.sidebar .logo { border-bottom: 0 !important; padding-bottom: 14px !important; }

/* ── FILTRO DE PERIODO ──────────────────────────────────────────────── */
/* Linha de "Inicio / Fim / Filtrar / Tudo" alinhada pela base, como no print. */
.filtro-periodo {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filtro-periodo .form-group { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.filtro-periodo input { min-width: 160px; }

/* O .logo do tema antigo e' flex, entao o .sb-papel virava item na MESMA linha
   e colava no fim do nome ("TROPA PARTNERSADMINISTRADOR"). Em bloco ele desce. */
.sidebar .logo {
  display: block !important;
  text-align: center;
}
.sidebar .logo img { display: inline-block; }