/**
 * Magic Flatplan — purple brand theme (from company palette).
 * Light #E6E0FF · Mid #A29BFF · Sidebar #4538A0
 */
:root {
  --bg: #f0edff;
  --surface: #ffffff;
  --ink: #2a2347;
  --muted: #6b6289;
  --border: #d4ccf5;
  --accent: #7c6fe8;
  --accent-hover: #6a5cd6;
  --brand-light: #e6e0ff;
  --brand-mid: #a29bff;
  --brand-dark: #4538a0;
  --brand-ink-on-light: #3d3489;
  --nav: var(--brand-dark);
  --nav-text: #e8e4ff;
  --nav-active: #ffffff;
  --shadow: 0 1px 3px rgba(69, 56, 160, 0.12);
}

a {
  color: var(--accent);
}

/* Sidebar / menu bar — darker purple */
.sidebar {
  background: var(--brand-dark);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--nav-text);
}

.sidebar-brand strong {
  color: #fff;
}

.sidebar-brand span {
  color: rgba(255, 255, 255, 0.65);
}

.sidebar nav a {
  color: var(--nav-text);
}

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar nav a.active,
.sidebar nav a.nav-primary.active {
  background: var(--brand-light);
  color: var(--brand-ink-on-light);
  border-left: 3px solid var(--brand-mid);
  font-weight: 600;
}

.sidebar nav a.nav-primary:not(.active) {
  color: rgba(255, 255, 255, 0.95);
}

.sidebar nav a:focus,
.sidebar nav a:active {
  color: inherit;
}

.sidebar nav .nav-section-title {
  color: rgba(255, 255, 255, 0.92);
}

.sidebar-overview-wrap {
  background: rgba(0, 0, 0, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
}

.sidebar-overview-toggle {
  color: var(--brand-light);
}

.sidebar-overview-toggle:hover,
.sidebar-overview-toggle.is-active {
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-roles {
  background: rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sidebar-roles-label {
  color: rgba(255, 255, 255, 0.7);
}

.sidebar-role-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--nav-text);
}

.sidebar-role-btn:hover {
  border-color: var(--brand-light);
  color: #fff;
}

.sidebar-role-btn.active {
  background: var(--brand-light);
  border-color: var(--brand-light);
  color: var(--brand-ink-on-light);
}

.mfp-portal-slim .mfp-portal-slim-inner {
  background: var(--surface);
  border-bottom-color: var(--border);
}

.mfp-portal-mark {
  color: var(--brand-mid);
}

/* Buttons & highlights — lighter purple */
.btn-primary {
  background: var(--brand-light);
  border-color: var(--brand-mid);
  color: var(--brand-ink-on-light);
  font-weight: 600;
}

.btn-primary:hover {
  background: #f3f0ff;
  border-color: var(--accent);
  color: var(--brand-ink-on-light);
}

.btn {
  border-color: var(--border);
}

.btn:hover {
  border-color: var(--brand-mid);
  color: var(--brand-ink-on-light);
}

.serial-chip,
.serial-link {
  background: var(--brand-light);
  color: var(--brand-ink-on-light);
  border: 1px solid var(--brand-mid);
}

.serial-link {
  text-decoration: none;
  cursor: pointer;
}

.serial-link:hover {
  background: #f3f0ff;
  border-color: var(--accent);
}

.method-chip {
  border-color: var(--border);
}

.priority-chip.P1 {
  background: var(--brand-light);
  color: var(--brand-ink-on-light);
}

.al-slot-code {
  color: var(--accent);
}

.status-pill.status-green {
  background: #e8faf0;
}