/* ============================================================================
   SRVCheck product styles. Loads AFTER tokens.css.

   No literal colours in this file - every value comes from a token. If you need
   a colour that does not exist yet, add it to both theme blocks in tokens.css
   rather than inlining it here.
   ========================================================================== */

/* ============================================================================
   FLEET COUNTER STRIP (dashboard)
   The scale-invariant signal. Scanning for red rows stops working at 40 firing
   of 60; "2 FIRING" reads identically at any fleet size.
   ========================================================================== */
.sc-fleet {
  display: flex; align-items: center; gap: 2.125rem; flex-wrap: wrap;
  padding: .875rem 1.125rem;
  background: var(--sc-surface); border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-sh-1);
}
.sc-fig { display: flex; flex-direction: column; gap: 1px; }
.sc-fig-value {
  font-size: 2rem; line-height: 1; font-weight: 600; letter-spacing: -.02em;
  color: var(--sc-text);
}
.sc-fig-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sc-text-3);
}
/* Red only when it is above zero. A permanent red 0 is noise. */
.sc-fig.is-firing .sc-fig-value { color: var(--sc-fire-ink); }
.sc-fleet-sep { width: 1px; align-self: stretch; background: var(--sc-line); }
.sc-fleet-meta { font-size: .8125rem; color: var(--sc-text-2); }
.sc-fleet-right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }

/* ============================================================================
   STATUS DOTS - four states, distinguishable by FORM, not hue alone
   ========================================================================== */
.status-dot { width: .58rem; height: .58rem; border-radius: 50%; display: inline-block; flex: none; }
.status-online  { background: var(--sc-ok);   box-shadow: var(--sc-halo-ok); }
.status-firing  { background: var(--sc-fire); box-shadow: var(--sc-halo-fire); }
/* half-filled: reads as "paused", not "broken" */
.status-maint {
  background: linear-gradient(90deg, var(--sc-warn) 50%, transparent 50%);
  border: 1.5px solid var(--sc-warn); box-shadow: var(--sc-halo-warn);
}
/* hollow ring: absence of data, deliberately NOT red - red means a rule fired */
.status-offline { background: transparent; border: 2px solid var(--sc-off); }

/* ============================================================================
   SERVER LIST
   ========================================================================== */
.server-row { cursor: pointer; }
.server-row:focus-visible { outline: 2px solid var(--sc-accent-ink); outline-offset: -2px; }

/* FIRING carries on four independent channels: the rail (position), the tint
   (colour), the name weight (typography) and the word itself (text).
   The tint alone measures ~1.10:1 - almost invisible ON PURPOSE, because a
   saturated red row is unreadable. THE RAIL, DOT AND PILL ARE LOAD-BEARING:
   removing any one of them silently destroys the most important signal in this
   product. Bootstrap paints cell state with an inset box-shadow, so the tint
   drives its variable rather than fighting it; the rail is a pseudo-element so
   that hover cannot paint over it. */
.server-row.is-firing > td { --bs-table-bg-state: var(--sc-fire-tint); }
/* Bootstrap's .table-hover > tbody > tr:hover > * out-specifies the rule above
   and its hover colour is OPAQUE here, so without this the firing tint vanished
   entirely on hover — the normal reading mode, since the row is clickable. The
   row still gets hover feedback, just in its own colour. */
.table-hover > tbody > tr.server-row.is-firing:hover > td {
  --bs-table-bg-state: var(--sc-fire-tint-hover);
}
.server-row.is-firing > td:first-child { position: relative; }
.server-row.is-firing > td:first-child::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sc-fire);
}
.server-row.is-firing .srv-name { font-weight: 600; }

.srv-name { font-weight: 550; letter-spacing: -.003em; color: var(--sc-text); }
.srv-sub { color: var(--sc-text-3); font-size: .75rem; margin-top: 2px; }
.srv-val { font-variant-numeric: tabular-nums lining-nums; }

/* Meters as one grid so CPU, RAM and NET share the same columns. This markup
   is what lets the whole system avoid !important on .d-flex. */
.usage-row {
  display: grid; grid-template-columns: 32px 1fr 44px;
  align-items: center; gap: 3px .5rem;
}
.usage-row .srv-metric-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sc-text-3);
}
.usage-row .srv-metric-val {
  text-align: right; font-size: .8125rem; font-weight: 550;
  font-variant-numeric: tabular-nums lining-nums; color: var(--sc-text);
}
/* The deliberate overrule of "no chip behind amber": amber that passes contrast
   on white is brown, and brown text in a grey field reads as disabled. The
   warning tier is the mechanism that lets an operator act before a page-out. */
.usage-row .srv-metric-val[data-level="warn"] {
  background: var(--sc-warn-tint); color: var(--sc-warn-ink);
  border: 1px solid var(--sc-warn-line); border-radius: var(--sc-r-xs);
  padding: 0 4px; margin-right: -4px;
}
.usage-row .srv-metric-val[data-level="crit"] { color: var(--sc-fire-ink); }
.usage-row .srv-net { grid-column: 2 / 4; font-size: .8125rem; color: var(--sc-text-2); }
.srv-usage-col { width: 26%; }

/* Meter fills. Healthy is NEUTRAL graphite - colour means a threshold breach
   and nothing else, so a screen of healthy servers has no saturated pixels. */
.mini-bar { height: 6px; }
.progress-bar[data-level="ok"]   { background-color: var(--sc-meter-ok); }
.progress-bar[data-level="warn"] { background-color: var(--sc-meter-warn); }
.progress-bar[data-level="crit"] { background-color: var(--sc-meter-crit); }

/* Row actions: ghost, always visible, always tabbable. Hover-reveal is
   hierarchy from concealment and it breaks keyboard and touch.
   This class must stay on a plain div inside the td (see dashboard.php):
   on the td itself, display:flex replaces display:table-cell and the cell
   no longer stretches to the row height. */
.srv-actions { display: flex; gap: 2px; justify-content: flex-end; }
.srv-actions .btn {
  --bs-btn-padding-x: 0; --bs-btn-padding-y: 0;
  --bs-btn-border-color: transparent; --bs-btn-bg: transparent;
  --bs-btn-color: var(--sc-text-3);
  --bs-btn-hover-bg: var(--sc-surface-3); --bs-btn-hover-color: var(--sc-text);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--sc-surface-3); --bs-btn-active-border-color: transparent;
  width: 1.65rem; height: 1.65rem; font-size: .8125rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; border-radius: var(--sc-r-sm);
}
/* A taller hit area without a taller row. Horizontal growth is capped at the
   2px gap: at -7px all round, each button's pseudo-element reached 5px INSIDE
   its left neighbour and, painting later, won the hit test — so the right edge
   of Rename silently fired Maintenance, and the right edge of Maintenance
   opened the Delete confirm. */
.srv-actions .btn::before { content: ""; position: absolute; inset: -7px -1px; }
.srv-actions form { display: inline-flex; }
.srv-actions .btn-outline-danger:hover { --bs-btn-hover-bg: var(--sc-fire); --bs-btn-hover-color: #fff; }

.srv-empty {
  border: 1.5px dashed var(--sc-line-strong); border-radius: var(--sc-r-xl);
  padding: 3.5rem 1rem; text-align: center; background: var(--sc-surface);
}
.srv-empty-title { font-weight: 600; margin-bottom: .25rem; color: var(--sc-text); }

/* ============================================================================
   COMMAND / SECRET BLOCKS - deliberately dark in BOTH themes: this is a
   terminal, and it should look like one wherever it appears.
   ========================================================================== */
pre.install-cmd {
  background: var(--sc-term-bg); color: var(--sc-term-accent);
  padding: .8rem .9rem; border-radius: var(--sc-r-md);
  border: 1px solid var(--sc-term-line);
  user-select: all; white-space: pre-wrap; word-break: break-all;
  margin-bottom: 0; font-size: .8125rem; line-height: 1.6;
}
.secret-once {
  font-family: var(--sc-font-mono); background: var(--sc-term-bg); color: var(--sc-term-fg);
  border: 1px solid var(--sc-term-line); border-radius: var(--sc-r-md);
  padding: .6rem .8rem; user-select: all; word-break: break-all; font-size: .8125rem;
}

/* ============================================================================
   SERVER DETAIL
   ========================================================================== */
#serverModal .modal-dialog { max-width: 1100px; }
.sysinfo-grid > div {
  font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sysinfo-grid small {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sc-text-3);
}

/* --- incident panel ------------------------------------------------------
   One panel, not N stacked boxes each restating "Firing:". Columns are tabular
   so two alerts compare down the page instead of reading as two paragraphs. */
.sc-incidents {
  background: var(--sc-surface); border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-sh-1); overflow: hidden; position: relative;
}
.sc-incidents::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sc-fire);
}
.sc-incidents-head {
  margin: 0;                    /* it is an <h2>, so the UA margin has to go */
  background: var(--sc-fire-tint); color: var(--sc-fire-ink);
  padding: .5rem 1.125rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--sc-fire-line);
}
.sc-incident {
  display: grid; align-items: baseline; gap: .25rem 1rem;
  grid-template-columns: minmax(9rem, 1fr) auto auto auto auto;
  padding: .5rem 1.125rem; font-size: .8125rem;
  border-bottom: 1px solid var(--sc-line);
}
.sc-incident:last-child { border-bottom: 0; }
.sc-incident-name { font-weight: 550; color: var(--sc-text); }
.sc-incident-val {
  font-variant-numeric: tabular-nums lining-nums; font-weight: 600;
  color: var(--sc-fire-ink); text-align: right; min-width: 4.5rem;
}
.sc-incident-vs, .sc-incident-for, .sc-incident-since {
  color: var(--sc-text-3); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.sc-incident-detail { grid-column: 1 / -1; color: var(--sc-text-2); font-size: .75rem; }

/* --- vitals strip --------------------------------------------------------- */
.sc-vitals {
  display: grid; gap: 1rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, max-content));
}
.sc-vital { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-vital-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sc-text-3);
}
.sc-vital-value {
  font-size: 1.0625rem; font-weight: 550; color: var(--sc-text); white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.sc-vitals-meta {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--sc-line);
  font-size: .8125rem; color: var(--sc-text-2);
}
.sc-vitals-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-vitals-meta .sc-caption { margin-right: .25rem; }

/* --- rule bay -------------------------------------------------------------
   A tinted, full-bleed footer inside the card, so every card reads the same
   way: header, telemetry, configuration. Replaces six <hr> separators. */
.rule-bay {
  margin: 1.125rem -1.125rem 0;
  padding: .875rem 1.125rem .5rem;
  background: var(--sc-surface-2);
  border-top: 1px solid var(--sc-line);
}
/* Only a bay that IS the last child may bleed into the card's bottom corners.
   The RAM and network cards put a trailing note after theirs, and a negative
   bottom margin there pulled that sentence up over the last threshold row. */
.rule-bay:last-child {
  margin-bottom: -1.125rem;
  border-radius: 0 0 var(--sc-r-lg) var(--sc-r-lg);
}
.rule-bay + small, .rule-bay + .small { display: block; margin-top: .75rem; }
.threshold-form { margin-bottom: .5rem; }
.rule-bay .threshold-form:last-of-type { margin-bottom: .25rem; }

/* --- segmented range control ---------------------------------------------- */
.range-group {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--sc-surface-3); border-radius: var(--sc-r-sm);
}
.range-btn {
  appearance: none; border: 0; background: transparent; color: var(--sc-text-3);
  font: inherit; font-size: .75rem; font-weight: 550; line-height: 1.4;
  padding: .2rem .55rem; border-radius: var(--sc-r-xs); cursor: pointer;
  transition: background-color var(--sc-d2) var(--sc-ease), color var(--sc-d2) var(--sc-ease);
}
.range-btn:hover { color: var(--sc-text); }
.range-btn.active { background: var(--sc-surface); color: var(--sc-text); box-shadow: var(--sc-sh-1); }
.range-btn:focus-visible { outline: 2px solid var(--sc-accent-ink); outline-offset: 1px; }

/* --- chart stats table ----------------------------------------------------
   This is also the chart's legend, which is why legend.display is false. */
.chart-stats { width: auto; border-collapse: collapse; font-size: .75rem; margin-top: .6rem; }
.chart-stats th {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sc-text-3); padding: .15rem .75rem .15rem 0; text-align: left; font-weight: 600;
}
.chart-stats td { padding: .15rem .75rem .15rem 0; color: var(--sc-text-2); }
.chart-stats td:first-child { color: var(--sc-text); }
.chart-stats .num {
  text-align: right; font-family: var(--sc-font-mono);
  font-variant-numeric: tabular-nums; padding-right: 1.25rem;
}
.chart-swatch {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: .45rem; vertical-align: baseline;
}

/* --- theme toggle ---------------------------------------------------------
   Shows the theme you would move TO, not the one you are on: the control is a
   verb. Driven purely by the data-bs-theme attribute the <head> script sets, so
   it is correct on first paint with no JS involved in rendering it. */
.theme-toggle { line-height: 1; padding-inline: .5rem; }
.theme-toggle .bi { font-size: .9rem; vertical-align: -1px; }
[data-bs-theme="light"] .theme-icon-to-light,
[data-bs-theme="dark"]  .theme-icon-to-dark { display: none; }
/* With scripting disabled the head script never runs and no data-bs-theme is
   set, so neither rule above matches and both icons would render. */
html:not([data-bs-theme]) .theme-icon-to-light { display: none; }

/* --- interface rows ------------------------------------------------------- */
.iface-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem; margin: 0 -.5rem .25rem;
  border-radius: var(--sc-r-sm);
}
.iface-row .form-check-label { font-weight: 500; color: var(--sc-text); }
.iface-row.is-off { background: var(--sc-surface-3); }
.iface-row.is-off .form-check-label { color: var(--sc-text-3); font-weight: 400; }

/* ============================================================================
   PRICING
   ========================================================================== */
.plan-card { height: 100%; }
.plan-card.plan-current { box-shadow: var(--sc-sh-1), 0 0 0 2px var(--sc-accent); }
.plan-price { font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.plan-features { list-style: none; padding-left: 0; margin-bottom: 0; }
.plan-features li { padding: .35rem 0; border-bottom: 1px solid var(--sc-line); font-size: .875rem; }
.plan-features li:last-child { border-bottom: 0; }

/* First column stays put while the plan columns scroll on narrow screens. */
.compare-table th, .compare-table td { white-space: nowrap; vertical-align: middle; }
.compare-table tbody th[scope="row"] { font-weight: 500; }
.compare-table .plan-col-current { background: var(--sc-accent-tint); }

/* ============================================================================
   MARKETING + AUTH
   ========================================================================== */
.hero { padding: 4.5rem 0 3.5rem; }
.hero h1 { font-weight: 700; letter-spacing: -.024em; text-wrap: balance; }
.feature-icon {
  width: 2.4rem; height: 2.4rem; border-radius: var(--sc-r-md); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-accent-tint); color: var(--sc-accent-ink); font-size: 1.15rem;
}
.step-num {
  width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-accent); color: var(--sc-surface); font-weight: 700;
}
[data-bs-theme="dark"] .step-num { color: #fff; }
.site-footer {
  border-top: 1px solid var(--sc-line); margin-top: 4rem; padding-top: 1.5rem;
  color: var(--sc-text-3); font-size: .875rem;
}
.chrome-public section > p, .chrome-public .card-body > p { max-width: 68ch; }

.auth-wrap { max-width: 26rem; margin: 1.5rem auto 0; }
.auth-brand { font-weight: 700; font-size: 1.2rem; color: var(--sc-text); text-decoration: none; }
.auth-brand:hover { color: var(--sc-accent-ink); }

@media (max-width: 575.98px) {
  .srv-add { width: 100%; }
  .srv-add .form-control { flex: 1; }
  .sc-fleet { gap: 1.25rem; }
  .sc-fleet-sep { display: none; }
  .sc-fleet-right { margin-left: 0; width: 100%; }
}

/* A destructive dropdown entry. Red on hover only — at rest it must not spend
   the colour budget, and .text-danger is !important so it would also have
   overridden Bootstrap's disabled colour, making a blocked action look live. */
.dropdown-item.sc-item-danger:hover,
.dropdown-item.sc-item-danger:focus {
  background: var(--sc-fire-tint);
  color: var(--sc-fire-ink);
}

/* The auth chrome has no navbar to hang the theme control on. */
.auth-theme-toggle { position: absolute; top: 1rem; right: 1rem; z-index: 5; }

/* --- "by ExtraVM" lockup beside the site name ------------------------------
   The wordmark ships in two artwork variants: extravm-dark.svg is light
   artwork FOR dark backgrounds, extravm-light.svg navy artwork FOR light.
   Both navbars are dark in both themes, so they always carry the dark variant;
   the auth pages sit on the themed body background and swap two images via
   [data-bs-theme] — never prefers-color-scheme (tokens.css rule 1). Fixed
   image height, so the lockup adds width to the brand but never height. */
.brand-by {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 500; letter-spacing: .02em;
}
.brand-by img { height: 12px; width: auto; display: block; position: relative; top: 2px; }
/* Phone screens render the same glyphs a touch lower — drop the desktop nudge. */
@media (max-width: 991.98px) {
  .brand-by img { top: 0; }
}
.navbar .brand-by { color: var(--sc-nav-fg-muted); }
.auth-brand .brand-by { color: var(--sc-text-3); font-size: .78rem; }
.brand-by .brand-for-dark { display: none; }
[data-bs-theme="dark"] .brand-by .brand-for-light { display: none; }
[data-bs-theme="dark"] .brand-by .brand-for-dark { display: block; }