/* Shared production UI primitives. Existing page styles remain supported. */
:root {
  --ui-space-1: .25rem;
  --ui-space-2: .5rem;
  --ui-space-3: .75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.5rem;
  --ui-space-6: 2rem;
  --ui-radius-sm: .5rem;
  --ui-radius-md: .75rem;
  --ui-radius-lg: 1rem;
  --ui-border: rgba(15, 23, 42, .12);
  --ui-muted: #64748b;
  --ui-danger: #b91c1c;
  --ui-success: #047857;
  --ui-warning: #a16207;
  --ui-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(37, 99, 235, .45);
  outline-offset: 2px;
}

:where(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
}

.ui-card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--surface, #fff);
  box-shadow: var(--ui-shadow);
  padding: var(--ui-space-5);
}
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }
.ui-split { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); }
.ui-muted { color: var(--ui-muted); }

.ui-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-md);
  padding: .625rem 1rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.ui-button[disabled], .ui-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-button--primary { background: #2563eb; color: #fff; }
.ui-button--secondary { border-color: var(--ui-border); background: #fff; color: #0f172a; }
.ui-button--danger { background: #b91c1c; color: #fff; }

.ui-field { display: grid; gap: var(--ui-space-2); }
.ui-field > label { font-weight: 700; }
.ui-help { color: var(--ui-muted); font-size: .875rem; }
.ui-error { color: var(--ui-danger); font-size: .875rem; font-weight: 600; }

.ui-empty-state { text-align: center; padding: var(--ui-space-6); border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-lg); }
.ui-status { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .625rem; font-size: .75rem; font-weight: 800; }
.ui-status--success { background: #d1fae5; color: var(--ui-success); }
.ui-status--warning { background: #fef3c7; color: var(--ui-warning); }
.ui-status--danger { background: #fee2e2; color: var(--ui-danger); }
.ui-status--neutral { background: #e2e8f0; color: #334155; }

.ui-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table :where(th, td) { padding: .75rem 1rem; border-bottom: 1px solid var(--ui-border); text-align: left; vertical-align: top; }
.ui-table th { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 640px) {
  .ui-split { align-items: stretch; flex-direction: column; }
  .ui-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}