/*
 * Minimum components. One implementation per pattern, shared by every
 * surface that has moved to the design system. Layout and placement stay
 * in the surface stylesheet; look and states live here.
 *
 *   .ui-btn        buttons      --primary --secondary --ghost --danger --sm --icon --block
 *   .ui-input      text inputs and selects
 *   .ui-popover    menus, autocomplete, mega menu panels
 *   .ui-modal      overlay + dialog
 *   .ui-badge      status labels --success --danger --gold --brand
 *   .ui-status     dot + label state (open, closed) --success --danger
 *   .ui-chip       selectable filter pills (.is-active)
 *   .ui-pagination page links (.is-current)
 *   .ui-card       bordered content surface
 *   .ui-spinner    loading indicator
 */

/* Native checkboxes and radios take the brand color */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
}

/* Button */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

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

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.ui-btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.ui-btn--primary:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

.ui-btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.ui-btn--secondary:hover {
  border-color: var(--color-muted);
  color: var(--color-ink);
}

.ui-btn--ghost {
  background: transparent;
  color: var(--color-ink);
}

.ui-btn--ghost:hover {
  background: var(--color-hover);
  color: var(--color-ink);
}

.ui-btn--danger {
  background: var(--color-surface);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.ui-btn--danger:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.ui-btn--sm {
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
}

.ui-btn--icon {
  width: var(--control-height);
  padding: 0;
}

.ui-btn--block {
  width: 100%;
}

/* Input */
.ui-input {
  height: var(--control-height);
  width: 100%;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.ui-input:hover {
  border-color: var(--color-muted);
}

.ui-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* Popover panel */
.ui-popover {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
}

.ui-popover__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  color: var(--color-ink);
  font-size: var(--text-base);
  text-decoration: none;
  cursor: pointer;
}

.ui-popover__item:hover,
.ui-popover__item[aria-selected="true"] {
  background: var(--color-hover);
  color: var(--color-ink);
  text-decoration: none;
}

.ui-popover__item.is-active {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.ui-popover__separator {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--space-1) 0;
}

/* Modal */
.ui-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(17, 24, 39, 0.5);
}

.ui-modal__dialog {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 2 * var(--space-4));
  overflow: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
}

@media (max-width: 767px) {
  .ui-modal {
    align-items: flex-end;
    padding: 0;
  }

  .ui-modal__dialog {
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* Badge */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-hover);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 18px;
  white-space: nowrap;
}

.ui-badge--success {
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.ui-badge--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.ui-badge--gold {
  background: var(--color-gold-soft);
  color: var(--color-gold-strong);
  box-shadow: inset 0 0 0 1px var(--color-gold-line);
}

.ui-badge--brand {
  background: var(--color-primary-soft);
  color: var(--color-info-ink);
}

/* Status: colored dot and label */
.ui-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.ui-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ui-status--success {
  color: var(--color-success);
}

.ui-status--danger {
  color: var(--color-danger);
}

/* Chip */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.ui-chip:hover {
  border-color: var(--color-muted);
  text-decoration: none;
  color: var(--color-ink);
}

.ui-chip.is-active,
.ui-chip[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}

/* Pagination */
.ui-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.ui-pagination a,
.ui-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height-sm);
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.ui-pagination a:hover {
  background: var(--color-hover);
  text-decoration: none;
}

.ui-pagination .is-current {
  background: var(--color-ink);
  color: #fff;
}

/* Card */
.ui-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

/* Spinner */
.ui-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-line);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: ui-spin 0.7s linear infinite;
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}