/* SUPERSEDED — most tokens here are overridden by main.css and dashboard.css.
   Do not add new tokens here. This file is kept for legacy sidebar primitives only. */
:root {
  --brand-primary: #7C3AED;
  --brand-primary-hover: #6D28D9;
  --brand-primary-light: #EDE9FB;
  --brand-secondary: #1E1B4B;

  --bg-primary: #F3F0FE;
  --bg-card: #FFFFFF;
  --surface: #FFFFFF;
  --surface-raised: #FAFBFF;

  --text-primary: #1E1B4B;
  --text-secondary: #6D28D9;
  --text-muted: #9CA3AF;

  --border: #DDD6FE;
  --border-subtle: #DDD6FE;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;

  --shadow-soft: 0 2px 12px rgba(109, 40, 217, 0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-raise: 0 6px 20px rgba(109, 40, 217, 0.12);

  --motion-fast: 160ms ease;
  --motion-mid: 220ms ease;
}

body.theme-dark {
  --brand-primary: #A855F7;
  --brand-primary-hover: #C084FC;
  --brand-primary-light: rgba(168, 85, 247, 0.14);
  --bg-primary: #06091A;
  --bg-card: #131E35;
  --surface: #0D1426;
  --surface-raised: #131E35;
  --text-primary: #EEF2FF;
  --text-secondary: #94A3B8;
  --text-muted: #8E9BB3;
  --border: rgba(120, 80, 200, 0.18);
  --border-subtle: rgba(120, 80, 200, 0.18);
  --shadow-soft: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-raise: 0 10px 28px rgba(0,0,0,.5);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Unified Sidebar Component: applies to both Input and Dashboard sidebars */
:where(.left-rail, .db-sidebar) {
  background: var(--brand-secondary);
  border-right: 1px solid rgba(255,255,255,.08);
  color: #CBD5E1;
}

:where(.rail-brand, .db-sidebar-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

:where(.rail-logo, .db-logo) {
  color: #F9FAFB;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

:where(.rail-logo-bi, .db-logo-bi) {
  color: var(--brand-primary);
}

:where(.rail-collapse, .db-sidebar-pin) {
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  color: #CBD5E1;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: grid;
  place-items: center;
}

:where(.rail-collapse, .db-sidebar-pin):hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

:where(.rail-nav, .db-nav) {
  padding: 8px 8px 0;
  display: grid;
  gap: 2px;
}

:where(.rail-link, .db-nav-item) {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  color: #CBD5E1;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2px;
  text-align: left;
  cursor: pointer;
  transition: background .16s, color .16s, transform .16s;
}

:where(.rail-link, .db-nav-item):hover {
  background: rgba(255,255,255,.06);
  color: #F9FAFB;
  transform: translateX(2px);
}

:where(.rail-link, .db-nav-item).active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

:where(.rail-label-wrap, .db-nav-label-wrap) {
  display: grid;
  gap: 1px;
}

:where(.rail-meta, .db-nav-meta) {
  font-size: 10px;
  color: #9fb0c8;
}

:where(.rail-subnav, .db-subnav) {
  margin: -3px 0 5px 33px;
  padding-left: 8px;
  border-left: 1px dashed rgba(255,255,255,.2);
}

:where(.rail-subnav-item, .db-subnav-item) {
  display: block;
  width: 100%;
  text-decoration: none;
  border: none;
  background: transparent;
  color: #b8c6da;
  font-size: 11px;
  border-radius: 7px;
  padding: 5px 8px;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
  transition: background .16s, color .16s, transform .16s;
}

:where(.rail-subnav-item, .db-subnav-item):hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  transform: translateX(2px);
}

:where(.rail-ico, .db-nav-item svg) {
  flex-shrink: 0;
}