/* ====================================================================
   Dashboard navigation shell (Steel-style). Loaded right after app.css,
   so equal-specificity rules here win. Tokens only: works in light
   (default) and dark via :root[data-theme].
   Covers: sidebar search, grouped nav with section labels, the credit
   balance badge on Credits, the resources footer, the header
   "Leave feedback" button and the mobile pill row separators.
   ==================================================================== */

/* ── Sidebar column ─────────────────────────────────────────────────── */
.dash-sidebar {
  padding: 14px 10px 10px;
}
.dash-logo {
  padding: 4px 10px 14px;
}

/* ── Search field (opens the command palette) ───────────────────────── */
.dash-side-search {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 32px;
  margin: 0 0 6px;
  padding: 0 6px 0 10px;
  background: var(--vercel-surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--vercel-border);
  color: var(--vercel-muted);
  font: 500 13px/1 var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: box-shadow 120ms ease, color 120ms ease;
}
.dash-side-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.dash-side-search-ph { flex: 1; min-width: 0; }
.dash-side-search:hover {
  color: var(--vercel-text);
  box-shadow: inset 0 0 0 1px var(--vercel-border-strong);
}
.dash-side-search:focus-visible {
  outline: none;
  box-shadow: var(--vercel-focus), inset 0 0 0 1px var(--accent);
}
.dash-side-kbd {
  font: 500 10.5px/1 var(--font-mono);
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  background: var(--vercel-elevated);
  color: var(--vercel-muted);
  box-shadow: inset 0 0 0 1px var(--vercel-border);
}

/* ── Grouped nav ────────────────────────────────────────────────────── */
/* The nav takes the free height and scrolls on short windows, so the
   resources + user footer always stays pinned to the bottom. */
.dash-nav {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  gap: 1px;
}
.dash-nav::-webkit-scrollbar { display: none; }

.dash-nav-group {
  display: flex; flex-direction: column; gap: 1px;
}
.dash-nav-label {
  padding: 16px 10px 6px;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vercel-muted);
  opacity: 0.8;
  user-select: none;
}

.dash-nav-item {
  height: 32px;
  padding: 0 10px;
  font-size: 13.5px;
  gap: 10px;
  flex-shrink: 0;
}
.dash-nav-item > span:not([class]) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Active: a raised chip (surface + hairline) instead of the same grey
   as hover, so the current page reads at a glance. */
.dash-nav-item.active {
  background: var(--vercel-surface);
  color: var(--vercel-text);
  box-shadow: inset 0 0 0 1px var(--vercel-border-strong), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dash-nav-item.active .dash-nav-ico { color: var(--accent); }
.dash-nav-item:focus-visible {
  outline: none;
  box-shadow: var(--vercel-focus);
}

/* ── Credit balance badge on the Credits item ───────────────────────── */
.dash-nav-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 22px; justify-content: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--vercel-elevated);
  box-shadow: inset 0 0 0 1px var(--vercel-border);
  color: var(--vercel-text);
  font: 500 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.dash-nav-item.active .dash-nav-badge {
  background: var(--accent-faint);
  box-shadow: inset 0 0 0 1px var(--border-accent);
  color: var(--accent);
}
/* .low / .empty are toggled on the Credits item by the existing
   credits refresh; show them as a small dot next to the number. */
.dash-nav-item.low .dash-nav-badge::before,
.dash-nav-item.empty .dash-nav-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
}
.dash-nav-item.empty .dash-nav-badge::before { background: var(--red); }

/* ── Footer: resources + user ───────────────────────────────────────── */
.dash-sidebar-footer {
  margin-top: 8px;
  padding-top: 0;
  gap: 1px;
}
.dash-sidebar-footer .dash-nav-label { padding-top: 12px; }
.dash-nav-item.ghost {
  height: 30px;
  font-size: 13px;
  color: var(--vercel-muted);
}
.dash-nav-item.ghost:hover { color: var(--vercel-text); }
.dash-nav-ext {
  margin-left: auto;
  font-size: 12px;
  color: var(--vercel-muted);
  opacity: 0.6;
  transition: opacity 120ms ease, transform 120ms ease;
}
.dash-nav-item:hover .dash-nav-ext { opacity: 1; transform: translate(1px, -1px); }

.dash-user {
  padding: 10px 6px 2px;
  margin-top: 8px;
}

/* ── Header: "Leave feedback" ───────────────────────────────────────── */
.dash-actions .dash-feedback {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--vercel-muted);
  box-shadow: inset 0 0 0 1px var(--vercel-border);
}
.dash-actions .dash-feedback svg { width: 14px; height: 14px; flex-shrink: 0; }
.dash-actions .dash-feedback:hover {
  color: var(--vercel-text);
  box-shadow: inset 0 0 0 1px var(--vercel-border-strong);
}

/* ── Mobile pill row: thin dividers between the sidebar groups ───────── */
.dmn-sep { display: none; }
@media (max-width: 880px) {
  .dash-mobile-nav { align-items: center; }
  .dmn-sep {
    display: block;
    flex: 0 0 1px;
    height: 18px;
    margin: 0 3px;
    background: var(--vercel-border-strong);
  }
  .dash-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  /* Keep the header buttons on one row on phones: the feedback button
     drops to its icon (the mail subject still says what it is). */
  .dash-actions .dash-feedback { padding-inline: 11px; align-self: stretch; }
  .dash-actions .dash-feedback svg { width: 15px; height: 15px; }
  .dash-actions .dash-feedback .dash-feedback-label { display: none; }
}