/* Tema preto e branco, letra pequena: carrega por ultimo quando configuracoes_sistema.tema = 'pb'. */

:root,
[data-theme="dark"] {
  --ambient-bg: #000000;
  --tropa-charcoal: #000000;
  --tropa-charcoal-2: #0A0A0A;
  --tropa-graphite: #141414;
  --tropa-graphite-2: #1F1F1F;
  --tropa-ice-white: #EDEDED;
  --tropa-neon-green: #FFFFFF;
  --tropa-neon-dim: #A1A1A1;

  --glass-bg: #0A0A0A;
  --glass-bg-hover: #141414;
  --glass-bg-active: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-strong: rgba(255, 255, 255, 0.18);

  --text: #EDEDED;
  --text-muted: #A1A1A1;
  --text-dim: #737373;
  --text-inverted: #000000;

  --accent: #FFFFFF;
  --accent-hover: #D4D4D4;
  --accent-text: #000000;
  --accent-glow: 0 0 0 transparent;
  --neon-glow: 0 0 0 transparent;

  --success: #EDEDED;
  --danger: #EDEDED;
  --warning: #EDEDED;
  --info: #A1A1A1;

  --chart: #EDEDED;
  --warning-wash: transparent;
  --banner-fg: #000000;
  --focus-ring: rgba(255, 255, 255, 0.16);
  --input-bg: #0A0A0A;
  --th-bg: #0A0A0A;

  --dock-bg: #0A0A0A;
  --dock-border: rgba(255, 255, 255, 0.12);
  --dock-circle: #141414;
  --dock-circle-h: #1F1F1F;
  --dock-icon: #EDEDED;
  --dock-tip-bg: #0A0A0A;
  --dock-tip-fg: #FFFFFF;
  --dock-shadow: 0 8px 24px rgba(0, 0, 0, 0.60);
}

[data-theme="light"] {
  --ambient-bg: #FAFAFA;
  --tropa-charcoal: #FAFAFA;
  --tropa-charcoal-2: #F2F2F2;
  --tropa-graphite: #FFFFFF;
  --tropa-graphite-2: #EBEBEB;
  --tropa-ice-white: #0A0A0A;
  --tropa-neon-green: #000000;
  --tropa-neon-dim: #666666;

  --glass-bg: #FFFFFF;
  --glass-bg-hover: #F5F5F5;
  --glass-bg-active: rgba(0, 0, 0, 0.06);
  --glass-border: rgba(0, 0, 0, 0.10);
  --glass-border-strong: rgba(0, 0, 0, 0.18);

  --text: #0A0A0A;
  --text-muted: #666666;
  --text-dim: #8F8F8F;
  --text-inverted: #FFFFFF;

  --accent: #000000;
  --accent-hover: #262626;
  --accent-text: #FFFFFF;
  --accent-glow: 0 0 0 transparent;
  --neon-glow: 0 0 0 transparent;

  --success: #0A0A0A;
  --danger: #0A0A0A;
  --warning: #0A0A0A;
  --info: #666666;

  --chart: #0A0A0A;
  --warning-wash: transparent;
  --banner-fg: #FFFFFF;
  --focus-ring: rgba(0, 0, 0, 0.10);
  --input-bg: #FFFFFF;
  --th-bg: #FAFAFA;

  --dock-bg: #FFFFFF;
  --dock-border: rgba(0, 0, 0, 0.10);
  --dock-circle: #F2F2F2;
  --dock-circle-h: #E8E8E8;
  --dock-icon: #171717;
  --dock-tip-bg: #FFFFFF;
  --dock-tip-fg: #0A0A0A;
  --dock-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ---------- base ---------- */
body, button, input, select, textarea {
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body {
  font-size: 13px;
  background: var(--ambient-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--text); color: var(--text-inverted); }

h1 { font-size: 20px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: -0.005em; }
h3 { font-size: 14px; font-weight: 600; }

/* ---------- marca em texto (no lugar da logo) ---------- */
.marca-nome {
  display: inline-flex;
  align-items: center;
  font-family: 'Syne', 'Geist', system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
.topbar-logo.marca-nome { height: auto; }
.sidebar .logo .marca-nome { font-size: 16px; }
.topbar-logo, .mnav-logo,
[data-theme="light"] .topbar-logo, [data-theme="light"] .mnav-logo { filter: none !important; }

/* ---------- topbar: o vidro fica, sem cor ---------- */
[data-theme="light"] .topbar .platform-switch a.active { background: #FFFFFF; color: #000000; }
.platform-switch a.active { color: var(--accent-text); }

/* ---------- cards e botoes ---------- */
.card { border-radius: 12px; }
.card--highlight { background: var(--glass-bg); border-color: var(--glass-border-strong); }
.card--highlight::before { background: var(--text-dim); }

.btn { border-radius: 8px; font-weight: 500; font-size: 13px; }
.btn-primary, .btn-primary:hover { color: var(--accent-text); }
.btn-danger { background: transparent; color: var(--text); border-color: var(--glass-border-strong); }
.btn-danger:hover { background: var(--glass-bg-hover); color: var(--text); }

/* ---------- formularios ---------- */
[data-theme] input[type="text"], [data-theme] input[type="email"], [data-theme] input[type="password"],
[data-theme] input[type="number"], [data-theme] input[type="tel"], [data-theme] input[type="date"],
[data-theme] input[type="search"], [data-theme] input[type="file"], [data-theme] select, [data-theme] textarea {
  background: var(--input-bg);
  border-color: var(--glass-border-strong);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}
[data-theme] .form-control:focus, [data-theme] input:focus, [data-theme] select:focus, [data-theme] textarea:focus {
  background: var(--input-bg);
  border-color: var(--text-muted);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---------- tabelas ---------- */
[data-theme] .table th {
  background: var(--th-bg);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.table td { font-size: 12.5px; }
main table a:hover, .table a:hover { color: var(--text); }

/* ---------- selos de status: sem cor, pelo formato ---------- */
[data-theme] .badge {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--glass-border-strong);
  font-weight: 500;
  letter-spacing: 0;
}
[data-theme] .badge-success {
  background: var(--text) !important;
  color: var(--text-inverted) !important;
  border-color: var(--text) !important;
}
[data-theme] .badge-warning {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--text-muted) !important;
}
[data-theme] .badge-danger {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px dashed var(--text-dim) !important;
  text-decoration: line-through;
}

/* ---------- dashboard ---------- */
.dash-head { padding: 4px 0 16px; }
.dash-title { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.dash-title span { font-size: 13px; font-weight: 400; margin-top: 2px; }
.dash-grid, .dash-feats { gap: 10px; }
.dash-grid { margin-bottom: 10px; }
.dash-hero { min-height: 340px; border-radius: 12px; }
.dash-chart, [data-theme="light"] .dash-chart { background: transparent; padding: 12px; }
.dash-label, .dash-feat-lbl { font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.dash-feat { min-height: 92px; padding: 14px 16px; border-radius: 12px; }
.dash-feat-val {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.dash-feat-nota { font-size: 11px; }
.dash-feat.is-accent { border-color: var(--glass-border-strong); }
.dash-feat.is-accent .dash-feat-val, .dash-item-val.is-accent { color: var(--text); }
.dash-item-ico { width: 32px; height: 32px; border-radius: 8px; }
.dash-item-ico svg { width: 16px; height: 16px; }
.dash-item-val { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; font-weight: 500; }
.dash-item-lbl { font-size: 11px; }
.dash-credits { border-radius: 12px; }
.dash-aviso { border-color: var(--glass-border-strong); background: transparent; }
.dash-conta span { text-transform: none; letter-spacing: 0; }

/* ---------- dock, drawer e barra de jogos: item ativo legivel no branco/preto ---------- */
.fdock-item.active .fdock-icon { color: var(--accent-text); }
.mnav-list a.active, .mnav-list a.active .fdock-icon { color: var(--accent-text); }
.bets-bar .platform-switch a.active { color: var(--accent-text); }

/* ---------- login e cadastro ---------- */
[data-theme] .auth-card .auth-logo.marca-nome { display: flex; justify-content: center; font-size: 20px; margin: 0 auto 24px; filter: none; }
[data-theme] .auth-error { background: transparent; border-color: var(--glass-border-strong); color: var(--text); }

@media (max-width: 1100px) {
  .dash-hero { min-height: 260px; }
}
@media (max-width: 480px) {
  .dash-feat { padding: 12px 14px; min-height: 84px; }
  .dash-feat-val { font-size: 18px; }
}