/* Alta Resources -- component primitives: tables, badges, form controls,
 * state components, pagination, deferred slots.
 */

/* ---- panel ------------------------------------------------------------- */

.alta-panel {
  background: var(--alta-surface-raised);
  border: 1px solid var(--alta-border);
  border-radius: var(--alta-radius);
}

.alta-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--alta-space-3);
  padding: var(--alta-space-3) var(--alta-space-4);
  border-bottom: 1px solid var(--alta-border);
}

.alta-panel__title {
  font-size: var(--alta-text-lg);
}

/* ---- quiet table ------------------------------------------------------- */

.alta-table-scroll {
  overflow-x: auto;
}

.alta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--alta-text-base);
}

.alta-table caption {
  padding: var(--alta-space-2) var(--alta-space-4);
  color: var(--alta-text-muted);
  font-size: var(--alta-text-sm);
  text-align: left;
}

.alta-table th,
.alta-table td {
  padding: var(--alta-space-3) var(--alta-space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--alta-border);
}

.alta-table thead th {
  position: sticky;
  top: 0;
  background: var(--alta-surface-raised);
  color: var(--alta-text-muted);
  font-size: var(--alta-text-xs);
  font-weight: var(--alta-weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.alta-table tbody tr:hover {
  background: var(--alta-surface-hover);
}

.alta-table tbody tr:last-child td {
  border-bottom: none;
}

.alta-table td[data-align="end"],
.alta-table th[data-align="end"] {
  text-align: right;
}

.alta-table__secondary {
  display: block;
  color: var(--alta-text-muted);
  font-size: var(--alta-text-sm);
}

/* ---- badge ------------------------------------------------------------- */

.alta-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--alta-space-1);
  padding: 0.0625rem var(--alta-space-2);
  border-radius: var(--alta-radius-sm);
  font-size: var(--alta-text-xs);
  font-weight: var(--alta-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--alta-surface-hover);
  color: var(--alta-text-muted);
}

.alta-badge[data-tone="info"] {
  background: var(--alta-accent-quiet);
  color: var(--alta-accent);
}

.alta-badge[data-tone="positive"] {
  background: var(--alta-positive-quiet);
  color: var(--alta-positive);
}

.alta-badge[data-tone="caution"] {
  background: var(--alta-caution-quiet);
  color: var(--alta-caution);
}

.alta-badge[data-tone="critical"] {
  background: var(--alta-critical-quiet);
  color: var(--alta-critical);
}

/* ---- form controls ----------------------------------------------------- */

.alta-field + .alta-field {
  margin-top: var(--alta-space-4);
}

.alta-field__label {
  display: block;
  margin-bottom: var(--alta-space-1);
  font-size: var(--alta-text-sm);
  font-weight: var(--alta-weight-medium);
}

.alta-field__required {
  color: var(--alta-critical);
}

.alta-field__control {
  width: 100%;
  padding: var(--alta-space-2) var(--alta-space-3);
  background: var(--alta-surface);
  border: 1px solid var(--alta-border-strong);
  border-radius: var(--alta-radius);
  color: var(--alta-text);
  font: inherit;
}

.alta-field__control[aria-invalid="true"] {
  border-color: var(--alta-critical);
}

.alta-field__control:disabled {
  background: var(--alta-surface-sunken);
  color: var(--alta-text-faint);
  cursor: not-allowed;
}

.alta-field__help {
  margin-top: var(--alta-space-1);
  color: var(--alta-text-muted);
  font-size: var(--alta-text-sm);
}

.alta-field__error {
  margin-top: var(--alta-space-1);
  color: var(--alta-critical);
  font-size: var(--alta-text-sm);
}

.alta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--alta-space-2);
  padding: var(--alta-space-2) var(--alta-space-4);
  background: var(--alta-surface);
  border: 1px solid var(--alta-border-strong);
  border-radius: var(--alta-radius);
  color: var(--alta-text);
  font: inherit;
  font-weight: var(--alta-weight-medium);
  cursor: pointer;
  transition: background var(--alta-transition);
}

.alta-button:hover {
  background: var(--alta-surface-hover);
}

.alta-button[data-variant="primary"] {
  background: var(--alta-accent);
  border-color: var(--alta-accent);
  color: var(--alta-text-inverted);
}

.alta-button[data-variant="primary"]:hover {
  background: var(--alta-accent-hover);
}

.alta-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- state components -------------------------------------------------- */

.alta-state {
  display: grid;
  justify-items: center;
  gap: var(--alta-space-2);
  padding: var(--alta-space-6) var(--alta-space-4);
  text-align: center;
}

.alta-state__title {
  font-size: var(--alta-text-lg);
}

.alta-state__body {
  max-width: 34rem;
  color: var(--alta-text-muted);
}

.alta-state[data-state="error"] .alta-state__title {
  color: var(--alta-critical);
}

.alta-state__actions {
  margin-top: var(--alta-space-2);
}

/* Loading: a quiet skeleton, not a spinner that jumps the layout. */
.alta-skeleton {
  display: grid;
  gap: var(--alta-space-3);
  padding: var(--alta-space-4);
}

.alta-skeleton__bar {
  height: 0.75rem;
  border-radius: var(--alta-radius-sm);
  background: linear-gradient(
    90deg,
    var(--alta-surface-hover) 0%,
    var(--alta-surface-sunken) 50%,
    var(--alta-surface-hover) 100%
  );
  background-size: 200% 100%;
  animation: alta-shimmer 1.4s linear infinite;
}

@keyframes alta-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---- HTMX request indicator ------------------------------------------- */

.alta-indicator {
  visibility: hidden;
  color: var(--alta-text-muted);
  font-size: var(--alta-text-sm);
}

/* htmx sets .htmx-request on the indicator while a request is in flight. */
.alta-indicator.htmx-request {
  visibility: visible;
}

/* Content being replaced fades slightly so the swap is perceptible without
 * the layout moving. */
.htmx-swapping {
  opacity: 0.6;
  transition: opacity var(--alta-transition);
}

/* ---- pagination -------------------------------------------------------- */

.alta-pagination {
  display: flex;
  align-items: center;
  gap: var(--alta-space-3);
  padding: var(--alta-space-3) var(--alta-space-4);
  border-top: 1px solid var(--alta-border);
}

.alta-pagination__status {
  color: var(--alta-text-muted);
  font-size: var(--alta-text-sm);
}

.alta-pagination__spacer {
  flex: 1 1 auto;
}

/* ---- deferred slot ----------------------------------------------------- */

/* A component whose backend lane has not converged. Renders as a labelled
 * placeholder so the layout is honest about what is not built yet. */
[data-alta-slot] {
  border: 1px dashed var(--alta-border-strong);
  border-radius: var(--alta-radius);
  padding: var(--alta-space-3) var(--alta-space-4);
  color: var(--alta-text-faint);
  font-size: var(--alta-text-sm);
}

/* ---- utility ----------------------------------------------------------- */

.alta-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.alta-stack > * + * {
  margin-top: var(--alta-space-4);
}