/* ═══════════════════════════════════════════════════════════════
   ATLAS DESIGN SYSTEM v1.0 — DARK-FIRST OVERRIDE (evolui-atlas)
   Aplicado sobre Yacht Club v3.0 base. Mapeia tokens YC → Atlas.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Atlas core tokens (DESIGN.md) */
  --atlas-bg-primary: #0d0d14;
  --atlas-bg-secondary: #13131f;
  --atlas-bg-tertiary: #1a1a2e;
  --atlas-text-primary: #f0f0f5;
  --atlas-text-secondary: #a0a0b5;
  --atlas-text-muted: #60607a;
  --atlas-accent: #6366f1;
  --atlas-accent-hover: #4f52e8;
  --atlas-accent-light: rgba(99, 102, 241, 0.12);
  --atlas-success: #10b981;
  --atlas-warning: #f59e0b;
  --atlas-error: #ef4444;
  --atlas-info: #3b82f6;
  --atlas-border: rgba(255,255,255,.08);

  /* Map Yacht Club tokens to Atlas equivalents */
  --yc-cream: var(--atlas-bg-primary);
  --yc-cream-dark: var(--atlas-border);
  --yc-teal: var(--atlas-bg-secondary);
  --yc-teal-light: var(--atlas-bg-tertiary);
  --yc-teal-dark: var(--atlas-bg-secondary);
  --yc-mogno: var(--atlas-accent);
  --yc-silver: var(--atlas-text-muted);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.6);
}

/* Body + base typography */
body {
  background: var(--atlas-bg-primary) !important;
  color: var(--atlas-text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Surfaces — invert white cards to dark */
.kpi-card,
.card,
.modal,
.espelho-grid-wrapper,
.search-box,
.kanban-card,
.espelho-stat,
.topbar {
  background: var(--atlas-bg-secondary) !important;
  border-color: var(--atlas-border) !important;
  color: var(--atlas-text-primary) !important;
}

.topbar {
  border-bottom: 1px solid var(--atlas-border) !important;
}

.kanban-col {
  background: var(--atlas-bg-tertiary) !important;
}

.kanban-card {
  border-left: 3px solid var(--atlas-accent) !important;
}

/* Sidebar — keep tonal contrast but in Atlas palette */
.sidebar {
  background: var(--atlas-bg-secondary) !important;
  border-right: 1px solid var(--atlas-border);
}
.sidebar-brand h1 { color: var(--atlas-text-primary); }
.sidebar-brand h1 span { color: var(--atlas-accent) !important; filter: none !important; }
.sidebar-brand p { color: var(--atlas-text-muted); }
.nav-item { color: var(--atlas-text-secondary) !important; }
.nav-item:hover {
  background: var(--atlas-accent-light) !important;
  color: var(--atlas-text-primary) !important;
  transform: translateX(2px);
  transition: all .2s ease;
}
.nav-item.active {
  background: var(--atlas-accent-light) !important;
  color: var(--atlas-accent) !important;
  border-left: 2px solid var(--atlas-accent);
}
.nav-item:focus-visible {
  outline: 2px solid var(--atlas-accent) !important;
  outline-offset: 2px;
}

/* Topbar */
.topbar-title { color: var(--atlas-text-primary) !important; font-weight: 700; letter-spacing: -.01em; }
.topbar-credits {
  background: var(--atlas-accent-light) !important;
  color: var(--atlas-accent) !important;
}

/* Tables */
table { color: var(--atlas-text-primary); }
thead th {
  background: var(--atlas-bg-tertiary) !important;
  color: var(--atlas-text-secondary) !important;
  border-bottom: 1px solid var(--atlas-border);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .75rem;
}
tbody tr {
  border-bottom: 1px solid var(--atlas-border);
  transition: background .15s ease;
}
tbody tr:hover { background: var(--atlas-bg-tertiary) !important; }

/* Buttons — Atlas microinterações */
.btn {
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
  letter-spacing: -.005em;
}
.btn:focus-visible {
  outline: 2px solid var(--atlas-accent) !important;
  outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn.btn-primary {
  background: var(--atlas-accent) !important;
  color: #fff !important;
  border: none !important;
}
.btn-primary:hover {
  background: var(--atlas-accent-hover) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
  transform: translateY(-1px);
}
.btn-secondary, .btn.btn-secondary {
  background: var(--atlas-bg-tertiary) !important;
  color: var(--atlas-text-primary) !important;
  border: 1px solid var(--atlas-border) !important;
}
.btn-secondary:hover {
  background: var(--atlas-bg-secondary) !important;
  border-color: var(--atlas-accent) !important;
}
.btn:disabled {
  background: var(--atlas-bg-tertiary) !important;
  color: var(--atlas-text-muted) !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Inputs / forms */
.form-group input, .form-group select, .form-group textarea,
input[type="text"], input[type="email"], input[type="number"], input[type="search"], select, textarea {
  background: var(--atlas-bg-tertiary) !important;
  color: var(--atlas-text-primary) !important;
  border: 1px solid var(--atlas-border) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--atlas-accent) !important;
  box-shadow: 0 0 0 3px var(--atlas-accent-light) !important;
}
.search-box input { color: var(--atlas-text-primary) !important; }
.search-box input::placeholder { color: var(--atlas-text-muted); }

/* KPI cards — Atlas accent stripes */
.kpi-card { transition: transform .2s, box-shadow .2s; }
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.kpi-card.teal::after { background: var(--atlas-accent) !important; }

/* Tower / quadra cards */
.tower-card, .funnel-stage, .leaderboard-row {
  background: var(--atlas-bg-tertiary) !important;
  color: var(--atlas-text-primary) !important;
  transition: all .2s ease;
}
.tower-card:hover {
  background: var(--atlas-accent-light) !important;
  border-color: var(--atlas-accent) !important;
  transform: translateY(-2px);
}

/* Quadra tabs / Tower tabs */
.quadra-tab, .tower-tab {
  background: var(--atlas-bg-tertiary) !important;
  color: var(--atlas-text-secondary) !important;
  border: 1px solid var(--atlas-border) !important;
  border-radius: 8px !important;
  transition: all .15s ease;
}
.quadra-tab:hover, .tower-tab:hover {
  color: var(--atlas-text-primary) !important;
  border-color: var(--atlas-accent) !important;
}
.quadra-tab.active, .tower-tab.active {
  background: var(--atlas-accent) !important;
  color: #fff !important;
  border-color: var(--atlas-accent) !important;
}

/* Modal backdrop */
.modal-overlay, [class*="overlay"] { background: rgba(0,0,0,.6) !important; }

/* Toast */
.toast { box-shadow: var(--shadow-lg) !important; backdrop-filter: blur(8px); }

/* Scrollbar */
::-webkit-scrollbar-thumb { background: var(--atlas-bg-tertiary) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--atlas-text-muted) !important; }

/* Empty / loading states helper */
.empty-state, .loading-state {
  color: var(--atlas-text-muted);
  text-align: center;
  padding: 48px 24px;
  font-size: .9rem;
}

/* Skeleton shimmer */
@keyframes atlas-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--atlas-bg-secondary) 25%, var(--atlas-bg-tertiary) 50%, var(--atlas-bg-secondary) 75%);
  background-size: 200% 100%;
  animation: atlas-shimmer 1.5s infinite linear;
  border-radius: 8px;
}

/* Atlas brand tag — bottom-right marker */
.atlas-version-tag {
  position: fixed;
  bottom: 12px;
  right: 12px;
  background: var(--atlas-accent-light);
  color: var(--atlas-accent);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  z-index: 9999;
  pointer-events: none;
  letter-spacing: .04em;
}

/* High-contrast text everywhere */
h1, h2, h3, h4, h5 { color: var(--atlas-text-primary) !important; letter-spacing: -.01em; }
p, span, li, td, label { color: inherit; }
.text-muted, [style*="color: var(--yc-teal-dark)"] { color: var(--atlas-text-secondary) !important; }