/*
 * Herkese açık hizmet durumu (DEC-106) — status.waygotransfer.com.
 * Değerler yalnızca `@waygo/design-tokens` (tokens.css) değişkenlerinden gelir.
 *
 * Reference check: next-shadcn-dashboard durum rozeti / liste kartı kalıbı ve
 * Magic UI `animated-list` incelendi → statik liste + durum rozeti olarak
 * uyarlandı (animasyonsuz); kart/rozet tonları Waygo DS.
 */

.wg-status {
  margin: 0;
  min-height: 100vh;
  background: var(--wg-canvas);
  color: var(--wg-ink-body);
  font-family: var(--wg-font-sans);
  font-size: var(--wg-type-body-size);
  line-height: var(--wg-type-body-line-height);
}

.wg-status__main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--wg-space-6);
  max-width: var(--wg-layout-prose-max-width);
  margin: 0 auto;
  padding: var(--wg-space-12) var(--wg-space-4);
}

.wg-status__header {
  display: flex;
  flex-direction: column;
  gap: var(--wg-space-1);
}

.wg-status__brand {
  color: var(--wg-ink);
  font-size: var(--wg-type-title-size);
  font-weight: var(--wg-type-title-weight);
  letter-spacing: var(--wg-type-title-tracking);
}

.wg-status__eyebrow {
  color: var(--wg-ink-muted);
  font-size: var(--wg-type-eyebrow-size);
  font-weight: var(--wg-type-eyebrow-weight);
  letter-spacing: var(--wg-type-eyebrow-tracking);
  text-transform: uppercase;
}

.wg-status__summary {
  display: flex;
  align-items: center;
  gap: var(--wg-space-4);
}

.wg-status__summary-text {
  display: flex;
  flex-direction: column;
  gap: var(--wg-space-1);
}

.wg-status__title {
  margin: 0;
  color: var(--wg-ink);
  font-size: var(--wg-type-headline-size);
  font-weight: var(--wg-type-headline-weight);
  line-height: var(--wg-type-headline-line-height);
  letter-spacing: var(--wg-type-headline-tracking);
}

.wg-status__dot {
  flex: none;
  width: var(--wg-space-3);
  height: var(--wg-space-3);
  border-radius: var(--wg-radius-pill);
  background: var(--wg-ink-subtle);
}

.wg-status__dot[data-state="operational"] { background: var(--wg-success); }
.wg-status__dot[data-state="degraded"] { background: var(--wg-warning); }
.wg-status__dot[data-state="outage"] { background: var(--wg-danger); }

.wg-status__card {
  border: var(--wg-stroke-hairline) solid var(--wg-hairline);
  border-radius: var(--wg-radius-lg);
  background: var(--wg-surface-1);
  box-shadow: var(--wg-shadow-soft);
}

.wg-status__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wg-status__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wg-space-4);
  padding: var(--wg-space-4) var(--wg-space-5);
  border-bottom: var(--wg-stroke-hairline) solid var(--wg-hairline-faint);
  color: var(--wg-ink);
}

.wg-status__item:last-child {
  border-bottom: 0;
}

.wg-status__badge {
  flex: none;
  padding: var(--wg-space-1) var(--wg-space-3);
  border-radius: var(--wg-radius-pill);
  background: var(--wg-surface-3);
  color: var(--wg-ink-muted);
  font-size: var(--wg-type-caption-size);
  font-weight: var(--wg-type-caption-weight);
}

.wg-status__badge[data-state="operational"] { background: var(--wg-success-soft); color: var(--wg-success); }
.wg-status__badge[data-state="degraded"] { background: var(--wg-warning-soft); color: var(--wg-warning); }
.wg-status__badge[data-state="outage"] { background: var(--wg-danger-soft); color: var(--wg-danger); }

.wg-status__actions {
  display: flex;
}

.wg-status__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wg-space-12);
  padding: 0 var(--wg-space-5);
  border: var(--wg-stroke-hairline) solid var(--wg-hairline-strong);
  border-radius: var(--wg-radius-md);
  background: var(--wg-surface-2);
  color: var(--wg-ink);
  font: inherit;
  font-size: var(--wg-type-button-size);
  font-weight: var(--wg-type-button-weight);
  cursor: pointer;
  transition: opacity var(--wg-dur-fast) var(--wg-ease-out), transform var(--wg-dur-fast) var(--wg-ease-out);
}

.wg-status__button:hover {
  opacity: 0.88;
}

.wg-status__button:active {
  transform: scale(0.98);
}

.wg-status__button:focus-visible {
  outline: none;
  box-shadow: var(--wg-glow-focus);
}

.wg-status__button:disabled,
.wg-status__button[aria-busy="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.wg-status__note {
  margin: 0;
  color: var(--wg-ink-muted);
  font-size: var(--wg-type-caption-size);
  line-height: var(--wg-type-caption-line-height);
}