/* Bruno Bet — preto + dourado (padrão do mockup) */
:root {
  --bb-gold: #e8c547;
  --bb-gold-2: #f0d36a;
  --bb-ink: #111111;
  --bb-bg: #0f0f10;
  --bb-panel: #121212;
  --bb-card: #1c1c1e;
  --bb-line: #2a2a2c;
}

.dark {
  --background: 0 0% 6%;
  --foreground: 0 0% 96%;
  --border: 0 0% 16%;
  --card: 0 0% 11%;
  --card-foreground: 0 0% 96%;
  --card-border: 0 0% 16%;
  --sidebar: 0 0% 5%;
  --sidebar-foreground: 0 0% 90%;
  --sidebar-border: 0 0% 13%;
  --sidebar-primary: 46 78% 59%;
  --sidebar-primary-foreground: 0 0% 7%;
  --sidebar-accent: 0 0% 12%;
  --sidebar-accent-foreground: 0 0% 96%;
  --sidebar-ring: 46 78% 59%;
  --primary: 46 78% 59%;
  --primary-foreground: 0 0% 7%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 92%;
  --muted: 0 0% 14%;
  --muted-foreground: 0 0% 62%;
  --accent: 0 0% 13%;
  --accent-foreground: 0 0% 92%;
  --input: 0 0% 18%;
  --ring: 46 78% 59%;
  --chart-1: 46 78% 59%;
}

html.dark,
html.dark body,
html.dark #root {
  background-color: var(--bb-bg);
  color: #f4f4f5;
}
html.dark main {
  background-color: var(--bb-bg);
}
html.dark header.sticky,
html.dark header[class*="border-b"] {
  background: var(--bb-bg) !important;
  border-color: var(--bb-line) !important;
}

/* Sidebar */
html.dark [data-sidebar="sidebar"] {
  background: #0c0c0d !important;
  border-right: 1px solid #1f1f22 !important;
}
html.dark [data-sidebar="menu-button"] {
  border-radius: 10px !important;
  color: #e4e4e7;
}
html.dark [data-sidebar="menu-button"] svg {
  color: var(--bb-gold);
}
html.dark [data-sidebar="menu-button"]:hover {
  background: rgba(232, 197, 71, 0.08) !important;
  color: #fff !important;
}
html.dark [data-sidebar="menu-button"][data-active="true"] {
  background: var(--bb-gold) !important;
  color: var(--bb-ink) !important;
  font-weight: 700 !important;
}
html.dark [data-sidebar="menu-button"][data-active="true"] svg {
  color: var(--bb-ink) !important;
}

/* Esmeraldas do tema antigo → dourado */
html.dark .text-emerald-300,
html.dark .text-emerald-400,
html.dark .text-emerald-500,
html.dark .text-primary {
  color: var(--bb-gold) !important;
}
html.dark .bg-emerald-400,
html.dark .bg-emerald-500,
html.dark .bg-primary {
  background-color: var(--bb-gold) !important;
  color: var(--bb-ink) !important;
}
html.dark .bg-emerald-500\/10,
html.dark .bg-emerald-500\/5,
html.dark .bg-primary\/10 {
  background-color: rgba(232, 197, 71, 0.1) !important;
}
html.dark .border-emerald-500\/20,
html.dark .border-emerald-500\/25,
html.dark .border-emerald-500\/30,
html.dark .border-emerald-500\/35,
html.dark .border-primary\/20 {
  border-color: rgba(232, 197, 71, 0.28) !important;
}
html.dark .hover\:bg-emerald-400:hover,
html.dark .hover\:bg-emerald-500:hover {
  background-color: var(--bb-gold-2) !important;
  color: var(--bb-ink) !important;
}

/* Odds / chips no padrão do mockup */
html.dark .font-mono.font-bold,
html.dark [class*="tabular-nums"] {
  font-variant-numeric: tabular-nums;
}

html.dark button.rounded-md.border,
html.dark a.rounded-md.border {
  border-radius: 8px;
}

/* Cards KPI */
.kpi-card {
  border-radius: 1rem;
  border: 1px solid var(--bb-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  background: var(--bb-card);
}
.kpi-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-gold);
}
.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bb-dash .glass-card {
  background: var(--bb-card) !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 1rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
}
.bb-dash h1 {
  letter-spacing: -0.02em;
}
.bb-dash [data-testid="personalized-play"] {
  background: var(--bb-card);
  border: 1px solid var(--bb-line);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html.dark footer {
  background: var(--bb-bg);
  border-color: #1f1f22 !important;
}

/* ── Movimento de Odds / Drop Radar → padrão Bruno Bet (dourado) ── */
html.dark .movement-shell,
html.dark .movement-dialog,
html.dark .movement-date-popover {
  --movement-paper: var(--bb-bg);
  --movement-panel: var(--bb-panel);
  --movement-card: var(--bb-card);
  --movement-ink: #f4f4f5;
  --movement-muted: #9ca3af;
  --movement-border: var(--bb-line);
  --movement-accent: var(--bb-gold);
  --movement-accent-dark: var(--bb-gold-2);
  --movement-highlight: rgba(232, 197, 71, 0.12);
  --movement-highlight-ink: var(--bb-gold);
  --movement-grid: rgba(232, 197, 71, 0.06);
  --movement-inverse: #0c0c0d;
  --movement-on-inverse: #f4f4f5;
  --movement-inverse-muted: #9ca3af;
  --movement-hot: #f87171;
  --movement-cold: #60a5fa;
  --movement-shadow: rgba(0, 0, 0, 0.45);
}

html.dark .movement-shell {
  background: var(--bb-bg) !important;
  color: #f4f4f5;
  font-family: Inter, var(--font-sans), sans-serif;
}

html.dark .movement-grid-bg {
  opacity: 0.12 !important;
  background-image: linear-gradient(to right, rgba(232, 197, 71, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232, 197, 71, 0.05) 1px, transparent 1px) !important;
}

html.dark .movement-shell > .relative {
  padding-top: 0.5rem !important;
}

html.dark .movement-shell header .movement-title.text-3xl {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #f4f4f5 !important;
}

@media (min-width: 640px) {
  html.dark .movement-shell header .movement-title.text-3xl {
    font-size: 1.875rem !important;
  }
}

html.dark .movement-shell header .movement-mono {
  color: #9ca3af !important;
  letter-spacing: 0.08em !important;
}

html.dark .movement-live-pill.live {
  border-color: rgba(232, 197, 71, 0.45) !important;
  color: var(--bb-gold) !important;
  background: rgba(232, 197, 71, 0.08) !important;
}

html.dark .movement-ticker {
  border-color: rgba(232, 197, 71, 0.22) !important;
  border-radius: 1rem !important;
  background: var(--bb-card) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

html.dark .movement-ticker-label {
  background: var(--bb-gold) !important;
  color: var(--bb-ink) !important;
}

html.dark .movement-ticker-dot {
  background: var(--bb-ink) !important;
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.15) !important;
}

html.dark .movement-view-switch,
html.dark .movement-tabs {
  border-radius: 0.75rem !important;
  border-color: var(--bb-line) !important;
  background: var(--bb-card) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

html.dark .movement-view-switch button.active,
html.dark .movement-tabs button.active {
  background: rgba(232, 197, 71, 0.12) !important;
  color: var(--bb-gold) !important;
}

html.dark .movement-view-switch button.active:after {
  background: var(--bb-gold) !important;
}

html.dark .movement-tabs button.active {
  box-shadow: inset 0 0 0 1px rgba(232, 197, 71, 0.32) !important;
}

html.dark .movement-criteria-bar {
  border-radius: 0.75rem !important;
  border-color: var(--bb-line) !important;
  background: var(--bb-card) !important;
}

html.dark .movement-criteria-bar .movement-adjust {
  border-color: var(--bb-gold) !important;
  background: var(--bb-gold) !important;
  color: var(--bb-ink) !important;
}

html.dark .movement-criteria-bar .movement-adjust:hover {
  background: var(--bb-gold-2) !important;
  color: var(--bb-ink) !important;
}

html.dark .movement-criteria-bar button:hover {
  border-color: rgba(232, 197, 71, 0.55) !important;
  background: rgba(232, 197, 71, 0.08) !important;
  color: var(--bb-gold) !important;
}

html.dark .movement-card,
html.dark .drop-card {
  border-radius: 1rem !important;
  border-color: var(--bb-line) !important;
  background: var(--bb-card) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

html.dark .movement-card:hover,
html.dark .drop-card:hover {
  border-color: rgba(232, 197, 71, 0.35) !important;
  transform: translateY(-2px);
}

html.dark .movement-card:before,
html.dark .drop-card:before {
  background: var(--bb-gold) !important;
}

html.dark .movement-price-panel {
  border-radius: 0.75rem !important;
  border-color: var(--bb-line) !important;
  background: #0c0c0d !important;
}

html.dark .movement-search,
html.dark .movement-date,
html.dark .movement-live-pill {
  border-color: var(--bb-line) !important;
  background: var(--bb-card) !important;
  border-radius: 0.5rem !important;
}

html.dark .movement-search:focus,
html.dark .movement-date:hover {
  border-color: rgba(232, 197, 71, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(232, 197, 71, 0.12) !important;
}

html.dark .movement-status-tabs button.active {
  border-color: var(--bb-gold) !important;
}

html.dark .movement-status-tabs button.active span {
  background: rgba(232, 197, 71, 0.15) !important;
  color: var(--bb-gold) !important;
}

html.dark .movement-analyze,
html.dark .drop-analyze {
  color: var(--bb-gold) !important;
}

html.dark .movement-dialog,
html.dark .movement-dialog-head,
html.dark .movement-analysis-box,
html.dark .movement-variation-box {
  background: var(--bb-card) !important;
  border-color: var(--bb-line) !important;
}

html.dark .drop-control-deck,
html.dark .drop-radar-hero,
html.dark .drop-chart-panel {
  border-color: var(--bb-line) !important;
  background: var(--bb-card) !important;
  border-radius: 1rem !important;
}

html.dark .drop-view-tabs button.active {
  border-color: var(--bb-gold) !important;
  color: var(--bb-gold) !important;
}

html.dark .movement-shell [class*="text-[var(--movement-accent)]"] {
  color: var(--bb-gold) !important;
}

html.dark .movement-shell .bg-\[var\(--movement-highlight\)\] {
  background: rgba(232, 197, 71, 0.12) !important;
  color: var(--bb-gold) !important;
}