/* Privilege Config screen styles (Figma 600:15960).
 *
 * All colour, spacing and typography values use --wa-* tokens exclusively.
 * A raw hex here would not follow a theme change; an INVENTED token name would
 * resolve to nothing while every static check still passed — the failure mode
 * the design-system Playwright spec exists to catch.
 */

.privilege-config {
  padding: var(--wa-space-xl);
  max-width: 1600px;
  background: var(--wa-color-surface-lowered);
}

.privilege-config__header {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-s);
  margin-bottom: var(--wa-space-l);
}

.privilege-config__breadcrumb {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.privilege-config__title {
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-bold);
  color: var(--wa-color-text-normal);
  margin: 0;
}

.privilege-config__subtitle,
.privilege-config__event {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-m);
}

.privilege-config__empty {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-xl);
  text-align: center;
}

.privilege-config__table-wrap {
  overflow-x: auto;
  background: var(--wa-color-surface-default);
  border-radius: var(--wa-border-radius-l);
  border: 1px solid var(--wa-color-surface-border);
}

.privilege-config__table {
  width: 100%;
  border-collapse: collapse;
}

.privilege-config__table th {
  background: var(--wa-color-surface-lowered);
  font-weight: var(--wa-font-weight-bold);
  text-align: left;
  padding: var(--wa-space-m);
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.privilege-config__table td {
  padding: var(--wa-space-m);
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.privilege-config__table tr:last-child td {
  border-bottom: none;
}

/* This is the only visual feedback during a drag, because the row is moved in
 * the DOM rather than ghosted. */
.privilege-config__row--dragging {
  opacity: 0.5;
}

.privilege-config__drag {
  white-space: nowrap;
  width: 1%;
}

/* The grip icon is the only draggable element (the row is not, so the inline
 * inputs can still be text-selected). FA7's class is fa-solid — a .fa selector
 * matched nothing and left the control with no grab affordance. */
.privilege-config__drag [draggable="true"] {
  cursor: grab;
}

.privilege-config__row--dragging [draggable="true"] {
  cursor: grabbing;
}

/* The move buttons stay hidden for mouse users (the design shows the handle
 * only) but a keyboard user tabbing to them must SEE focus — .visually-hidden
 * has no focus escape, so the wrapper expands while anything inside holds it. */
.privilege-config__drag .visually-hidden:focus-within {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
}

/* font-variant-numeric is a plain CSS value because there is no token for it. */
.privilege-config__rate {
  font-variant-numeric: tabular-nums;
}

/* A discount and a premium must be distinguishable without reading the sign,
 * and colour is not the ONLY carrier — the sign is still rendered in the text. */
.privilege-config__rate--discount {
  color: var(--wa-color-green);
}

.privilege-config__rate--premium {
  color: var(--wa-color-yellow-60);
}

.privilege-config__order-form {
  display: none;
}

/* The bulk form wraps the table, sections and save bar purely for submission;
 * it must not create a box of its own. */
.privilege-config__bulk-form {
  display: contents;
}

.privilege-config__sync,
.privilege-config__preview {
  margin-top: var(--wa-space-xl);
}

.privilege-config__sync-title,
.privilege-config__preview-title {
  font-size: var(--wa-font-size-l);
  font-weight: var(--wa-font-weight-bold);
}

.privilege-config__sync-cards {
  display: flex;
  gap: var(--wa-space-m);
  flex-wrap: wrap;
}

.privilege-config__sync-card {
  flex: 1 1 340px;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-l);
}

.privilege-config__sync-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* The design docks the card's action button at its right edge, vertically
 * centered beside the title + note block. No flex-wrap: the text block takes
 * the leftover width (min-width:0 so its text may wrap) and the button never
 * shrinks — measured in a browser, wrapping put the button on its own line,
 * and grow-to-fill did the same by eating the button's space entirely. */
.privilege-config__sync-card--action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m);
}

.privilege-config__sync-card--action > div {
  flex: 1 1 auto;
  min-width: 0;
}

.privilege-config__sync-card--action > wa-button {
  flex-shrink: 0;
}

.privilege-config__sync-card-title {
  margin: 0;
  font-weight: var(--wa-font-weight-bold);
}

.privilege-config__sync-counts {
  color: var(--wa-color-text-normal);
}

.privilege-config__sync-note,
.privilege-config__preview-subtitle {
  color: var(--wa-color-text-quiet);
}

.privilege-config__preview-badges {
  display: flex;
  gap: var(--wa-space-s);
  flex-wrap: wrap;
}

.privilege-config__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  padding: var(--wa-space-2xs) var(--wa-space-xs);
  border-radius: var(--wa-border-radius-l);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
}

.privilege-config__chip--brand {
  background: var(--wa-color-brand-90);
  color: var(--wa-color-brand);
}

.privilege-config__chip--neutral {
  background: var(--wa-color-neutral-90);
  color: var(--wa-color-text-normal);
}

.privilege-config__chip--success {
  background: var(--wa-color-success-90);
  color: var(--wa-color-success);
}

.privilege-config__chip--warning {
  background: var(--wa-color-warning-90);
  color: var(--wa-color-warning);
}

.privilege-config__chip--danger {
  background: var(--wa-color-danger-90);
  color: var(--wa-color-danger);
}

.privilege-config__num-input {
  width: 8rem;
}

/* wa-input always renders its <label> element, even when empty — which is where
 * the required "*" marker lives. In a bare table cell there is no visible
 * label, so the marker floated above the input and the empty label line made
 * every row taller than the control. The label attribute still supplies the
 * inner input's accessible name (it is a real <label for>), so the label part
 * is clipped rather than display:none — display:none would take the name with
 * it. Same clip technique as the .visually-hidden helper. */
.privilege-config__num-input::part(form-control-label),
.privilege-config__inline-input::part(form-control-label) {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* The reason field inside an overrides row — a little wider than the numeric
 * inputs, still bounded so it cannot push the table open. */
.privilege-config__inline-input {
  width: 12rem;
  display: inline-block;
}

/* The design spreads the bar across the row — Cancel at the left edge,
 * Save Changes at the right — rather than clustering both at the right. */
.privilege-config__save-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--wa-space-s);
  border-top: 1px solid var(--wa-color-surface-border);
  padding-top: var(--wa-space-m);
  margin-top: var(--wa-space-l);
}

.privilege-config__dialog-form {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}

.privilege-config__dialog-note {
  color: var(--wa-color-text-quiet);
  margin: 0;
}

/* The design labels the dialog's two field groups ("Tier Settings",
 * "Override Confirmation"). */
.privilege-config__dialog-section {
  margin: 0;
  font-size: var(--wa-font-size-m);
  font-weight: var(--wa-font-weight-bold);
  color: var(--wa-color-text-normal);
}

.privilege-config__dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wa-space-s);
}

@media (max-width: 900px) {
  .privilege-config {
    padding: var(--wa-space-m);
  }

  .privilege-config__sync-cards {
    flex-direction: column;
  }

  /* flex: 1 1 340px above — in column direction the 340px basis becomes
   * minimum HEIGHT, which stretched every card to 340px+ of mostly empty
   * space at phone widths. */
  .privilege-config__sync-card {
    flex-basis: auto;
  }
}