/*
  Infinity Design System — components
  Requires tokens.css loaded first. Plain classes, no build step, no JS
  framework dependency — safe to drop into any microservice's frontend
  independently (Node, Python/Jinja, static HTML, React, whatever each
  service runs), which is the point: a shared look with zero shared runtime.
*/

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .tab,
  .xp-bar__fill,
  .window {
    transition: box-shadow 150ms ease, border-color 150ms ease, transform 100ms ease;
  }
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none !important;
}

.btn--primary {
  background: var(--accent-cyan);
  color: var(--ink-on-fill);
}
.btn--primary:hover:not(:disabled),
.btn--primary:focus-visible:not(:disabled) {
  box-shadow: var(--glow-md);
}
.btn--primary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn--secondary {
  background: transparent;
  color: var(--accent-cyan);
  border-color: var(--border-strong);
}
.btn--secondary:hover:not(:disabled),
.btn--secondary:focus-visible:not(:disabled) {
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-sm);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-muted);
}
.btn--ghost:hover:not(:disabled),
.btn--ghost:focus-visible:not(:disabled) {
  color: var(--ink);
}

.btn--danger {
  background: var(--danger);
  color: var(--ink-on-fill);
}
.btn--danger:hover:not(:disabled),
.btn--danger:focus-visible:not(:disabled) {
  box-shadow: var(--glow-danger);
}

/* ---------- Panel ---------- */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.panel--active {
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-sm);
}

/* ---------- Window (MDI pane) ---------- */
/* A single floating unit inside a multi-document workspace. Several can be
   open at once; the mesh convention is one window per microservice view. */

.window {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--elevation-1);
  min-width: 0;
}

.window--active {
  border-color: var(--accent-cyan);
  box-shadow: var(--elevation-1), var(--glow-md);
}

.window__titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.window--active .window__titlebar {
  color: var(--ink);
}

.window__titlebar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}

.window--active .window__titlebar-dot {
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
}

.window__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window__controls {
  display: flex;
  gap: var(--space-1);
}

.window__control {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.window__control:hover,
.window__control:focus-visible {
  color: var(--ink);
  border-color: var(--border-strong);
}

.window__body {
  padding: var(--space-4);
  overflow: auto;
}

/* ---------- Tabs ---------- */
/* Group related AJAX-loaded views without a full page reload. */

.tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
  cursor: pointer;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent-cyan);
  text-shadow: 0 0 12px rgba(53, 224, 255, 0.35);
}

/* ---------- Badge ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 1px solid var(--border-default);
  color: var(--ink-muted);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge--online { color: var(--success); border-color: var(--success); }
.badge--offline { color: var(--ink-muted); }
.badge--warning { color: var(--warning); border-color: var(--warning); }
.badge--danger { color: var(--danger); border-color: var(--danger); }

.badge--level {
  background: var(--accent-cyan);
  color: var(--ink-on-fill);
  border-color: transparent;
}

/* ---------- XP / progress bar ---------- */

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

.xp-bar__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-panel-raised);
  overflow: hidden;
}

.xp-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
  width: var(--xp-bar-value, 0%);
}

.xp-bar__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* ---------- Stat tile ---------- */

.stat-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-tile__label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.stat-tile__value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-tile__delta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
}

/* Named by whether the trend is good or bad, never by arrow direction —
   a falling error rate is positive, a falling uptime is negative. Pair the
   class with whichever arrow glyph (▲/▼) the number actually moved. */
.stat-tile__delta--positive { color: var(--success); }
.stat-tile__delta--negative { color: var(--danger); }

/* ---------- Alert ---------- */
/* Deliberately not a colored-left-border card: full subtle border in the
   semantic hue plus a colored icon + heading, so it reads on its shape
   and text, not on a decorative stripe. */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.alert__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
}

.alert__body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  margin: 0;
}

.alert--info { border-color: var(--accent-cyan); }
.alert--info .alert__icon, .alert--info .alert__title { color: var(--accent-cyan); }

.alert--success { border-color: var(--success); }
.alert--success .alert__icon, .alert--success .alert__title { color: var(--success); }

.alert--warning { border-color: var(--warning); }
.alert--warning .alert__icon, .alert--warning .alert__title { color: var(--warning); }

.alert--danger { border-color: var(--danger); box-shadow: var(--glow-danger); }
.alert--danger .alert__icon, .alert--danger .alert__title { color: var(--danger); }