/* ============================================================
   SINOX API — PAGES / STATUS.CSS
   استایل‌های اختصاصی صفحه‌ی وضعیت سرویس (health.html).
   وابسته به tokens.css + base.css + components.css.
   ============================================================ */

.st-page-head { padding-block: var(--space-14) var(--space-7); }
.st-page-head .kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-mono-wide);
  color: var(--primary); direction: ltr; text-align: end; margin-bottom: 10px;
}
.st-page-head h1 { font-size: var(--fh-h2); }

/* ---------- ۱. بنر کلی ---------- */
.st-banner {
  border: 1px solid var(--green-border-tint);
  border-radius: var(--radius-2xl);
  background: var(--grad-success-panel);
  padding: var(--space-6) var(--space-7);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.st-banner.is-error { border-color: var(--red-border-tint); background: linear-gradient(140deg, rgba(239, 68, 68, .1), rgba(239, 68, 68, .03)); }
.st-banner-left { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.st-banner-icon {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%;
  background: var(--green-tint); border: 1px solid var(--green-border-tint);
  display: flex; align-items: center; justify-content: center; color: var(--green);
}
.st-banner.is-error .st-banner-icon { background: var(--red-tint); border-color: var(--red-border-tint); color: var(--red-light); }
.st-banner-title { font-size: clamp(18px, 1.2vw + 14px, 24px); font-weight: var(--fw-black); }
.st-banner-sub { margin-top: 8px; font-size: 13.5px; color: var(--text-muted); }

.st-refresh-row { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.st-refresh-btn svg { transition: transform var(--dur-slow) var(--ease-standard); }
.st-refresh-btn.is-loading svg { animation: sx-spin 0.9s linear infinite; }

.st-ring {
  --ring-size: 44px;
  position: relative;
}
.st-ring::before { inset: 6px; }
.st-ring .progress-ring-label .n { font-size: 12px; font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--text-muted); }

/* ---------- ۲. کارت‌های آماری ---------- */
.st-stat-grid { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .st-stat-grid { grid-template-columns: 1fr 1fr; } }
.st-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.st-stat-spark { margin-top: var(--space-5); width: 100%; height: 44px; overflow: visible; display: block; }

/* ---------- ۳. تاریخچه‌ی ۹۰ روزه ---------- */
.st-history-head { margin-top: var(--space-10); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.st-history-head h2 { font-size: var(--fh-h4); }
.st-history-head .st-history-desc { margin-top: 8px; font-size: 14px; color: var(--text-muted); }
.st-legend { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--text-muted); }
.st-legend .sw { display: inline-flex; align-items: center; gap: 6px; }
.st-legend .sw span { width: 9px; height: 9px; border-radius: 3px; }

.st-history-card { margin-top: var(--space-5); border: 1px solid var(--border-1); border-radius: var(--radius-2xl); background: var(--bg2); overflow: hidden; }
.st-history-row { padding: 20px 24px; position: relative; }
.st-history-row + .st-history-row { border-top: 1px solid var(--border-1); }
.st-history-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.st-history-row-name { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: var(--fw-bold); }
.st-history-row-name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.st-history-row-pct { font-family: var(--font-mono); font-size: 13.5px; color: var(--green-light); direction: ltr; }

.st-bars { position: relative; margin-top: 13px; display: flex; gap: 2px; height: 32px; }
.st-bar { flex: 1; min-width: 2px; border-radius: 3px; background: var(--green); cursor: default; transition: opacity var(--dur-fast); }
.st-bar:hover, .st-bar:focus-visible { opacity: 0.68; outline: none; }
.st-bar-labels { margin-top: 9px; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); }

.st-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  transform: translate(50%, 4px);
  padding: 10px 14px;
  border-radius: 11px;
  background: var(--elev-4);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base), transform var(--dur-base);
  z-index: 30;
}
.st-tooltip.is-visible { opacity: 1; transform: translate(50%, 0); }
.st-tooltip strong { color: var(--text-1); font-weight: var(--fw-bold); }

/* ---------- ۴. جدول مدل‌ها ---------- */
.st-models-head { margin-top: var(--space-10); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.st-models-head h2 { font-size: var(--fh-h4); }
.st-models-head .st-models-desc { margin-top: 8px; font-size: 14px; color: var(--text-muted); }
.st-models-filter { width: 240px; max-width: 100%; }

.st-table-card { margin-top: var(--space-5); border: 1px solid var(--border-1); border-radius: var(--radius-2xl); overflow: hidden; }
.st-sortable { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; background: none; border: none; color: inherit; font: inherit; padding: 0; }
.st-sortable:hover { color: var(--text-1); }
.st-sortable svg { transition: transform var(--dur-base); opacity: 0.55; }
.st-sortable[data-dir="desc"] svg { transform: rotate(180deg); }
.st-sortable[data-dir="asc"] svg, .st-sortable[data-dir="desc"] svg { opacity: 1; color: var(--primary-light); }

.st-row-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--green-light); }
.st-row-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.st-model-name { font-weight: var(--fw-semibold); direction: ltr; text-align: right; }
.st-model-id { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); direction: ltr; display: inline-block; }
.st-billing-chip { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.st-table-foot { padding: 14px 18px; border-top: 1px solid var(--border-1); background: var(--bg2); display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-muted); }

/* پالس «بروزرسانی شد» بعد از هر رفرش */
.st-pulse { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--green-light); opacity: 0; transition: opacity var(--dur-slow) var(--ease-standard); }
.st-pulse.is-active { opacity: 1; }

/* اسکلتون ردیف جدول */
.st-skel-row td { padding: 14px 18px; }