/* Shared SWAP component contract. */
button, input, select, textarea { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-height-md); padding: 0 var(--btn-padding-x-md); border: 1px solid transparent; border-radius: var(--btn-radius); font: var(--btn-font-weight) var(--btn-font-size) var(--font-sans); cursor: pointer; transition: var(--btn-transition); }
.btn-sm { min-height: var(--btn-height-sm); padding-inline: var(--btn-padding-x-sm); }
.btn-lg { min-height: var(--btn-height-lg); padding-inline: var(--btn-padding-x-lg); }
.btn-primary { background: var(--color-primary); color: var(--color-primary-fg); }
.btn-secondary { background: var(--color-secondary); color: var(--color-secondary-fg); }
.btn-outline { background: transparent; color: var(--color-outline-fg); border-color: var(--color-outline-border); }
.btn-ghost { background: transparent; color: var(--color-ghost-fg); }
.btn-destructive { background: var(--color-destructive); color: var(--color-destructive-fg); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover { background: var(--color-secondary-hover); }
.btn-destructive:hover { background: var(--color-destructive-hover); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.field input, .field select, .field textarea { min-height: var(--field-height); width: 100%; padding: 0 var(--field-padding-x); font-size: var(--field-font-size); font-family: var(--font-sans); border: 1px solid var(--field-border); border-radius: var(--field-radius); background: var(--field-bg); color: var(--color-text); }
.field input::placeholder, .field textarea::placeholder { color: var(--field-placeholder); opacity: 1; }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--field-bg-disabled); color: var(--color-text-muted); cursor: not-allowed; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-error); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: var(--badge-padding-y) var(--badge-padding-x); border-radius: var(--badge-radius); font-size: var(--badge-font-size); font-weight: var(--badge-font-weight); line-height: 1.4; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.badge-unallocated { background: var(--status-unallocated-bg); color: var(--status-unallocated-fg); }
.badge-allocated { background: var(--status-allocated-bg); color: var(--status-allocated-fg); }
.badge-new { background: var(--status-new-bg); color: var(--status-new-fg); }
.badge-active { background: var(--status-active-bg); color: var(--status-active-fg); }
.badge-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.badge-complete { background: var(--status-complete-bg); color: var(--status-complete-fg); }

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data thead th {
  text-align: left;
  background: var(--table-header-bg);
  color: var(--table-header-fg);
  font-size: var(--table-header-size);
  font-weight: var(--table-header-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--table-border);
}
table.data tbody td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--table-border);
  height: var(--table-row-height);
}
table.data tbody tr:hover { background: var(--table-row-hover-bg); }
table.data td.num, table.data th.num { font-variant-numeric: var(--table-numeral); }

.close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}
.close:hover { background: var(--color-bg-subtle); }

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--select-chevron-gap);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-1-5) center;
  cursor: pointer;
}
.field select:focus { background-image: var(--select-chevron-focus); }
.field select:disabled { background-image: none; }
.segment button { flex: 1; min-height: var(--btn-height-md); border: none; background: transparent; padding: var(--space-0-5) var(--space-2); border-radius: calc(var(--segment-radius) - 2px); color: var(--segment-inactive-fg); font: var(--weight-medium) var(--text-sm) var(--font-sans); cursor: pointer; }
.segment button[aria-pressed="true"] { background: var(--segment-active-bg); color: var(--segment-active-fg); box-shadow: var(--segment-active-shadow); }
.modal[role="dialog"] { max-height: 92vh; }