/* vendor-shell.css -- shared chrome for the injected vendor page header/
   footer (assets/js/vendor-shell.js). Single source of truth for what was
   previously four duplicated inline <style> blocks, one per vendor page.
   Load on every vendor-*.html page that uses vendor-shell.js.

   2026-08-30 (later same day): reworked from a plain "logo left, four
   outline-pill nav buttons right" bar (same shape as the legal-page header
   it was originally cloned from) into a header that actually carries the
   signed-in vendor's identity, plus a compact tab strip instead of stacked
   buttons -- see vendor-ux-strategy-review-2026-08-30.md Section 6 and the
   follow-up simplification pass. */

.vshell-header {
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  row-gap: 10px;
}

.vshell-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.vshell-logo { height: 30px; width: auto; }
.vshell-wordmark { font-family: var(--font-display); font-weight: 700; color: var(--plum); font-size: 1.05rem; }

/* Vendor identity -- business name + live status, right next to the
   wordmark. Starts empty/hidden (set via window.WBVendorShell.setIdentity()
   once each page has its own vendor row) so nothing untrue is ever shown
   while data is still loading. This is the piece that makes the chrome read
   as "your workspace" instead of a generic marketing/legal header. */
.vshell-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  min-width: 0;
  flex: 1 1 auto;
}
.vshell-business-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.vshell-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.vshell-status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vshell-status-pill--active { background: rgba(45,122,74,0.12); color: var(--emerald); }
.vshell-status-pill--pending { background: var(--gold-pale); color: var(--plum); }
.vshell-status-pill--suspended,
.vshell-status-pill--rejected { background: var(--rose-pale, #F9E4E4); color: var(--rose, #C0392B); }

.vshell-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Tab strip -- replaces the previous four `btn btn-outline` pills. Tabs
   sit flush against each other with an underline for the active page
   instead of looking like four separate buttons, so the nav reads as one
   coherent control rather than a row of call-to-action buttons competing
   with the identity block next to it. */
.vshell-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px;
}
.vshell-tab {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.vshell-tab:hover { background: var(--gold-pale); color: var(--ink); }
.vshell-tab.is-active,
.vshell-tab.is-active:hover { background: var(--plum); color: #fff; }

@media (max-width: 720px) {
  .vshell-header { padding: 12px 16px; }
  .vshell-identity { border-left: none; padding-left: 0; flex-basis: 100%; order: 3; }
  .vshell-nav { margin-left: 0; flex-basis: 100%; order: 4; justify-content: space-between; }
  .vshell-tabs { flex: 1 1 auto; justify-content: space-between; }
  .vshell-tab { padding: 6px 10px; font-size: 0.78rem; }
}

.legal-footer {
  padding: 32px 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
}