/* Button, badge, avatar, menu, card, table and the wordmark. Lifted from the matching files in DESIGN/components. */

/* The wordmark, one treatment everywhere it appears outside the app frame, where the
   sidebar menu button carries it instead because there it is a control. Its own padding
   is half the 16px inset, so a container supplies the other half and every page agrees. */
[data-slot="brand"] {
  display: flex;
  height: var(--control-h);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  font: 600 var(--text-base) / 1 var(--font-sans);
}

[data-slot="button"] {
  display: inline-flex;
  flex-shrink: 0;
  height: var(--control-h);
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  padding: 0 var(--space-2-5);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: var(--primary-foreground);
  font: 500 var(--text-sm) / 1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: all 150ms;
}

[data-slot="button"] svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

[data-slot="button"]:focus-visible {
  border-color: var(--ring);
  box-shadow: var(--focus-ring);
}

[data-slot="button"]:active {
  transform: translateY(1px);
}

[data-slot="button"]:hover {
  background: color-mix(in oklch, var(--primary) 80%, transparent);
}

[data-slot="button"][data-variant="outline"] {
  border-color: var(--border);
  background: var(--background);
  color: var(--foreground);
}

/* A chosen segment keeps its fill under the pointer, so the hover never washes over it. */
[data-slot="button"][data-variant="outline"]:not(:has(:checked)):hover {
  background: var(--muted);
}

[data-slot="button"][data-variant="ghost"] {
  background: transparent;
  color: var(--foreground);
}

[data-slot="button"][data-variant="ghost"]:hover {
  background: var(--muted);
}

[data-slot="button"][data-size="sm"] {
  height: var(--control-h-sm);
  gap: var(--space-1);
  font-size: 0.8rem;
}

[data-slot="button"][data-size="sm"] svg {
  width: 14px;
  height: 14px;
}

[data-slot="button"][data-size="lg"] {
  height: var(--control-h-lg);
  padding: 0 var(--space-3);
}

[data-slot="button"][data-size="icon"] {
  width: var(--control-h);
  padding: 0;
}

[data-slot="button"][data-block] {
  width: 100%;
}

[data-slot="button"]:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Adjacent buttons share one border, so a set of choices reads as a single control. */
[data-slot="button-group"] {
  display: flex;
  width: fit-content;
  align-items: stretch;
}

[data-slot="button-group"] > [data-slot="button"] {
  border-radius: 0;
}

[data-slot="button-group"] > [data-slot="button"]:first-child {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

[data-slot="button-group"] > [data-slot="button"]:last-child {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

[data-slot="button-group"] > * + * {
  margin-left: -1px;
}

/* Each choice is a label around its own radio, so the group keeps the arrow keys and the one-of-many rule the platform gives it. */
[data-slot="button-group"] label {
  position: relative; /* Holds the clipped radio inside its own label, so focusing one scrolls to it and not to the page corner. */
}

[data-slot="button-group"] label:has(:checked) {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

[data-slot="button-group"] label:has(:focus-visible) {
  z-index: 1;
  border-color: var(--ring);
  box-shadow: var(--focus-ring);
}

[data-slot="button-group"] label:has(:disabled) {
  pointer-events: none;
  opacity: 0.5;
}

[data-slot="badge"] {
  display: inline-flex;
  width: fit-content;
  flex-shrink: 0;
  height: 20px;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-4xl);
  color: var(--foreground);
  font: 500 var(--text-xs) / 1 var(--font-sans);
  white-space: nowrap;
}

[data-slot="badge"] svg {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

[data-slot="badge"][data-variant="secondary"] {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

[data-slot="badge"][data-variant="outline"] {
  border-color: var(--border);
}

[data-slot="badge"][data-tone="positive"] {
  background: var(--status-positive-bg);
  color: var(--status-positive-fg);
}

[data-slot="badge"][data-tone="negative"] {
  background: var(--status-negative-bg);
  color: var(--status-negative-fg);
}

[data-slot="badge"][data-tone="warning"] {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

[data-slot="badge"][data-tone="info"] {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

/* A count reads as a circle, so it is at least as wide as it is tall, with a hard edge in a darker shade of its own colour. */
[data-slot="badge"][data-count] {
  min-width: 20px;
  padding: 0 var(--space-1);
  border-color: color-mix(in oklch, currentColor 75%, black);
}

[data-slot="avatar"] {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--muted);
  color: var(--muted-foreground);
  font: var(--type-eyebrow);
}

[data-slot="avatar"][data-size="lg"] {
  width: var(--space-10);
  height: var(--space-10);
}

/* The size a picture is looked at rather than glanced at, as in the profile. */
[data-slot="avatar"][data-size="xl"] {
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-xl);
  font: 500 var(--text-xl) / 1 var(--font-sans);
}

/* Studio Admin's small avatar, used inside table rows so they stay compact. */
[data-slot="avatar"][data-size="sm"] {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-md);
}

/* No display here, so a popover menu keeps the browser's closed state hidden. */
[data-slot="menu-content"],
[data-slot="select-content"] {
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  font: var(--type-body);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--ring-card);
}

[data-slot="menu-item"] {
  display: flex;
  width: 100%;
  min-height: var(--control-h-sm);
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-1-5);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

[data-slot="menu-item"]:hover,
[data-slot="menu-item"]:focus-visible {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* Leaving the account is the one menu item that is not routine. */
[data-slot="menu-item"][data-tone="negative"] {
  color: var(--destructive);
}

[data-slot="menu-item"][data-tone="negative"]:hover,
[data-slot="menu-item"][data-tone="negative"]:focus-visible {
  background: var(--status-negative-bg);
  color: var(--status-negative-fg);
}

[data-slot="menu-separator"] {
  height: 1px;
  margin: var(--space-1) calc(-1 * var(--space-1));
  background: var(--border);
}

/* Negative margins cancel the padding, so the text stays aligned with its column while the hit area grows. */
[data-slot="copy-button"] {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  gap: var(--space-1-5);
  margin: calc(-1 * var(--space-1-5)) calc(-1 * var(--space-2));
  padding: var(--space-1-5) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
  transition: background-color 150ms;
}

[data-slot="copy-button"]:hover {
  background: var(--muted);
}

[data-slot="copy-button"]:focus-visible {
  box-shadow: var(--focus-ring);
}

[data-slot="copy-button"] svg {
  width: 14px;
  height: 14px;
  color: var(--muted-foreground);
}

[data-slot="copy-button"][data-copy-state="copied"] svg {
  color: var(--status-positive-fg);
}

[data-slot="copy-button"][data-copy-state="failed"] svg {
  color: var(--destructive);
}

[data-slot="card"] {
  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);
  overflow: hidden;
  padding: var(--card-spacing) 0;
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--card-foreground);
  font: var(--type-body);
  box-shadow: 0 0 0 1px var(--ring-card);
}

/* A table brings its own header band and row lines, so the card adds no extra gap around it. */
[data-slot="card"]:has(> [data-slot="table-container"]) {
  gap: 0;
}

[data-slot="card"]:has(> [data-slot="table-container"]:last-child) {
  padding-bottom: 0;
}

/* Rows of avatar or text on the left and a badge on the right, split by hairlines. */
[data-slot="list"] {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-slot="list-item"] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

[data-slot="list-item"]:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

[data-slot="list-item-text"] {
  display: grid;
  gap: var(--space-0-5);
  min-width: 0;
}

[data-slot="list-item-text"] > :last-child {
  overflow: hidden;
  color: var(--muted-foreground);
  font: var(--type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-slot="list-item"] > [data-slot="badge"] {
  margin-left: auto;
}

/* Search, filters and paging in a card header, wrapping onto a second line when the card is narrow. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.toolbar [data-slot="input-group"] {
  flex: 1 1 160px;
  width: auto;
}

@media (max-width: 640px) {
  .toolbar [data-slot="select"] {
    flex: 1;
  }
}

.pager {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted-foreground);
}

/* The native progress element keeps its value readable to screen readers, with the browser's drawing replaced by ours. */
[data-slot="progress"] {
  width: 100%;
  height: var(--space-1);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--primary) 20%, transparent);
  appearance: none;
}

[data-slot="progress"]::-webkit-progress-bar {
  background: transparent;
}

[data-slot="progress"]::-webkit-progress-value {
  background: var(--primary);
}

[data-slot="progress"]::-moz-progress-bar {
  background: var(--primary);
}

/* Every panel and dialog dims the page behind it the same way. */
[data-sheet]::backdrop,
[data-slot="dialog"]::backdrop {
  background: rgb(0 0 0 / 10%);
  backdrop-filter: blur(4px);
}

/* A native dialog, so the top layer, the backdrop, the focus trap and Escape all come from the platform. */
[data-slot="dialog"] {
  --dialog-padding: var(--card-spacing);

  display: flex;
  flex-direction: column;
  gap: var(--card-spacing); /* The same spacing a dialog built around a form gets, so both read alike. */
  width: min(384px, calc(100vw - 2 * var(--space-4)));
  padding: var(--dialog-padding);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--popover);
  color: var(--popover-foreground);
  font: var(--type-body);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--ring-card);
}

/* A wider modal is not a small one stretched, so its padding grows with it. */
[data-slot="dialog"][data-size="md"],
[data-slot="dialog"][data-size="lg"] {
  --dialog-padding: var(--space-6);
}

[data-slot="dialog"][data-size="md"] {
  width: min(560px, calc(100vw - 2 * var(--space-4)));
}

/* Held at one size, so a page of four rows does not shrink the modal a page of ten filled. */
[data-slot="dialog"][data-size="lg"] {
  width: min(920px, calc(100vw - 2 * var(--space-4)));
  height: min(42rem, calc(100vh - 2 * var(--space-4)));
}

[data-slot="dialog"]:not([open]) {
  display: none;
}

[data-slot="dialog"] form {
  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);
}

[data-slot="dialog-title"] {
  margin: 0;
  font: var(--type-card-title);
}

[data-slot="dialog-description"] {
  margin: 0;
  color: var(--muted-foreground);
}

[data-slot="dialog-close"] {
  position: absolute;
  top: var(--dialog-padding);
  right: var(--dialog-padding);
  display: inline-flex;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: min(var(--radius-md), 12px);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

[data-slot="dialog-close"]:hover {
  background: var(--muted);
  color: var(--foreground);
}

/* The footer runs to the dialog's edges, matching the way a card ends. */
[data-slot="dialog-footer"] {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--dialog-padding)) calc(-1 * var(--dialog-padding));
  padding: var(--dialog-padding);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--surface-hover);
}

/* One look for every inline result the page reports, whichever page reports it. */
[data-slot="status-text"] {
  margin: 0;
  color: var(--muted-foreground);
  font: var(--type-body);
}

[data-slot="status-text"][data-tone="negative"] {
  color: var(--destructive);
}

[data-slot="status-text"][data-tone="positive"] {
  color: var(--status-positive-fg);
}

[data-slot="card"]:has([data-slot="card-footer"]) {
  padding-bottom: 0;
}

[data-slot="card-header"] {
  display: grid;
  grid-auto-rows: min-content;
  align-items: start;
  gap: var(--space-1);
  padding: 0 var(--card-spacing);
}

[data-slot="card-header"]:has([data-slot="card-action"]) {
  grid-template-columns: 1fr auto;
}

[data-slot="card-header"][data-border] {
  padding-bottom: var(--card-spacing);
  border-bottom: 1px solid var(--border);
}

/* A group inside a panel or a dialog: the heading, then what the heading governs. */
[data-slot="section"] {
  display: grid;
  gap: var(--space-2);
}

/* In a dialog a group is set off by a rule, so its heading reads as belonging to what follows it. */
[data-slot="dialog"] [data-slot="section"] {
  gap: var(--space-3);
  padding-top: var(--card-spacing);
  border-top: 1px solid var(--border);
}

/* Stronger than the labels it governs, or it reads as one of them. */
[data-slot="section-label"] {
  margin: 0;
  color: var(--foreground);
  font: var(--type-label);
}

[data-slot="card-title"] {
  font: var(--type-card-title);
}

[data-slot="card-description"] {
  color: var(--muted-foreground);
  font: var(--type-body);
}

[data-slot="card-action"] {
  grid-column-start: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* A header that is one line of text beside its action centres the two on that line, rather than hanging the taller one below. */
[data-slot="card-header"]:has(> :is([data-slot="card-title"], [data-slot="card-description"]):first-child + [data-slot="card-action"]:last-child) {
  align-items: center;
}

[data-slot="card-header"]:has(> :is([data-slot="card-title"], [data-slot="card-description"]):first-child + [data-slot="card-action"]:last-child) [data-slot="card-action"] {
  grid-row: 1;
  align-self: center;
  height: 0; /* Its buttons keep a full hit area by overflowing the line, so a header with an action is no taller than one without. */
}

[data-slot="card-content"] {
  padding: 0 var(--card-spacing);
}

[data-slot="card-footer"] {
  display: flex;
  align-items: center;
  padding: var(--card-spacing);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--surface-hover);
}

[data-slot="table-container"] {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

[data-slot="table"] {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body);
}

[data-slot="table-header"] tr {
  border-bottom: 1px solid var(--border);
}

[data-slot="table-body"] tr:last-child {
  border-bottom: 0;
}

[data-slot="table-row"] {
  border-bottom: 1px solid var(--border);
  transition: background 150ms;
}

[data-slot="table-row"]:hover {
  background: var(--surface-hover);
}

[data-slot="table-row"][data-state="selected"] {
  background: var(--muted);
}

[data-slot="table-head"] {
  height: var(--space-10);
  padding: 0 var(--space-2);
  color: var(--foreground);
  font-weight: var(--font-medium);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* Tables using scripts/fit-rows.js grow this padding into spare page height. */
[data-slot="table-cell"] {
  padding: calc(var(--space-2) + var(--cell-padding-growth, 0px)) var(--space-2);
  vertical-align: middle;
  white-space: nowrap;
}

[data-slot="table-head"][data-align="right"],
[data-slot="table-cell"][data-align="right"] {
  text-align: right;
}

/* Inside a card the outer columns sit on the card's own inset, so the table lines up with its toolbar and footer. */
[data-slot="card"] [data-slot="table-head"]:first-child,
[data-slot="card"] [data-slot="table-cell"]:first-child {
  padding-left: var(--card-spacing);
}

[data-slot="card"] [data-slot="table-head"]:last-child,
[data-slot="card"] [data-slot="table-cell"]:last-child {
  padding-right: var(--card-spacing);
}

.num {
  font-variant-numeric: tabular-nums;
}

/* A table marked data-stack becomes one block per row on a phone, with each cell's column name beside its value. */
@media (max-width: 720px) {
  [data-stack] thead {
    display: none;
  }

  [data-stack],
  [data-stack] tbody,
  [data-stack] tr {
    display: block;
  }

  [data-stack] tr {
    padding: var(--space-3) var(--card-spacing);
  }

  [data-slot="card"] [data-stack] [data-slot="table-cell"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    white-space: normal;
  }

  /* A cell with no column name is the one that names the block, so it carries no label. */
  [data-stack] td[data-label]::before {
    content: attr(data-label);
    color: var(--muted-foreground);
  }
}