/* ============================================================
   TrackThatPing design system — "Instrument"
   ------------------------------------------------------------
   One rule governs this file: COLOUR MEANS SOMETHING.

   The interface chrome is achromatic. Navigation, buttons, focus
   rings, links, hovers and borders are all white-through-graphite,
   so nothing decorative competes for attention. The only saturated
   colour a user ever sees is carrying information:

     --up / --warn / --down / --info / --idle   operational state
     --series-1..6                              series identity in charts

   That is what makes a red row visible from across the room, and it
   is the way out of the squeeze that pushes every other monitoring
   product to a violet accent: green, amber and red are already spoken
   for by status, so most brands flee to a hue that means nothing.
   This one simply stops painting the chrome.

   Practical consequences, if you extend this file:
   - `--brand` is a NEUTRAL. It is near-white on dark, near-black on
     light. Never give it a hue.
   - A link cannot be identified by colour here, so links carry an
     underline instead. See the `:where(a)` rule below.
   - Reach for a status token only when the thing genuinely has that
     state. Tinting a panel "info blue" because it looks nice spends
     the one signal this design has.

   Everything the UI paints resolves to a token below, so the light
   theme is a value swap at the bottom of this file rather than a
   per-selector override sheet.
   ============================================================ */
:root {
  color-scheme: dark;

  /* --- Canvas & surfaces --- */
  --canvas: #0A0A0B;          /* page ground */
  --surface: #131315;         /* cards, panels, sidebar, header */
  --surface-raised: #1B1B1F;  /* menus, modals, popovers */
  --fill: #1A1A1D;            /* inputs, wells, table headers */
  --fill-subtle: #151517;     /* list rows, quiet chips */
  --fill-hover: #232328;      /* hover state for the above */

  /* --- Lines --- */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --line-heavy: rgba(255, 255, 255, 0.28);
  --scrim: rgba(0, 0, 0, 0.70);

  /* --- Text --- */
  --text: #FAFAFA;
  --text-muted: #B4B4BA;
  /* Micro-labels are small, mono and tracked, so this has to clear 4.5:1
     against --surface (#131315), not just against the page ground —
     the sidebar and card headers are the tighter case. */
  --text-subtle: #85858E;
  --text-on-brand: #0A0A0B;   /* dark ink on the white primary fill */

  /* --- Brand: achromatic ---
     Deliberately hueless. The primary action is a white chip on a
     black canvas: it outranks everything without borrowing a colour
     that status needs. */
  --brand: #FAFAFA;
  --brand-rgb: 250, 250, 250;
  --brand-hover: #FFFFFF;
  --brand-press: #D4D4D8;
  --brand-soft: rgba(255, 255, 255, 0.09);
  --brand-line: rgba(255, 255, 255, 0.24);
  --brand-text: #FAFAFA;

  /* --- Status ---
     The bare token fills dots, bars and chart strokes; `-text` is the
     contrast-corrected variant for type on the current canvas. These
     are the loudest things in the product, and that is intentional. */
  --up: #2FBF71;
  --up-rgb: 47, 191, 113;
  --up-text: #3FCF7F;
  --up-soft: rgba(47, 191, 113, 0.14);
  --warn: #E8A33D;
  --warn-rgb: 232, 163, 61;
  --warn-text: #F0B247;
  --warn-soft: rgba(232, 163, 61, 0.15);
  --down: #E5484D;
  --down-rgb: 229, 72, 77;
  --down-text: #FF6B70;
  --down-soft: rgba(229, 72, 77, 0.16);
  --info: #4C9BE8;
  --info-rgb: 76, 155, 232;
  --info-text: #7FBBF5;
  --info-soft: rgba(76, 155, 232, 0.14);
  --idle: #8B8B95;            /* paused / waiting / unknown */
  --idle-rgb: 139, 139, 149;
  --idle-text: #A6A6AF;
  --idle-soft: rgba(139, 139, 149, 0.14);

  /* --- Chart series ---
     The one place chroma is spent on identity rather than state, so
     the ramp deliberately avoids the status hues: no green, amber or
     red appears here, and a latency line therefore can never be
     misread as "healthy" or "down". Slots are assigned in fixed order
     and never cycled, so an agent keeps its colour when the series
     list changes. Keep adjacent slots separable under protan/deutan
     simulation before editing one. */
  --series-1: #4C9BE8;   /* blue      — also the lone-series default */
  --series-2: #17BEBB;   /* teal      */
  --series-3: #9B7DF5;   /* violet    */
  --series-4: #E45DA8;   /* magenta   */
  --series-5: #5F86D6;   /* indigo    */
  --series-6: #93A1B5;   /* steel     */
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-axis: #8A8A93;

  /* --- Type --- */
  --font-sans: 'Manrope', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* --- Radii: tight, so the UI reads as instrumentation rather than
     as a consumer app --- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* --- Elevation: shadows carry depth, not glow --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);

  /* --- Micro-label ---
     The signature typographic move: every small label in the product
     (table headers, stat captions, nav group titles, meta) is mono,
     uppercase and widely tracked, so structure reads as an instrument
     panel and the proportional sans is reserved for real content. */
  --label-font: var(--font-mono);
  --label-size: 0.66rem;
  --label-track: 0.14em;
  --label-weight: 500;

  /* --- Legacy aliases ---
     Older rules (and a few inline styles) still reference these
     names. They resolve to the tokens above so there is exactly one
     place to change a colour. Prefer the semantic names in new CSS.
     Note that the two "accent" names are now neutral: anything that
     needed them to mean a state has been moved onto a status token. */
  --bg-primary: var(--canvas);
  --bg-secondary: var(--fill);
  --bg-tertiary: var(--surface-raised);
  --bg-card: var(--surface);
  --border-color: var(--line);
  --border-hover: var(--line-strong);
  --text-main: var(--text);
  --text-dark: var(--text-subtle);
  --accent-cyan: var(--brand);
  --accent-cyan-rgb: var(--brand-rgb);
  --accent-purple: var(--brand);
  --accent-purple-rgb: var(--brand-rgb);
  --accent-green: var(--up-text);
  --accent-green-rgb: var(--up-rgb);
  --accent-red: var(--down-text);
  --accent-red-rgb: var(--down-rgb);
  --accent-yellow: var(--warn-text);
  --accent-yellow-rgb: var(--warn-rgb);
  --font-outfit: var(--font-sans);
  /* Instrument has no frosted glass; neutralising the token retires
     every `backdrop-filter: var(--glass-blur)` still in this file. */
  --glass-blur: none;
  --shadow-glow: var(--shadow-md);
}

/* --- Light theme -------------------------------------------------
   The same design inverted, not a different one: chrome stays
   achromatic (the primary action becomes near-black ink on paper)
   and status keeps its monopoly on colour. Only token values change
   here — no component in this file needs a light-mode special case. */
html[data-app-theme="light"] {
  color-scheme: light;

  --canvas: #F6F6F5;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --fill: #FAFAFA;
  --fill-subtle: #F4F4F3;
  --fill-hover: #ECECEA;

  --line: rgba(24, 24, 27, 0.12);
  --line-strong: rgba(24, 24, 27, 0.20);
  --line-heavy: rgba(24, 24, 27, 0.32);
  --scrim: rgba(24, 24, 27, 0.42);

  --text: #18181B;
  --text-muted: #52525B;
  /* Same 4.5:1 rule as dark, measured against --fill-hover, the lightest
     surface a micro-label ever lands on. */
  --text-subtle: #64646D;
  --text-on-brand: #FAFAFA;   /* paper on the near-black primary fill */

  --brand: #18181B;
  --brand-rgb: 24, 24, 27;
  --brand-hover: #000000;
  --brand-press: #3F3F46;
  --brand-soft: rgba(24, 24, 27, 0.07);
  --brand-line: rgba(24, 24, 27, 0.24);
  --brand-text: #18181B;

  --up: #1A9E5F;
  --up-text: #137F4B;
  --up-soft: rgba(26, 158, 95, 0.13);
  --warn: #C2820F;
  --warn-text: #91580A;
  --warn-soft: rgba(232, 163, 61, 0.18);
  --down: #D33A3F;
  --down-text: #BE2429;
  --down-soft: rgba(211, 58, 63, 0.12);
  --info: #2F7FD0;
  --info-text: #1C63A8;
  --info-soft: rgba(76, 155, 232, 0.13);
  --idle-text: #6A6A73;
  --idle-soft: rgba(139, 139, 149, 0.14);

  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06);
  --shadow-md: 0 4px 12px rgba(24, 24, 27, 0.08);
  --shadow-lg: 0 16px 40px rgba(24, 24, 27, 0.12);

  /* Same six identity hues, re-stepped for the light chart surface. */
  --series-1: #2F7FD0;
  --series-2: #0E8F8C;
  --series-3: #6D4FD8;
  --series-4: #C43C86;
  --series-5: #3F63B8;
  --series-6: #64748B;
  --chart-grid: rgba(24, 24, 27, 0.09);
  --chart-axis: #64646D;
}

/* Held for one frame while the theme flips; see applyResolvedTheme(). */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--canvas);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-feature-settings: 'cv11', 'ss01';
}

/* Numbers are the payload of this product: keep every figure the same
   width so columns of latency and uptime stay readable as they tick. */
.stat-value,
.latency-value,
.card-stat-value,
.detail-stat-value,
.monitor-table td,
.uptime-value,
code,
kbd,
[class*='-mono'] {
  font-variant-numeric: tabular-nums;
}

/* Chrome is achromatic, so colour can no longer mark a link. The
   underline does that job instead — quiet at rest, solid on hover.
   Elements that only happen to be anchors (buttons, the skip link)
   opt out, since their shape already says they are actionable. */
:where(a) {
  color: var(--brand-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-heavy);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s ease;
}

:where(a):hover {
  text-decoration-color: currentColor;
}

:where(a).btn,
:where(a).skip-link,
:where(a).section-tab,
:where(a)[role="button"],
:where(a):has(> .btn) {
  text-decoration: none;
}

/* One focus treatment everywhere, keyboard-only, always visible
   against both themes. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================
   Application shell
   ------------------------------------------------------------
   A fixed left rail owns identity and navigation so the content
   column keeps its full width for the wide tables this product is
   really made of. The rail scrolls its own overflow; the workspace
   column scrolls with the page.
   ============================================================ */
:root {
  --sidebar-w: 250px;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  flex: 1;
  width: 100%;
  min-height: 100vh;
}

/* Only the admin route has navigation, so the rail is opt-in. */
.app-sidebar {
  display: none;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.15rem 0.85rem 1rem;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

body.route-admin .app-sidebar.admin-only {
  display: flex;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.15rem 0.5rem 0.2rem;
}

.brand-mark {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  color: var(--brand);
}

.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-text {
  min-width: 0;
}

.brand-text strong {
  display: block;
  font-size: 0.97rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
}

.brand-text small {
  display: block;
  margin-top: 0.05rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

/* Live-stream indicator: this is a monitoring console, so whether the
   event stream is actually connected is operational information, not
   decoration. app.js drives data-state. */
.stream-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}

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

.stream-status[data-state="live"] {
  color: var(--text-muted);
}

.stream-status[data-state="live"] .stream-dot {
  background: var(--up);
  animation: stream-pulse 2.6s ease-in-out infinite;
}

.stream-status[data-state="down"] {
  color: var(--down-text);
}

.stream-status[data-state="down"] .stream-dot {
  background: var(--down);
}

@keyframes stream-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--up-soft); }
  50% { box-shadow: 0 0 0 4px var(--up-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .stream-status[data-state="live"] .stream-dot { animation: none; }
}

/* --- Workspace column --- */
.app-workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: 3.9rem;
  padding: 0.6rem clamp(1rem, 2.2vw, 1.75rem);
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

/* The drawer toggle only exists below 900px. It needs the !important to
   outrank the blanket `body.route-admin button.admin-only` route rule. */
.mobile-nav-toggle,
body.route-admin .mobile-nav-toggle.admin-only {
  display: none !important;
}

.mobile-nav-toggle {
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--fill);
  color: var(--text-muted);
  cursor: pointer;
}

.app-container {
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
  padding: 1.35rem clamp(1rem, 2.2vw, 1.75rem) 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  padding: 0.6rem 1rem;
  background: var(--brand);
  color: var(--text-on-brand);
  border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.actions-area,
.workspace-switcher {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.workspace-switcher select {
  min-width: 180px;
  max-width: 260px;
}

.workspace-switcher .btn {
  padding-inline: 0.8rem;
}

/* --- Buttons ---
   One filled brand action per view, everything else quiet. Flat fills
   and a 1px edge: no gradient, no lift on hover, so a page full of
   controls does not compete with the data. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-brand);
}

.btn-primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

.btn-primary:active {
  background: var(--brand-press);
  border-color: var(--brand-press);
}

.btn-secondary {
  background-color: var(--fill);
  border-color: var(--line-strong);
  color: var(--text);
}

.btn-secondary:hover {
  background-color: var(--fill-hover);
  border-color: var(--line-heavy);
}

.btn-large {
  min-height: 2.75rem;
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
}

/* Dashboard Overview Cards */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease;
}

.stat-card:hover {
  border-color: var(--line-strong);
}

.stat-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background-color: var(--fill);
  border: 1px solid var(--line);
}

/* The tile icon carries the state it counts: a red "offline" tile is
   readable across the room, which is the point of an overview strip. */
.icon-total { color: var(--text-subtle); }
.icon-active { color: var(--up-text); }
.icon-down { color: var(--down-text); }
.icon-ssl { color: var(--warn-text); }


.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Monitors Grid */
.monitors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.5rem;
}

/* Monitor Card */
.monitor-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: var(--shadow-lg);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.monitor-card:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
}

.monitor-card:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
  border-color: var(--brand-line);
}

.monitor-card.offline {
  border-color: var(--down-soft);
}

.monitor-card.offline:hover {
  box-shadow: 0 0 20px var(--down-soft), var(--shadow-lg);
  border-color: var(--down-soft);
}

/* Card Header */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.host-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 60%;
}

.host-name {
  font-weight: 600;
  font-size: 1.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.host-address {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.protocol-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--r-sm);
  background-color: var(--fill);
  color: var(--text-subtle);
  width: fit-content;
  margin-top: 0.25rem;
  border: 1px solid var(--line);
}

/* --- Status ---
   Down is the only state that animates. A room full of pulsing green
   dots is noise; motion should mean "look here". */
.status-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--fill);
  border: 1px solid var(--line);
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.73rem;
  font-weight: 600;
}

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  position: relative;
  flex: 0 0 0.5rem;
}

.status-dot.online {
  background-color: var(--up);
}

.status-dot.offline {
  background-color: var(--down);
}

.status-dot.offline::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  background-color: var(--down);
  animation: pulse-ring 1.6s infinite ease-out;
}

.status-dot.paused {
  background-color: var(--idle);
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Card Latency Panel */
.latency-panel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
}

.latency-value {
  font-family: var(--font-mono);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.latency-value.online {
  color: var(--text);
}
.latency-value.offline {
  color: var(--down-text);
}
.latency-value.paused {
  color: var(--text-subtle);
}

.latency-unit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

.last-ping-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-sm);
}
.status-badge-ok {
  background-color: var(--up-soft);
  color: var(--accent-green);
}
.status-badge-fail {
  background-color: var(--down-soft);
  color: var(--accent-red);
}

/* Sparkline Chart */
.sparkline-container {
  height: 60px;
  position: relative;
  width: 100%;
}

/* Stats Row */
.card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  background-color: var(--fill);
  border-radius: var(--r-md);
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--line);
}

.card-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}

.card-stat-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
}

/* SSL Banner */
.ssl-panel {
  border-top: 1px dashed var(--border-color);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ssl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ssl-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ssl-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: var(--r-sm);
  text-transform: uppercase;
}

.ssl-valid {
  background-color: var(--up-soft);
  color: var(--accent-green);
}

.ssl-warning {
  background-color: var(--warn-soft);
  color: var(--accent-yellow);
}

.ssl-danger {
  background-color: var(--down-soft);
  color: var(--accent-red);
}

.ssl-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.ssl-detail-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ssl-detail-item span {
  font-weight: 500;
  color: var(--text-main);
}

/* Card Actions */
.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  padding-top: 0.75rem;
}

.btn-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--r-sm);
  background-color: var(--fill-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8rem;
}

.btn-icon:hover {
  background-color: var(--fill-hover);
  color: var(--text-main);
  border-color: var(--border-hover);
}

.btn-icon.btn-edit:hover {
  color: var(--accent-purple);
  border-color: var(--brand-line);
}

.btn-icon.btn-embed:hover {
  color: var(--accent-cyan);
  border-color: var(--brand-line);
}

.btn-icon.btn-pause:hover {
  color: var(--accent-cyan);
  border-color: var(--brand-line);
}

.btn-icon.btn-reset:hover {
  color: var(--accent-yellow);
  border-color: var(--warn-soft);
}

.btn-icon.btn-delete:hover {
  background-color: var(--down-soft);
  color: var(--accent-red);
  border-color: var(--down-soft);
}

/* Empty State */
.empty-state {
  text-align: center;
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 4rem 2rem;
  max-width: 500px;
  margin: 4rem auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.empty-illustration {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--fill);
  color: var(--text-subtle);
  font-size: 1.35rem;
}

.empty-state h3 {
  font-size: 1.35rem;
  font-weight: 600;
}

.empty-state p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1.5rem;
  animation: fade-in 0.2s ease;
}

.modal-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  max-width: 500px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: scale-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-container-wide {
  max-width: 720px;
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
}

.modal-container-wide form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-container-wide .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.bulk-import-textarea {
  min-height: 220px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: pre;
}

.bulk-import-status {
  padding: 0.8rem 1rem;
  border: 1px solid var(--up-soft);
  border-radius: var(--r-md);
  color: var(--up-text);
  background: var(--up-soft);
  white-space: pre-line;
}

.bulk-import-status.is-error {
  color: var(--down-text);
  border-color: var(--down-soft);
  background: var(--down-soft);
}

.custom-alert-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--warn-soft);
  border-radius: var(--r-md);
  background: var(--warn-soft);
}

.custom-alert-fields[hidden] {
  display: none;
}

.custom-alert-tag {
  color: var(--warn-text);
  border-color: var(--warn-soft);
  background: var(--warn-soft);
}

.info-callout code {
  font-family: var(--font-mono);
  color: var(--text);
}

.dashboard-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.dashboard-summary-panel { min-height: 15rem; }
.dashboard-attention-list, .dashboard-status-list { display: grid; gap: .6rem; }
.attention-row, .dashboard-status-row { display: flex; align-items: center; gap: .65rem; padding: .75rem; border: 1px solid var(--border-color); border-radius: var(--r-md); background: var(--fill-subtle); }
.attention-row small { margin-left: auto; color: var(--text-muted); }.attention-row.is-down i { color: var(--accent-red); }.attention-row.is-warning i { color: var(--accent-yellow); }.dashboard-status-row strong { margin-left: auto; font-family: var(--font-mono); }
.view-switcher { display: inline-flex; padding: .22rem; border: 1px solid var(--border-color); border-radius: var(--r-md); background: var(--fill); }.view-toggle { border: 0; border-radius: var(--r-md); padding: .48rem .7rem; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: .82rem; }.view-toggle.is-active { background: var(--brand-soft); color: var(--text-main); }
.monitor-list-toolbar { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin: 0 0 1.25rem; padding: .85rem; border: 1px solid var(--border-color); border-radius: var(--r-lg); background: var(--fill); }
.monitor-list-toolbar label { display: grid; gap: .3rem; min-width: 10rem; color: var(--text-muted); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.monitor-list-toolbar label.monitor-search { position: relative; flex: 1 1 16rem; min-width: 14rem; }
.monitor-list-toolbar .monitor-search i { position: absolute; left: .8rem; bottom: .72rem; color: var(--text-muted); pointer-events: none; }
.monitor-list-toolbar input, .monitor-list-toolbar select { min-height: 2.5rem; margin: 0; padding: .58rem .7rem; border: 1px solid var(--border-color); border-radius: var(--r-md); background: var(--fill); color: var(--text-main); font: inherit; font-size: .82rem; letter-spacing: normal; text-transform: none; }
.monitor-list-toolbar .monitor-search input { width: 100%; padding-left: 2.25rem; }
.monitor-list-toolbar input:focus, .monitor-list-toolbar select:focus { border-color: var(--accent-cyan); outline: 2px solid var(--brand-soft); }
.filter-empty-state { margin-bottom: 1.25rem; }
/* --- Monitor tables ---
   The workhorse view. Hairline row rules instead of zebra striping,
   a header that stays put while you scan, and a full-height hover
   band so the eye can track a row across a wide table. */
.monitor-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.monitor-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  text-align: left;
}

.monitor-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.7rem 0.9rem;
  color: var(--text-subtle);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--fill);
  box-shadow: inset 0 -1px 0 var(--line);
}

.monitor-table td {
  padding: 0.72rem 0.9rem;
  border-top: 1px solid var(--line);
  vertical-align: middle;
  font-size: 0.86rem;
}

.monitor-table td small {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.monitor-table tbody tr:hover {
  background: var(--fill-subtle);
}

.table-health.online { color: var(--up-text); }
.table-health.offline { color: var(--down-text); }
.table-health.paused { color: var(--idle-text); }
.table-actions { display: flex; gap: .35rem; }
.maintenance-state { border-color: var(--warn-soft); }
.maintenance-tag { color: var(--warn-text); }
.blacklist-table { min-width: 980px; }
.blacklist-table .blacklist-monitor-cell strong { display: block; color: var(--text-main); }
.blacklist-table .blacklist-monitor-cell small { display: flex; align-items: center; gap: .35rem; }
.blacklist-table .blacklist-monitor-cell small i { color: var(--accent-cyan); }
.blacklist-table .blacklist-type-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-main); }
.blacklist-table .blacklist-report { font-family: var(--font-mono); font-weight: 700; }
.blacklist-table .blacklist-report.is-listed { color: var(--accent-red); }
.blacklist-table .blacklist-report.is-clean { color: var(--accent-green); }
.blacklist-table .table-actions { white-space: nowrap; }
@media (max-width: 760px) { .dashboard-summary-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .monitor-list-toolbar { align-items: stretch; } .monitor-list-toolbar label, .monitor-list-toolbar label.monitor-search { flex: 1 1 100%; min-width: 0; } }

.modal-container > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 2rem);
}

.modal-container > form .modal-body {
  overflow-y: auto;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-up {
  from { transform: scale(0.9) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-main);
}

.btn-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.75rem;
  cursor: pointer;
  transition: color 0.15s ease;
  line-height: 1;
}

.btn-close:hover {
  color: var(--text-main);
}

.modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Forms */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.col-6 {
  flex: 0 0 calc(50% - 0.5rem);
}

.col-8 {
  flex: 0 0 calc(66.666% - 0.35rem);
}

.col-4 {
  flex: 0 0 calc(33.333% - 0.7rem);
}

.col-3 {
  flex: 0 0 calc(25% - 0.75rem);
}

label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea,
select {
  background-color: var(--fill);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-subtle);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.45;
}

.form-help {
  font-size: 0.725rem;
  color: var(--text-dark);
}

/* Select wrapper for styling */
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.75rem;
  color: var(--text-muted);
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

select {
  appearance: none;
  padding-right: 2rem;
}

/* Checkbox group styling */
.checkbox-group {
  margin-top: 0.5rem;
}

.checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  gap: 0.5rem;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  height: 1.15rem;
  width: 1.15rem;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-container:hover input ~ .checkmark {
  border-color: var(--border-hover);
}

.checkbox-container input:checked ~ .checkmark {
  background: var(--brand);
  border-color: var(--brand);
}

.checkmark::after {
  content: "\f00c";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.7rem;
  color: white;
  display: none;
}

.checkbox-container input:checked ~ .checkmark::after {
  display: block;
}

.checkbox-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-main);
}

.modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background-color: var(--fill);
}

/* Global utility classes */
.text-danger { color: var(--accent-red) !important; }
.text-warning { color: var(--accent-yellow) !important; }
.text-success { color: var(--accent-green) !important; }

/* Responsive adjustments */
@media (max-width: 640px) {
  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  
  .actions-area {
    width: 100%;
  }
  
  .actions-area .btn {
    width: 100%;
  }

  .form-row {
    flex-direction: column;
    gap: 1.25rem;
  }

  .col-6,
  .col-8,
  .col-4,
  .col-3 {
    flex: 0 0 100%;
  }
}

.app-footer {
  margin-top: auto;
  padding: 2.5rem 0 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-dark);
}

/* --- Route Visibilities --- */
body.route-admin span.admin-only { display: inline !important; }
body.route-admin button.admin-only { display: inline-flex !important; }

body.route-loading .main-app-ui,
body.route-loading .login-ui { display: none !important; }
body.route-login .main-app-ui { display: none !important; }
body.route-login .login-ui { display: flex !important; }
body.route-admin .login-ui { display: none !important; }

/* --- Login UI --- */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.login-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.login-header .brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.6rem;
  color: var(--brand);
}

.login-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.btn-full {
  width: 100%;
  padding: 0.75rem;
}

.login-error {
  background-color: var(--down-soft);
  border: 1px solid var(--down-soft);
  color: var(--down-text);
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: shake 0.3s ease;
}

.admin-load-error[hidden] {
  display: none !important;
}

.section-tab[hidden],
.app-section[hidden],
#btnOpenAgentModal[hidden] {
  display: none !important;
}

.admin-load-error {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: -0.75rem 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--warn-soft);
  border-radius: var(--r-lg);
  background: var(--warn-soft);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.admin-load-error > i {
  color: var(--accent-yellow);
  margin-top: 0.15rem;
}

.admin-load-error strong {
  display: block;
  margin-bottom: 0.2rem;
}

.admin-load-error p {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-load-actions {
  margin-left: auto;
  display: flex;
  gap: 0.45rem;
  flex-shrink: 0;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.login-footer {
  text-align: center;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

.sso-login-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sso-login-area[hidden] {
  display: none !important;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.login-divider::before,
.login-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--border-color);
}

.security-grid .settings-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

.config-value {
  display: block;
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--accent-cyan);
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

.compact-check {
  margin-top: 0.65rem;
}

.security-status {
  min-height: 1.2rem;
}

.security-status.is-error {
  color: var(--accent-red);
}

.security-status.is-success {
  color: var(--accent-green);
}

.monitor-custom-alert-policy {
  margin: 0.25rem 0 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  background: var(--fill);
}

.agent-checkbox.is-disabled {
  opacity: 0.55;
}

.tenant-invite-result {
  margin-top: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-md);
  background: var(--brand-soft);
}

.tenant-invite-result .config-value {
  overflow-wrap: anywhere;
  user-select: all;
}

.tenant-invite-result .btn {
  margin-top: 0.7rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.workspace-switcher {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

body.route-admin .workspace-switcher.admin-only {
  display: flex !important;
}

.workspace-switcher select {
  width: auto;
  min-width: 150px;
  max-width: 230px;
  padding: 0.5rem 2rem 0.5rem 0.7rem;
}

.user-badge {
  color: var(--text-muted);
  font-size: 0.75rem;
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tenant-admin-grid {
  margin-top: 1.25rem;
}

.tenant-user-row,
.tenant-user-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.tenant-user-row {
  justify-content: space-between;
}

.tenant-user-row small {
  display: block;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.tenant-user-actions select {
  width: auto;
  min-width: 130px;
}

body.role-viewer .tenant-admin-only {
  display: none !important;
}

@media (max-width: 900px) {
  .workspace-switcher {
    width: 100%;
    order: 3;
  }

  .workspace-switcher select {
    flex: 1;
    max-width: none;
  }
}

.btn-text {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.15s ease;
}

.btn-text:hover {
  color: var(--text-main);
}

/* Card Visibility Badges & Eye Actions */
.visibility-indicator {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.visibility-public {
  background-color: var(--brand-soft);
  color: var(--accent-cyan);
}

.visibility-private {
  background-color: var(--idle-soft);
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
}

.card-header-badge-row {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.25rem;
  align-items: center;
}

.btn-icon.btn-public:hover {
  color: var(--accent-cyan);
  border-color: var(--brand-line);
}

.monitor-card.is-private-card {
  border-style: dashed;
  background-color: var(--fill);
}

/* Sparkline placeholder for SSL-only monitors */
.sparkline-placeholder {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--fill-subtle);
  border: 1px dashed var(--border-color);
  border-radius: var(--r-md);
}

.sparkline-placeholder i {
  color: var(--text-subtle);
  font-size: 1.1rem;
}

/* Only admin cards open the detailed history view. */
body.route-admin .monitor-card {
  cursor: pointer;
}

/* Detail Modal layout */
.detail-modal {
  max-width: 650px;
}

.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.detail-stat-box {
  background: var(--fill);
  padding: 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.detail-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.detail-stat-value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
}

.detail-stat-meta {
  min-height: 1rem;
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.card-drilldown-hint {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.card-drilldown-hint .fa-chevron-right {
  margin-left: auto;
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}

.monitor-card:hover .card-drilldown-hint,
.monitor-card:focus-visible .card-drilldown-hint {
  color: var(--accent-cyan);
}

.monitor-card:hover .card-drilldown-hint .fa-chevron-right {
  transform: translateX(3px);
}

.detail-chart-container {
  height: 200px;
  position: relative;
  width: 100%;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

/* Uptime plots on its own frame below latency, sharing the x-axis. */
.detail-chart-secondary {
  height: 150px;
  margin-top: -0.75rem;
}

.detail-chart-secondary[hidden] {
  display: none;
}

.detail-chart-label {
  margin-bottom: 0.3rem;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-chart-secondary canvas {
  height: calc(100% - 1.4rem) !important;
}

.detail-log-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.detail-log-title h3 {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.detail-log-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--fill);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
}

.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  font-family: var(--font-mono);
}

.log-item:last-child {
  border-bottom: none;
}

.log-item-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}

.log-item-time {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Standalone single-monitor uptime embed surface. */
.embed-page {
  display: none;
}

body.route-embed {
  min-height: 100vh;
  background-attachment: scroll;
}

body.route-embed .main-app-ui,
body.route-embed .login-ui {
  display: none !important;
}

body.route-embed .embed-page {
  display: block;
  min-height: 100vh;
}

.embed-shell {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 10px;
}

/* The embed is the only surface that renders on someone else's site, so
   it stays a single self-contained card that states its status in the
   top edge before anyone reads a number. */
.embed-uptime-card {
  --embed-accent: var(--info);
  width: min(100%, 760px);
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--embed-accent);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.embed-uptime-card.is-up { --embed-accent: var(--up); }
.embed-uptime-card.is-down { --embed-accent: var(--down); }
.embed-uptime-card.is-maintenance,
.embed-uptime-card.is-paused { --embed-accent: var(--warn); }
.embed-uptime-card.is-unknown { --embed-accent: var(--idle); }

.embed-uptime-header,
.embed-status-summary,
.embed-uptime-heading,
.embed-uptime-scale,
.embed-uptime-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.embed-monitor-copy {
  min-width: 0;
}

.embed-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.embed-monitor-copy h1,
.embed-unavailable h1 {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.embed-status-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--border-color);
  border: 1px solid color-mix(in srgb, var(--embed-accent) 40%, transparent);
  border-radius: var(--r-pill);
  background: var(--fill-subtle);
  background: color-mix(in srgb, var(--embed-accent) 11%, transparent);
  color: var(--embed-accent);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.embed-status-summary {
  justify-content: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border: 1px solid color-mix(in srgb, var(--embed-accent) 24%, transparent);
  border-radius: var(--r-md);
  background: var(--fill-subtle);
  background: color-mix(in srgb, var(--embed-accent) 7%, transparent);
}

.embed-status-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fill-subtle);
  background: color-mix(in srgb, var(--embed-accent) 14%, transparent);
  color: var(--embed-accent);
}

.embed-status-summary div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.embed-status-summary strong {
  color: var(--text-main);
  font-size: 0.86rem;
}

.embed-status-summary span:not(.embed-status-icon) {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.embed-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--fill-subtle);
}

.embed-metrics > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  text-align: center;
}

.embed-metrics > div + div {
  border-left: 1px solid var(--border-color);
}

.embed-metrics span {
  color: var(--text-muted);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.embed-metrics strong {
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.embed-uptime-history {
  min-width: 0;
}

.embed-uptime-heading {
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.embed-uptime-heading strong {
  color: var(--text-main);
  font-family: var(--font-mono);
}

.embed-uptime-bars {
  height: 34px;
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.embed-uptime-bar {
  min-width: 1px;
  flex: 1 1 0;
  border-radius: 2px;
  background: var(--border-color);
}

.embed-uptime-bar.is-good { background: var(--accent-green); }
.embed-uptime-bar.is-warning { background: var(--accent-yellow); }
.embed-uptime-bar.is-bad { background: var(--accent-red); }
.embed-uptime-bar.is-unknown { background: var(--border-color); }

.embed-uptime-scale {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.58rem;
}

.embed-uptime-empty {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px dashed var(--border-color);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 0.7rem;
  text-align: center;
}

.embed-uptime-footer {
  padding-top: 2px;
  color: var(--text-muted);
  font-size: 0.62rem;
}

.embed-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.embed-unavailable {
  place-items: center;
  max-width: 440px;
  padding: 28px 20px;
  text-align: center;
}

.embed-unavailable p {
  margin: -4px 0 4px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.embed-unavailable .embed-uptime-footer {
  width: 100%;
  justify-content: center;
}

@media (max-width: 520px) {
  .embed-shell { padding: 6px; }
  .embed-uptime-card { gap: 10px; padding: 13px; border-radius: var(--r-md); }
  .embed-status-pill { padding: 5px 7px; font-size: 0.64rem; }
  .embed-metrics span { font-size: 0.55rem; }
  .embed-metrics strong { font-size: 0.82rem; }
  .embed-uptime-bars { height: 28px; gap: 1px; }
}

.modal-subtitle {
  margin-top: 0.2rem;
  font-size: 0.82rem;
}

.embed-modal {
  max-width: 640px;
}

.embed-code {
  width: 100%;
  resize: vertical;
  min-height: 170px;
  padding: 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  outline: none;
  background: var(--fill);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
}

.embed-code:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.embed-visibility-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid;
  border-radius: var(--r-md);
  font-size: 0.82rem;
  line-height: 1.4;
}

.embed-visibility-note.is-public {
  border-color: var(--up-soft);
  background: var(--up-soft);
  color: var(--accent-green);
}

.embed-visibility-note.is-private {
  border-color: var(--warn-soft);
  background: var(--warn-soft);
  color: var(--accent-yellow);
}

.embed-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent-cyan);
  font-size: 0.82rem;
  text-decoration: none;
}

.embed-preview-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .monitors-grid {
    grid-template-columns: 1fr;
  }

  .detail-stats-grid {
    grid-template-columns: 1fr;
  }

  .detail-modal-body {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }

  .log-item {
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* --- Admin section shell --- */
.section-nav {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* A group with every section hidden by workspace settings would
   otherwise leave a floating label behind. */
.nav-group[hidden] {
  display: none;
}

.nav-group-label {
  padding: 0 0.55rem 0.35rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.section-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.section-tab i {
  flex: 0 0 1.05rem;
  width: 1.05rem;
  font-size: 0.88rem;
  text-align: center;
  color: var(--text-subtle);
  transition: color 0.15s ease;
}

.section-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-tab:hover {
  background: var(--fill-hover);
  color: var(--text);
}

.section-tab:hover i {
  color: var(--text-muted);
}

.section-tab.is-active {
  background: var(--brand-soft);
  color: var(--text);
}

.section-tab.is-active i {
  color: var(--brand-text);
}

/* The active marker rides the rail's inner edge. */
.section-tab.is-active::before {
  content: '';
  position: absolute;
  left: -0.85rem;
  top: 0.3rem;
  bottom: 0.3rem;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--brand);
}

.app-section {
  display: none;
}

body.route-admin .app-section.is-active {
  display: block !important;
}

body.route-admin .app-section:not(.is-active) {
  display: none !important;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  background: var(--fill);
  backdrop-filter: var(--glass-blur);
}

body.route-admin .section-heading.admin-only {
  display: flex !important;
}

.section-heading h2 {
  font-size: 1.35rem;
  margin-bottom: 0.3rem;
}

.section-heading p {
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 760px;
}

.eyebrow {
  color: var(--accent-cyan) !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.admin-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.admin-panel,
.utility-card,
.client-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.admin-panel {
  padding: 1.25rem;
}

.panel-title-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-title-row h3 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.panel-title-row p {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.mini-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mini-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 0.75rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--r-md);
  background: var(--fill);
}

.inline-empty {
  display: inline-flex;
  padding: 0.45rem 0.6rem;
}

.mini-row,
.agent-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  background: var(--fill);
}

.mini-row strong,
.agent-row strong {
  display: block;
  font-size: 0.92rem;
}

.mini-row span,
.agent-row span {
  display: block;
  color: var(--text-muted);
  font-size: 0.74rem;
  margin-top: 0.18rem;
}

.agent-row.is-local {
  border-color: var(--brand-line);
}

.agent-main {
  min-width: 0;
}

.agent-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.agent-client {
  color: var(--accent-cyan) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
}

.status-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: var(--r-pill);
  padding: 0.24rem 0.55rem;
  font-size: 0.68rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid;
}

.status-pill.is-online {
  color: var(--accent-green);
  background: var(--up-soft);
  border-color: var(--up-soft);
}

.status-pill.is-waiting {
  color: var(--text-muted);
  background: var(--idle-soft);
  border-color: var(--idle-soft);
}

.status-pill.is-down {
  color: var(--accent-red);
  background: var(--down-soft);
  border-color: var(--down-soft);
}

.status-pill.is-warning {
  color: var(--accent-yellow);
  background: var(--warn-soft);
  border-color: var(--warn-soft);
}

.download-row {
  flex-wrap: wrap;
  justify-content: flex-end;
  display: flex;
  gap: 0.35rem;
}

.btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--text-muted);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-mini:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--fill-hover);
}

.checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.6rem;
}

.agent-checkbox {
  padding: 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--fill);
}

.agent-checkbox .checkbox-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.agent-checkbox small {
  color: var(--text-muted);
  font-size: 0.7rem;
}

/* Genuinely informational, so it earns the info token. */
.info-callout {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  border: 1px solid rgba(var(--info-rgb), 0.32);
  background: var(--info-soft);
  color: var(--text-muted);
  border-radius: var(--r-lg);
  padding: 0.85rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.info-callout i {
  color: var(--info-text);
  margin-top: 0.15rem;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.compact-empty {
  max-width: 620px;
  margin: 2rem auto;
  padding: 2.5rem 2rem;
}

.utility-card,
.client-card {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.utility-card-header,
.client-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.utility-card-header h3,
.client-card-header h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.utility-card-header p,
.client-card-header p {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.utility-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.metric-row strong {
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.utility-note {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 0.35rem;
}

.blacklist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.blacklist-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--r-pill);
  padding: 0.18rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
}

.blacklist-chip i {
  font-size: 0.62rem;
}

.blacklist-chip.clean {
  color: var(--accent-green);
  background: rgba(var(--accent-green-rgb), 0.08);
  border-color: rgba(var(--accent-green-rgb), 0.22);
}

.blacklist-chip.listed {
  color: var(--accent-red);
  background: rgba(var(--accent-red-rgb), 0.1);
  border-color: rgba(var(--accent-red-rgb), 0.28);
}

.blacklist-chip.error {
  color: var(--accent-yellow);
  background: rgba(var(--accent-yellow-rgb), 0.08);
  border-color: rgba(var(--accent-yellow-rgb), 0.22);
}

.agent-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.target-chip-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-pill);
  padding: 0.32rem 0.55rem;
  color: var(--text-muted);
  background: var(--fill);
  font-size: 0.72rem;
  font-weight: 700;
}

.agent-chip b {
  color: var(--text-main);
  font-family: var(--font-mono);
}

.agent-chip.is-online {
  border-color: var(--up-soft);
  color: var(--accent-green);
}

.agent-chip.is-down {
  border-color: var(--down-soft);
  color: var(--accent-red);
}

.agent-chip.is-waiting {
  border-color: var(--idle-soft);
}

.target-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.8rem 1rem;
  gap: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  background: var(--fill);
  color: var(--text-main);
  transition: all 0.2s ease;
}

.target-chip.is-online {
  border-color: var(--up-soft);
}

.target-chip.is-down {
  border-color: var(--down-soft);
  background: var(--down-soft);
}

.target-chip.is-waiting {
  border-style: dashed;
  border-color: var(--line-strong);
}

.target-chip-main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.target-chip-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.target-chip-title strong {
  font-size: 0.9rem;
  color: var(--text-main);
}

.target-chip-title small {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.target-chip-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.75rem;
}

.target-chip-status {
  font-weight: 700;
}

.target-chip-meta small {
  color: var(--text-muted);
}

.target-chip-meta .target-chip-agents {
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.target-chip-chart {
  position: relative;
  height: 40px;
  width: 140px;
  background: var(--fill);
  border-radius: var(--r-sm);
  padding: 2px;
}

.target-chip-actions {
  display: flex;
  gap: 0.35rem;
}

.target-chip-actions .btn-icon {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: var(--r-sm);
  transition: all 0.15s ease;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.target-chip-actions .btn-icon:hover {
  color: var(--text-main);
  border-color: var(--border-hover);
  background: var(--fill-hover);
}

.target-chip-actions .btn-icon.btn-delete-client-target:hover {
  color: var(--accent-red);
  border-color: var(--down-soft);
  background: var(--down-soft);
}

.log-item-status small {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  margin-left: 0.25rem;
}

@media (max-width: 780px) {
  .section-heading,
  .admin-split-grid,
  .utility-card-header,
  .client-card-header {
    flex-direction: column;
  }

  .admin-split-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .section-actions {
    width: 100%;
    justify-content: stretch;
  }

  .section-actions .btn {
    flex: 1;
  }

  .mini-row,
  .agent-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-side {
    align-items: flex-start;
  }
}

/* --- Operations console layout --- */
.stats-overview,
.admin-split-grid,
.cards-grid,
.monitors-grid {
  gap: 1rem;
}

/* Every panelled surface is the same flat plane with a hairline
   edge. Depth comes from the border and a single soft shadow, not
   from gradients — that is what keeps dense screens calm. */
.stat-card,
.monitor-card,
.admin-panel,
.utility-card,
.client-card,
.empty-state,
.login-card,
.modal-container {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 1rem;
}

.stat-icon {
  width: 2.45rem;
  height: 2.45rem;
  background: var(--fill);
  border-color: var(--line);
}

/* --- Micro-labels -------------------------------------------------
   The signature of this design. Every caption that names a figure or
   a group is set in mono, uppercase and widely tracked; the
   proportional sans is kept for content a person actually reads.
   The effect is an instrument panel: the labels recede into
   structure and the numbers they caption come forward. */
.stat-label,
.card-stat-label,
.detail-stat-label,
.nav-group-label,
.monitor-table th,
.ssl-title {
  font-family: var(--label-font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Figures are the payload: mono everywhere, tight, and never lighter
   than the label that names them. */
.stat-value,
.latency-value,
.card-stat-value,
.detail-stat-value,
.uptime-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat-value {
  font-size: 1.42rem;
  font-weight: 600;
}

.section-heading {
  padding: 1.35rem;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.section-heading h2 {
  font-size: 1.42rem;
  letter-spacing: -0.035em;
}

.section-heading p {
  color: var(--text-muted);
}

.eyebrow {
  color: var(--text-subtle) !important;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.monitor-card,
.admin-panel,
.utility-card,
.client-card {
  position: relative;
  border-radius: var(--r-lg);
}

.monitor-card {
  gap: 1rem;
  padding: 1.25rem;
}

.monitor-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.host-info {
  max-width: 70%;
  gap: 0.24rem;
}

.host-name {
  font-size: 1.04rem;
  letter-spacing: -0.02em;
}

.host-address,
.utility-card-header p,
.client-card-header p,
.target-chip small {
  color: var(--text-muted);
}

.protocol-tag,
.visibility-indicator,
.status-badge,
.agent-chip,
.target-chip,
.status-pill {
  border-radius: var(--r-pill);
}

.status-badge {
  background: var(--fill);
  border-color: var(--line);
}

.status-dot.online,
.status-dot.offline {
  box-shadow: none;
}

.status-dot.online::after,
.status-dot.offline::after {
  display: none;
}

.latency-panel {
  padding: 0.15rem 0;
}

.latency-value {
  font-size: clamp(2rem, 4vw, 2.65rem);
  letter-spacing: -0.05em;
}

.sparkline-container {
  height: 78px;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--fill);
}

.card-stats {
  background: var(--fill);
  border-color: var(--line);
  border-radius: var(--r-md);
}

.card-actions {
  border-top-color: var(--line);
  padding-top: 0.85rem;
}

.btn-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-sm);
  background: var(--fill);
  border-color: var(--line);
}

.mini-row,
.agent-row,
.agent-checkbox {
  background: var(--fill);
  border-color: var(--line);
  border-radius: var(--r-md);
}

.panel-title-row h3,
.utility-card-header h3,
.client-card-header h3 {
  letter-spacing: -0.02em;
}

.mini-empty,
.info-callout,
.admin-load-error,
.embed-visibility-note {
  border-radius: var(--r-md);
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  min-height: 2.65rem;
  background-color: var(--fill);
  border-color: var(--line-strong);
  border-radius: var(--r-md);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.modal-container {
  border-radius: var(--r-lg);
}

.modal-header {
  background: var(--surface);
  border-bottom-color: var(--line);
}

.modal-footer {
  background: var(--fill);
  border-top-color: var(--line);
}

.login-card {
  max-width: 430px;
}

.app-footer {
  border-top-color: var(--line);
}

@media (max-width: 780px) {
  .section-heading {
    padding: 1rem;
  }

  .actions-area {
    flex-direction: column;
    align-items: stretch;
  }

  .workspace-switcher {
    width: 100%;
  }

  .workspace-switcher .select-wrapper {
    flex: 1;
  }

  .workspace-switcher select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .actions-area .workspace-switcher .btn {
    width: auto;
    flex: 0 0 auto;
  }

  .admin-load-error {
    flex-direction: column;
  }

  .admin-load-actions {
    margin-left: 0;
  }
}

/* --- Alerting administration --- */
.alerting-grid {
  grid-template-columns: minmax(300px, 0.75fr) minmax(460px, 1.25fr);
  align-items: start;
}

.alert-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-subsection {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--fill);
}

.settings-subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.settings-subsection-title h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-main);
}

.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.switch-row input {
  width: 1rem;
  height: 1rem;
}

.workspace-visibility-form {
  display: grid;
  gap: 1rem;
}

.workspace-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.workspace-visibility-grid .switch-row {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--bg-secondary);
}

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

.inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.compact-checkbox {
  min-height: 100%;
  align-items: center;
  padding-top: 1.9rem;
}

.small-field {
  max-width: 320px;
}

.test-row {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.8rem;
}

.test-row input {
  flex: 1;
}

.inline-footer {
  justify-content: flex-end;
  padding: 0;
  border-top: 0;
}

.alert-contact-row,
.delivery-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--fill);
}

.alert-contact-row.is-disabled {
  opacity: 0.62;
}

.alert-contact-main,
.delivery-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.alert-contact-main strong,
.delivery-main strong {
  color: var(--text-main);
}

.alert-contact-main span,
.delivery-main span,
.delivery-time {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.alert-contact-main small,
.delivery-main small {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  color: var(--text-dark);
}

.alert-contact-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.alert-log-panel {
  margin-top: 1rem;
}

.delivery-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.delivery-log-row {
  justify-content: flex-start;
}

.delivery-channel {
  min-width: 5.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.delivery-log-row.is-success .delivery-channel {
  color: var(--accent-green);
  border-color: rgba(var(--accent-green-rgb), 0.24);
}

.delivery-log-row.is-failed .delivery-channel {
  color: var(--accent-red);
  border-color: rgba(var(--accent-red-rgb), 0.28);
}

.delivery-time {
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .alerting-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .test-row,
  .alert-contact-row,
  .delivery-log-row {
    align-items: stretch;
    flex-direction: column;
  }

  .alert-contact-actions {
    justify-content: space-between;
  }

  .delivery-channel {
    justify-content: flex-start;
    width: fit-content;
  }

  .delivery-time {
    margin-left: 0;
  }
}

/* --- Route Monitoring styles --- */
.routes-grid {
  grid-template-columns: minmax(300px, 0.75fr) minmax(500px, 1.25fr);
  align-items: start;
}

.hops-flow-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--fill);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  margin-top: 1rem;
}

.hop-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  padding: 0.5rem 0;
}

.hop-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: -12px;
  width: 2px;
  background: var(--fill-hover);
  z-index: 1;
}

.hop-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fill);
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  z-index: 2;
  transition: all 0.3s ease;
}

/* A hop that answered is a state, not decoration, so it takes the
   status token rather than the neutral chrome colour it used to
   borrow. The glow went with it: depth comes from shadows here. */
.hop-item.success .hop-badge {
  border-color: var(--up);
  color: var(--up-text);
  background: var(--up-soft);
}

.hop-item.fail .hop-badge {
  border-color: var(--down-text);
  color: var(--down-text);
  box-shadow: 0 0 10px var(--down-soft);
}

.hop-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fill);
  border-radius: var(--r-lg);
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.hop-item:hover .hop-content {
  border-color: var(--brand-line);
  background: var(--fill);
}

.hop-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hop-ip {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text);
}

.hop-host {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.hop-metrics {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hop-latency {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-md);
  background: var(--fill);
}

.hop-latency.low {
  color: var(--up-text);
}

.hop-latency.medium {
  color: var(--warn-text);
}

.hop-latency.high {
  color: var(--down-text);
}

.hop-status-icon {
  font-size: 0.85rem;
}

.hop-status-icon.online {
  color: var(--up-text);
}

.hop-status-icon.offline {
  color: var(--down-text);
}

.route-trace-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-lg);
  color: var(--accent-cyan);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

@media (max-width: 980px) {
  .routes-grid {
    grid-template-columns: 1fr;
  }
}

/* Graph history range selectors */
.sparkline-header-admin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.sparkline-title-admin {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.sparkline-range-select, .detail-range-select, .route-range-select, .target-range-select {
  background: var(--fill);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.72rem;
  border-radius: var(--r-sm);
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: all 0.15s ease;
}

.sparkline-range-select:hover, .detail-range-select:hover, .route-range-select:hover, .target-range-select:hover {
  background: var(--fill);
  color: var(--text-main);
  border-color: var(--line-strong);
}

.sparkline-range-select:focus, .detail-range-select:focus, .route-range-select:focus, .target-range-select:focus {
  border-color: var(--accent-cyan);
}

/* Native <option> lists do not inherit the control's colours in every
   browser, so they need the tokens spelled out to survive a theme swap. */
.sparkline-range-select option, .detail-range-select option, .route-range-select option, .target-range-select option {
  background-color: var(--surface-raised);
  color: var(--text);
}

/* --- Profile menu, compact page chrome, and in-table filters --- */
.app-header {
  z-index: 200;
}

.section-nav,
.app-main,
.app-section {
  position: relative;
  z-index: 1;
}

.section-heading {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  align-items: center;
  background: var(--surface);
}

.section-heading h2 {
  margin-bottom: 0.18rem;
  font-size: 1.22rem;
}

.section-heading p {
  font-size: 0.88rem;
  line-height: 1.35;
}

.monitor-list-toolbar {
  margin-bottom: 0.8rem;
  padding: 0.55rem;
}

.app-section.is-table-view > .monitor-list-toolbar {
  display: none !important;
}

.monitor-table {
  min-width: 1060px;
}

.monitor-table th {
  padding: 0.65rem 0.75rem;
  vertical-align: bottom;
  background: var(--fill);
  border-bottom: 1px solid var(--border-color);
}

.monitor-table td {
  padding: 0.78rem 0.75rem;
  border-top-color: var(--border-color);
}

.table-filter-cell {
  min-width: 132px;
}

.table-name-filter {
  min-width: 210px;
}

.table-sort-filter {
  min-width: 155px;
}

.table-column-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.42rem;
}

.table-column-heading > .table-header-control {
  flex: 1 1 auto;
}

.table-column-heading > .table-column-label {
  padding-top: 0.48rem;
}

.table-column-sort {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.17rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-dark);
  cursor: pointer;
}

.table-column-sort:hover,
.table-column-sort.is-active {
  border-color: var(--border-hover);
  background: rgba(var(--accent-cyan-rgb), 0.12);
  color: var(--accent-cyan);
}

.table-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--fill);
}

.table-sort-menu {
  display: grid;
  justify-items: end;
}

.table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  min-height: 2.2rem;
  padding: 0.42rem 0.68rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--bg-tertiary);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.table-sort-button:hover,
.table-sort-button[aria-expanded="true"] {
  border-color: var(--border-hover);
  background: var(--fill);
}

.table-sort-button .fa-chevron-down {
  color: var(--text-dark);
  font-size: 0.62rem;
}

.table-sort-options {
  width: 220px;
  margin-top: 0.35rem;
  padding: 0.3rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.table-sort-options[hidden] {
  display: none !important;
}

.table-sort-options button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.48rem 0.55rem;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-main);
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
}

.table-sort-options button:hover,
.table-sort-options button[aria-checked="true"] {
  background: var(--bg-tertiary);
}

.table-sort-options button i {
  color: var(--accent-cyan);
}

.table-header-control {
  display: grid;
  gap: 0.34rem;
  position: relative;
  color: var(--text-muted);
  font-size: 0.67rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.table-header-control input,
.table-header-control select {
  width: 100%;
  min-height: 2rem;
  padding: 0.36rem 0.48rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--text-main);
  font: 500 0.75rem var(--font-outfit);
  letter-spacing: normal;
  text-transform: none;
  outline: none;
}

.table-header-control input:focus,
.table-header-control select:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px rgba(var(--accent-cyan-rgb), 0.14);
}

.table-header-search i {
  position: absolute;
  left: 0.55rem;
  bottom: 0.54rem;
  color: var(--text-dark);
  font-size: 0.7rem;
}

.table-header-search input {
  padding-left: 1.65rem;
}

.table-empty-row:hover {
  background: transparent !important;
}

.table-empty-row td {
  height: 9rem;
  text-align: center;
  color: var(--text-muted);
}

.table-empty-row i,
.table-empty-row strong,
.table-empty-row span {
  display: block;
}

.table-empty-row i {
  margin-bottom: 0.55rem;
  color: var(--accent-cyan);
  font-size: 1.25rem;
}

.table-empty-row strong {
  margin-bottom: 0.18rem;
  color: var(--text-main);
}

body.route-admin .settings-shell.admin-only {
  display: none !important;
}

body.route-admin.section-settings .settings-shell.admin-only,
body.route-admin.section-alerting .settings-shell.admin-only,
body.route-admin.section-security .settings-shell.admin-only,
body.route-admin.section-maintenance .settings-shell.admin-only,
body.route-admin.section-integrations .settings-shell.admin-only {
  display: block !important;
}

.settings-shell-heading {
  justify-content: space-between;
}

.settings-subnav {
  display: flex;
  gap: 0.35rem;
  padding: 0.28rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--fill);
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 2.2rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
}

.settings-tab:hover,
.settings-tab.is-active {
  color: var(--text-main);
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.settings-tab.is-active i {
  color: var(--accent-cyan);
}

.profile-menu {
  position: relative;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 190px;
  min-height: 2.75rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  background: var(--bg-tertiary);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.profile-trigger:hover,
.profile-trigger[aria-expanded="true"] {
  border-color: var(--border-hover);
  background: var(--fill);
}

.profile-avatar {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  font-size: 0.73rem;
  font-weight: 700;
}

.profile-trigger-copy {
  min-width: 0;
  flex: 1;
  display: grid;
}

.profile-trigger-copy strong,
.profile-trigger-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-trigger-copy strong {
  font-size: 0.82rem;
}

.profile-trigger-copy small {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: capitalize;
}

.profile-chevron {
  color: var(--text-dark);
  font-size: 0.65rem;
}

.profile-dropdown {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 290px;
  padding: 0.45rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  background: var(--fill);
  box-shadow: var(--shadow-lg);
}

.profile-dropdown[hidden] {
  display: none !important;
}

.profile-dropdown-identity {
  display: grid;
  gap: 0.12rem;
  padding: 0.55rem 0.65rem 0.7rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.35rem;
}

.profile-dropdown-identity strong {
  font-size: 0.9rem;
}

.profile-dropdown-identity span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-dropdown > button {
  width: 100%;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.62rem;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.profile-dropdown > button:hover {
  background: var(--bg-tertiary);
}

.profile-dropdown > button > i {
  color: var(--text-muted);
  text-align: center;
}

.profile-dropdown > button > span {
  display: grid;
  gap: 0.06rem;
}

.profile-dropdown > button strong {
  font-size: 0.8rem;
}

.profile-dropdown > button small {
  color: var(--text-muted);
  font-size: 0.69rem;
}

.profile-theme-picker {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.62rem;
  color: var(--text-main);
}

.profile-theme-picker > i {
  color: var(--text-muted);
  text-align: center;
}

.profile-theme-picker > span {
  display: grid;
  gap: 0.06rem;
}

.profile-theme-picker strong {
  font-size: 0.8rem;
}

.profile-theme-picker small {
  color: var(--text-muted);
  font-size: 0.69rem;
}

.profile-theme-picker select {
  width: auto;
  min-width: 4.8rem;
  min-height: 2rem;
  padding: 0.25rem 1.6rem 0.25rem 0.48rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background-color: var(--bg-secondary);
  color: var(--text-main);
}

.profile-menu-divider {
  height: 1px;
  margin: 0.35rem 0.2rem;
  background: var(--border-color);
}

.profile-dropdown > .profile-logout:hover,
.profile-dropdown > .profile-logout:hover i {
  color: var(--accent-red);
}


@media (max-width: 900px) {
  .actions-area {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .profile-menu {
    order: 2;
  }

  .settings-shell-heading,
  .settings-subnav {
    align-items: stretch;
  }

  .settings-shell-heading {
    flex-direction: column;
  }

  .settings-subnav {
    width: 100%;
    overflow-x: auto;
  }

  .settings-tab {
    flex: 1 0 auto;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .profile-trigger {
    min-width: 0;
  }

  .profile-trigger-copy,
  .profile-chevron {
    display: none;
  }

  .profile-dropdown {
    position: fixed;
    top: 5.2rem;
    right: 1rem;
    left: 1rem;
    width: auto;
  }
}


/* ============================================================
   Toast notifications + styled confirm dialog
   ============================================================ */
.toast-stack {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(92vw, 380px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--r-md);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--info);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  line-height: 1.35;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.toast.toast-in { transform: translateX(0); opacity: 1; }
.toast.toast-leaving { transform: translateX(120%); opacity: 0; }
.toast i { margin-top: 0.1rem; flex-shrink: 0; }
.toast .toast-message { flex: 1; word-break: break-word; }
.toast .toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}
.toast .toast-close:hover { color: var(--text-main); }
.toast-success { border-left-color: var(--up); }
.toast-success i { color: var(--up-text); }
.toast-error { border-left-color: var(--down); }
.toast-error i { color: var(--down-text); }
.toast-warning { border-left-color: var(--warn); }
.toast-warning i { color: var(--warn-text); }
.toast-info { border-left-color: var(--info); }
.toast-info i { color: var(--info-text); }

.confirm-overlay { z-index: 1600; }
.confirm-container { max-width: 440px; width: 100%; }
.confirm-container .confirm-message {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}
.confirm-container .modal-header h2 i { color: var(--warn-text); }

/* Destructive actions read as a warning, not as a second brand colour:
   quiet until hovered, then unmistakably red. */
.btn-danger {
  background: transparent;
  border: 1px solid var(--down-soft);
  color: var(--down-text);
}

.btn-danger:hover {
  background: var(--down);
  border-color: var(--down);
  color: #FFFFFF;
}

.login-workspace-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.35rem 0 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  background: rgba(var(--accent-cyan-rgb), 0.08);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.25);
  color: var(--text-muted);
  font-size: 0.85rem;
}
.login-workspace-note i { color: var(--accent-cyan); }
.login-workspace-note strong { color: var(--text-main); }

/* ============================================================
   Global header search
   ============================================================ */
.global-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.7rem;
  height: 38px;
  min-width: 210px;
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}
.global-search > i { color: var(--text-muted); font-size: 0.85rem; }
.global-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.9rem;
  font-family: inherit;
}
.global-search input::placeholder { color: var(--text-dark); }
.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1200;
  max-height: 340px;
  overflow-y: auto;
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  padding: 0.35rem;
}
.global-search-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon label type" "icon sub type";
  column-gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-main);
  cursor: pointer;
}
.global-search-item:hover { background: var(--bg-tertiary); }
.global-search-item i { grid-area: icon; align-self: center; color: var(--accent-cyan); }
.global-search-item .gs-label { grid-area: label; font-weight: 600; font-size: 0.9rem; }
.global-search-item .gs-sub { grid-area: sub; font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-item .gs-type {
  grid-area: type;
  align-self: center;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--r-pill);
  padding: 0.1rem 0.5rem;
}
.global-search-empty { padding: 0.75rem 0.6rem; color: var(--text-muted); font-size: 0.85rem; }

@media (max-width: 900px) {
  .global-search { display: none; }
}

/* ============================================================
   Monitor table bulk actions
   ============================================================ */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-lg);
  background: rgba(var(--accent-cyan-rgb), 0.09);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
}
.bulk-bar .bulk-count { color: var(--text-main); font-size: 0.9rem; }
.bulk-bar .bulk-count strong { color: var(--accent-cyan); }
.bulk-bar .bulk-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.monitor-table .bulk-select-cell { width: 34px; text-align: center; padding-right: 0; }
.monitor-table .bulk-select-cell input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent-cyan); }
.monitor-table tr.is-selected { background: rgba(var(--accent-cyan-rgb), 0.06); }

/* ============================================================
   Maintenance windows, API tokens, and shared list helpers
   ============================================================ */
.mini-list-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  background: var(--fill);
}
.mini-list-item strong { display: block; font-size: 0.92rem; }
.mini-list-item small { display: block; color: var(--text-muted); font-size: 0.74rem; margin-top: 0.2rem; }
.mini-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.mini-list-item .status-pill { font-size: 0.62rem; margin-left: 0.4rem; vertical-align: middle; }

.agent-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
}

.token-reveal {
  margin: 0.6rem 0;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  word-break: break-all;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
}
.api-usage p { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--text-muted); }
.api-usage code {
  display: inline-block;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  padding: 0.1rem 0.4rem;
  font-size: 0.78rem;
}

.settings-subheading {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.9rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.settings-subheading i { color: var(--text-subtle); }

/* ============================================================
   Production SaaS interface refinements
   ============================================================ */
.actions-area {
  flex: 1;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

body.route-admin .global-search.admin-only {
  display: flex !important;
}

/* Search sits at the content's left edge rather than floating in the
   middle of an otherwise empty bar. */
.global-search {
  width: clamp(200px, 26vw, 420px);
  min-width: 0;
  height: 2.5rem;
  margin-right: auto;
  background: var(--fill);
}

.global-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.workspace-switcher {
  flex: 0 1 235px;
}

.workspace-switcher select {
  width: 100%;
  min-width: 145px;
  max-width: 210px;
  min-height: 2.5rem;
}

.workspace-switcher .btn {
  width: 2.5rem;
  min-width: 2.5rem;
  padding-inline: 0;
}

.section-heading {
  min-height: 4.7rem;
  gap: 1.5rem;
}

.section-heading > div:first-child {
  min-width: 0;
}

.section-heading p {
  display: block;
  max-width: 76ch;
}

.section-actions {
  flex: 0 0 auto;
  align-items: center;
}

.stats-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}

.stat-card {
  min-width: 0;
}

.dashboard-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.dashboard-summary-panel {
  min-height: 12rem;
}

.dashboard-summary-panel:nth-child(-n + 2) {
  grid-column: span 3;
}

.dashboard-summary-panel:nth-child(n + 3) {
  grid-column: span 2;
}

.admin-panel {
  min-width: 0;
}

.panel-title-row {
  gap: 1rem;
  align-items: flex-start;
}

.panel-title-row h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel-title-row h3 i {
  flex: 0 0 1rem;
  width: 1rem;
  color: var(--text-subtle);
  text-align: center;
}

.panel-title-row > .btn {
  flex: 0 0 auto;
  min-width: 7rem;
  white-space: nowrap;
}

.panel-title-row h3,
.section-heading h2 {
  letter-spacing: -0.02em;
}

.cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.settings-grid .workspace-visibility-panel {
  grid-column: 1 / -1;
}

.workspace-visibility-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-visibility-grid .switch-row {
  min-height: 3.1rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.workspace-visibility-grid .switch-row:hover {
  border-color: var(--border-hover);
  background: var(--bg-tertiary);
}

.workspace-visibility-grid .switch-row:has(input:checked) {
  border-color: rgba(var(--accent-cyan-rgb), 0.35);
  background: rgba(var(--accent-cyan-rgb), 0.075);
}

.workspace-visibility-grid input {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  accent-color: var(--accent-cyan);
}

.workspace-visibility-form > .btn {
  justify-self: start;
}

input[type="date"],
input[type="datetime-local"],
input[type="file"] {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background: var(--bg-tertiary);
  color: var(--text-main);
}

input[type="file"]::file-selector-button {
  margin: -0.4rem 0.7rem -0.4rem -0.55rem;
  padding: 0.48rem 0.72rem;
  border: 0;
  border-right: 1px solid var(--border-color);
  background: rgba(var(--accent-cyan-rgb), 0.09);
  color: var(--text-main);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

:is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

.checkbox-container input:focus-visible ~ .checkmark {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

.btn:disabled,
.btn-mini:disabled,
.btn-icon:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.btn-icon {
  min-width: 2.4rem;
  min-height: 2.4rem;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.footer-links a {
  display: inline-flex;
}

.settings-subnav {
  scrollbar-width: none;
}

.settings-subnav::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1240px) {
  :root {
    --sidebar-w: 210px;
  }

  .global-search {
    flex: 1 1 200px;
    width: auto;
  }

  .workspace-switcher {
    flex: 0 1 210px;
  }

  .dashboard-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-summary-panel:nth-child(n) {
    grid-column: auto;
  }
}

/* Below this width the rail costs more than it gives: it becomes an
   off-canvas drawer behind the header's menu button. */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.route-admin .app-sidebar.admin-only {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 320;
    width: min(280px, 82vw);
    height: 100dvh;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }

  body.route-admin.nav-open .app-sidebar.admin-only {
    transform: translateX(0);
  }

  body.route-admin.nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 310;
    background: var(--scrim);
  }

  body.route-admin .mobile-nav-toggle.admin-only {
    display: inline-flex !important;
  }

  body.route-admin .global-search.admin-only {
    display: none !important;
  }

  .app-header {
    gap: 0.9rem;
  }

  .actions-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
  }

  .workspace-switcher {
    width: auto;
    order: initial;
  }

  .profile-menu {
    order: initial;
  }

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

  .workspace-visibility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .app-container {
    padding-inline: 0.85rem;
  }

  .section-heading {
    min-height: 0;
    align-items: stretch;
  }

  .section-actions {
    display: flex;
    width: 100%;
  }

  .section-actions > .btn,
  .section-actions > .view-switcher {
    flex: 1 1 auto;
  }

  .view-switcher {
    justify-content: center;
  }

  .dashboard-summary-grid {
    grid-template-columns: 1fr;
  }

  .cards-grid,
  .monitors-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-footer {
    gap: 0.8rem;
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .app-container {
    padding: 0.8rem 0.7rem;
  }

  .app-header {
    padding: 0.6rem 0.7rem;
  }

  .actions-area {
    flex-direction: initial;
  }

  .workspace-switcher select {
    min-width: 0;
    max-width: none;
  }

  .profile-trigger {
    width: 2.75rem;
    min-width: 2.75rem;
    padding: 0.35rem;
  }

  .profile-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: auto;
    width: min(320px, calc(100vw - 2rem));
  }

  .section-heading {
    padding: 0.9rem;
  }

  .section-heading h2 {
    font-size: 1.15rem;
  }

  .section-actions {
    gap: 0.5rem;
  }

  .section-actions > .btn,
  .section-actions > .view-switcher {
    flex: 1 1 100%;
  }

  .stats-overview {
    gap: 0.65rem;
  }

  .stat-card {
    gap: 0.65rem;
    padding: 0.8rem;
  }

  .stat-icon {
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 2.3rem;
  }

  .stat-info span {
    font-size: 0.62rem;
  }

  .stat-info strong {
    font-size: 1.35rem;
  }

  .workspace-visibility-grid {
    grid-template-columns: 1fr;
  }

  .panel-title-row {
    flex-direction: column;
    align-items: stretch;
  }

  .panel-title-row > .btn {
    width: 100%;
    min-width: 0;
  }

  .admin-panel,
  .utility-card,
  .client-card {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}