/* ========================================
   Material Design 3 — Invest Ranking Theme
   v1.0.0
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ---------- DARK MODE (Padrão :root) ---------- */
:root {
  --md-bg: #121316;
  --md-surface: #1A1C1E;
  --md-border: #2E3035;
  --md-text: #E2E2E6;
  --md-text-secondary: #C6C6C6;
  --md-accent: #A8C7FA;
  --md-accent-text: #042ECB;
  --md-input-bg: #212A3A;

  --green: #34d399; --red: #fb7185; --blue: #60a5fa; --orange: #F59E0B; --youtube: #FF0033;
  --radius: 10px; --sidebar-w: 260px; --topbar-h: 56px;

  /* legacy aliases */
  --bg: var(--md-bg); --surface: var(--md-surface); --border: var(--md-border);
  --text: var(--md-text); --muted: var(--md-text-secondary); --muted-alt: #8E9199;
  --accent: var(--md-accent); --card: var(--md-surface); --card-alt: var(--md-surface); --border-alt: var(--md-border);
}

/* ---------- LIGHT MODE (body.light) ---------- */
body.light {
  --md-bg: #F8F9FA;
  --md-surface: #FFFFFF;
  --md-border: #E1E2E5;
  --md-text: #191C1E;
  --md-text-secondary: #44474E;
  --md-accent: #0B57D0;
  --md-accent-text: #FFFFFF;
  --md-input-bg: #F0F4F9;

  --bg: var(--md-bg); --surface: var(--md-surface); --border: var(--md-border);
  --text: var(--md-text); --muted: var(--md-text-secondary); --muted-alt: #64748B;
  --accent: var(--md-accent); --card: var(--md-surface); --card-alt: var(--md-surface); --border-alt: var(--md-border);
}

/* ---------- Base Reset ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; }

body {
  min-height:100%; background:var(--bg); color:var(--text);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:12px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

table, td, th { font-variant-numeric:tabular-nums; }

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ---------- Theme Toggle (Sun/Moon) ---------- */
.btn-theme {
  background:none; border:none; color:var(--md-text-secondary);
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:all .2s; flex-shrink:0; margin-right:16px;
}
.btn-theme:hover { background:var(--md-input-bg); color:var(--md-accent); }
body.light .btn-theme:hover { background:rgba(0,0,0,0.06); }

/* ---------- Badges ---------- */
.badge-compra {
  display:inline-block; background:rgba(96,165,250,0.12); color:#60a5fa;
  border:1px solid rgba(96,165,250,0.2); padding:2px 8px; border-radius:6px;
  font-size:12px; font-weight:600;
}
body.light .badge-compra { background:rgba(37,99,235,0.1); color:#1e40af; border-color:rgba(37,99,235,0.2); }

.badge-venda {
  display:inline-block; background:rgba(251,113,133,0.12); color:#fb7185;
  border:1px solid rgba(251,113,133,0.2); padding:2px 8px; border-radius:6px;
  font-size:12px; font-weight:600;
}
body.light .badge-venda { background:rgba(225,29,72,0.1); color:#9f1239; border-color:rgba(225,29,72,0.2); }

.badge-bonus {
  display:inline-block; background:rgba(96,165,250,0.12); color:#60a5fa;
  border:1px solid rgba(96,165,250,0.2); padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:600;
}
body.light .badge-bonus { background:rgba(37,99,235,0.1); color:#1e40af; border-color:rgba(37,99,235,0.2); }

.badge-tipo {
  display:inline-block; background:rgba(255,255,255,0.06); color:var(--muted-alt);
  padding:2px 8px; border-radius:4px; font-size:11px; font-weight:500;
}

/* ---------- Global Panel ---------- */
.md-card {
  background-color: var(--md-surface) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
}
body.light .md-card {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08);
}
.md-card table,
.md-card th,
.md-card td {
  background-color: transparent !important;
}
.md-card tbody tr:hover td {
  background-color: var(--md-input-bg) !important;
}

/* ---------- Animations ---------- */
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }