/* =========================================================
   King Theme — Neon Glass (White/Black/Gold)
   ========================================================= */
:root{
  --bg-0:#0b0b09;
  --bg-1:#11100c;
  --bg-2:#18160f;
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.03);
  --txt:#f4f0da;
  --muted:#cfc8a7;
  --gold:#d4af37;
  --gold-2:#f0e6be;
  --gold-3:#705a12;
  --ok:#46d07e;
  --err:#ff7474;
  --warn:#ffb84d;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%; width:100%; margin:0; color:var(--txt); font-family:"Inter",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
body{
  background:
    radial-gradient(70% 120% at 70% 10%, rgba(212,175,55,.15), transparent 55%),
    radial-gradient(60% 100% at 30% 80%, rgba(212,175,55,.08), transparent 50%),
    var(--bg-1);
}

/* Pequenos utilitários */
.tiny-hint{ color:rgba(255,255,255,.65); font-size:.9rem; }
.link-gold{ color:var(--gold-2); text-decoration:none; }
.link-gold:hover{ text-decoration:underline; }
.text-gold-soft{ color:rgba(240,230,190,.85); }

/* =========================================================
   LEFT MENU
   ========================================================= */
.left-menu{
  position:fixed; inset:0 auto 0 0; z-index:1000;
  width:280px; padding:18px 16px 14px;
  background: linear-gradient(180deg, rgba(15,15,10,.78), rgba(0,0,0,.62));
  border-right:1px solid rgba(212,175,55,.25);
  box-shadow: 0 0 30px rgba(212,175,55,.08), inset 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  overflow-y:auto;
}
.page-with-leftmenu{
  /* Importante: evita overflow horizontal */
  margin-left:280px;
  width: calc(100% - 280px);
  min-height:100vh;
  padding: 18px 14px;
  max-width:100%;
}

.lm-header{ display:flex; align-items:center; gap:10px; padding:10px 8px 14px; }
.lm-logo{ width:22px; height:22px; filter: drop-shadow(0 0 6px rgba(212,175,55,.55)); }
.lm-brand{ font-weight:800; color:var(--gold-2); letter-spacing:.2px; }

.lm-section{
  margin: 8px 8px 6px; font-size:.78rem; letter-spacing:.05em;
  color: rgba(240,230,190,.75);
}

.lm-nav{ display:flex; flex-direction:column; gap:10px; padding: 4px 6px 10px; }
.lm-item{
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px; border-radius:14px;
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  border: 1px solid rgba(212,175,55,.18);
  color:var(--txt); text-decoration:none; font-weight:600;
  transition: .2s ease;
}
.left-menu a{ text-decoration:none; color:inherit; }
.lm-item:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.35);
  box-shadow: 0 6px 18px rgba(212,175,55,.10);
}
.lm-item.active{
  background: linear-gradient(180deg, rgba(212,175,55,.26), rgba(212,175,55,.12));
  border-color: rgba(212,175,55,.55);
  color:#fff;
  box-shadow: 0 6px 22px rgba(212,175,55,.22), inset 0 1px 0 rgba(255,255,255,.1);
}
.lm-ico{ width:22px; text-align:center; opacity:.95; }
.lm-txt{ flex:1 }

.lm-footer{ margin-top:auto; padding: 12px 8px 2px; }
.lm-balance{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--gold-2); margin-bottom:10px;
  padding:10px 12px; border-radius:12px;
  background: linear-gradient(180deg, rgba(212,175,55,.16), rgba(255,255,255,.04));
  border:1px solid rgba(212,175,55,.35);
}

/* Responsivo: menu recolhe; conteúdo vira 100% */
.lm-toggle{ position:fixed; left:12px; top:12px; z-index:1100; }
@media (max-width: 991.98px){
  .left-menu{ width: 260px; transform: translateX(-100%); transition: .25s ease; }
  .left-menu.open{ transform: translateX(0); }
  .page-with-leftmenu{ margin-left:0; width:100%; }
}

/* =========================================================
   CARDS / PAINÉIS / FORM
   ========================================================= */
.panel-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; box-shadow: var(--shadow);
  max-width:100%; overflow-x: hidden;
}
.section{ padding:16px; max-width:100%; overflow-x:hidden; }
.section-title{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.section-title .icon{ filter: drop-shadow(0 0 6px rgba(212,175,55,.25)); }

.king-input,
.form-select.king-input{
  background: rgba(20,20,20,.55); border:1px solid rgba(212,175,55,.25);
  color:var(--txt); border-radius:12px; padding:.6rem .8rem;
  max-width:100%;
}
.king-input:focus,
.form-select.king-input:focus{
  border-color: rgba(212,175,55,.55); box-shadow: 0 0 0 3px rgba(212,175,55,.2);
  color:#fff; background: rgba(20,20,20,.7);
}

.btn-gold{
  background: linear-gradient(180deg, #f4dd84, #d4af37);
  border:1px solid rgba(212,175,55,.7); color:#241a05; font-weight:800;
  border-radius:12px; box-shadow: 0 8px 24px rgba(212,175,55,.25);
}
.btn-gold:hover{ filter: brightness(1.05); }
.btn-outline-gold{
  background: transparent; color:var(--gold-2);
  border:1px solid rgba(212,175,55,.5); border-radius:12px;
}
.btn-outline-gold:hover{ background: rgba(212,175,55,.15); }

/* =========================================================
   AUTH (login/cadastro)
   ========================================================= */
.king-auth{ position:relative; overflow:hidden; }
#bgAnim{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; }
.auth-card{
  width:min(420px, 92%); margin:6vh auto 0; padding:24px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow: var(--shadow);
}
.auth-card.wide{ width:min(560px, 95%); }
.auth-logo{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.auth-logo img{ width:28px; filter: drop-shadow(0 0 6px rgba(212,175,55,.55)); }
.auth-logo span{ font-weight:900; color:var(--gold-2); font-size:1.2rem; }
.auth-form label{ color:var(--gold-2); }

/* =========================================================
   TESTADORES
   ========================================================= */
.tester-box .tester-sub{ color:var(--gold-2); font-weight:800; letter-spacing:.5px; }
.tester-textarea{
  min-height:220px; resize:vertical; border-radius:14px !important;
  width:100%; max-width:100%;
  background: rgba(20,20,20,.55); border:1px solid rgba(212,175,55,.25); color:#fff;
}
.counter-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:12px 10px;
  max-width:100%;
}
.counter-num{ font-size:1.9rem; font-weight:900; }
.counter-lab{ opacity:.8; }

.tester-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:12px;
}

/* Toast */
.toast-wrap{ position:fixed; right:20px; top:18px; z-index:1300; }
.toast-mini{
  background: rgba(20,20,20,.85); border:1px solid rgba(255,255,255,.15);
  padding:8px 12px; border-radius:10px; opacity:0; transform:translateY(-6px);
  transition:.25s ease; color:#fff; margin-bottom:8px;
}
.toast-mini.show{ opacity:1; transform:translateY(0); }

/* Select custom (Gateways) */
.king-select{ position:relative; max-width:520px; width:100%; }
.king-select.disabled{ opacity:.6; pointer-events:none; }
.king-select .ks-display{
  width:100%; text-align:left;
  background: rgba(20,20,20,.55); color:#fff; border-radius:12px; border:1px solid rgba(212,175,55,.3);
  padding:.6rem .9rem; display:flex; align-items:center; justify-content:space-between;
}
.king-select .ks-caret{
  width:12px; height:12px; border-right:2px solid rgba(255,255,255,.75); border-bottom:2px solid rgba(255,255,255,.75); transform:rotate(45deg);
}
.king-select .ks-menu{
  position:absolute; inset:auto 0 0 0; transform: translateY(100%);
  background: rgba(20,20,20,.98); border:1px solid rgba(212,175,55,.35); border-radius:12px; padding:6px; display:none; z-index:20;
  max-height:260px; overflow:auto; /* rola dentro, não na página */
}
.king-select.open .ks-menu{ display:block; }
.ks-option{ padding:10px 12px; border-radius:10px; cursor:pointer; white-space:normal; }
.ks-option:hover{ background: rgba(212,175,55,.15); }
.ks-option.active{ background: rgba(212,175,55,.22); border:1px solid rgba(212,175,55,.35); }

/* Tabela dourada (responsiva) */
.king-table.more-gold{
  width:100%; table-layout:auto;
}
.king-table.more-gold thead th{
  background: linear-gradient(180deg, rgba(212,175,55,.25), rgba(212,175,55,.12));
  border: 1px solid rgba(212,175,55,.45);
  color:#f0e6be; font-weight:800;
  white-space:nowrap;
}
.king-table.more-gold tbody td{
  color:#f4f0da; white-space:normal; word-break:break-word;
}
.king-table.more-gold tbody tr{
  background: linear-gradient(180deg, rgba(212,175,55,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(212,175,55,.22);
}
.king-table.more-gold tbody tr:hover{
  background: linear-gradient(180deg, rgba(212,175,55,.14), rgba(255,255,255,.06));
  border-color: rgba(212,175,55,.35);
}

/* Tags de status */
.tag{
  padding:2px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.07);
  font-weight:800; color:#fff; white-space:nowrap;
}
.tag.live{
  border-color: rgba(212,175,55,.7);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(212,175,55,.22));
}
.tag.dead{
  border-color: rgba(255,120,120,.6);
  background: linear-gradient(180deg, rgba(60,0,0,.25), rgba(255,120,120,.18));
  color:#ffcdcd;
}

/* KPIs */
.kpi-bar{ height:8px; width:100%; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.kpi-bar > span{ display:block; height:100%; background: linear-gradient(90deg, #d4af37, #f4dd84); }

/* MISC */
.page-with-leftmenu .section{ margin-right:6px; }

/* Garantias anti-overflow para todos os contextos */
.container, .container-fluid{ max-width:100%; padding-left:16px; padding-right:16px; }

/* Blocos que podem “estourar” — quebram/rolam internamente */
pre, .code, pre.code{
  max-width:100%;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}

/* SVGs/Imagens nunca passam de 100% */
svg, img{ max-width:100%; height:auto; display:block; }
/* =======================================================
   FIX • Tabela "Resultados Detalhados" (força paleta escura)
   ======================================================= */

/* Se a sua tabela estiver dentro de .table-responsive, estes seletores cobrem os dois casos */
.table.king-table.more-gold,
.table-responsive .table.king-table.more-gold{
  /* desabilita cores padrão do BS5 via CSS vars */
  --bs-table-color: #f3eed4;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: #f3eed4;
  --bs-table-hover-bg: transparent;
  --bs-table-hover-color: #f3eed4;
  color: #f3eed4;
  border-color: rgba(212,175,55,.18);
}

/* Cabeçalho dourado escuro */
.table.king-table.more-gold thead th,
.table-responsive .table.king-table.more-gold thead th{
  background: linear-gradient(180deg, rgba(112,90,18,.88), rgba(60,47,10,.92)) !important;
  color: #f5e9b8 !important;
  border-color: rgba(212,175,55,.55) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
  white-space: nowrap;
}

/* >>> AQUI está o ponto: força o fundo das células do corpo <<< */
.table.king-table.more-gold > :not(caption) > * > *,
.table-responsive .table.king-table.more-gold > :not(caption) > * > *{
  background-color: rgba(18,17,15,.96) !important;   /* fundo escuro */
  color: #f3eed4 !important;                         /* texto claro */
  border-top-color: rgba(212,175,55,.14) !important; /* divisória */
}

/* Hover mais escuro */
.table.king-table.more-gold tbody tr:hover > *,
.table-responsive .table.king-table.more-gold tbody tr:hover > *{
  background-color: rgba(30,28,22,.98) !important;
}

/* Borda externa de cada linha (opcional) */
.table.king-table.more-gold tbody tr,
.table-responsive .table.king-table.more-gold tbody tr{
  border-left: 1px solid rgba(212,175,55,.18);
  border-right: 1px solid rgba(212,175,55,.18);
}

/* Coluna "CUSTO" alinhada à direita e sem quebrar */
.table.king-table.more-gold td:last-child,
.table-responsive .table.king-table.more-gold td:last-child{
  text-align: right;
  white-space: nowrap;
}

/* Chips de status com contraste adequado */
.tag{
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color:#fff;
}
.tag.live{
  color:#0fd17b;
  border-color: rgba(15,209,123,.45);
  background: rgba(15,209,123,.14);
}
.tag.dead{
  color:#ffd6d6;
  border-color: rgba(255,120,120,.45);
  background: rgba(140,20,20,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
/* Faz os cards do topo igualarem a altura */
.king-hero{ height:100%; }
.user-kpi{ height:100%; }

/* (opcional) um mínimo de altura para ambos ficarem visualmente robustos */
.king-hero,
.user-kpi{ min-height: 140px; }
/* Cabeçalho/linhas da tabela na paleta âmbar */
.king-table thead th{
  background: rgba(212,175,55,.10);
  border-bottom: 1px solid rgba(212,175,55,.25);
  color: #f7f2d0;
}
.king-table tbody tr{
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.king-table tbody tr:hover{
  background: rgba(212,175,55,.06);
}

/* >>> Inputs/Selects/Buttons dentro das tabelas em modo escuro */
.king-table .form-control,
.king-table .form-select {
  background: rgba(255,255,255,.06) !important;
  color: #eee !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
.king-table .form-control::placeholder { color: rgba(255,255,255,.55); }
.king-table .form-control:focus,
.king-table .form-select:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(212,175,55,.45) !important;
  box-shadow: 0 0 0 .2rem rgba(212,175,55,.15);
  color:#fff !important;
}

/* Botões outline na paleta ouro (ex.: "Salvar", "Baixar...") */
.btn-outline-gold{
  color:#f0d889 !important;
  border-color: rgba(212,175,55,.55) !important;
  background: transparent !important;
}
.btn-outline-gold:hover{
  background: rgba(212,175,55,.18) !important;
  color:#fff !important;
  border-color: rgba(212,175,55,.75) !important;
}

/* Chips/badges dentro da tabela (opcional) */
.king-table .badge{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#eee;
}