/* NorthStar — Shared sidebar / navigation styles */
:root {
  --nav-bg: #0f1724;
  --nav-accent: #ff8a00;
  --panel-bg: #ffffff;
  --muted: #6b7280;
  --accent: #0ea5a4;
  --teal: #0ea5a4;
}

* { box-sizing: border-box }

body {
  margin: 0;
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #f3f6f9;
  color: #0f1724;
}

.app { display: flex; min-height: 100vh }

/* ── Sidebar ── */
aside {
  width: 260px;
  background: var(--nav-bg);
  color: #fff;
  padding: 24px 16px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px }
.logo {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #ff8a00, #ffb366);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.brand h1 { font-size: 16px; margin: 0 }
.brand-sub { font-size: 12px; color: #9ca3af }

nav ul { list-style: none; padding: 0; margin: 8px 0 }
nav li {
  padding: 10px;
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  color: #d1d5db;
  cursor: default;
  font-size: 14px;
}
nav li.active { background: #111827; color: #fff }
nav li:hover { background: rgba(255,255,255,0.03) }
nav li a { color: inherit; text-decoration: none; display: contents }

nav li.nav-sep {
  margin-top: 8px;
  padding: 10px 10px 4px;
  border-top: 1px dashed rgba(255,255,255,0.12);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #4b5563;
  text-transform: uppercase;
  cursor: default;
  pointer-events: none;
  border-radius: 0;
}
nav li.nav-sep:hover { background: none }

.nav-user {
  position: absolute; bottom: 24px; left: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px;
}
.nav-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #374151;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; flex-shrink: 0;
}
.nav-user-name { font-weight: 600; color: #fff }
.nav-user-role { font-size: 12px; color: #9ca3af }

@media (max-width: 900px) { aside { display: none } }