/*
 * agents-ui.css — shared component + shell layer for the SeatCommons ops
 * dashboard. Depends on agents-theme.css being loaded FIRST (every color,
 * radius, space, size and font below is a var(--token) from that file —
 * there is deliberately not a single hardcoded hex in this stylesheet,
 * with the sole exception of the inline-SVG select caret, which cannot
 * reference a custom property; it uses currentColor).
 *
 * ── Breakpoints ────────────────────────────────────────────────────────
 * EXACTLY FOUR, matching the buyer app's breakpoints.xl/lg/md/sm. Do not
 * add a fifth; put the new rule in the nearest existing block instead.
 *
 *   1280  dense grids collapse to 2 columns
 *   1024  sidebar becomes an off-canvas drawer; hamburger visible; backdrop
 *    768  header compacts; search collapses to an icon button; wide tables
 *         rely on .sc-table-wrap's horizontal scroll
 *    480  single column; toolbars stack; controls go full-width
 *
 * Touch: every interactive control is >= var(--control-h-md) (44px) at
 * <=768 (touchTarget.min in tokens.ts).
 *
 * Contrast (computed, WCAG 2.1 relative luminance, both themes):
 *   light  muted #627368 on card #FFFFFF ............ 5.03:1  AA
 *   light  secondary #405548 on card #FFFFFF ........ 8.04:1  AAA
 *   light  #FFFFFF on primary solid #15803D ......... 5.02:1  AA
 *   light  success-ink on success-bg ................ 6.4:1   AA
 *   light  warning-ink on warning-bg ................ 6.17:1  AA
 *   light  danger #C02525 on danger-bg .............. 5.01:1  AA
 *   light  info-ink #17568F on info-bg .............. 6.57:1  AA
 *   dark   muted #9BA89F on card #151C17 ............ 7.02:1  AAA
 *   dark   success #4ADE9A on success-bg/card ....... 10.1:1  AAA
 *   dark   warning #F0A94A on warning-bg/card ....... 8.66:1  AAA
 *   dark   danger #FF7A7A on danger-bg/card ......... 6.87:1  AA
 *   dark   info #6BB6F0 on info-bg/card ............. 7.91:1  AAA
 *   dark   #07120B on primary solid #1ED760 ......... 10.0:1  AAA
 */

/* ── Layout tokens ─────────────────────────────────────────────────────────
   One content width for every data page (centred in .sc-main), one narrower
   width for reading-first pages. Pages used to pick 1100/1240/1280/1380/1440
   independently, so the left edge of the table jumped between pages. */
:root {
  --page-max: 1440px;
  --page-max-narrow: 1100px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  /* Inter: cv11 single-storey a, ss03 round quotes. Tabular figures are
     opted into per element (stat values, table cells), not globally. */
  font-feature-settings: "cv11", "ss03";
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
svg,
video {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

::selection {
  background: var(--brand-primary-subtle);
  color: var(--text);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}

.sc-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.sc-btn[aria-busy="true"] {
  cursor: progress;
}

.sc-btn > .ph,
.sc-btn > i {
  font-size: 1.1em;
  line-height: 1;
}

.sc-btn:hover {
  text-decoration: none;
}

.sc-btn:active {
  transform: translateY(1px);
}

.sc-btn[disabled],
.sc-btn:disabled,
.sc-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

.sc-btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-primary-onsolid);
  box-shadow: var(--shadow-sm);
}

.sc-btn-primary:hover:not([disabled]) {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.sc-btn-primary:active:not([disabled]) {
  background: var(--brand-primary-pressed);
  border-color: var(--brand-primary-pressed);
}

.sc-btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.sc-btn-secondary:hover:not([disabled]) {
  background: var(--surface-2);
  border-color: var(--surface-border-strong);
}

.sc-btn-secondary:active:not([disabled]) {
  background: var(--surface-3);
}

.sc-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  font-weight: 500;
}

.sc-btn-ghost:hover:not([disabled]) {
  background: var(--surface-2);
  color: var(--text);
}

.sc-btn-ghost:active:not([disabled]) {
  background: var(--surface-3);
}

.sc-btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-inverse);
}

.sc-btn-danger:hover:not([disabled]) {
  filter: brightness(1.06);
}

.sc-btn-danger:active:not([disabled]) {
  filter: brightness(0.94);
}

.sc-btn-sm {
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.sc-btn-lg {
  height: var(--control-h-lg);
  padding: 0 var(--space-6);
  font-size: var(--text-base);
}

.sc-btn-icon {
  width: var(--control-h-md);
  padding: 0;
  flex: 0 0 auto;
}

.sc-btn-icon.sc-btn-sm {
  width: var(--control-h-sm);
}

.sc-btn-icon.sc-btn-lg {
  width: var(--control-h-lg);
}

/* ── Form controls ─────────────────────────────────────────────────────── */

.sc-input,
.sc-select,
.sc-search {
  display: block;
  width: 100%;
  height: var(--control-h-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-md);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

textarea.sc-input {
  height: auto;
  min-height: calc(var(--control-h-lg) * 2);
  padding: var(--space-3);
  line-height: 1.5;
  resize: vertical;
}

.sc-input::placeholder,
.sc-search::placeholder {
  color: var(--text-muted);
}

.sc-input:hover,
.sc-select:hover,
.sc-search:hover {
  border-color: var(--surface-border-strong);
}

.sc-input:focus,
.sc-select:focus,
.sc-search:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
}

.sc-input[disabled],
.sc-select[disabled],
.sc-search[disabled] {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

.sc-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  /* currentColor keeps the caret on-theme in both palettes without a hex. */
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 6l4 4 4-4"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px 16px;
}

.sc-search {
  padding-left: 36px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="7" cy="7" r="4.5"/%3E%3Cpath d="M10.5 10.5L14 14"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: left var(--space-3) center;
  background-size: 16px 16px;
}

.sc-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Surfaces ──────────────────────────────────────────────────────────── */

.sc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.sc-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.sc-stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sc-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.sc-stat-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ── Tables ────────────────────────────────────────────────────────────── */

.sc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.sc-table th,
.sc-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.sc-table td {
  height: 48px;
  font-variant-numeric: tabular-nums;
}

.sc-table th.is-num {
  font-variant-numeric: tabular-nums;
}

/* Numeric columns: right-aligned, tabular figures. */
.sc-table th.is-num,
.sc-table td.is-num {
  text-align: right;
}

/* Pages mark money/count cells with .money; same treatment as .is-num. */
.sc-table th.money,
.sc-table td.money {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Long tables: cap the wrap and keep the header in view. */
.sc-table-wrap.is-scroll {
  max-height: min(70vh, 720px);
  overflow: auto;
}

.sc-table-wrap.is-scroll .sc-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.sc-table th {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  white-space: nowrap;
}

.sc-table tbody tr:last-child td {
  border-bottom: 0;
}

.sc-table tbody tr td {
  transition: background-color 120ms ease;
}

.sc-table tbody tr:hover td {
  background: var(--surface-2);
}

/* ── Badges, pills, chips ──────────────────────────────────────────────── */

.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-secondary);
}

.sc-badge.is-success {
  background: var(--success-bg);
  color: var(--success-ink);
}

.sc-badge.is-warning {
  background: var(--warning-bg);
  color: var(--warning-ink);
}

.sc-badge.is-danger {
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.sc-badge.is-info {
  background: var(--info-bg);
  color: var(--info-ink);
}

.sc-badge.is-neutral {
  background: var(--surface-2);
  color: var(--text-secondary);
}

.sc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 26px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.sc-chip:hover {
  background: var(--surface-2);
  color: var(--text);
}

.sc-chip {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.sc-chip.is-active,
.sc-chip[aria-pressed="true"] {
  background: var(--brand-primary-subtle);
  border-color: var(--brand-primary-border);
  color: var(--brand-primary);
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.sc-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.sc-tabs > button,
.sc-tabs > a {
  appearance: none;
  border: 0;
  background: transparent;
  height: var(--control-h-md);
  padding: 0 var(--space-4);
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--text-md);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.sc-tabs > button:hover,
.sc-tabs > a:hover {
  color: var(--text);
  text-decoration: none;
}

.sc-tabs > .is-active,
.sc-tabs > [aria-selected="true"],
.sc-tabs > [aria-current="page"] {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

/* ── Empty state ───────────────────────────────────────────────────────── */

.sc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--text-muted);
}

.sc-empty-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}

.sc-empty-body {
  max-width: 42ch;
  font-size: var(--text-md);
  color: var(--text-secondary);
}

/* ── Skeleton ──────────────────────────────────────────────────────────── */

.sc-skeleton {
  position: relative;
  overflow: hidden;
  min-height: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.sc-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--surface-3),
    transparent
  );
  animation: sc-shimmer 1.4s ease-in-out infinite;
}

@keyframes sc-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-skeleton::after {
    animation: none;
    transform: none;
    opacity: 0.5;
  }

  .sc-btn:active {
    transform: none;
  }

  .sc-btn,
  .sc-input,
  .sc-select,
  .sc-table tbody tr td {
    transition: none;
  }
}

/* ── Toast ─────────────────────────────────────────────────────────────── */

.sc-toast {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 380px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--text-md);
  box-shadow: var(--shadow-lg);
}

.sc-toast {
  border-left-width: 4px;
}

.sc-toast.is-success {
  border-color: var(--success);
}

.sc-toast.is-danger {
  border-color: var(--danger);
}

.sc-toast.is-warning {
  border-color: var(--warning);
}

.sc-toast.is-info {
  border-color: var(--info);
}

@media (prefers-reduced-motion: no-preference) {
  .sc-toast:not([hidden]) {
    animation: sc-toast-in 180ms ease-out;
  }
}

@keyframes sc-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.sc-toast[hidden] {
  display: none;
}

/* Styled replacement for window.confirm (SC.confirm in agents-shell.js).
   margin: auto re-centres the modal: the global reset zeroes the browser's own
   dialog margin, which pinned every confirm to the top-left corner. */
.sc-confirm {
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.sc-confirm::backdrop {
  background: rgba(7, 18, 11, 0.55);
}

.sc-confirm-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.sc-confirm-body {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: 1.55;
  white-space: pre-line;
}

.sc-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* SC.prompt: the one labelled field inside an sc-confirm modal. */
.sc-prompt-field {
  margin-top: var(--space-4);
}

.sc-prompt-error {
  margin: var(--space-2) 0 0;
  color: var(--danger);
  font-size: var(--text-sm);
}

.sc-prompt-error[hidden] {
  display: none;
}

/* ── Page furniture ────────────────────────────────────────────────────── */

.sc-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sc-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.sc-page-head h1 {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.sc-page-head p {
  margin: var(--space-2) 0 0;
  max-width: 72ch;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--text-secondary);
}

.sc-page-head > :first-child {
  min-width: 0;
}

.sc-page-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The "no workspace" card is built both by shell.ts and by index.html: keep
   its heading in the card scale instead of the page-title scale. */
#noWorkspacePanel h1 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
}

#noWorkspacePanel p {
  margin: 0;
  color: var(--text-secondary);
}

/* Responsive KPI tile row: as many sc-stat tiles per line as fit. */
.sc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* ── Utilities ─────────────────────────────────────────────────────────── */

.sc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sc-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.sc-muted {
  color: var(--text-muted);
}

.sc-mt-1 { margin-top: var(--space-1); }
.sc-mt-2 { margin-top: var(--space-2); }
.sc-mt-3 { margin-top: var(--space-3); }
.sc-mt-4 { margin-top: var(--space-4); }

.sc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

.sc-shell {
  min-height: 100vh;
  background: var(--bg);
}

.sc-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-h);
  padding: 0 var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.sc-header-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.sc-header-slot {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
}

.sc-header-email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.sc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sc-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}

.sc-sidebar {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: var(--space-4) var(--space-3) var(--space-8);
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.sc-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.sc-sidebar-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sc-sidebar-collapse {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-md);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.sc-sidebar-collapse:hover {
  color: var(--text);
  background: var(--surface-2);
}

.sc-sidebar-collapse:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}

/* Collapsed rail: only the button, centred, with the label gone. */
html[data-nav="collapsed"] .sc-sidebar-label {
  display: none;
}

html[data-nav="collapsed"] .sc-sidebar-head {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

html[data-nav="collapsed"] .sc-sidebar-collapse i {
  transform: scaleX(-1);
}

.sc-main {
  min-width: 0;
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.sc-nav-group {
  margin-bottom: var(--space-5);
}

.sc-nav-group-title {
  font-family: var(--font-nav);
  font-feature-settings: normal;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-nav a {
  font-family: var(--font-nav);
  font-feature-settings: normal;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h-md);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.sc-nav a:focus-visible {
  outline-offset: -2px;
}

.sc-nav a > i,
.sc-nav a > svg {
  flex: 0 0 auto;
  font-size: var(--text-xl);
  line-height: 1;
}

.sc-nav a > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-nav a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.sc-nav a.active,
.sc-nav a[aria-current="page"] {
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  font-weight: 700;
}

.sc-nav a.active::before,
.sc-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
}

.sc-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--surface-scrim);
}

/* Collapsed icon rail (desktop only; the drawer owns <=1024). */
html[data-nav="collapsed"] .sc-layout {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

html[data-nav="collapsed"] .sc-sidebar {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  overflow-x: hidden;
}

html[data-nav="collapsed"] .sc-nav-group-title,
html[data-nav="collapsed"] .sc-nav a > span {
  display: none;
}

html[data-nav="collapsed"] .sc-nav a {
  justify-content: center;
  padding: 0;
}

/* ── 1280: dense grids drop to two columns ─────────────────────────────── */
@media (max-width: 1280px) {
  .sc-grid-dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 1024: sidebar becomes an off-canvas drawer ────────────────────────── */
@media (max-width: 1024px) {
  .sc-layout,
  html[data-nav="collapsed"] .sc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-sidebar,
  html[data-nav="collapsed"] .sc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: calc(var(--z-drawer) + 1);
    width: var(--sidebar-w);
    height: 100%;
    padding: var(--space-4) var(--space-3) var(--space-8);
    transform: translateX(-100%);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  /* The shadow belongs to the OPEN drawer only. Left on the closed one it
     bled a grey strip down the left edge of every page under 1024px. */
  html[data-nav-open="1"] .sc-sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  html[data-nav-open="1"] .sc-drawer-backdrop {
    display: block;
  }

  html[data-nav-open="1"] body {
    overflow: hidden;
  }

  /* Labels always show inside the drawer, whatever the collapse setting. */
  html[data-nav="collapsed"] .sc-nav-group-title,
  html[data-nav="collapsed"] .sc-nav a > span {
    display: block;
  }

  html[data-nav="collapsed"] .sc-nav a {
    justify-content: flex-start;
    padding: 0 var(--space-3);
  }

  #navToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #navCollapse {
    display: none;
  }
}

@media (min-width: 1025px) {
  #navToggle {
    display: none;
  }
}

/* ── 768: compact header, icon-only search, scrolling tables ───────────── */
@media (max-width: 768px) {
  .sc-header {
    gap: var(--space-2);
    padding: 0 var(--space-3);
  }

  .sc-header-email {
    display: none;
  }

  /* The header is nowrap, and at 390px its children totalled 558px — the
     wordmark (225) plus the environment badge (130) plus three 36px buttons —
     which pushed the entire document sideways on every page.
     What goes and what stays is a deliberate order: the wordmark is the only
     purely decorative item (the logo mark still identifies the product), so it
     goes first. The environment badge STAYS. On an operations console that can
     move money, knowing whether you are pointed at staging or production
     matters more on a phone, not less.
     The slot holds the page's own search; each page keeps its in-page filters,
     and the selector is on the slot itself because pages fill it with their own
     markup (index.html uses .global-search, not .sc-search). */
  .brand-copy,
  .sc-header-slot {
    display: none;
  }

  .sc-header,
  .brand-lockup {
    min-width: 0;
  }

  .brand-lockup {
    flex: 0 1 auto;
  }

  .sc-search-toggle {
    display: inline-flex;
  }

  .sc-main {
    padding: var(--space-4) var(--space-4) var(--space-8);
  }

  .sc-grid-dense {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-table th,
  .sc-table td {
    white-space: nowrap;
  }

  /* Touch targets: nothing interactive drops below 44px here. */
  .sc-btn,
  .sc-btn-sm,
  .sc-chip,
  .sc-input,
  .sc-select,
  .sc-search {
    min-height: var(--control-h-md);
  }

  .sc-btn-icon.sc-btn-sm {
    width: var(--control-h-md);
  }
}

@media (min-width: 769px) {
  .sc-search-toggle {
    display: none;
  }
}

/* ── 480: single column, stacked toolbars ──────────────────────────────── */
@media (max-width: 480px) {
  .sc-main {
    padding: var(--space-3) var(--space-3) var(--space-8);
  }

  .sc-page-head,
  .sc-row.sc-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .sc-page-head-actions,
  .sc-row.sc-toolbar > * {
    width: 100%;
  }

  /* The actions row had no flex-wrap, so when a nested control group (the
     sales environment chips) wrapped to two lines internally, align-items
     centred its siblings against that taller box and the whole cluster sat at
     three different heights. Let the row itself wrap and top-align instead. */
  .sc-page-head-actions {
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-2);
  }

  .sc-page-head-actions .sc-btn {
    flex: 1 1 auto;
  }

  .sc-card,
  .sc-stat {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .sc-toast {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    max-width: none;
  }
}

/*
 * Every single-line <select> gets the same caret and right padding as .sc-select,
 * including page-local ones (.marketing-select, .exp-form select, ...), so the
 * native arrow never sits flush against the border.
 */
select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 6l4 4 4-4"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
  line-height: 1.3;
}

/* Every modal dialog is centred. Page-level resets (`* { margin: 0 }` in
   index.html) zero the browser's own dialog margin, which pinned dialogs such
   as the seller/listing reject reason to the top-left corner. */
dialog:modal,
.sc-main > dialog:modal {
  /* .sc-main > :not(.command-center) gives page children a margin; a modal
     that sits directly in .sc-main must still be centred. */
  margin: auto;
}

dialog:modal::backdrop {
  background: rgba(7, 18, 11, 0.45);
}