/* ── Typography: Exo 2 (self-hosted variable font) ────────────────────
   One variable WOFF2 covers the whole 400–800 weight axis, so a single
   request serves every weight in the type scale. latin-ext is a separate
   face gated by unicode-range and only fetched when a non-Basic-Latin glyph
   appears. font-display: swap paints fallback text first, then swaps in.
   See docs/typography.md for the weight hierarchy and rationale. */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/exo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/exo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ── Persian typography: Vazirmatn (self-hosted) ─────────────────────
   Loaded only for the fa locale (html[lang="fa"] swaps --font-ui below).
   Five static weights mirror the Exo 2 weight scale (400–800). They are
   self-hosted under /static/fonts to stay offline-friendly and CDN-free,
   matching the project's dependency-light ethos. */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  /* --font-ui is the UI typeface; html[lang="fa"] overrides it with Vazirmatn
     so only Persian pulls the Persian font. English keeps Exo 2 unchanged. */
  --font-ui: 'Exo 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-ui);
  line-height: 1.6;
  background: #0f172a;
  color: #e2e8f0;

  /* Typography scale — Exo 2 is variable, so these map to axis positions.
     Reach for a token instead of hardcoding font-weight. See the weight
     table in docs/typography.md. */
  --fw-regular: 400;   /* body copy, table data, descriptions, logs        */
  --fw-medium: 500;    /* buttons, inputs, secondary labels, nav default   */
  --fw-semibold: 600;  /* table headers, badges, card titles, form labels  */
  --fw-bold: 700;      /* section headings, KPI / metric / gauge values    */
  --fw-extrabold: 800; /* brand wordmark + the largest hero metrics        */
  /* Tabular figures keep monitoring columns from jittering as values tick. */
  --num: tabular-nums;

  /* Design tokens — shared by newer components (gauges, KPIs, dashboard). */
  --accent: #3b82f6;
  --accent-soft: #60a5fa;
  --accent-bright: #93c5fd;
  --violet: #8b5cf6;
  --surface: rgba(15, 23, 42, 0.6);
  --surface-2: rgba(2, 6, 23, 0.35);
  --border: rgba(148, 163, 184, 0.1);
  --border-strong: rgba(148, 163, 184, 0.2);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --ok: #4ade80;
  --warn: #facc15;
  --crit: #f87171;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

* {
  box-sizing: border-box;
}

html {
  /* The slide-in drawer parks off-screen (translateX); clip horizontal
     overflow at the scroll container so it never widens the page. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-weight: var(--fw-regular);
  /* Exo 2 Regular is a touch lighter than Inter; antialiased smoothing keeps
     light-on-dark text crisp instead of muddy on WebKit/Blink. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.15), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.08), transparent 40%),
    linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
}

/* ── Layout ─────────────────────────────────────────── */

.shell {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.shell-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.shell-header h1 {
  margin: 4px 0 0;
  font-size: 2.2rem;
  /* Brand wordmark sits at the very top of the hierarchy — ExtraBold. */
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #f0f9ff 0%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shell-subtitle {
  max-width: 580px;
  margin: 8px 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

.eyebrow {
  margin: 0;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.meta span,
.meta code {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* ── Navigation ─────────────────────────────────────── */

.shell-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.shell-nav a {
  color: #94a3b8;
  text-decoration: none;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: var(--fw-medium);
  border-radius: 8px 8px 0 0;
  transition: color 0.15s ease, background 0.15s ease;
  position: relative;
}

.shell-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #3b82f6;
  border-radius: 2px;
  transition: width 0.2s ease, left 0.2s ease;
}

.shell-nav a:hover {
  color: #e2e8f0;
  background: rgba(59, 130, 246, 0.08);
}

.shell-nav a:hover::after {
  width: 60%;
  left: 20%;
}

.shell-nav a.is-active {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.1);
}

.shell-nav a.is-active::after {
  width: 80%;
  left: 10%;
}

/* ── Shell main ─────────────────────────────────────── */

.shell-main {
  display: grid;
  gap: 24px;
}

/* ── Page header ────────────────────────────────────── */

.page-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 16px;
  padding: 24px 28px;
}

.page-header h2 {
  margin: 4px 0 8px;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

/* Country flag badge next to a server name in a page header. Like the list
   badge, this is a regional-indicator emoji that degrades to the ISO letters on
   platforms without flag-emoji glyphs. */
.page-header__flag {
  font-size: 1.4rem;
  line-height: 1;
  vertical-align: middle;
  cursor: default;
}

.page-description {
  max-width: 640px;
  margin: 0;
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.6;
}

.section-label {
  margin: 0;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-meta code {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* ── Stats row ──────────────────────────────────────── */

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.stat-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-card__value {
  font-variant-numeric: var(--num);
  font-size: 1.3rem;
  font-weight: var(--fw-bold);
  color: #e2e8f0;
  letter-spacing: -0.01em;
}

.stat-card__label {
  font-size: 0.78rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
}

.stat-card--action {
  justify-content: center;
  border-style: dashed;
  border-color: rgba(96, 165, 250, 0.3);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.stat-card--action:hover {
  border-color: rgba(96, 165, 250, 0.6);
  background: rgba(59, 130, 246, 0.06);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}

.stat-card__link {
  text-decoration: none;
  color: #60a5fa;
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
}

/* ── Cards ──────────────────────────────────────────── */

.card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 16px;
  padding: 24px 28px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0; /* allow card to shrink inside CSS Grid so overflow-x: auto on children activates */
}

.card:hover {
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card--info {
  border-color: rgba(96, 165, 250, 0.15);
}

.card--info:hover {
  border-color: rgba(96, 165, 250, 0.25);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}

.card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.card h2,
.card h3 {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: 1.05rem;
  color: #f1f5f9;
}

.card h3 {
  font-size: 1rem;
}

.card p,
.card li {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* ── Server list ────────────────────────────────────── */

.server-list {
  display: grid;
  gap: 12px;
}

.server-card {
  position: relative;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 14px;
  padding: 20px 24px;
  overflow: visible;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.server-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--border-strong);
  border-radius: 14px 0 0 14px;
}

.server-card:hover {
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.server-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

/* Checkbox + identity travel together on the left as one unit, so the
   badges stay pinned to the right (space-between sees only two children). */
.server-card__lead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.server-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.server-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  color: #f1f5f9;
  word-break: break-word;
}

.server-card__host {
  font-size: 0.85rem;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  word-break: break-all;
}

/* Country flag badge next to the server name. The glyph is a regional-indicator
   emoji; on platforms without flag-emoji support (e.g. most Windows builds) the
   browser renders the two letters of the ISO code instead, which is an
   acceptable text fallback. */
.server-card__flag {
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: middle;
  cursor: default;
}

.server-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.server-card__note {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.5;
}

.server-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.server-card__actions-right {
  margin-inline-start: auto;
  display: flex;
  gap: 8px;
}

/* ── Server card action overflow menu ───────────────── */

.action-menu {
  position: relative;
  margin-inline-start: auto;
}

.action-menu__toggle[aria-expanded="true"] {
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
}

.action-menu__panel {
  position: absolute;
  bottom: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 40;
  min-width: 188px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: #0f172a;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.action-menu.is-open .action-menu__panel {
  display: flex;
  animation: action-menu-in 0.14s ease;
}

@keyframes action-menu-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.action-menu__form {
  margin: 0;
}

.action-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #cbd5e1;
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  font-family: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.action-menu__item:hover,
.action-menu__item:focus-visible {
  background: rgba(148, 163, 184, 0.1);
  color: #f1f5f9;
  outline: none;
}

.action-menu__item--danger {
  color: #f87171;
}

.action-menu__item--danger:hover,
.action-menu__item--danger:focus-visible {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.action-menu__divider {
  height: 1px;
  margin: 4px 2px;
  background: var(--border);
}

.action-menu__caption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 4px;
  font-size: 0.74rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.action-menu__caption svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Variant: open the panel below the toggle (header kebabs) instead of above. */
.action-menu--below .action-menu__panel {
  top: calc(100% + 6px);
  bottom: auto;
  inset-inline-end: 0;
  inset-inline-start: auto;
}

/* Non-actionable note rendered in place of items (e.g. missing credentials). */
.action-menu__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.action-menu__note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-dim);
}

/* ── Servers toolbar: search + actions ──────────────── */

.server-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.server-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
}

.server-search__icon {
  position: absolute;
  inset-inline-start: 13px;
  width: 17px;
  height: 17px;
  color: var(--text-dim);
  pointer-events: none;
}

.server-search input {
  width: 100%;
  padding: 11px 38px 11px 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.6);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.server-search input::placeholder {
  color: var(--text-dim);
}

.server-search input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Hide the native clear control; we render our own. */
.server-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.server-search__clear {
  position: absolute;
  inset-inline-end: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--text-dim);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.server-search__clear:hover {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
}

.server-search__clear svg {
  width: 15px;
  height: 15px;
}

.server-toolbar__aside {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.server-toolbar__count {
  font-variant-numeric: var(--num);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  white-space: nowrap;
}

.server-toolbar__count svg {
  width: 15px;
  height: 15px;
  color: var(--text-dim);
}

.server-result-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.server-result-note strong {
  color: var(--text);
}

/* ── Pagination ─────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pagination__nav,
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.6);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pagination__nav svg {
  width: 17px;
  height: 17px;
}

.pagination__nav:hover,
.pagination__page:hover {
  border-color: rgba(96, 165, 250, 0.4);
  color: var(--text);
}

.pagination__page--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}

.pagination__page--active:hover {
  color: #fff;
}

.pagination__nav--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pagination__gap {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 24px;
  color: var(--text-dim);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

/* ── Badges ─────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge--id {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  font-size: 0.7rem;
}

.badge--info {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge--auth-key {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

.badge--auth-password {
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
}

.badge--auth-hybrid {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

.badge--strat-runtime {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

.badge--strat-external_ref {
  background: rgba(251, 146, 60, 0.12);
  color: #fb923c;
}

.badge--strat-agent_ready {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

/* ── Tags ───────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.75rem;
  background: rgba(59, 130, 246, 0.08);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.15);
}

/* ── Buttons ────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn--primary {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.btn--primary .icon-in-button {
  width: 18px;
  height: 18px;
}

.btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3);
}

.btn--secondary {
  background: rgba(30, 41, 59, 0.6);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.2);
}

.btn--secondary:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.35);
}

.btn--ghost {
  background: transparent;
  color: #94a3b8;
  border-color: transparent;
}

.btn--ghost:hover {
  background: rgba(148, 163, 184, 0.08);
  color: #e2e8f0;
}

.btn--danger {
  background: transparent;
  color: #f87171;
  border-color: transparent;
}

.btn--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

/* ── Forms ──────────────────────────────────────────── */

.server-form {
  display: grid;
  gap: 18px;
  margin-top: 4px;
}

.form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-field {
  display: grid;
  gap: 6px;
}

.form-field > span {
  display: block;
  color: #e2e8f0;
  font-weight: var(--fw-semibold);
  font-size: 0.88rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.5);
  color: #e2e8f0;
  padding: 11px 14px;
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: rgba(148, 163, 184, 0.3);
}

.form-field textarea {
  resize: vertical;
  min-height: 80px;
}

.field-hint {
  display: block;
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 0;
}

.field-error {
  display: block;
  color: #f87171;
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  margin-top: 0;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
}

/* ── Auto-refresh toggle ─────────────────────────────── */

.auto-refresh-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #94a3b8;
  margin-inline-start: auto;
}

.auto-refresh-toggle select {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.85rem;
  cursor: pointer;
}

.auto-refresh-toggle select:focus {
  outline: none;
  border-color: #3b82f6;
}

/* ── Credential info list ───────────────────────────── */

.credential-info {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.credential-info li {
  padding-inline-start: 14px;
  border-inline-start: 2px solid rgba(96, 165, 250, 0.2);
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.5;
}

.credential-info li strong {
  color: #cbd5e1;
}

.credential-info code {
  background: rgba(30, 41, 59, 0.6);
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.82rem;
  color: #93c5fd;
}

/* ── Danger zone ────────────────────────────────────── */

.danger-zone {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(239, 68, 68, 0.15);
}

.danger-zone p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: #94a3b8;
}

/* ── Flash messages ─────────────────────────────────── */

.flash-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  border-radius: 12px;
  padding: 12px 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.flash-banner--success {
  background: rgba(21, 128, 61, 0.1);
  border-color: rgba(74, 222, 128, 0.2);
  color: #bbf7d0;
}

.flash-banner--error {
  background: rgba(127, 29, 29, 0.1);
  border-color: rgba(248, 113, 113, 0.2);
  color: #fecaca;
}

.flash-banner p {
  margin: 0;
}

/* ── Empty state ────────────────────────────────────── */

.empty-state {
  color: #60a5fa;
}

.empty-state-card {
  text-align: center;
  padding: 48px 24px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px dashed rgba(148, 163, 184, 0.15);
  border-radius: 16px;
}

.empty-state-title {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: var(--fw-semibold);
  color: #94a3b8;
}

.empty-state-desc {
  margin: 0 0 20px;
  color: #64748b;
  font-size: 0.92rem;
}

/* ── Output blocks ──────────────────────────────────── */

.output-block {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.5);
  color: #e2e8f0;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 400px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}

.output-block--error {
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(127, 29, 29, 0.1);
}

.error-inline {
  color: #fca5a5;
  font-size: 0.92rem;
}

.error-card {
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(127, 29, 29, 0.08);
}

.error-code {
  margin: 0 0 10px;
  color: #f87171;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
}

/* ── List items (shared) ────────────────────────────── */

.server-item,
.dashboard-item {
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 12px;
  padding: 16px 18px;
  background: rgba(2, 6, 23, 0.25);
}

.server-item__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.server-item__header h4 {
  margin: 0;
  min-width: 0;
  flex: 1;
}

/* ── Grids ──────────────────────────────────────────── */

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.hero,
.dashboard-list,
.server-list {
  display: grid;
  gap: 12px;
}

.dashboard-list--scrollable {
  max-height: 720px;
  overflow-y: auto;
  padding-inline-end: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.18) transparent;
}

.dashboard-list--scrollable::-webkit-scrollbar {
  width: 4px;
}

.dashboard-list--scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard-list--scrollable::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.22);
  border-radius: 4px;
}

.dashboard-list__more {
  margin: 4px 0 0;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.dashboard-list__more svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Misc ───────────────────────────────────────────── */

ul {
  margin: 0;
  padding-inline-start: 18px;
}

code {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  color: #93c5fd;
}

.inline-form {
  display: inline;
  margin: 0;
}

.shell-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  color: #64748b;
  font-size: 0.85rem;
}

.shell-footer p {
  margin: 0;
}

/* ── Login ──────────────────────────────────────────── */

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.login-card {
  width: 100%;
  max-width: 420px;
}

.logout-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.82rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  padding: 5px 10px;
  background: rgba(15, 23, 42, 0.6);
  transition: all 0.15s ease;
}

.logout-link:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 700px) {
  .shell {
    width: calc(100% - 20px);
    padding: 16px 0 32px;
  }

  .shell-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .shell-header h1 {
    font-size: 1.4rem;
    margin: 0;
  }

  .shell-header .eyebrow,
  .shell-header .shell-subtitle,
  .shell-header .meta {
    display: none;
  }

  .page-header {
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
  }

  .page-header h2 {
    font-size: 1.3rem;
  }

  .card {
    padding: 18px 20px;
  }

  .server-card {
    padding: 16px 18px;
  }

  .server-card__top {
    flex-direction: column;
    gap: 8px;
  }

  .server-card__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
  }

  /* Three primary buttons share available width equally */
  .server-card__actions > .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 6px;
    font-size: 0.74rem;
    min-height: 40px;
    justify-content: center;
  }

  /* Larger, clearer icons on touch targets */
  .server-card__actions > .btn .icon-in-button {
    width: 18px;
    height: 18px;
    margin-inline-end: 5px;
  }

  /* When the three equal-width buttons get tight, truncate the label with an
     ellipsis rather than letting the (longest) label crush its icon. */
  .server-card__actions > .btn .btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Kebab wrapper: fixed size, does not grow */
  .server-card__actions > .action-menu {
    flex: 0 0 auto;
    margin-inline-start: 0;
  }

  /* Keep kebab icon-only on mobile, but show labels on primary buttons */
  .action-menu__label {
    display: none;
  }

  /* Square icon-only toggle for kebab */
  .action-menu__toggle {
    width: 40px;
    min-height: 40px;
    padding: 0;
  }

  .action-menu__toggle .icon-in-button {
    width: 18px;
    height: 18px;
    margin-inline-end: 0;
  }

  /* Toolbar stacks: search on top, count + add button below */
  .server-toolbar__aside {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  /* Dropdown anchored to right edge of toggle */
  .action-menu__panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-width: 188px;
  }

  .server-card__actions-right {
    margin-inline-start: 0;
  }

  .server-item__actions,
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card {
    padding: 14px 16px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .meta {
    width: 100%;
  }

  .shell-nav a {
    font-size: 0.82rem;
    padding: 6px 10px;
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr;
  }
}

/* ── Nav icons ────────────────────────────────────────── */

.nav-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-inline-end: 4px;
}

/* ── Icon in buttons / headings ──────────────────────── */

.btn svg,
.page-header svg,
.card h3 svg,
h4 svg {
  display: inline-block;
  vertical-align: middle;
}

.btn svg {
  width: 16px;
  height: 16px;
}

.page-header h2 svg {
  width: 22px;
  height: 22px;
  margin-inline-end: 6px;
  vertical-align: middle;
  color: #60a5fa;
}

.card h3 svg {
  width: 18px;
  height: 18px;
  margin-inline-end: 6px;
  color: #60a5fa;
  vertical-align: middle;
}

/* ── Collapsible sections ────────────────────────────── */

.collapsible {
  overflow: hidden;
}

.collapsible__toggle {
  display: inline-flex;
  align-items: center;
  width: 100%;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: var(--fw-medium);
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease;
  text-align: start;
}

.collapsible__toggle:hover {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.08);
}

.collapsible__toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.collapsible__toggle .collapsible__icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.collapsible__content {
  max-height: none;
  overflow: hidden;
  padding-top: 4px;
  transition: max-height 0.35s ease, padding 0.3s ease, opacity 0.3s ease;
}

.collapsible__content pre,
.collapsible__content .output-block {
  margin-top: 8px;
}

/* ── Scrollable containers ───────────────────────────── */

.scrollable,
.scrollable--sm {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: auto;
}

.scrollable--sm {
  max-height: 180px;
}

.scrollable::-webkit-scrollbar,
.scrollable--sm::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollable::-webkit-scrollbar-track,
.scrollable--sm::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable::-webkit-scrollbar-thumb,
.scrollable--sm::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 3px;
}

.scrollable::-webkit-scrollbar-thumb:hover,
.scrollable--sm::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.35);
}

/* ── Loading overlay ─────────────────────────────────── */

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(148, 163, 184, 0.15);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Table alternating rows ──────────────────────────── */

.server-item:hover,
.dashboard-item:hover {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(2, 6, 23, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* ── Token list spacing ──────────────────────────────── */

.token-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}

/* ── Dashboard item enhancement ──────────────────────── */

.dashboard-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dashboard-item ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

/* ── Server card identity icon ───────────────────────── */

.server-card__name svg {
  width: 16px;
  height: 16px;
  margin-inline-end: 4px;
  color: #60a5fa;
  vertical-align: middle;
}

/* ── Icon in button / heading helper ─────────────────── */

.icon-in-button {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-inline-end: 4px;
  /* Icons are flex items inside .btn (inline-flex): never let them shrink
     when a long label squeezes the button — truncate the label instead. */
  flex-shrink: 0;
}

/* ── Load badge ──────────────────────────────────────── */

.badge--load {
  display: inline-block;
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-family: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
}

/* ════════════════════════════════════════════════════════
   Interactive enhancements (driven by /static/app.js)
   ════════════════════════════════════════════════════════ */

/* ── Top progress bar ────────────────────────────────────── */

.top-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0;
  z-index: 10000;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #8b5cf6);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
  opacity: 0;
  transition: width 0.2s ease, opacity 0.3s ease;
  pointer-events: none;
}

.top-progress.is-active {
  opacity: 1;
}

.top-progress.is-done {
  transition: width 0.25s ease, opacity 0.4s ease 0.1s;
}

/* ── Button busy state / spinners ────────────────────────── */

.btn.is-busy {
  cursor: progress;
  opacity: 0.85;
  pointer-events: none;
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: -2px;
}

/* ── Flash banner: dismiss + entrance/exit ───────────────── */

.flash-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.flash-banner.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.flash-banner p {
  flex: 1;
}

.flash-banner__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.flash-banner__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.flash-banner__close svg {
  width: 15px;
  height: 15px;
}

/* ── Copy-to-clipboard on output blocks ──────────────────── */

.output-wrap {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.85);
  color: #94a3b8;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  backdrop-filter: blur(4px);
}

.output-wrap:hover .copy-btn,
.copy-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Touch devices have no hover, so keep the copy button always visible there. */
@media (hover: none) {
  .copy-btn {
    opacity: 1;
    transform: none;
  }
}

.copy-btn:hover {
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.4);
}

.copy-btn.is-copied {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  opacity: 1;
}

.copy-btn.is-failed {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  opacity: 1;
}

.copy-btn svg {
  width: 15px;
  height: 15px;
}

/* ── Auto-refresh countdown pill ─────────────────────────── */

.refresh-countdown[hidden] {
  display: none;
}

.refresh-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: var(--fw-semibold);
  font-variant-numeric: var(--num);
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  white-space: nowrap;
}

.refresh-countdown svg {
  width: 12px;
  height: 12px;
  animation: spin 2.5s linear infinite;
}

/* ── Back-to-top button ──────────────────────────────────── */

.back-to-top {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.9);
  color: #cbd5e1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, border-color 0.15s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(96, 165, 250, 0.5);
  color: #fff;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ── Scroll-reveal entrance ──────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Refresh control row (manual + auto) ─────────────────── */

.refresh-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ── Loading overlay label ───────────────────────────────── */

.loading-overlay__label {
  color: #cbd5e1;
  font-size: 0.9rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

/* ── Live session indicator dot ──────────────────────────── */

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 4px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: live-pulse 1.6s ease-out infinite;
  vertical-align: middle;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ── Mobile: horizontally scrollable nav ─────────────────── */

@media (max-width: 700px) {
  /* The desktop tab strip is replaced by the bottom navigation bar. */
  .shell-nav {
    display: none;
  }

  .back-to-top {
    inset-inline-end: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
  }

  .copy-btn {
    opacity: 1;
    transform: none;
  }
}

/* ── Honour reduced-motion preferences ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .top-progress {
    display: none;
  }

  .btn-spinner,
  .refresh-countdown svg,
  .loading-spinner {
    animation-duration: 1.4s;
  }

  * {
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════
   Dashboard: KPI row + balanced feed/meta grids
   ════════════════════════════════════════════════════════ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 14px;
}

@media (max-width: 560px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.kpi-card:hover {
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 6px 22px rgba(59, 130, 246, 0.08);
  transform: translateY(-2px);
}

.kpi-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--accent-soft);
}

.kpi-card__icon svg {
  width: 22px;
  height: 22px;
}

.kpi-card--ok .kpi-card__icon {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.25);
  color: var(--ok);
}

.kpi-card--warn .kpi-card__icon {
  background: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.25);
  color: var(--warn);
}

.kpi-card--violet .kpi-card__icon {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
  color: #c084fc;
}

.kpi-card__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.kpi-card__value {
  font-variant-numeric: var(--num);
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kpi-card__label {
  font-size: 0.76rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

/* Two-column feed area and three-column meta area both align to the top
   so a tall card never stretches its shorter neighbours. */
.dashboard-feeds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
}

.dashboard-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 2px -6px;
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.section-heading svg {
  width: 15px;
  height: 15px;
  color: var(--accent-soft);
}

/* ── Compact metric row inside dashboard snapshot cards ──── */

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 4px;
}

.mini-metric {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mini-metric__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.mini-metric__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.mini-metric__label svg {
  width: 12px;
  height: 12px;
}

.mini-metric__value {
  font-variant-numeric: var(--num);
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  color: var(--text);
}

.mini-metric__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(2, 6, 23, 0.5);
  overflow: hidden;
}

.mini-metric__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mini-metric__fill--green { background: linear-gradient(90deg, #22c55e, #4ade80); }
.mini-metric__fill--yellow { background: linear-gradient(90deg, #eab308, #facc15); }
.mini-metric__fill--red { background: linear-gradient(90deg, #ef4444, #f87171); }

/* ── Bandwidth highlight stats (dashboard) ───────────────── */

.mini-bw-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.mini-bw-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.45);
}

.mini-bw-stat__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.67rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.mini-bw-stat__label svg {
  width: 11px;
  height: 11px;
}

.mini-bw-stat__value {
  font-variant-numeric: var(--num);
  font-size: 1.05rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
}

.mini-bw-stat--dl .mini-bw-stat__value {
  color: #38bdf8;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.55), 0 0 4px rgba(56, 189, 248, 0.3);
}

.mini-bw-stat--peak .mini-bw-stat__value {
  color: #34d399;
  text-shadow: 0 0 14px rgba(52, 211, 153, 0.55), 0 0 4px rgba(52, 211, 153, 0.3);
}

.dashboard-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dashboard-item__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dashboard-item__meta svg {
  width: 13px;
  height: 13px;
  color: var(--text-dim);
}

/* ── Status pill (job / health states) ───────────────────── */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: capitalize;
  border: 1px solid transparent;
}

.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill--ok { color: var(--ok); background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.25); }
.status-pill--warn { color: var(--warn); background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.25); }
.status-pill--crit { color: var(--crit); background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.25); }
.status-pill--idle { color: var(--text-muted); background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.2); }

/* ── Empty-state icon ────────────────────────────────────── */

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  color: var(--accent-soft);
}

.empty-state-icon svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 480px) {
  .mini-metrics {
    grid-template-columns: 1fr;
  }
}

/* ── Masked secret + reveal toggle ───────────────────────── */

.secret-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-inline-start: 6px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.4);
  color: var(--text-dim);
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.secret-toggle:hover {
  color: var(--accent-soft);
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(59, 130, 246, 0.08);
}

.secret-toggle svg {
  width: 13px;
  height: 13px;
}

code.secret-value {
  letter-spacing: 0.1em;
}

/* ════════════════════════════════════════════════════════
   Mobile navigation: hamburger, slide-in drawer, bottom bar
   (driven by /static/app.js; hidden on desktop by default)
   ════════════════════════════════════════════════════════ */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.7);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.nav-toggle:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(96, 165, 250, 0.4);
}

.nav-toggle:active {
  transform: scale(0.94);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

/* ── Slide-in drawer + backdrop ──────────────────────────── */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  z-index: 1300;
  width: min(84vw, 330px);
  display: none; /* revealed at the mobile breakpoint to avoid desktop overflow */
  flex-direction: column;
  gap: 16px;
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(185deg, #111c33 0%, #0b1120 100%);
  border-inline-start: 1px solid var(--border-strong);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
  transform: translateX(105%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.drawer__title {
  display: block;
  margin-top: 2px;
  font-size: 1.35rem;
  /* Brand wordmark (mobile drawer) — matches the header at ExtraBold. */
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #f0f9ff 0%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.4);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.drawer__close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.drawer__close svg {
  width: 18px;
  height: 18px;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 11px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: var(--fw-medium);
  transition: background 0.15s ease, color 0.15s ease;
}

.drawer__link:hover {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
}

.drawer__link.is-active {
  background: rgba(59, 130, 246, 0.14);
  color: var(--accent-soft);
}

.drawer__link svg {
  width: 20px;
  height: 20px;
}

.drawer__action {
  width: 100%;
  min-height: 46px;
}

.drawer__section {
  margin-top: auto;
  padding-top: 6px;
}

.drawer__section-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.drawer__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.drawer__meta li code {
  margin-inline-start: auto;
}

.drawer__meta svg {
  width: 15px;
  height: 15px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Language switcher lives in the bottom cluster with the session meta; the
   session section already claimed the flexible space (margin-top:auto), so this
   one hugs it rather than adding a second gap. The switcher stretches to fill
   the drawer width and centres its options for a comfortable tap target. */
.drawer__section--lang {
  margin-top: 0;
}

.drawer__section--lang .lang-switcher {
  display: flex;
  justify-content: center;
}

.drawer__logout {
  width: 100%;
  min-height: 46px;
}

/* ── Bottom navigation bar ───────────────────────────────── */

.bottom-nav {
  display: none;
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  z-index: 1100;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgba(11, 17, 32, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-strong);
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  border-radius: 12px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  transition: color 0.15s ease, background 0.15s ease;
  position: relative;
}

.bottom-nav__item svg {
  width: 22px;
  height: 22px;
  transition: transform 0.18s ease;
}

.bottom-nav__item:active svg {
  transform: scale(0.88);
}

.bottom-nav__item.is-active {
  color: var(--accent-soft);
}

.bottom-nav__item.is-active::before {
  content: '';
  position: absolute;
  top: 2px;
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent-soft);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
}

/* ── Mobile reveal + layout adjustments ──────────────────── */

@media (max-width: 700px) {
  body {
    /* prevents the iOS rubber-band white gap under the fixed bottom bar */
    background-attachment: fixed;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .drawer {
    display: flex;
  }

  .bottom-nav {
    display: flex;
    gap: 2px;
  }

  /* Leave room for the fixed bottom navigation. */
  .shell {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .shell-footer {
    margin-bottom: 8px;
  }
}

/* Lock background scroll while the drawer is open. */
body.drawer-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .drawer {
    transition: none;
  }

  .drawer-backdrop {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════
   Modal dialog (frosted backdrop; driven by /static/app.js)
   ════════════════════════════════════════════════════════ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.modal.is-open .modal__backdrop {
  opacity: 1;
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(185deg, #111c33 0%, #0b1120 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal.is-open .modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.modal__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  color: #f1f5f9;
}

.modal__title svg {
  width: 18px;
  height: 18px;
  color: var(--accent-soft);
}

.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: rgba(2, 6, 23, 0.4);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.modal__close:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
  color: #fca5a5;
}

.modal__close svg {
  width: 17px;
  height: 17px;
}

.modal__body {
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__body > form {
  display: grid;
  gap: 14px;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  .modal {
    padding: 0;
    align-items: stretch;
  }

  .modal__dialog {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border-inline-start: 0;
    border-inline-end: 0;
  }

  .modal__body {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal__backdrop,
  .modal__dialog {
    transition: none;
  }
}

/* ── Hover/focus tooltip (data-tooltip) ──────────────────── */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 60;
  padding: 6px 10px;
  border-radius: 8px;
  background: #0b1120;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════
   Shared module components (info strip, result header)
   ════════════════════════════════════════════════════════ */

/* ── Info strip ─────────────────────────────────────── */

.info-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 18px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 12px;
}

.info-strip__icon {
  width: 15px;
  height: 15px;
  color: #475569;
  flex-shrink: 0;
}

.info-strip__name {
  font-weight: var(--fw-semibold);
  font-size: 0.92rem;
  color: #f1f5f9;
}

/* Country flag badge in the server identity strip. Regional-indicator emoji
   that degrades to the ISO letters on platforms lacking flag-emoji glyphs. */
.info-strip__flag {
  font-size: 1.05rem;
  line-height: 1;
  cursor: default;
}

/* Generic flag badge next to a server name (home dashboard cards, diagnostics
   job rows). Same regional-indicator emoji with letter fallback. */
.server-flag {
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: middle;
  cursor: default;
}

.info-strip__addr {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.8rem;
  color: #475569;
}

.info-strip__actions {
  margin-inline-start: auto;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.btn--sm {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.78rem;
}

/* ── Result cards & shared header ───────────────────── */

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.07);
}

.result-header__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  color: #cbd5e1;
}

.result-header__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-exit {
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

.result-exit--ok {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

.result-exit--err {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
}

.result-duration {
  font-size: 0.75rem;
  color: #475569;
  background: transparent;
  border: none;
  padding: 0;
}

.result-message {
  font-size: 0.88rem;
  color: #94a3b8;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.result-cmd {
  margin-bottom: 10px;
}

.result-cmd code {
  font-size: 0.8rem;
  word-break: break-all;
  color: #60a5fa;
}

@media (max-width: 700px) {
  .info-strip {
    gap: 6px;
    padding: 10px 14px;
  }
  .info-strip__actions {
    width: 100%;
    margin-inline-start: 0;
  }
}

/* ════════════════════════════════════════════════════════
   Shared system/monitoring workspace components
   ════════════════════════════════════════════════════════ */

/* ── Collect workspace: 2-col layout ────────────────── */

.sys-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.sys-form__cred-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.14);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 16px;
}

.sys-form__cred-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #4ade80;
}

.sys-advanced {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}

.sys-advanced[hidden] {
  display: none;
}

.sys-form__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* ── Collection result card ─────────────────────────── */

.sys-result-card {
  border-inline-start: 3px solid rgba(148, 163, 184, 0.2);
}

.sys-result-card--ok {
  border-left-color: #22c55e;
}

.sys-result-card--error {
  border-left-color: #ef4444;
}

/* ── System responsive ───────────────────────────────── */

@media (max-width: 1000px) {
  .sys-workspace {
    grid-template-columns: 1fr;
  }
}

/* ══ Dashboard, Servers & Diagnostics enhancements ══════════ */

/* Section dividers */
.dash-section {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--accent-soft);
  margin: 0;
}

.dash-section svg {
  width: 14px;
  height: 14px;
  color: var(--accent-soft);
}

/* Key-value fact list */
.fact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.fact-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
  min-width: 0;
}

.fact-list__key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  min-width: 140px;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: var(--fw-medium);
}

.fact-list__key svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.fact-list li code {
  color: var(--accent-bright);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.82rem;
  word-break: break-all;
}

/* Server card auth-mode accent strips */
.server-card--key::before      { background: var(--ok); }
.server-card--password::before { background: var(--warn); }
.server-card--hybrid::before   { background: var(--accent-soft); }

/* ── Server status indicator ─────────────────────────── */

.server-card__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: var(--fw-medium);
  margin-top: 2px;
}

.server-status--online  { color: var(--ok); }
.server-status--stale   { color: var(--warn); }
.server-status--unknown { color: var(--text-dim); }

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

.server-status--online .status-pulse {
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse-status 2.4s ease-in-out infinite;
}

@keyframes pulse-status {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  60%  { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* KPI card — critical state */
.kpi-card--crit .kpi-card__icon {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.25);
  color: var(--crit);
}

/* Diagnostics: health-endpoint links */
.health-ep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 23, 0.3);
  font-size: 0.85rem;
}

.health-ep__label {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.health-ep code {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

.health-ep__link {
  flex-shrink: 0;
  text-decoration: none;
  color: var(--accent-soft);
  font-size: 0.78rem;
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  background: rgba(59, 130, 246, 0.06);
  transition: background 0.15s, border-color 0.15s;
}

.health-ep__link:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(96, 165, 250, 0.35);
}

.health-ep__link svg {
  width: 12px;
  height: 12px;
}

/* ── Alerts ─────────────────────────────────────────── */

.data-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
  /* Establish a containing block so the table scrolls inside the card */
  min-width: 0;
  max-width: 100%;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table thead th {
  text-align: start;
  font-weight: var(--fw-semibold);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  /* Fixed-width digits keep numeric columns aligned as rows update. */
  font-variant-numeric: var(--num);
}

.data-table tbody tr:hover td {
  background: var(--surface-2);
}

.data-table code {
  white-space: nowrap;
}

.data-table__actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.data-table__note-row td {
  padding-top: 0;
  border-bottom: 1px solid var(--border);
}

.data-table__note {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.muted {
  color: var(--text-dim);
}

.severity-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: var(--fw-semibold);
  text-transform: capitalize;
  border: 1px solid transparent;
}

.severity-badge--info {
  color: var(--accent-soft);
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.3);
}

.severity-badge--warning {
  color: var(--warn);
  background: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.3);
}

.severity-badge--critical {
  color: var(--crit);
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.35);
}

.badge--ok {
  color: var(--ok);
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.badge--warn {
  color: var(--warn);
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.3);
}

.flash-banner--warn {
  border-color: rgba(250, 204, 21, 0.35);
  background: rgba(250, 204, 21, 0.08);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
  cursor: pointer;
  user-select: none;
}

.checkbox-field input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.silence-form {
  margin-bottom: 18px;
}

.btn--danger-ghost:hover {
  color: var(--crit);
}

.silence-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.silence-quick select {
  height: 30px;
  padding: 2px 6px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}

/* ── Alerts responsive ───────────────────────────────── */

@media (max-width: 700px) {
  /* Collapse the single-card grid wrapper used on alert rule / channel forms */
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════
   Live streaming (SSE) UI: spinner, live card, reconnecting
   ════════════════════════════════════════════════════════ */

/* ── Reusable spinner (rotating arc) ─────────────────────── */

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid rgba(148, 163, 184, 0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  vertical-align: -3px;
  color: var(--accent-soft);
  animation: spin 0.6s linear infinite;
}

.spinner--sm {
  width: 13px;
  height: 13px;
  border-width: 2px;
  vertical-align: -2px;
}

.spinner--lg {
  width: 38px;
  height: 38px;
  border-width: 3px;
  vertical-align: middle;
}

/* Inside buttons / chips the spinner adopts the surrounding text colour. */
.btn .spinner,
.bulk-status .spinner {
  color: currentColor;
}

/* ── Streaming result card ───────────────────────────────── */

.stream-card {
  position: relative;
}

/* Animated border glow while output streams live. */
.stream-card.cmd-result-card--live {
  border-color: rgba(59, 130, 246, 0.35);
}

.stream-card.cmd-result-card--live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: stream-live-pulse 2s ease-in-out infinite;
}

@keyframes stream-live-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12), 0 0 12px rgba(59, 130, 246, 0.04); }
  50%      { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.38), 0 0 20px rgba(59, 130, 246, 0.16); }
}

/* Brief overlay while the EventSource connection is being established. */
.stream-connecting {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.stream-card.is-connecting .stream-connecting {
  display: flex;
}

/* Network drop: amber border + an inline "reconnecting" note on the status. */
.stream-card.is-reconnecting.cmd-result-card--live::after {
  animation: none;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.45), 0 0 16px rgba(250, 204, 21, 0.12);
}

.stream-card.is-reconnecting [data-stream-status] .live-dot {
  background: var(--warn);
}

.stream-card.is-reconnecting [data-stream-status]::after {
  content: " — reconnecting…";
  color: var(--warn);
  font-weight: var(--fw-semibold);
}

/* Completion state fades in smoothly when the done event lands. */
.stream-fade-in {
  animation: stream-fade-in 0.3s ease;
}

@keyframes stream-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

.result-message--error {
  color: var(--crit);
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 1.4s;
  }

  .stream-card.cmd-result-card--live::after,
  .stream-fade-in {
    animation: none;
  }
}

/* ── Internationalization: locale font + RTL adjustments ──────────────
   Layout mirroring is handled by logical properties throughout this
   stylesheet (margin/padding/border-inline-*, inset-inline-*, text-align
   start/end), so [dir="rtl"] flips automatically. The rules below cover the
   few cases that cannot be expressed logically — transforms and directional
   box-shadows — plus the Persian font swap. */

/* Persian uses Vazirmatn; English (and every other locale) keeps Exo 2. */
html[lang="fa"] {
  --font-ui: 'Vazirmatn', 'Exo 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* The mobile drawer parks off-screen with translateX. translateX is physical,
   so in RTL (drawer anchored to the inline-end = left edge) it must park to the
   left and its inward shadow must face the opposite way. */
[dir="rtl"] .drawer {
  transform: translateX(-105%);
  box-shadow: 18px 0 48px rgba(0, 0, 0, 0.45);
}
[dir="rtl"] .drawer.is-open {
  transform: translateX(0);
}

/* Language switcher in the header meta strip. */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 3px 6px;
}

.lang-switcher__icon {
  width: 15px;
  height: 15px;
  color: var(--text-dim);
  margin-inline-end: 2px;
}

.lang-switcher__option {
  font-size: 0.78rem;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.4;
}

.lang-switcher__option:hover {
  color: var(--text);
  background: rgba(148, 163, 184, 0.1);
}

.lang-switcher__option.is-active {
  color: #fff;
  background: var(--accent);
}

/* Pagination chevrons point in the wrong direction in RTL because the icon
   names (chevron-left/right) are physical. Flip them so prev → points right
   and next → points left, matching the RTL reading direction. */
[dir="rtl"] .pagination__nav svg {
  transform: scaleX(-1);
}

/* Numeric / code / identifier surfaces stay LTR regardless of UI direction so
   IPs, ports, durations and shell snippets read left-to-right. text-align uses
   logical start, which resolves to left inside these LTR contexts. */
[dir="rtl"] code,
[dir="rtl"] .token-list code,
[dir="rtl"] .fact-list code {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Measurement values pair a number with a Latin unit (e.g. "56 TiB",
   "2.1 GiB / 11.7 GiB", "↓ 5 ↑ 3 Mbps"). Under an RTL base direction the unit
   and number get reordered to the visually wrong "TiB 56", so every value
   surface is forced LTR + isolated, mirroring the code rule above. */
[dir="rtl"] .gauge__value,
[dir="rtl"] .gauge__detail,
[dir="rtl"] .metric-strip__value,
[dir="rtl"] .badge--load,
[dir="rtl"] .traffic-bw__value,
[dir="rtl"] .traffic-row__rx,
[dir="rtl"] .traffic-row__tx,
[dir="rtl"] .traffic-row__total,
[dir="rtl"] .mini-metric__value,
[dir="rtl"] .mini-bw-stat__value,
[dir="rtl"] .traffic-summary__value,
[dir="rtl"] .metric-badge,
[dir="rtl"] .traffic-badge {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The semicircular gauges fill from the geometric left (0%) to the right
   (100%), so their 0 / 100 scale must stay pinned that way too. Letting the
   flex row mirror under RTL swaps the labels onto the wrong ends, making a low
   reading look like it sits next to "100". */
[dir="rtl"] .gauge__scale {
  direction: ltr;
}