/* ============================================================
   Vortal — Dark Sidebar Override
   Requires: components/app-shell.css, patterns/navigation.css

   Converts the default light sidebar into the navy-branded
   portal sidebar shown in all authenticated screen mockups.

   Apply .shell-sidebar--dark to the sidebar element, or scope
   under .shell--vortal on the shell root.
   ============================================================ */

/* ── Sidebar surface ─────────────────────────────────────── */
.shell--vortal .shell-sidebar,
.shell-sidebar--dark {
  background-color: var(--color-primary);
  border-inline-end: none;
}

/* ── Logo ────────────────────────────────────────────────── */
.sidebar-logo {
  padding: var(--space-1) var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-size: 1.3125rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  display: block;
}

.sidebar-logo-dot {
  font-style: italic;
  color: var(--color-accent);
}

/* ── Nav group labels ────────────────────────────────────── */
.shell--vortal .nav-group-label,
.shell-sidebar--dark .nav-group-label {
  color: oklch(100% 0 0 / 50%);
  font-size: 0.59375rem;
  letter-spacing: 0.16em;
}

/* ── Nav items in dark context ───────────────────────────── */
.shell--vortal .shell-sidebar .nav-item,
.shell-sidebar--dark .nav-item {
  color: oklch(100% 0 0 / 70%);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-inline: var(--space-1);
  font-size: var(--text-sm);
  position: relative;
}

.shell--vortal .shell-sidebar .nav-item:hover,
.shell-sidebar--dark .nav-item:hover {
  background-color: oklch(100% 0 0 / 7%);
  color: var(--white);
}

/* Active state — white text + amber left indicator */
.shell--vortal .shell-sidebar .nav-item[aria-current="page"],
.shell--vortal .shell-sidebar .nav-item.is-active,
.shell-sidebar--dark .nav-item[aria-current="page"],
.shell-sidebar--dark .nav-item.is-active {
  background-color: oklch(100% 0 0 / 11%);
  color: var(--white);
  font-weight: 500;
}

.shell--vortal .shell-sidebar .nav-item[aria-current="page"]::before,
.shell--vortal .shell-sidebar .nav-item.is-active::before,
.shell-sidebar--dark .nav-item[aria-current="page"]::before,
.shell-sidebar--dark .nav-item.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 3px;
  block-size: 1rem;
  background-color: var(--color-accent);
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}

/* ── Nav icon opacity ────────────────────────────────────── */
.shell--vortal .shell-sidebar .nav-item-icon,
.shell-sidebar--dark .nav-item-icon {
  opacity: 0.7;
}

.shell--vortal .shell-sidebar .nav-item:hover .nav-item-icon,
.shell--vortal .shell-sidebar .nav-item.is-active .nav-item-icon,
.shell-sidebar--dark .nav-item:hover .nav-item-icon,
.shell-sidebar--dark .nav-item.is-active .nav-item-icon {
  opacity: 1;
}

/* ── Badge in dark sidebar ───────────────────────────────── */
.shell--vortal .shell-sidebar .nav-item-badge,
.shell-sidebar--dark .nav-item-badge {
  background-color: var(--color-accent);
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 7px;
  min-inline-size: 1.25rem;
}

/* ── Sidebar header / footer borders ─────────────────────── */
.shell--vortal .shell-sidebar-header,
.shell-sidebar--dark .shell-sidebar-header {
  border-block-end-color: oklch(100% 0 0 / 8%);
}

.shell--vortal .shell-sidebar-footer,
.shell-sidebar--dark .shell-sidebar-footer {
  border-block-start-color: oklch(100% 0 0 / 8%);
}

/* ── User block at bottom ────────────────────────────────── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-user-avatar {
  inline-size: 1.875rem;
  block-size: 1.875rem;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-user-name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-role {
  font-size: 0.625rem;
  color: oklch(100% 0 0 / 50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-logout {
  font-size: 0.625rem;
  color: oklch(100% 0 0 / 40%);
  text-decoration: none;
  margin-block-start: var(--space-1);
  display: inline-block;
  transition: color 150ms ease;
}

.sidebar-user-logout:hover {
  color: oklch(100% 0 0 / 70%);
}

/* ── User Switching dev bar ──────────────────────────────── */
#user_switching_switch_on {
  background-color: var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  bottom: var(--space-4) !important;
  left: var(--space-4) !important;
  font-family: var(--font-body) !important;
}

#user_switching_switch_on a {
  background: transparent !important;
  color: oklch(100% 0 0 / 65%) !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  display: block !important;
  transition: color 150ms ease !important;
}

#user_switching_switch_on a:hover {
  color: var(--white) !important;
}

/* ── Focus ring on dark background ───────────────────────── */
.shell--vortal .shell-sidebar .nav-item:focus-visible,
.shell-sidebar--dark .nav-item:focus-visible {
  outline-color: var(--color-accent);
}

/* ── Mobile drawer dark variant ──────────────────────────── */
.shell--vortal .shell-drawer,
.shell-drawer--dark {
  background-color: var(--color-primary);
}

/* ── Sub-navigation in dark sidebar ──────────────────────── */
.shell--vortal .shell-sidebar .nav-sub .nav-item,
.shell-sidebar--dark .nav-sub .nav-item {
  color: oklch(100% 0 0 / 45%);
}

.shell--vortal .shell-sidebar .nav-sub .nav-item:hover,
.shell-sidebar--dark .nav-sub .nav-item:hover {
  color: oklch(100% 0 0 / 70%);
}

.shell--vortal .shell-sidebar .nav-sub .nav-item.is-active,
.shell-sidebar--dark .nav-sub .nav-item.is-active {
  color: var(--white);
}