/* NorthStar — Shared sidebar / navigation styles */
:root {
  --nav-bg: #0f1724;
  --nav-accent: #ff8a00;
  --panel-bg: #ffffff;
  --muted: #6b7280;
  --accent: #0ea5a4;
  --teal: #0ea5a4;
  --line: #e3ebf4;
  --shadow-card: 0 1px 2px rgba(15, 23, 36, 0.04), 0 10px 28px -16px rgba(15, 23, 36, 0.16);
}

* { 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: linear-gradient(180deg, #141f33 0%, #0e1626 45%, #0b1120 100%);
  color: #fff;
  padding: 24px 14px 12px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
}
aside nav { flex: 1 }
aside::-webkit-scrollbar { width: 8px }
aside::-webkit-scrollbar-track { background: transparent }
aside::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 8px }
aside::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18) }

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 0 4px }
.logo {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #ffa01e 0%, #ff8a00 55%, #f07000 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 14px -2px rgba(255, 138, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.brand h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: -0.01em }
.brand-sub { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: #8294ab; margin-top: 2px }

nav ul { list-style: none; padding: 0; margin: 8px 0 12px }
nav li {
  padding: 8px 12px;
  margin-bottom: 2px;
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  color: #9fb0c4;
  cursor: default;
  font-size: 13.5px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
nav li.active {
  background: linear-gradient(90deg, rgba(255, 138, 0, 0.18), rgba(255, 138, 0, 0.05));
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--nav-accent);
}
nav li:hover { background: rgba(255, 255, 255, 0.06); color: #e8eef6 }
nav li.active:hover { background: linear-gradient(90deg, rgba(255, 138, 0, 0.22), rgba(255, 138, 0, 0.07)) }
nav li a { color: inherit; text-decoration: none; display: contents }

nav li.nav-sep {
  margin-top: 10px;
  padding: 12px 12px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5d6f87;
  text-transform: uppercase;
  cursor: default;
  pointer-events: none;
  border-radius: 0;
}
nav li.nav-sep:hover { background: none }

.nav-user {
  position: sticky; bottom: 0;
  margin-top: auto;
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  background: #16202f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.55);
}
.nav-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a5d77, #2e3d52);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; flex-shrink: 0;
  font-size: 13px;
}
.nav-user-name { font-weight: 600; color: #fff; font-size: 13.5px }
.nav-user-role { font-size: 11.5px; color: #8294ab }

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