/* ─── Mercury Design System Override ─────────────────────────────────────────
   Theme: Mountain Top Command Center · Dark · accent #5266eb
   ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --color-mercury-blue: #5266eb;
  --color-ghost-blue: #cdddff;
  --color-deep-space: #171721;
  --color-midnight-slate: #1e1e2a;
  --color-graphite: #272735;
  --color-lead: #70707d;
  --color-starlight: #ededf3;
  --color-silver: #c3c3cc;
  --color-pure-white: #ffffff;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--color-deep-space) !important;
  color: var(--color-starlight) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.01em;
}

#root {
  background-color: var(--color-deep-space) !important;
}

/* ── White & light backgrounds → dark surfaces ─────────────────────────────── */
.bg-white {
  background-color: var(--color-midnight-slate) !important;
}

.bg-zinc-50 {
  background-color: var(--color-deep-space) !important;
}

.bg-zinc-100 {
  background-color: var(--color-graphite) !important;
}

.bg-zinc-900\/50 {
  background-color: rgba(23, 23, 33, 0.5) !important;
}

.bg-zinc-950 {
  background-color: var(--color-deep-space) !important;
}

/* ── Text colors ───────────────────────────────────────────────────────────── */
.text-zinc-900,
.text-zinc-800,
.text-zinc-700 {
  color: var(--color-starlight) !important;
}

.text-zinc-600,
.text-zinc-500,
.text-zinc-400 {
  color: var(--color-silver) !important;
}

.text-white {
  color: var(--color-starlight) !important;
}

/* Text on blue buttons stays pure white */
.btn-primary .text-white,
.btn-primary {
  color: var(--color-pure-white) !important;
}

/* ── Borders ───────────────────────────────────────────────────────────────── */
.border-zinc-200,
.border-zinc-100 {
  border-color: var(--color-lead) !important;
}

.border-zinc-800,
.border-zinc-700 {
  border-color: var(--color-lead) !important;
}

.divide-zinc-100 > * + * {
  border-color: var(--color-lead) !important;
}

/* ── Accent / Blue ─────────────────────────────────────────────────────────── */
.bg-blue-600,
.bg-blue-700 {
  background-color: var(--color-mercury-blue) !important;
}

.text-blue-600,
.text-accent {
  color: var(--color-mercury-blue) !important;
}

.border-blue-600 {
  border-color: var(--color-mercury-blue) !important;
}

.bg-accent {
  background-color: var(--color-mercury-blue) !important;
}

.bg-accent\/10 {
  background-color: rgba(82, 102, 235, 0.12) !important;
}

.text-accent {
  color: var(--color-mercury-blue) !important;
}

.w-1\.5.bg-accent,
.w-2.bg-accent,
.w-2\.5.bg-accent {
  background-color: var(--color-mercury-blue) !important;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  border-radius: 32px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 480;
  letter-spacing: 0.01em;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s !important;
  box-shadow: none !important;
}

.btn-primary {
  background-color: var(--color-mercury-blue) !important;
  color: var(--color-pure-white) !important;
  border: none !important;
}

.btn-primary:hover {
  background-color: #4255d4 !important;
  color: var(--color-pure-white) !important;
}

.btn-outline {
  background-color: transparent !important;
  border: 1px solid var(--color-lead) !important;
  color: var(--color-starlight) !important;
}

.btn-outline:hover {
  background-color: var(--color-graphite) !important;
  border-color: var(--color-silver) !important;
  color: var(--color-starlight) !important;
}

.btn-ghost {
  background-color: transparent !important;
  color: var(--color-silver) !important;
}

.btn-ghost:hover {
  background-color: var(--color-graphite) !important;
  color: var(--color-starlight) !important;
}

/* ── Form fields ───────────────────────────────────────────────────────────── */
.field-input {
  background-color: var(--color-graphite) !important;
  border-color: var(--color-lead) !important;
  color: var(--color-starlight) !important;
  border-radius: 32px !important;
}

.field-input::placeholder {
  color: var(--color-lead) !important;
  opacity: 1;
}

.field-input:focus {
  border-color: var(--color-mercury-blue) !important;
  box-shadow: 0 0 0 2px rgba(82, 102, 235, 0.25) !important;
}

.field-label {
  color: var(--color-lead) !important;
}

.field-input:focus ~ .field-label,
.field-input:not(:placeholder-shown) ~ .field-label {
  color: var(--color-mercury-blue) !important;
}

input, textarea, select {
  background-color: var(--color-graphite) !important;
  border-color: var(--color-lead) !important;
  color: var(--color-starlight) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-lead) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-mercury-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(82, 102, 235, 0.25) !important;
}

/* ── Navigation links ──────────────────────────────────────────────────────── */
.nav-link {
  color: var(--color-silver) !important;
  border-radius: 8px !important;
}

.nav-link:hover {
  background-color: var(--color-graphite) !important;
  color: var(--color-starlight) !important;
}

.nav-link.active {
  background-color: var(--color-mercury-blue) !important;
  color: var(--color-pure-white) !important;
}

.nav-link.active:hover {
  background-color: #4255d4 !important;
  color: var(--color-pure-white) !important;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.w-60.flex-shrink-0.bg-white,
.w-60 {
  background-color: var(--color-midnight-slate) !important;
  border-right-color: var(--color-lead) !important;
}

/* ── Cards & panels ────────────────────────────────────────────────────────── */
.rounded-2xl.border.border-zinc-200,
.rounded-xl.border.border-zinc-200,
.rounded-xl.overflow-hidden {
  background-color: var(--color-midnight-slate) !important;
  border-color: var(--color-lead) !important;
  border-radius: 0px !important;
}

.bg-zinc-50.border-b.border-zinc-200 {
  background-color: var(--color-graphite) !important;
  border-bottom-color: var(--color-lead) !important;
}

.bg-zinc-50.rounded-lg,
.bg-zinc-50.rounded-xl {
  background-color: var(--color-graphite) !important;
}

.bg-zinc-50.border.border-zinc-200 {
  background-color: var(--color-graphite) !important;
  border-color: var(--color-lead) !important;
}

/* ── Modal / overlay ───────────────────────────────────────────────────────── */
.bg-white.rounded-2xl.w-full {
  background-color: var(--color-midnight-slate) !important;
  border: 1px solid var(--color-lead);
  border-radius: 4px !important;
}

.fixed.inset-0.bg-black\/50 {
  background-color: rgba(23, 23, 33, 0.8) !important;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
table {
  background-color: var(--color-midnight-slate) !important;
  color: var(--color-starlight) !important;
}

th {
  background-color: var(--color-graphite) !important;
  color: var(--color-silver) !important;
  border-bottom-color: var(--color-lead) !important;
}

td {
  border-bottom-color: var(--color-lead) !important;
  color: var(--color-starlight) !important;
}

tr:hover td {
  background-color: var(--color-graphite) !important;
}

.text-left.text-xs.font-semibold.text-zinc-500 {
  color: var(--color-silver) !important;
  background-color: var(--color-graphite) !important;
}

/* ── Fixed header / navbar ─────────────────────────────────────────────────── */
.fixed.top-0.left-0.right-0 {
  background-color: rgba(30, 30, 42, 0.92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-lead);
}

/* ── Spinner accent ────────────────────────────────────────────────────────── */
.border-accent {
  border-color: var(--color-mercury-blue) !important;
}

.border-t-transparent {
  border-top-color: transparent !important;
}

.border-t-white {
  border-top-color: var(--color-pure-white) !important;
}

/* ── Status pills / badges ─────────────────────────────────────────────────── */
.text-xs.capitalize.text-zinc-600.bg-zinc-100 {
  background-color: var(--color-graphite) !important;
  color: var(--color-silver) !important;
  border-radius: 32px !important;
}

.text-xs.font-medium.text-accent.bg-accent\/10 {
  background-color: rgba(82, 102, 235, 0.12) !important;
  color: var(--color-mercury-blue) !important;
  border-radius: 32px !important;
}

/* ── Error / alert states ──────────────────────────────────────────────────── */
.text-red-600.bg-red-50.border.border-red-200 {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  border-radius: 8px !important;
}

.text-sm.text-zinc-500.mt-4.p-3.bg-amber-50.border.border-amber-200 {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  border-radius: 8px !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-deep-space);
}

::-webkit-scrollbar-thumb {
  background: var(--color-lead);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-silver);
}

/* ── Selection ─────────────────────────────────────────────────────────────── */
::selection {
  background-color: rgba(82, 102, 235, 0.35);
  color: var(--color-starlight);
}

/* ── Image placeholders ────────────────────────────────────────────────────── */
.aspect-\[16\/9\].bg-zinc-100 {
  background-color: var(--color-graphite) !important;
}

/* ── Flex layout backgrounds ───────────────────────────────────────────────── */
.flex.min-h-screen.bg-zinc-50 {
  background-color: var(--color-deep-space) !important;
}

.flex-1.overflow-auto {
  background-color: var(--color-deep-space) !important;
}

/* ── Container / page wrapper ──────────────────────────────────────────────── */
.container {
  max-width: 1200px !important;
}

/* ── Border-t separators ───────────────────────────────────────────────────── */
.border-t.border-zinc-100,
.border-t.border-zinc-800 {
  border-top-color: var(--color-lead) !important;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.bg-zinc-950.text-zinc-400 {
  background-color: var(--color-deep-space) !important;
  color: var(--color-silver) !important;
}