:root {
  --bg:#020617;
  --text:#e5e7eb;
  --sidebar-bg:#0f172a;
  --sidebar-border:rgba(148,163,184,0.35);
  --nav-bg:#0f172a;
  --card-bg:#0b1120;
  --muted:#9ca3af;
  --accent:#22c55e;
  --accent-blue:rgba(59,130,246,0.15);
  --switch-bg:#374151;
  --switch-knob:#ffffff;
}

[data-theme="light"] {
  --bg:#f5f7fa;
  --text:#0f172a;
  --sidebar-bg:#ffffff;
  --sidebar-border:rgba(0,0,0,0.15);
  --nav-bg:#ffffff;
  --card-bg:#ffffff;
  --muted:#4b5563;
  --accent:#22c55e;
  --accent-blue:rgba(59,130,246,0.25);
  --switch-bg:#d1d5db;
  --switch-knob:#374151;
}

body {
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  transition:background .35s ease, color .35s ease;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;        /* <-- ensures toggle has breathing room */
  margin-right: 20px;
}

.toggle-wrap {
  display: flex;
  align-items: center;
}

/* ============================================================
   Vertical Style Mapping
   ============================================================ */

:root[data-vertical="insurance"] {
  --vertical-primary: #1E90FF;
  --vertical-accent: #63B3FF;
}

:root[data-vertical="legal"] {
  --vertical-primary: #8A2BE2;
  --vertical-accent: #B57CFF;
}

:root[data-vertical="logistics"] {
  --vertical-primary: #00BFA5;
  --vertical-accent: #4FFFE6;
}

:root[data-vertical="marketplace"] {
  --vertical-primary: #FF8C00;
  --vertical-accent: #FFC27A;
}

:root[data-vertical="media"] {
  --vertical-primary: #FF1493;
  --vertical-accent: #FF7AC8;
}

:root[data-vertical="affiliates"] {
  --vertical-primary: #32CD32;
  --vertical-accent: #7DFF7D;
}

:root[data-vertical="associates"] {
  --vertical-primary: #DC143C;
  --vertical-accent: #FF7A9A;
}

:root[data-vertical="root"] {
  --vertical-primary: var(--primary);
  --vertical-accent: var(--primary);
}

/* ============================================================
   Vertical UI Mapping
   ============================================================ */

/* NAV */
:root[data-vertical] .ecosystem-nav {
  border-bottom: 2px solid var(--vertical-primary);
}

:root[data-vertical] .nav-item:hover,
:root[data-vertical] .dropdown-btn:hover {
  background: var(--vertical-primary);
  color: var(--content-bg);
}

:root[data-vertical] .nav-item.active {
  color: var(--vertical-primary);
  text-shadow: 0 0 6px var(--vertical-accent);
}

/* LOGIN BUTTON */
:root[data-vertical] .login-btn {
  color: var(--vertical-primary);
  background: var(--vertical-accent + "22");
}

:root[data-vertical] .login-btn:hover {
  background: var(--vertical-primary);
  color: var(--content-bg);
}

/* FOOTER */
:root[data-vertical] footer {
  border-top: 2px solid var(--vertical-primary);
  box-shadow: 0 -4px 12px var(--vertical-accent);
}

/* BUTTONS */
:root[data-vertical] .btn {
  background: var(--vertical-primary);
  border-color: var(--vertical-primary);
}

:root[data-vertical] .btn:hover {
  background: var(--vertical-accent);
  border-color: var(--vertical-accent);
}

/* LINKS */
:root[data-vertical] a {
  color: var(--vertical-primary);
}

:root[data-vertical] a:hover {
  color: var(--vertical-accent);
}

/* DASHBOARD BACKGROUND TINT */
:root[data-vertical] body {
  background: linear-gradient(
    180deg,
    var(--content-bg),
    var(--vertical-accent + "11")
  );
}

/* CARDS */
:root[data-vertical] .card,
:root[data-vertical] .graph-card {
  border-color: var(--vertical-primary);
  box-shadow: 0 0 14px var(--vertical-accent);
}

:root[data-vertical] .card:hover,
:root[data-vertical] .graph-card:hover {
  box-shadow: 0 0 22px var(--vertical-primary);
}

/* HEADERS */
:root[data-vertical] h1,
:root[data-vertical] h2,
:root[data-vertical] h3 {
  color: var(--vertical-primary);
  text-shadow: 0 0 8px var(--vertical-accent);
}

/* ============================================================
   Vertical Icons
   ============================================================ */

:root[data-vertical="insurance"] {
  --vertical-icon: "🛡️";
}

:root[data-vertical="legal"] {
  --vertical-icon: "⚖️";
}

:root[data-vertical="logistics"] {
  --vertical-icon: "🚚";
}

:root[data-vertical="marketplace"] {
  --vertical-icon: "🛒";
}

:root[data-vertical="media"] {
  --vertical-icon: "▶️";
}

:root[data-vertical="affiliates"] {
  --vertical-icon: "🌐";
}

:root[data-vertical="associates"] {
  --vertical-icon: "👥";
}

:root[data-vertical="root"] {
  --vertical-icon: "📊";
}