/* Shell top bar (issue 3451, design epic issue 3432, SHELL-6). Figma: header 50:16256
 * (light) and 52:26407 (dark), breadcrumb with a parent 21:28839, balance
 * pill 50:16279. Tokens only; the bell is the design system's Secondary
 * icon-only L (ds/buttons.css), the search field ds/forms.css's .ui-search.
 *
 *   menu button | org / page crumbs | env + System Admin badges | ... |
 *   search | divider | bell | suspended pill | balance pill
 *
 * Not in Figma (proposed): crumb hover underline, org crumb truncation, pill
 * hover, low balance, the suspended pill, and everything at <= 860px. */

/* Page-level names for the roles the issue's spec uses, each a token. */
.topbar {
  --top-crumb: var(--fg-strong);
  /* Figma draws the separator in the border grey (1.3:1 on white);
     --fg-subtle keeps it decorative but visible, in both themes. */
  --top-crumb-sep: var(--fg-subtle);
  /* Figma's dark divider is the header's own colour (invisible): the
     border token instead, as proposed on the design epic. */
  --top-divider: var(--border);
  --pill-label: var(--fg-muted);
  --pill-value: var(--fg);
}
:root { --topbar-height: 64px; }

.topbar {
  grid-area: top;
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--space-4);
  box-sizing: border-box; height: var(--topbar-height); min-width: 0; padding: 0 var(--space-7);
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
}
.topbar .spacer { flex: 1; }
/* Scoped so the later .btn rule's display cannot bring it back on wide screens. */
.topbar .menu-button { display: none; }
.topbar .env-badge { margin-inline: 0; }
#ui-topsearch, #ui-bell { display: flex; align-items: center; }

/* ---- Breadcrumb (50:16257, 21:28839): Inter Bold 11/16.5. The first crumb's
 * "/" sits 8px from its label; later crumbs are 6px apart either side. ---- */
.topbar-crumbs { display: flex; flex: none; min-width: 0; overflow: hidden; }
.topbar-crumbs ol { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.topbar-crumbs li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font: var(--type-label); color: var(--top-crumb); white-space: nowrap; }
.topbar-crumbs li + li { gap: 6px; margin-left: 6px; }
.topbar-crumbs .crumb-sep { color: var(--top-crumb-sep); }
.topbar-crumbs a { color: inherit; text-decoration: none; }
.topbar-crumbs a:hover { text-decoration: underline; }
/* The org crumb gives way first when room runs out. */
.topbar-crumbs li:not(:last-child) { flex-shrink: 1; min-width: calc(3ch + 13px); }
.topbar-crumbs li:not(:last-child) > a, .topbar-crumbs li:not(:last-child) > span:not(.crumb-sep) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  .topbar { gap: var(--space-3); padding: 0 var(--space-6); }
  .topbar-crumbs li:not(:last-child) > a { max-width: 16ch; }
}
/* The page crumb keeps its room; the org crumb truncates first. */
.topbar-crumbs li:last-child { flex: 0 1 auto; min-width: calc(4ch + 13px); }
.topbar-crumbs li:last-child > span[aria-current] { min-width: 0; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }

/* ---- Search (50:16263): ds/forms.css draws it; the top bar sets its Figma
 * width and the 8.95px magnifier, whose text still starts at 36px. ---- */
#ui-topsearch { flex: 0 1 256px; min-width: 96px; }
.topbar .ui-search { width: 100%; height: 34.5px; box-sizing: border-box; gap: 15px; }
.topbar .ui-search > svg { width: 9px; height: 9px; }

/* ---- Search results (#3411; Figma 123:5723, 123:4995, 123:4276, #4110).
 * The app's menu panel (app.css .menu-panel) under the box, right-aligned:
 * a "// Quick searches" header with the org's name, the rows (scrolling), and
 * a footer with the keys hint and close. A row is a 32px icon tile, title over
 * subtitle, and an arrow that reads "↵ open" on the highlighted row, which
 * takes the select tint with its title underlined in the brand green. Light
 * Figma, adapted to the theme tokens; green text is --primary-text (AA). ---- */
#ui-topsearch { position: relative; }
.topbar .search-panel {
  z-index: 20; top: calc(100% + var(--space-2)); width: min(480px, calc(100vw - 2 * var(--space-4)));
  display: flex; flex-direction: column; padding: 0; overflow: hidden; box-sizing: border-box;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); font: var(--type-body);
}
.topbar .search-panel[hidden] { display: none; }
.search-head, .search-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex: none; padding: var(--space-3) var(--space-4); }
.search-head { border-bottom: 1px solid var(--border); }
.search-head-title { font: var(--type-code-eyebrow); letter-spacing: var(--type-code-eyebrow-tracking); text-transform: uppercase; color: var(--fg-muted); }
.search-head-org { font: var(--type-caption); color: var(--fg-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-list { max-height: min(440px, 62vh); overflow-y: auto; padding: var(--space-2); }
.search-list [role=group] + [role=group] { border-top: 1px solid var(--border); margin-top: var(--space-1); padding-top: var(--space-1); }
.search-option { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-md); color: var(--fg); cursor: pointer; }
.search-option:hover { background: var(--surface-sunken); }
.search-option[aria-selected="true"] { background: var(--select-tint); }
.search-option-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--fg-muted); }
.search-option[aria-selected="true"] .search-option-icon { border-color: var(--brand); background: var(--select-tint); color: var(--primary-text); }
.search-option-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.search-option-label, .search-option-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-option-label { font: var(--type-label); color: var(--fg-strong); }
.search-option-detail { font: var(--type-body-sm); color: var(--fg-muted); }
.search-option[aria-selected="true"] .search-option-label { color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px; }
.search-option mark { background: none; color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px; }
.search-option-go { flex: none; font: var(--type-caption); color: var(--fg-subtle); }
.search-go-open { display: none; font-family: var(--font-mono); color: var(--primary-text); }
.search-option[aria-selected="true"] .search-go-arrow { display: none; }
.search-option[aria-selected="true"] .search-go-open { display: inline; }
.search-option[data-search-see-all] .search-option-label { color: var(--fg-muted); font-weight: 400; }
/* Advanced search: the last row, across the panel, in the brand green. */
.search-option[data-search-all] { margin: var(--space-2) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); border-radius: 0; }
.search-option[data-search-all] .search-option-icon { width: auto; height: auto; border: 0; background: none; color: var(--primary-text); }
.search-option[data-search-all] .search-option-label, .search-option[data-search-all] .search-go-arrow { color: var(--primary-text); }
.search-foot { padding-block: 10px; background: var(--surface-sunken); }
.search-keys { white-space: nowrap; font: var(--type-code-eyebrow); color: var(--fg-muted); }
.search-panel .search-close { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-muted); cursor: pointer; }
.search-panel .search-close:hover { background: var(--surface); color: var(--fg); }
.search-note { padding: var(--space-2) var(--space-3); font: var(--type-body-sm); color: var(--fg-muted); }
/* Searching (123:3535) and no matches (123:2805): the block over the rows. */
.search-state[hidden] { display: none; }
.search-state { padding: var(--space-3) var(--space-4) 0; }
.search-state p { margin: 0; }
.search-state-title { display: flex; align-items: center; gap: var(--space-3); font: var(--type-label); color: var(--fg-strong); }
.search-state-text { margin-top: var(--space-2) !important; font: var(--type-body-sm); color: var(--fg-muted); }
.search-loading .ms-org-loader-grid { --loader-cell: var(--brand); --ms-cell-idle: color-mix(in srgb, var(--brand) 25%, transparent); }
.search-loading .ms-org-loader-grid i { background: var(--ms-cell-idle); animation: ms-loader-cell-wait var(--motion-pulse) var(--ease-standard) calc(var(--at) * 20ms) infinite; }
.search-empty { display: flex; flex-direction: column; align-items: center; padding: var(--space-4) var(--space-4) var(--space-3); text-align: center; }
.search-empty .search-state-title { justify-content: center; }
.search-empty .search-state-text { max-width: 320px; }
/* Clear search: the secondary button, restored over app.css's .menu-panel button reset. */
.search-panel .search-empty .btn { display: inline-flex; width: auto; margin-top: var(--space-3); padding: 0 var(--btn-px); border: 1px solid var(--border-control); border-radius: var(--btn-r); background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); font: var(--btn-font); }
.search-panel .search-empty .btn:hover { background: var(--hover-tint); border-color: var(--hover-border); color: var(--btn-secondary-ink); }
.search-empty-art { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--space-3); border-radius: 50%; background: var(--select-tint); color: var(--primary-text); }
@media (prefers-reduced-motion: reduce) { .search-loading .ms-org-loader-grid i { animation: none; } }
/* The top bar's Advanced search button (123:4276): left of the box, over the
 * bar's free space so the box never moves when it appears. */
.topbar .search-advanced { position: absolute; right: calc(100% + var(--space-4)); top: 50%; transform: translateY(-50%); white-space: nowrap; }

/* ---- Divider (50:16269): 1 x 24 in a 17px box. ---- */
.topbar-divider { flex: none; width: 1px; height: 24px; margin: 0 var(--space-2); background: var(--top-divider); }

/* ---- Bell (50:16277): Secondary icon-only L, 35 x 35, a 16px glyph. Its
 * unread dot and panel: pages/notification-bell.css (issue 3502). ---- */
.topbar-bell { --btn-glyph: 16px; }

/* ---- Suspended pill: a warning pill, 35 tall, radius 6 (issue 3440). ---- */
.suspended-pill {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  box-sizing: border-box; height: 35px; padding: 0 var(--space-3);
  border: 1px solid color-mix(in srgb, var(--warning-fg) 40%, transparent); border-radius: var(--radius-md);
  background: var(--warning-bg); color: var(--warning-fg);
  font: var(--type-label); text-decoration: none; white-space: nowrap;
}
.suspended-pill[hidden] { display: none; }
.suspended-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- Balance pill (50:16279): 35 tall, radius 6, "Balance" and the amount
 * in Inter Bold 11, then the top-up "+". A click opens the top-up dropdown
 * (issue 3452, below); without billing rights it links to Billing. ---- */
.credits-pill {
  display: inline-flex; align-items: center; gap: var(--space-3); flex: none;
  box-sizing: border-box; height: 35px; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-card);
  font: var(--type-label); color: var(--pill-label); text-decoration: none; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.credits-pill[hidden] { display: none; }
.credits-pill .balance { color: var(--pill-value); font-weight: 700; font-variant-numeric: tabular-nums; }
.credits-pill:hover { background: var(--hover-tint); border-color: var(--hover-border); }
/* The top-up "+" (50:16284 light, 52:26439 dark): ink 24px radius 4 in
 * light, mint 28px radius 6 in dark, as drawn (designer question Q13). */
.credits-pill .pill-plus {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  box-sizing: border-box; width: 24px; height: 24px;
  border: 1px solid var(--btn-icon-primary-border); border-radius: var(--radius-sm);
  background: var(--ink); color: var(--brand-mint); box-shadow: var(--shadow-row-hover);
}
.credits-pill .pill-plus svg { width: 12px; height: 12px; stroke-width: 2.5; }
/* No "+" where the pill only links to Billing (a member, read-only, no payments; #3452). */
.credits-pill[data-topup-off] .pill-plus { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .credits-pill .pill-plus { width: 28px; height: 28px; border: 0; border-radius: var(--radius-md); background: var(--brand-mint); color: var(--bg); box-shadow: none; }
}
:root[data-theme="dark"] .credits-pill .pill-plus { width: 28px; height: 28px; border: 0; border-radius: var(--radius-md); background: var(--brand-mint); color: var(--bg); box-shadow: none; }
/* Low balance (not in Figma): the amount in the warning colour, the border
   at 40% of it. */
.credits-pill[data-low] { border-color: color-mix(in srgb, var(--warning-fg) 40%, transparent); }
.credits-pill[data-low] .balance { color: var(--warning-fg); }
@media (prefers-reduced-motion: reduce) { .credits-pill { transition: none; } }

/* ---- Narrow (<= 860px, not in Figma): the drawer's menu button leads, the
 * search folds to a 35px button that opens over the bar while it has focus,
 * the "Balance" label hides; nothing scrolls sideways at 360px. ---- */
@media (max-width: 860px) {
  .topbar { gap: var(--space-2); padding: 0 var(--space-4); }
  .topbar .menu-button { display: inline-flex; flex: none; }
  .topbar-crumbs { flex: 0 1 auto; }
  .topbar .spacer { flex: 1 1 0; min-width: 0; }
  .topbar-divider, .credits-pill .pill-label { display: none; }
  #ui-topsearch { position: relative; flex: none; min-width: 0; }
  .topbar .ui-search { position: relative; width: 35px; height: 35px; padding: 0; justify-content: center; }
  .topbar .ui-search > svg { width: 14px; height: 14px; }
  .topbar .ui-search input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
  .topbar .ui-search:focus-within { position: fixed; z-index: 6; top: 14px; left: var(--space-4); right: var(--space-4); width: auto; padding: 0 var(--space-4) 0 var(--space-3); justify-content: flex-start; gap: 10px; }
  .topbar .ui-search:focus-within input { position: static; opacity: 1; cursor: text; }
  /* The results open full width under the widened box. */
  .topbar .search-panel { position: fixed; top: 56px; left: var(--space-4); right: var(--space-4); width: auto; }
  .topbar .search-advanced { display: none; }
}
@media (max-width: 480px) {
  .topbar { padding: 0 var(--space-3); }
  /* Both crumbs stay (the org is on every page) and truncate. */
  .topbar-crumbs li:not(:last-child) > a { max-width: 10ch; }
  .credits-pill { gap: var(--space-2); padding: 0 6px 0 var(--space-2); }
}

/* ==== Top-up dropdown (issue 3452, Figma 50:16195 form, 21:29674 success).
 * Placement only: the form is topup.ts's (Billing's #3469 parts, styled in
 * pages/billing.css), the success funds-added.ts's (#3470). The DS popover
 * gives the 368 width, the 12 radius, the 1px border and the motion. Figma
 * draws the top at the header's bottom less 4px (60 of 64); the DS places
 * it 4px under the 35px pill, so the margin makes up the rest. Figma's
 * #1a1a1a / #6c757d / #9ca3af are --fg-strong / --fg-muted. Dark is not in
 * Figma: the #3442 dark popover. ==== */
#topup-popover, #funds-added-popover {
  margin-top: calc(var(--topbar-height) / 2 - 25px);
  box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--ink) 10%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--ink) 10%, transparent);
}
#topup-popover p { margin: 0; }
/* Heading 50:16197: Inter SemiBold 16 and a bare 16px x. */
#topup-popover .ui-popover-head { padding: var(--space-5) var(--space-5) var(--space-4); }
#topup-popover .ui-popover-title { font: 600 16px/normal var(--font-sans); color: var(--fg-strong); }
#topup-popover .ui-overlay-close { width: 16px; height: 16px; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--fg-strong); }
#topup-popover .ui-overlay-close svg { width: 16px; height: 16px; }
/* Body 50:16196: 20px sides, 16 between the sections. */
#topup-popover .ui-popover-body { gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); }
/* Payment method 50:16225: the label, then the row (a 36 x 24 card glyph box). */
.topup-pay-method { display: grid; gap: var(--space-2); }
.topup-pay-method .topup-label { margin: 0; }
.topup-method-row {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  font: 500 12px/normal var(--font-sans); color: var(--fg-strong);
}
.topup-method-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* The saved card (#3508, 21:29618): a 36 x 24 brand box, "Visa ending in 4242"
 * Inter Medium 12 over "Expires 12/2028" Regular 10. Figma's chevron (a
 * card picker) is left out: one card is saved; the switch beside the label
 * (21:29617's place, Inter SemiBold 11) changes to Checkout and back. */
.topup-pay-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.topup-card-brand { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: italic 800 9px/normal var(--font-sans); color: var(--fg-strong); overflow: hidden; }
.topup-card-details { display: grid; gap: 2px; min-width: 0; }
.topup-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topup-card-expiry { font: 400 10px/normal var(--font-sans); color: var(--fg-muted); }
.link-btn.topup-method-switch { font: 600 11px/normal var(--font-sans); color: var(--success-fg); text-decoration: none; white-space: nowrap; }
.link-btn.topup-method-switch:hover { text-decoration: underline; }
.topup-method-switch-row { margin: calc(-1 * var(--space-3)) 0 0; text-align: right; }
.topup-method-switch-row:empty { display: none; }
/* An outstanding card attempt (topup-card.ts): the one line above Check again. */
.topup-pending { margin: 0; font: 600 12px/1.5 var(--font-sans); color: var(--fg-strong); }
.topup-pending[hidden] { display: none; }
/* Summary 50:16237: the balance after, then the lock line, 12 apart. */
.topup-popover-summary { display: grid; gap: var(--space-3); }
#topup-popover .topup-summary-row > span:first-child { font: 400 11px/normal var(--font-sans); color: var(--fg-muted); }
#topup-popover .topup-summary-row > span:last-child { font: 600 12px/normal var(--font-sans); color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.topup-secure { display: flex; align-items: center; gap: 5px; font: 400 10px/normal var(--font-sans); color: var(--fg-muted); }
.topup-secure svg { width: 11px; height: 11px; flex: none; }
#topup-popover .topup-note, #topup-popover .topup-tax { font-size: 10px; line-height: 1.5; }
#topup-popover .topup-tax { margin-top: calc(-1 * var(--space-3)); }
/* Footer 50:16245: #fafafa, 16/28/24; Cancel 125, Refill the rest. */
#topup-popover .ui-popover-foot { justify-content: flex-start; gap: 10px; padding: var(--space-4) 28px var(--space-6); border-top-color: var(--border-strong); background: var(--surface-raised); }
#topup-popover .ui-popover-foot > .btn-secondary { flex: none; width: 125px; }
#topup-popover .ui-popover-foot > .btn-primary { flex: 1 1 0; min-width: 0; border-radius: 10px; --btn-px: var(--space-3); }
/* Success 21:29674: #3470's content at the dropdown's width; the wallet at
 * Figma's 111 x 75; the receipt 24px in; "Great, thanks" full width. */
#funds-added-popover { overflow: hidden auto; border-radius: var(--radius-xl); }
#funds-added-popover .funds-added-art { width: 111px; height: 75px; }
#funds-added-popover .funds-added-receipt { padding: 0 var(--space-6) var(--space-6); }
#funds-added-popover .funds-added-action { padding: var(--space-4) 28px var(--space-6); }
#funds-added-popover .funds-added-action .btn { border-radius: var(--radius); }
#funds-added-popover .funds-added-action .btn > svg { width: 16px; height: 16px; color: currentColor; }
/* ==== end top-up dropdown (issue 3452) ==== */