/* InfluSD&A — tema custom (replica do design original) */

:root {
  --color-navy: #0B1E3D;      /* sidebar / fundo estrutural */
  --color-azul: #1C4ED8;      /* header / botões primários */
  --color-azure: #2563EB;
  --color-sky: #38BDF8;
  --color-amber: #F59E0B;     /* destaques de dados (1º lugar, avisos) */
  --color-orange: #FB923C;    /* 3º lugar */
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;

  --bg-body: var(--color-slate-50);
  --bg-surface: #FFFFFF;
  --text-main: var(--color-slate-800);
  --text-muted: var(--color-slate-500);
  --border-color: var(--color-slate-200);
}

[data-theme="dark"] {
  --bg-body: var(--color-slate-900);
  --bg-surface: var(--color-slate-800);
  --text-main: var(--color-slate-100);
  --text-muted: var(--color-slate-400);
  --border-color: var(--color-slate-700);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-body);
  color: var(--text-main);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.rounded-card { border-radius: 14px; }
.rounded-btn { border-radius: 10px; }

.surface {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}

/* Sidebar */
.app-sidebar {
  background: var(--color-navy);
  width: 256px;
  min-width: 256px;
  color: #E2E8F0;
}
.app-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-left: 4px solid transparent;
  color: #CBD5E1;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
}
.app-sidebar .nav-item:hover:not(.disabled) {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.app-sidebar .nav-item.active {
  border-left-color: var(--color-sky);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.app-sidebar .nav-item.disabled {
  opacity: .45;
  cursor: default;
}
.app-sidebar .nav-badge {
  margin-left: auto;
  font-size: 10px;
  background: rgba(255,255,255,0.12);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Header */
.app-header {
  height: 56px;
  background: var(--color-azul);
  color: #fff;
}

/* Scrollbar discreet */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-slate-300); border-radius: 999px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-slate-600); }

.fade-in { animation: fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.badge-rank-1 { background: #FEF3C7; color: #92400E; }
.badge-rank-2 { background: #E2E8F0; color: #334155; }
.badge-rank-3 { background: #FFEDD5; color: #9A3412; }
[data-theme="dark"] .badge-rank-1 { background: #78350F; color: #FDE68A; }
[data-theme="dark"] .badge-rank-2 { background: #334155; color: #E2E8F0; }
[data-theme="dark"] .badge-rank-3 { background: #7C2D12; color: #FED7AA; }

.chip-toggle {
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
}
.chip-toggle.active {
  background: var(--color-azul);
  color: #fff;
  border-color: var(--color-azul);
}

input[type="text"], input[type="search"], select, input[type="password"] {
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
}

.btn-primary {
  background: var(--color-azul);
  color: #fff;
  border-radius: 10px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover { background: var(--color-azure); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-main);
}
.btn-ghost:hover { background: var(--color-slate-100); }
[data-theme="dark"] .btn-ghost:hover { background: var(--color-slate-700); }