/**
 * Connections Page Design System -- rebuild matching IMG_4128.PNG
 * (reference mock supplied directly by Farshad), while keeping this
 * project's honesty rules: every element here is either wired to real
 * data (see connections.js for the actual computation/source of each)
 * or an honest "Coming soon" badge in one consistent visual style,
 * defined once below (.cxn-coming-soon-badge) and reused everywhere.
 *
 * Color palette (this block only): PAGE-SCOPED this time -- unlike the
 * previous rebuild, which deliberately promoted its palette to the
 * site-wide --app-* defaults in css/variables.css (explicit instruction
 * at the time), this palette is scoped to ONLY .cxn-page and the shared
 * nav/sidebar AS THEY RENDER ON THIS PAGE. variables.css itself is not
 * touched at all by this change -- every other page keeps rendering off
 * its current --app-* values, completely unaffected.
 *
 * Mechanism: this file already consumes the shared --app-* custom
 * property NAMES throughout (surface, accent-green, border, etc.) --
 * every one of them is overridden right here, scoped to `.cxn-page` (for
 * rules that live inside <main>) and `body:has(.cxn-page)` (for the
 * shared .app-header/.app-sidebar, which are OUTSIDE <main> in the DOM
 * -- same scoping technique this file has used before for a page-scoped
 * accent). Since custom-property inheritance follows the DOM tree, not
 * stylesheet load order, this correctly reaches every descendant on
 * this page and NOTHING on any other page, without editing a single
 * selector's structure or a single property VALUE elsewhere in this
 * file -- pure token replacement.
 *
 * The sidebar itself (background gradient + active-item bar/glow) is NOT
 * overridden here -- a later task made that exact palette the real
 * site-wide default in variables.css/app-shell.css (--sidebar-* tokens),
 * so this page now simply inherits it like every other page rather than
 * shadowing it with a page-local copy the way it originally did.
 */

body:has(.cxn-page) {
  /* Named per the supplied palette, for direct traceability back to the
     spec -- also assigned to the --app-* names below so the rest of
     this file (and app-shell.css's shared nav/sidebar rules) picks them
     up with no further edits. */
  --cxn-bg-base: #0A0E1A;
  --cxn-glow-primary: #1E295E;
  --cxn-accent-mint: #10B981;
  --cxn-accent-cyan: #00E5FF;
  --cxn-accent-yellow: #EAB308;
  --cxn-accent-orange: #F97316;
  --cxn-accent-teal: #14B8A6;
  --cxn-accent-indigo: #6366F1;
  --cxn-accent-pink: #EC4899;
  --cxn-accent-sky: #0EA5E9;
  --cxn-accent-lime: #84CC16;
  --cxn-accent-rose: #F43F5E;
  --cxn-accent-fuchsia: #D946EF;
  --cxn-border-subtle: rgba(255, 255, 255, 0.08);
  --cxn-glass-border: rgba(255, 255, 255, 0.08);
  --cxn-card-surface: #101830;
  --cxn-card-surface-elevated: #141C36;

  /* ── Overrides of the shared --app-* names, scoped to this page only ── */
  --app-bg-base: var(--cxn-bg-base);
  --app-bg: var(--cxn-bg-base);
  --app-bg-gradient:
    radial-gradient(at 30% 0%, color-mix(in srgb, var(--cxn-glow-primary) 35%, transparent) 0, transparent 45%),
    radial-gradient(at 90% 60%, color-mix(in srgb, var(--cxn-glow-primary) 25%, transparent) 0, transparent 50%),
    var(--cxn-bg-base);
  --app-surface: var(--cxn-card-surface);
  --app-surface-elevated: var(--cxn-card-surface-elevated);
  --app-border: var(--cxn-border-subtle);
  --app-text-primary: #F8FAFC;
  --app-text-secondary: #94A3B8; /* already a cool, blue-leaning gray, not warm -- kept as-is */
  --app-text-muted: #94A3B8;
  --app-text-dim: #64748B; /* also cool blue-gray already */
  --app-accent-green: var(--cxn-accent-mint);
  --app-success: var(--cxn-accent-mint);
  --app-accent-cyan: var(--cxn-accent-cyan);

  /* Top header: deep navy base with symmetrical soft ambient glows on
     both left and right corners, low-opacity falloff -- not a flat fill. */
  --app-topnav-bg:
    radial-gradient(circle at 12% -30%, color-mix(in srgb, var(--cxn-glow-primary) 45%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 88% -30%, color-mix(in srgb, var(--cxn-glow-primary) 45%, transparent) 0%, transparent 55%),
    var(--cxn-bg-base);
}

/* ── Shared shell chrome, PAGE-SCOPED overrides only (see block above) ──
   Everything below targets .app-header/.app-sidebar elements that live
   OUTSIDE .cxn-page in the DOM. Each rule is scoped with body:has(.cxn-page)
   so it only ever matches while this page is open; app-shell.css's own
   selectors and property values are untouched (bar the one fallback-
   chained variable reference noted above), so every other page keeps
   rendering these exact same elements with their current defaults. */

body:has(.cxn-page) .app-header .logo-icon-box {
  box-shadow: 0 0 20px 4px color-mix(in srgb, var(--app-success) 20%, transparent);
}

body:has(.cxn-page) .app-header-icon-btn {
  color: var(--app-text-primary);
}

body:has(.cxn-page) .app-header-icon-btn:hover {
  color: var(--cxn-accent-cyan);
  background: color-mix(in srgb, var(--cxn-accent-cyan) 10%, transparent);
}

.cxn-page {
  max-width: 1600px;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 32px;
  padding-bottom: 64px;
  min-height: calc(100vh - 64px);
  background: var(--app-bg-gradient);
}

.cxn-section + .cxn-section {
  margin-top: 24px;
}

/* ── Card base -- every card-like surface on this page. .cxn-header is
   deliberately NOT in this list -- it sits directly on the page
   background with no card frame (see .cxn-header's own rule below). ── */

.cxn-card-base,
.cxn-stat-card,
.cxn-health-strip,
.cxn-card-outer,
.cxn-coming-soon-card,
.cxn-empty-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
}

/* ── Shared "Coming soon" badge -- the ONE visual pattern every honest
   placeholder on this page uses. ───────────────────────────────────── */

.cxn-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-accent-cyan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-cyan) 30%, transparent);
  color: var(--app-accent-cyan);
  font-family: var(--font-app-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cxn-coming-soon-badge svg {
  width: 11px;
  height: 11px;
  stroke-width: 1.75;
}

.cxn-coming-soon-inline {
  font-size: 10px;
  font-weight: 700;
  color: var(--app-accent-cyan);
  opacity: 0.9;
}

/* ── Icon-box accent pattern -- rounded square, accent color at 15% bg /
   25% border, icon centered with real padding (not just a smaller fixed
   icon size -- see the width/height:100% + padding split below), full-
   strength accent stroke, 1.75 stroke-width (app standard). Used for the
   header icon, stat-card icons, and the per-connection database icon. ── */

.cxn-icon-box,
.cxn-header-icon-box,
.cxn-db-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 12px;
  flex: 0 0 auto;
}

.cxn-icon-box svg,
.cxn-header-icon-box svg,
.cxn-db-icon-wrap svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.75;
}

.cxn-accent-green .cxn-icon-box,
.cxn-header-icon-box,
.cxn-db-icon-wrap {
  background: color-mix(in srgb, var(--app-accent-green) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-green) 25%, transparent);
  color: var(--app-accent-green);
  box-shadow: 0 0 22px 4px color-mix(in srgb, var(--app-accent-green) 18%, transparent);
}

.cxn-accent-blue .cxn-icon-box {
  background: color-mix(in srgb, var(--app-accent-blue) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-blue) 25%, transparent);
  color: var(--app-accent-blue);
  box-shadow: 0 0 22px 4px color-mix(in srgb, var(--app-accent-blue) 18%, transparent);
}

.cxn-accent-cyan .cxn-icon-box {
  background: color-mix(in srgb, var(--app-accent-cyan) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-cyan) 25%, transparent);
  color: var(--app-accent-cyan);
  box-shadow: 0 0 22px 4px color-mix(in srgb, var(--app-accent-cyan) 18%, transparent);
}

.cxn-accent-purple .cxn-icon-box {
  background: color-mix(in srgb, var(--app-accent-purple) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-purple) 25%, transparent);
  color: var(--app-accent-purple);
  box-shadow: 0 0 22px 4px color-mix(in srgb, var(--app-accent-purple) 18%, transparent);
}

.cxn-accent-red .cxn-icon-box {
  background: color-mix(in srgb, var(--app-accent-red) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-red) 25%, transparent);
  color: var(--app-accent-red);
  box-shadow: 0 0 22px 4px color-mix(in srgb, var(--app-accent-red) 18%, transparent);
}

/* ── PAGE HEADER ─────────────────────────────────────────────────────── */

.cxn-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 32px;
  margin-bottom: 38px;
  flex-wrap: wrap;
  /* No card frame -- sits directly on the page background/gradient,
     unlike every other card-like surface on this page. */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.cxn-header-left {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex: 1 1 480px;
  min-width: 0;
}

.cxn-header-icon-box {
  width: 56px;
  height: 56px;
  padding: 14px;
}

.cxn-header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cxn-title {
  margin: 0;
  font-family: var(--font-app-sans);
  font-size: 34px;
  font-weight: 800;
  color: var(--app-text-primary);
  line-height: 1.15;
  letter-spacing: -0.4px;
}

.cxn-subtitle {
  margin: 0;
  font-family: var(--font-app-sans);
  font-size: 15px;
  font-weight: 450;
  color: var(--app-text-muted);
  line-height: 1.5;
}

.cxn-header-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.cxn-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--font-app-sans);
  font-size: 12px;
  font-weight: 600;
}

.cxn-badge-pill svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.75;
}

.cxn-badge-pill-green {
  color: var(--app-accent-green);
  background: color-mix(in srgb, var(--app-accent-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-green) 25%, transparent);
}

.cxn-badge-pill-comingsoon {
  color: var(--app-text-muted);
  background: var(--app-surface-elevated);
  border: 1px solid var(--app-border);
}

.cxn-badge-pill-comingsoon svg {
  color: var(--app-text-dim);
}

/* Health Monitoring badge's degraded/unhealthy states -- same tint
   formula cxn-badge-pill-green above already uses (12% background,
   25% border, full-strength text/icon), just against the app's
   existing warning/danger accent tokens instead of green. */
.cxn-badge-pill-yellow {
  color: var(--app-warning);
  background: color-mix(in srgb, var(--app-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-warning) 25%, transparent);
}

.cxn-badge-pill-red {
  color: var(--app-danger);
  background: color-mix(in srgb, var(--app-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-danger) 25%, transparent);
}

/* A <button>, unlike the other header badges (plain <span>s) -- the
   Health Monitoring badge is clickable (click-to-expand, see
   connections.js's renderHealthMonitoringBadge) so it needs to look and
   behave like one, not a static label. */
#cxn-health-badge {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* Wraps the Health Monitoring badge so its click-to-expand menu (same
   .cxn-toolbar-menu the toolbar's Filter/Sort dropdowns already use)
   anchors under THIS badge specifically -- same positioning role
   .cxn-filter-dropdown-wrap/.cxn-sort-dropdown-wrap already play for
   their own buttons. */
.cxn-health-badge-wrap {
  position: relative;
  display: inline-flex;
}

/* Header Right Quick Action Buttons */
.cxn-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cxn-btn-hero-green,
.cxn-btn-hero-blue,
.cxn-btn-hero-gray {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-family: var(--font-app-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.cxn-btn-hero-green svg,
.cxn-btn-hero-blue svg,
.cxn-btn-hero-gray svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.75;
}

.cxn-btn-hero-green {
  border: none;
  background: linear-gradient(135deg, var(--app-accent-green), #4ADE80);
  color: #06130C;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--app-accent-green) 55%, transparent);
}

.cxn-btn-hero-green:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--app-accent-green) 65%, transparent);
}

.cxn-btn-hero-blue {
  border: 1px solid color-mix(in srgb, var(--app-accent-blue) 40%, transparent);
  background: color-mix(in srgb, var(--app-accent-blue) 12%, transparent);
  color: var(--app-accent-blue);
}

.cxn-btn-hero-blue:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--app-accent-blue) 20%, transparent);
}

.cxn-btn-hero-gray {
  border: 1px solid var(--app-border);
  background: var(--app-surface-elevated);
  color: var(--app-text-muted);
  text-decoration: none;
}

.cxn-btn-hero-gray:hover {
  transform: translateY(-1px);
  color: var(--app-text-primary);
  border-color: color-mix(in srgb, white 20%, transparent);
}

/* ── STATISTICS CARDS (5) ─────────────────────────────────────────────── */

.cxn-header-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1400px) {
  .cxn-header-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cxn-header-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .cxn-header-stats { grid-template-columns: 1fr; }
}

.cxn-stat-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 180ms ease, border-color 180ms ease;
}

.cxn-stat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, white 14%, var(--app-border));
}

.cxn-stat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cxn-stat-card-title {
  font-family: var(--font-app-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--app-text-muted);
  line-height: 1.3;
}

.cxn-icon-box {
  width: 40px;
  height: 40px;
  padding: 9px;
}

.cxn-stat-card-value {
  font-family: var(--font-app-sans);
  font-size: 32px;
  font-weight: 800;
  color: var(--app-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cxn-stat-card-value-sm {
  font-size: 20px;
}

.cxn-stat-card-value-comingsoon {
  display: flex;
  align-items: center;
  min-height: 36px;
}

/* Two real, independent causes of cross-card badge misalignment here,
   found via actual measurement (not assumed) -- a previous pass only
   fixed the first one:
   1. 3 of the 5 header KPI cards (Protected Databases at 0 protected,
      Next Scheduled Backup with nothing upcoming, Average Connection
      Health when locked/unscored) pass an EMPTY text node for the
      trend-badge slot instead of a real .cxn-stat-card-trend span -- a
      text node has no box height. min-height (keyed to the real badge's
      own rendered height) keeps every card's row the same MINIMUM height
      regardless of whether that card currently has a real trend value.
   2. Protected Databases' own caption ("{n} of {m} connections
      protected") is the only one of the 5 with dynamic, unbounded-length
      text -- at real connection counts/viewport widths it wraps to 2
      lines while every other card's caption stays on 1. Measured this
      live: at a 1600px viewport with 20 connections, that card's foot
      row grows from 22px to 38px (matching the wrapped caption's own
      height, min-height only guarantees a FLOOR not a ceiling), and
      align-items:center then centers its badge ~8px lower than the
      badges on every other (unwrapped, still-22px) card -- a real,
      visible cross-card misalignment min-height alone cannot fix, since
      it only bounds the SHORT side, not the tall side.
   Fixed with two layers: the caption itself no longer wraps at all
   (truncates with an ellipsis instead, below) so every row stays 22px
   in practice; align-items:flex-start is kept as defense-in-depth so
   that even if some future caption's content still forces a taller row,
   every badge still anchors to a consistent top position instead of
   drifting based on that row's own height. */
.cxn-stat-card-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

.cxn-stat-card-caption {
  font-family: var(--font-app-sans);
  font-size: 12px;
  color: var(--app-text-dim);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cxn-stat-card-trend {
  font-family: var(--font-app-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.cxn-stat-card-trend.is-green { color: var(--app-accent-green); background: color-mix(in srgb, var(--app-accent-green) 14%, transparent); }
.cxn-stat-card-trend.is-cyan { color: var(--app-accent-cyan); background: color-mix(in srgb, var(--app-accent-cyan) 14%, transparent); }
.cxn-stat-card-trend.is-purple { color: var(--app-accent-purple); background: color-mix(in srgb, var(--app-accent-purple) 14%, transparent); }
.cxn-stat-card-trend.is-red { color: var(--app-accent-red); background: color-mix(in srgb, var(--app-accent-red) 14%, transparent); }

/* ── HEALTH STRIP (4 real metrics + gradient progress bars) ──────────── */

.cxn-health-strip {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 34px 28px;
  min-height: 96px;
  flex-wrap: wrap;
}

.cxn-health-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 200px;
  min-width: 0;
}

.cxn-health-item > svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
  flex: 0 0 auto;
}

.cxn-health-item.cxn-accent-green > svg { color: var(--app-accent-green); }
.cxn-health-item.cxn-accent-blue > svg { color: var(--app-accent-blue); }
.cxn-health-item.cxn-accent-cyan > svg { color: var(--app-accent-cyan); }

.cxn-health-label {
  font-family: var(--font-app-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.cxn-health-val {
  font-family: var(--font-app-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--app-text-primary);
  white-space: nowrap;
}

.cxn-health-val.is-yes { color: var(--app-accent-green); }
.cxn-health-val.is-no { color: var(--app-text-dim); }

.cxn-health-track {
  flex: 1 1 auto;
  height: 14px;
  min-width: 50px;
  border-radius: 999px;
  background: var(--app-surface-elevated);
  overflow: hidden;
}

.cxn-health-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--app-accent-green), var(--app-accent-cyan));
  transition: width 400ms ease;
}

/* ── CONNECTION CARDS ─────────────────────────────────────────────────── */

/* #cxn-toolbar (connections.html) never actually carries the .cxn-toolbar
   CLASS -- renderToolbar() (connections.js) only ever appends children
   into it, never sets its className -- so that rule's own margin-bottom
   was dead CSS and this element rendered with ZERO space below it. With
   0px between the toolbar and the card list, adding the bulk-actions row
   (Pause/Resume/Delete/Tags, shown once >=1 connection is selected) reads
   as its button borders crowding/overlapping the first card's border
   directly beneath -- this is the real, always-present root cause (not a
   z-index issue), just one only visible once that extra row exists. 20px
   matches .cxn-list's own inter-card gap below, so the toolbar reads as
   just another item in the same rhythm rather than an arbitrary value. */
#cxn-toolbar {
  margin-bottom: 20px;
}

.cxn-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cxn-card-outer {
  position: relative;
  display: flex;
  /* Normal 1px border on every edge (inherited from .cxn-card-base) --
     no full-perimeter glow, just the accent bar below sitting on top. */
  transition: transform 180ms ease, border-color 180ms ease;
}

.cxn-card-outer:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, white 14%, var(--app-border));
}

/* Left accent bar -- a real, separate pill element (radius 999px, own
   rounded caps) rather than a thick border-left, which would inherit
   the card's own border-radius and bulge/curve at the top-left/bottom-
   left corners instead of reading as a clean vertical bar. Inset 8px
   from the top/bottom edges and 8px from the left, well clear of the
   card's own 24px body padding so it never overlaps content. */
.cxn-card-outer::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: var(--app-border);
}

.cxn-card-outer.is-is-healthy::before { background: var(--app-accent-green); }
.cxn-card-outer.is-is-paused::before { background: var(--app-warning); }
.cxn-card-outer.is-is-failed::before { background: var(--app-danger); }
.cxn-card-outer.is-is-pending::before { background: var(--app-accent-blue); }
.cxn-card-outer.is-is-none::before { background: var(--app-border); }

.cxn-card {
  display: none; /* the inner .cxn-card from buildConnectionCard() is a structural no-op wrapper; the accent bar lives on .cxn-card-outer instead */
}

.cxn-card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cxn-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cxn-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 320px;
  min-width: 0;
}

.cxn-db-icon-wrap {
  width: 48px;
  height: 48px;
  padding: 12px;
}

.cxn-card-title-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cxn-provider-name {
  margin: 0;
  font-family: var(--font-app-sans);
  font-size: 21px;
  font-weight: 700;
  color: var(--app-text-primary);
  line-height: 1.2;
}

/* Unified per-connection metadata row (F-6) -- Provider/Region/
   Environment/Encrypted/SSL ALL render as the same .cxn-badge pill
   (below), one flex-wrap row, one shared gap -- never a mix of plain
   text and pills, and never individually-tuned per-item margins. Own
   top margin, independent of .cxn-col-right's micro-stat grid --
   without it this row lands flush with the grid's first row (both at
   the same top offset), reading as one merged row instead of two
   independent stacked columns. */
.cxn-badge-row {
  margin: 9px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cxn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--font-app-sans);
  font-size: 13.5px;
  font-weight: 600;
}

.cxn-badge svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
}

.cxn-badge-green {
  color: var(--app-accent-green);
  background: color-mix(in srgb, var(--app-accent-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-green) 25%, transparent);
}

/* SSL badge "never tested" state (buildSslBadge(), connections.js) --
   honestly neutral, deliberately NOT the shared .cxn-coming-soon-badge
   look: this is real, already-knowable data the user just hasn't
   requested yet (via Test Connection), not a future/roadmap feature. */
.cxn-badge-neutral {
  color: var(--app-text-muted);
  background: var(--app-surface-elevated);
  border: 1px solid var(--app-border);
}

/* SSL badge "last test showed no SSL" state -- a real risk signal
   (unencrypted-in-transit), so it gets the same warning tone
   .cxn-status-badge.is-paused/.cxn-setup-banner already use, never a
   neutral/muted "off" look that would bury it among decorative badges. */
.cxn-badge-warning {
  color: var(--app-warning);
  background: color-mix(in srgb, var(--app-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-warning) 25%, transparent);
}

/* Environment badge -- frontend-only placeholder, see
   buildEnvironmentBadge()'s own header comment in connections.js. Uses
   the shared .cxn-badge base (F-6 unification -- .cxn-env-badge, a
   byte-for-byte duplicate of .cxn-badge's own geometry, is gone), just
   its own 3 accent colors instead of the fixed green/neutral/warning
   variants above. */
.cxn-env-production {
  color: var(--app-danger);
  background: color-mix(in srgb, var(--app-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-danger) 25%, transparent);
}

.cxn-env-staging {
  color: var(--app-accent-blue);
  background: color-mix(in srgb, var(--app-accent-blue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-blue) 25%, transparent);
}

.cxn-env-development {
  color: var(--app-text-muted);
  background: var(--app-surface-elevated);
  border: 1px solid var(--app-border);
}

/* ── Right side: status pill + health ring ──────────────────────────── */

.cxn-col-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex: 0 0 auto;
  /* Pushes this column flush to the card's right edge even when
     .cxn-card-top wraps it onto its own line (narrower cards / long
     titles) -- justify-content:space-between on the parent only works
     while both columns share a line; a lone wrapped flex item ignores
     space-between and packs to the start instead, which is what made
     the health ring/kebab read as "centered" rather than right-aligned. */
  margin-left: auto;
}

.cxn-col-right-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Three-dot menu trigger, top-right of each card next to the status
   pill. */
.cxn-kebab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--app-text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.cxn-kebab-btn:hover,
.cxn-kebab-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--app-text-primary);
}

.cxn-kebab-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

/* SSH Tunnel / Bastion Host (Edit modal) -- public key display + copy
   button, side by side. The textarea is read-only (the public key is
   server-generated, never hand-typed) and monospace so a pasted-into-
   authorized_keys comparison is easy to eyeball. */
.cxn-ssh-pubkey-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cxn-ssh-pubkey-textarea {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  resize: vertical;
}

/* Wraps the hero "Import" button so its provider dropdown (same
   .cxn-dropdown-menu below, reused as-is) anchors under THAT button
   specifically, not the .cxn-header-right group's far-right edge. */
.cxn-import-menu-wrap {
  position: relative;
  display: inline-block;
}

/* Dropdown menu -- dark elevated surface, grouped sections with muted
   uppercase labels, icon+label items. Anchored to .cxn-col-right-top
   (position:relative), so it floats over the card's own content rather
   than pushing layout -- .cxn-card-outer has no overflow:hidden, so this
   is never clipped. .cxn-provider-import-menu (the hero Import button's
   provider picker, connections.js's buildImportMenu) shares this exact
   styling via this same selector rather than the "cxn-dropdown-menu"
   class itself -- that class is also used as a page-wide selector
   elsewhere (e.g. test_connections_dropdown_menu.js's own per-card kebab-
   menu lookups), and the import menu is always present in the DOM (just
   hidden), so sharing the literal class would make it collide with any
   such lookup. */
.cxn-dropdown-menu, .cxn-provider-import-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 260px;
  max-height: min(480px, 70vh);
  overflow-y: auto;
  padding: 8px;
  background: var(--app-surface-elevated);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5);
}

.cxn-dropdown-group-label {
  padding: 10px 10px 4px;
  font-family: var(--font-app-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-dim);
}

.cxn-dropdown-group-label:first-child {
  padding-top: 4px;
}

.cxn-dropdown-group-label.is-danger {
  color: var(--app-danger);
}

.cxn-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--app-text-primary);
  font-family: var(--font-app-sans);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease;
}

.cxn-dropdown-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.cxn-dropdown-item svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  color: var(--app-text-dim);
  flex: 0 0 auto;
}

/* Honest "Coming soon" items (e.g. Audit Log) -- pinned to the item's
   right edge via the flex row's own margin-left:auto, same scoped-bump
   sizing every other nested .cxn-coming-soon-badge on this page already
   gets for its own (smaller) container. */
.cxn-dropdown-item .cxn-coming-soon-badge {
  margin-left: auto;
  height: 20px;
  padding: 0 8px;
  font-size: 10px;
  flex: 0 0 auto;
}

.cxn-dropdown-item .cxn-coming-soon-badge svg {
  width: 10px;
  height: 10px;
}

.cxn-dropdown-item.is-danger {
  color: var(--app-danger);
}

.cxn-dropdown-item.is-danger svg {
  color: var(--app-danger);
}

.cxn-dropdown-item.is-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--app-danger) 12%, transparent);
}

.cxn-dropdown-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* connections-fix-15: not-yet-supported/future providers in the Import
   menu (connections.js's buildImportMenu -- IMPORT_PROVIDERS' existing
   `enabled` flag) -- reduced size on top of the same :disabled opacity
   dimming every other disabled dropdown item already gets above, so a
   list of several future providers reads as clearly lower-priority
   background info next to the real, usable providers rather than an
   equally-weighted set of choices. Same specificity as the :disabled
   rule above (one extra class each) -- placed after it in source order
   so this wins for the height/icon/label overrides.
   Never changes cursor/interactivity beyond what :disabled already
   gives every other item in this list. */
.cxn-dropdown-item.is-future {
  height: 28px;
}

.cxn-dropdown-item.is-future svg {
  width: 13px;
  height: 13px;
}

.cxn-dropdown-item.is-future .cxn-dropdown-item-label {
  font-size: 12px;
}

.cxn-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--font-app-sans);
  font-size: 12px;
  font-weight: 700;
}

.cxn-status-badge.is-healthy { color: var(--app-accent-green); background: color-mix(in srgb, var(--app-accent-green) 15%, transparent); }
.cxn-status-badge.is-failed { color: var(--app-danger); background: color-mix(in srgb, var(--app-danger) 15%, transparent); }
.cxn-status-badge.is-paused { color: var(--app-warning); background: color-mix(in srgb, var(--app-warning) 15%, transparent); }
.cxn-status-badge.is-pending { color: var(--app-accent-blue); background: color-mix(in srgb, var(--app-accent-blue) 15%, transparent); }
.cxn-status-badge.is-none { color: var(--app-text-muted); background: var(--app-surface-elevated); }

/* ── Header micro-stat grid -- fills the space left of the Health Score
   ring (connections.js's buildHeaderMicroStats()), one row alongside the
   ring itself. ──────────────────────────────────────────────────────── */

/* Full-width row (a direct sibling of .cxn-card-top, NOT nested inside
   .cxn-col-right -- see buildConnectionCard()'s own comment on why) --
   flex-wrap so the three children (micro-stat grid / Recovery Readiness /
   health ring) reflow onto their own lines instead of overflowing and
   overlapping anything at narrow card widths (F-6 audit). */
.cxn-card-metrics-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
  margin-top: 4px;
}

.cxn-microstat-grid {
  display: grid;
  /* minmax(120px, 1fr), not (0, auto): a fixed-content-width column can't
     shrink, so once this grid's flex basis gets squeezed at narrow card
     widths the two columns used to overflow their own container and
     visually bleed into the status badge above (F-6 audit, ~420px). 1fr
     columns shrink together with the grid itself instead. */
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px 28px;
  padding-top: 0;
  flex: 1 1 320px;
  min-width: 0;
}

.cxn-microstat {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  min-width: 0;
}

/* Colored circular icon badge, same 15%-bg/25%-border/full-strength-
   stroke/glow formula as the header KPI cards' .cxn-icon-box (see that
   rule's own comment) -- reused here at a smaller size so the six
   per-connection micro-stats read as one cohesive "premium" set rather
   than a second, differently-styled icon treatment. .cxn-info-row-icon-box
   (the 9-item detail grid below) shares this exact same base + accent
   formula, just applied to a different section, so both icon rows read
   as one consistent visual system rather than two competing styles. */
.cxn-microstat-icon-box,
.cxn-info-row-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 9px;
  flex: 0 0 auto;
}

.cxn-microstat-icon-box svg,
.cxn-info-row-icon-box svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.75;
}

.cxn-microstat-icon-box.cxn-accent-blue {
  background: color-mix(in srgb, var(--app-accent-blue) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-blue) 25%, transparent);
  color: var(--app-accent-blue);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--app-accent-blue) 16%, transparent);
}

.cxn-microstat-icon-box.cxn-accent-purple {
  background: color-mix(in srgb, var(--app-accent-purple) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-purple) 25%, transparent);
  color: var(--app-accent-purple);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--app-accent-purple) 16%, transparent);
}

.cxn-microstat-icon-box.cxn-accent-green {
  background: color-mix(in srgb, var(--app-accent-green) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-green) 25%, transparent);
  color: var(--app-accent-green);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--app-accent-green) 16%, transparent);
}

.cxn-microstat-icon-box.cxn-accent-amber {
  background: color-mix(in srgb, var(--app-warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-warning) 25%, transparent);
  color: var(--app-warning);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--app-warning) 16%, transparent);
}

.cxn-microstat-icon-box.cxn-accent-yellow {
  background: color-mix(in srgb, var(--cxn-accent-yellow) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cxn-accent-yellow) 25%, transparent);
  color: var(--cxn-accent-yellow);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cxn-accent-yellow) 16%, transparent);
}

.cxn-microstat-icon-box.cxn-accent-orange {
  background: color-mix(in srgb, var(--cxn-accent-orange) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cxn-accent-orange) 25%, transparent);
  color: var(--cxn-accent-orange);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cxn-accent-orange) 16%, transparent);
}

/* ── 9-item detail grid icon badges (Schedule/Last Backup/Retention/
   Restore Quota/Next Backup/Manual Backups/Connection Status/Added/
   Database Size) -- own 9-color set, deliberately distinct from the six
   micro-stat accents above so the two icon rows don't visually repeat
   the same colors. ─────────────────────────────────────────────────── */

.cxn-info-row-icon-box.cxn-accent-cyan {
  background: color-mix(in srgb, var(--app-accent-cyan) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-cyan) 25%, transparent);
  color: var(--app-accent-cyan);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--app-accent-cyan) 16%, transparent);
}

.cxn-info-row-icon-box.cxn-accent-teal {
  background: color-mix(in srgb, var(--cxn-accent-teal) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cxn-accent-teal) 25%, transparent);
  color: var(--cxn-accent-teal);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cxn-accent-teal) 16%, transparent);
}

.cxn-info-row-icon-box.cxn-accent-indigo {
  background: color-mix(in srgb, var(--cxn-accent-indigo) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cxn-accent-indigo) 25%, transparent);
  color: var(--cxn-accent-indigo);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cxn-accent-indigo) 16%, transparent);
}

.cxn-info-row-icon-box.cxn-accent-pink {
  background: color-mix(in srgb, var(--cxn-accent-pink) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cxn-accent-pink) 25%, transparent);
  color: var(--cxn-accent-pink);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cxn-accent-pink) 16%, transparent);
}

.cxn-info-row-icon-box.cxn-accent-sky {
  background: color-mix(in srgb, var(--cxn-accent-sky) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cxn-accent-sky) 25%, transparent);
  color: var(--cxn-accent-sky);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cxn-accent-sky) 16%, transparent);
}

.cxn-info-row-icon-box.cxn-accent-lime {
  background: color-mix(in srgb, var(--cxn-accent-lime) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cxn-accent-lime) 25%, transparent);
  color: var(--cxn-accent-lime);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cxn-accent-lime) 16%, transparent);
}

.cxn-info-row-icon-box.cxn-accent-red {
  background: color-mix(in srgb, var(--app-accent-red) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-red) 25%, transparent);
  color: var(--app-accent-red);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--app-accent-red) 16%, transparent);
}

.cxn-info-row-icon-box.cxn-accent-rose {
  background: color-mix(in srgb, var(--cxn-accent-rose) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cxn-accent-rose) 25%, transparent);
  color: var(--cxn-accent-rose);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cxn-accent-rose) 16%, transparent);
}

.cxn-info-row-icon-box.cxn-accent-fuchsia {
  background: color-mix(in srgb, var(--cxn-accent-fuchsia) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cxn-accent-fuchsia) 25%, transparent);
  color: var(--cxn-accent-fuchsia);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cxn-accent-fuchsia) 16%, transparent);
}

.cxn-microstat-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cxn-microstat-label {
  font-family: var(--font-app-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--app-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cxn-microstat-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-app-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--app-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.cxn-microstat-value .cxn-coming-soon-badge {
  height: 20px;
  padding: 0 8px;
  font-size: 10.5px;
}

.cxn-microstat-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.cxn-microstat-dot.is-dot-green { background: var(--app-accent-green); }
.cxn-microstat-dot.is-dot-amber { background: var(--app-warning); }
.cxn-microstat-dot.is-dot-red { background: var(--app-danger); }
.cxn-microstat-dot.is-dot-blue { background: var(--app-accent-blue); }
.cxn-microstat-dot.is-dot-muted { background: var(--app-text-dim); }

/* Health-check staleness (connections-fix-2) -- shared by the card's
   Health Monitor micro-stat (whose dot already switched to the same
   neutral is-dot-muted grey "Pending" uses, see buildHeaderMicroStats'
   own comment on why that alone isn't enough) AND the header Health
   Monitoring badge's per-connection dropdown rows below. The warning-
   toned, italic text is what actually draws the eye to "this reading is
   old", distinct from both the calm grey of "no data yet" and the solid
   green/amber/red of a genuinely fresh healthy/degraded/unhealthy read. */
.cxn-health-checked-stale {
  color: var(--app-warning);
  font-style: italic;
}

/* Header Health Monitoring badge dropdown row (connections-fix-2): name
   + status/failure detail on the left, real "checked X ago" reading
   pinned right -- same space-between shape .cxn-sort-option already
   establishes for its own two-part rows, reused here rather than a
   third variant. */
.cxn-health-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cxn-health-menu-checked {
  font-size: 11.5px;
  color: var(--app-text-dim);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Below 480px, the micro-stat grid's own 2 columns no longer have room
   to shrink further without truncating every value (F-6 audit, ~420px)
   -- one column keeps every label/value fully readable instead. */
@media (max-width: 480px) {
  .cxn-microstat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .cxn-card-metrics-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cxn-health-ring-block {
    margin-left: 0;
    align-self: flex-start;
  }
}

.cxn-health-ring-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}

.cxn-health-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cxn-health-ring svg {
  transform: rotate(-90deg);
}

.cxn-health-ring-track {
  fill: none;
  stroke: var(--app-surface-elevated);
  stroke-width: 5.5;
}

.cxn-health-ring-track.is-unscored {
  stroke-dasharray: 3 4;
}

.cxn-health-ring-progress {
  fill: none;
  stroke: var(--app-accent-green);
  stroke-width: 5.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 500ms ease;
}

.cxn-health-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-app-sans);
  font-size: 24px;
  font-weight: 800;
  color: var(--app-text-primary);
}

.cxn-health-ring-caption {
  font-family: var(--font-app-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Recovery Readiness widget ───────────────────────────────────────────
   Real estimated time-to-full-recovery for this connection
   (connections.js's buildRecoveryReadiness()), replacing the old Recent
   Events panel in the same position (left of the Health Score ring).
   Deliberately its own distinct violet->cyan gradient treatment -- never
   used by the six micro-stat accents (blue/amber/purple/yellow/green/
   orange) or the health ring's green -- with slightly more visual weight
   (bigger/bolder value, its own icon chip, its own tinted card) than a
   plain text stat, so this reads as the standout differentiator it's
   meant to be, not just a 7th micro-stat. Same glassmorphism formula
   (color-mix tint background + tinted border + glow) the rest of this
   page's icon boxes/badges already use. ────────────────────────────── */

/* Wraps the pre-stats row + the widget itself as one stacked unit -- the
   sizing (flex-basis/max-width/min-width) that used to live directly on
   .cxn-recovery-readiness now lives here instead, since that's the outer
   element .cxn-card-metrics-row actually lays out as a flex item. */
.cxn-recovery-readiness-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 220px;
  max-width: 300px;
  min-width: 200px;
}

/* ── Pre-stats row (last backup duration + manual/scheduled counts) ─────
   Same violet->cyan gradient accent as the widget below, just lighter
   weight (small icon + gradient value + muted label) -- a compact single
   row, not a second box. ────────────────────────────────────────────── */

.cxn-recovery-pre-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  flex-wrap: wrap;
}

.cxn-recovery-pre-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cxn-recovery-pre-stat svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  color: var(--cxn-accent-indigo);
  flex: 0 0 auto;
}

.cxn-recovery-pre-stat-value {
  font-family: var(--font-app-sans);
  font-size: 12.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #A5B4FC, var(--cxn-accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cxn-recovery-pre-stat-label {
  font-size: 11px;
  color: var(--app-text-dim);
}

/* ── "Details" button (Total Backup Time stat) -- opens the durable
   per-stage breakdown modal (connections.js's openBackupStageDetailsModal),
   only rendered once conn.last_backup_stage_durations has real data.
   Small text pill, same indigo->cyan accent formula as the info-circle
   button right next to it. ──────────────────────────────────────────── */

.cxn-backup-stage-details-btn {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cxn-accent-indigo) 40%, transparent);
  background: color-mix(in srgb, var(--cxn-accent-indigo) 18%, transparent);
  color: var(--cxn-accent-indigo);
  font-family: var(--font-app-sans);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.cxn-backup-stage-details-btn:hover,
.cxn-backup-stage-details-btn:focus-visible {
  background: color-mix(in srgb, var(--cxn-accent-cyan) 25%, transparent);
  border-color: color-mix(in srgb, var(--cxn-accent-cyan) 60%, transparent);
  color: var(--cxn-accent-cyan);
  outline: none;
}

/* ── Real-time backup progress widget ────────────────────────────────────
   Above the Recovery Readiness widget (connections.js's
   buildBackupProgressWidget()), reusing that widget's own violet->cyan
   gradient accent for visual consistency. Only ever in the DOM while
   conn.backup_progress is non-null -- no idle/empty state to style, no
   fake-progress timing/animation, the fill's width is set directly from
   real polled data on every render. The transition below is purely a
   visual smoothing between two REAL states (e.g. 3/7 stages -> 4/7
   stages on the next poll tick), never a simulated fill over time. ───── */

.cxn-backup-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px;
}

.cxn-backup-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cxn-accent-indigo) 12%, transparent);
  overflow: hidden;
}

.cxn-backup-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cxn-accent-indigo), var(--cxn-accent-cyan));
  transition: width 400ms ease;
}

.cxn-backup-progress-fill.is-failed {
  background: linear-gradient(90deg, var(--app-danger, #F87171), #FCA5A5);
}

.cxn-backup-progress-status {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--app-text-secondary);
}

.cxn-backup-progress-status.is-failed {
  color: var(--app-danger, #F87171);
}

.cxn-recovery-readiness {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cxn-accent-indigo) 16%, transparent),
    color-mix(in srgb, var(--cxn-accent-cyan) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--cxn-accent-indigo) 35%, transparent);
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms ease, transform 150ms ease;
}

.cxn-recovery-readiness:hover {
  border-color: color-mix(in srgb, var(--cxn-accent-cyan) 55%, transparent);
  transform: translateY(-1px);
}

.cxn-recovery-readiness:focus-visible {
  outline: 2px solid var(--cxn-accent-cyan);
  outline-offset: 2px;
}

.cxn-recovery-readiness-title {
  font-family: var(--font-app-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cxn-recovery-readiness-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cxn-recovery-readiness-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 10px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--cxn-accent-indigo), var(--cxn-accent-cyan));
  color: #F8FAFC;
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--cxn-accent-indigo) 35%, transparent);
}

.cxn-recovery-readiness-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

.cxn-recovery-readiness-value {
  font-family: var(--font-app-sans);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(135deg, #A5B4FC, var(--cxn-accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cxn-recovery-readiness-value.is-unmeasured {
  font-size: 14.5px;
  font-weight: 700;
  background: none;
  -webkit-text-fill-color: unset;
  color: var(--app-text-secondary);
}

.cxn-recovery-readiness-hint {
  font-size: 11.5px;
  color: var(--app-text-dim);
  line-height: 1.3;
}

/* ── Recovery Readiness detail modal ─────────────────────────────────────
   Dedicated content (connections.js's buildRecoveryReadinessModalBody()),
   inside the page's shared .modal-overlay/.modal chrome (css/main.css) --
   just this section's own headline/breakdown/explanation treatment. ──── */

.cxn-recovery-modal-headline {
  margin: 4px 0 18px;
}

.cxn-recovery-modal-estimate {
  font-family: var(--font-app-sans);
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, #A5B4FC, var(--cxn-accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cxn-recovery-modal-estimate.is-unmeasured {
  background: none;
  -webkit-text-fill-color: unset;
  color: var(--app-text-secondary);
}

.cxn-recovery-modal-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--app-surface-elevated);
  border: 1px solid var(--app-border);
}

.cxn-recovery-modal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}

.cxn-recovery-modal-row-label {
  font-size: 13.5px;
  color: var(--app-text-muted);
}

.cxn-recovery-modal-row-value {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--app-text-primary);
  white-space: nowrap;
}

.cxn-recovery-modal-note {
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0;
}

.cxn-recovery-modal-explanation {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.cxn-recovery-modal-cta {
  display: inline-flex;
}

/* ── Total Backup Time info popover (connections.html's
   #backup-duration-info-modal) -- lightweight, static explanatory
   content, same .modal-overlay/.modal chrome as every other modal on
   this page. ─────────────────────────────────────────────────────────── */

.cxn-info-modal-list {
  margin: 0 0 12px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--app-text-secondary);
}

/* ── Small inline info-button next to "Total Backup Time" -- same
   indigo->cyan accent formula the Recovery Readiness widget on this
   exact card already established, scaled down for inline use next to a
   text label rather than the widget's own full colored icon box. ────── */

.cxn-recovery-pre-stat-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cxn-accent-indigo) 40%, transparent);
  background: color-mix(in srgb, var(--cxn-accent-indigo) 18%, transparent);
  color: var(--cxn-accent-indigo);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.cxn-recovery-pre-stat-info-btn:hover,
.cxn-recovery-pre-stat-info-btn:focus-visible {
  background: color-mix(in srgb, var(--cxn-accent-cyan) 25%, transparent);
  border-color: color-mix(in srgb, var(--cxn-accent-cyan) 60%, transparent);
  color: var(--cxn-accent-cyan);
  outline: none;
}

.cxn-recovery-pre-stat-info-btn svg {
  width: 9px;
  height: 9px;
  stroke-width: 3;
}

/* ── Incomplete-setup warning banner -- informational (amber), not an
   error state. Only rendered when buildIncompleteSetupBanner() finds a
   real condition (connections.js). ─────────────────────────────────── */

.cxn-setup-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-warning) 25%, transparent);
}

.cxn-setup-banner > svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  flex: 0 0 auto;
  color: var(--app-warning);
}

.cxn-setup-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-app-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--app-text-primary);
}

.cxn-setup-banner-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--app-text-dim);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 150ms ease, color 150ms ease;
}

.cxn-setup-banner-dismiss:hover {
  background: color-mix(in srgb, var(--app-warning) 15%, transparent);
  color: var(--app-text-primary);
}

.cxn-setup-banner-dismiss svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
}

/* ── 3-column info grid -- small colored icon (not boxed) + label/value/
   subvalue stack. ───────────────────────────────────────────────────── */

.cxn-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
  padding: 16px;
  background: var(--app-surface-elevated);
  border-radius: 12px;
}

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

.cxn-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Table-style horizontal row dividers -- 9 rows laid out as a 3-column
   grid (3 rows of 3), so "row 1" is children 1-3, "row 2" is 4-6, "row
   3" is 7-9. Dividers only between ROWS, never between the 3 columns
   themselves, matching the reference's table-like separation. */
@media (min-width: 901px) {
  .cxn-info-grid .cxn-info-row:nth-child(-n+6) {
    border-bottom: 1px solid var(--app-border);
    padding-bottom: 14px;
  }
  .cxn-info-grid .cxn-info-row:nth-child(n+4) {
    padding-top: 14px;
  }
}
/* 2-column layout (tablet, 561-900px): 9 items wrap 5/4 -- rows are
   1-2/3-4/5-6/7-8/9, so the row boundary falls after every 2nd item. */
@media (min-width: 561px) and (max-width: 900px) {
  .cxn-info-grid .cxn-info-row:nth-child(-n+8) {
    border-bottom: 1px solid var(--app-border);
    padding-bottom: 14px;
  }
  .cxn-info-grid .cxn-info-row:nth-child(n+3) {
    padding-top: 14px;
  }
}
/* 1-column layout (mobile, <=560px): every item is its own row. */
@media (max-width: 560px) {
  .cxn-info-grid .cxn-info-row:not(:last-child) {
    border-bottom: 1px solid var(--app-border);
    padding-bottom: 14px;
  }
  .cxn-info-grid .cxn-info-row:not(:first-child) {
    padding-top: 14px;
  }
}

.cxn-info-row-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cxn-info-row-label {
  font-family: var(--font-app-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-text-dim);
}

.cxn-info-row-value {
  font-family: var(--font-app-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--app-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cxn-info-row-sub {
  font-family: var(--font-app-sans);
  font-size: 11px;
  color: var(--app-text-dim);
}

/* ── Backup history sparkline -- real per-connection outcomes
   (connections.js's buildBackupSparkline(), ConnectionOut.recent_backups),
   most recent bar on the right (GitHub contribution graph / Vercel
   deployment history convention). ──────────────────────────────────── */

.cxn-sparkline-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cxn-sparkline-label {
  font-family: var(--font-app-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--app-text-dim);
}

.cxn-sparkline-row {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
}

.cxn-spark-bar {
  flex: 1 1 0;
  max-width: 6px;
  height: 100%;
  border-radius: 2px 2px 0 0;
  cursor: default;
}

.cxn-spark-bar.is-success { background: var(--app-accent-green); }
.cxn-spark-bar.is-failed { background: var(--app-danger); }
.cxn-spark-bar.is-empty { background: var(--app-surface-elevated); }

/* ── Actions row (6 buttons) ─────────────────────────────────────────── */

.cxn-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cxn-btn {
  flex: 1 1 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-elevated);
  color: var(--app-text-primary);
  font-family: var(--font-app-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.cxn-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.cxn-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

.cxn-btn-backup {
  border: none;
  background: linear-gradient(135deg, var(--app-accent-green), #4ADE80);
  color: #06130C;
}

.cxn-btn-backup:hover:not(:disabled) {
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--app-accent-green) 55%, transparent);
}

/* Test Connection -- deliberately outline/secondary (blue), not
   matching Backup Now's solid style: a real, wired diagnostic action
   (POST /connections/{id}/test, connections.js's testConnection()),
   just visually secondary to Backup Now's primary "do the actual job"
   action, not a signal that it's unimplemented. */
.cxn-btn-test {
  border-color: color-mix(in srgb, var(--app-accent-blue) 40%, transparent);
  background: color-mix(in srgb, var(--app-accent-blue) 10%, transparent);
  color: var(--app-accent-blue);
}

.cxn-btn-test:hover:not(:disabled) {
  background: color-mix(in srgb, var(--app-accent-blue) 18%, transparent);
}

.cxn-btn-edit:hover:not(:disabled) {
  border-color: color-mix(in srgb, white 22%, transparent);
}

.cxn-btn-delete {
  border-color: color-mix(in srgb, var(--app-danger) 35%, transparent);
  color: var(--app-danger);
}

.cxn-btn-delete:hover:not(:disabled) {
  background: color-mix(in srgb, var(--app-danger) 12%, transparent);
}

/* Duplicate/View Logs share this ghost/gray style, but for different
   reasons: Duplicate genuinely has no backend yet (honest "coming
   soon" toast, see connections.js). View Logs is fully real (F-2,
   opens the Backup History modal) -- it only shares the style for
   visual hierarchy (tertiary action), not because it's unimplemented. */
.cxn-btn-ghost {
  color: var(--app-text-muted);
}

.cxn-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

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

.cxn-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 32px;
  border-style: dashed;
}

.cxn-empty-card .empty-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 24px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--app-accent-green) 14%, transparent);
  color: var(--app-accent-green);
  border: 1px solid color-mix(in srgb, var(--app-accent-green) 28%, transparent);
}

.cxn-empty-card h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--app-text-primary);
  margin: 0 0 10px;
}

.cxn-empty-card p {
  font-size: 15px;
  color: var(--app-text-muted);
  max-width: 50ch;
  line-height: 1.55;
  margin: 0 0 28px;
}

.cxn-empty-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── "Coming soon" info cards (health-strip predecessor, egress IP) ──── */

.cxn-coming-soon-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  flex-wrap: wrap;
}

.cxn-coming-soon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: color-mix(in srgb, var(--app-accent-cyan) 14%, transparent);
  color: var(--app-accent-cyan);
}

.cxn-coming-soon-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

.cxn-coming-soon-body {
  flex: 1 1 260px;
  min-width: 0;
}

.cxn-coming-soon-title {
  margin: 0 0 4px;
  font-family: var(--font-app-sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--app-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cxn-coming-soon-desc {
  margin: 0;
  font-family: var(--font-app-sans);
  font-size: 12.5px;
  color: var(--app-text-muted);
  line-height: 1.5;
}

.cxn-info-section {
  margin-top: 24px;
}

/* Sidebar Current Plan card / Documentation link: moved to
   css/app-shell.css (.app-plan-card / .app-sidebar-footer /
   .app-sidebar-help) so it renders on all 10 app pages, not just this
   one -- see that file's own header comment on those rules. */

/* ── Grouped form sections inside the Add/Edit Connection modals (SSH
   tunnel, read replica, encryption method, storage destination, BYOK,
   BYOS) -- every disabled field here is a REAL disabled attribute, so
   nothing can be filled in and silently ignored on submit. ──────────── */

.cxn-form-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--app-border);
}

/* ── Edit modal "Command Center" tabs (General/Security/Diagnostics) --
   reuses .tab-btn (main.css/app-dashboard.css) for the buttons themselves,
   just adds the horizontal row + underline a modal needs (unlike
   settings.html's own vertical sidebar .settings-nav). ──────────────── */

.modal-subtitle {
  margin: -0.5rem 0 1rem;
  font-size: 12.5px;
}

.cxn-modal-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--app-border);
  overflow-x: auto;
}

.cxn-modal-tabs::-webkit-scrollbar {
  display: none;
}

/* First .cxn-form-section inside a tabpanel shouldn't repeat the divider
   the tab strip above it already draws -- same override
   .cxn-advanced-content already applies to its own first section. */
.cxn-modal-tabpanel-section-first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Add/Edit modals' "Advanced Options" progressive-disclosure toggle --
   see connections.js's setAdvancedOptionsExpanded. Collapsing is purely
   the `hidden` attribute on .cxn-advanced-content; nothing here disables
   or hides fields any other way. */
.cxn-advanced-options {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--app-border);
}

.cxn-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  color: var(--app-text-primary);
  font-family: var(--font-app-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cxn-advanced-toggle:hover {
  color: var(--app-accent-blue);
}

.cxn-advanced-toggle svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
  color: var(--app-text-dim);
}

.cxn-advanced-content {
  margin-top: 4px;
}

.cxn-advanced-content > .cxn-form-section:first-child,
.cxn-advanced-content > .cxn-checkbox-row:first-child {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}

.cxn-form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.cxn-form-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent-blue) 14%, transparent);
  color: var(--app-accent-blue);
}

.cxn-form-section-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.75;
}

.cxn-form-section-title {
  font-family: var(--font-app-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--app-text-primary);
}

.cxn-form-section-desc {
  margin: 6px 0 14px;
  font-family: var(--font-app-sans);
  font-size: 12.5px;
  color: var(--app-text-muted);
  line-height: 1.5;
}

.cxn-form-section .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

.cxn-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-elevated);
  font-family: var(--font-app-sans);
  cursor: default;
}

.cxn-radio-option:has(input:not(:disabled)) {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--app-accent-green) 35%, var(--app-border));
}

.cxn-radio-option input {
  width: auto;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--app-accent-green);
}

.cxn-radio-option input:disabled {
  accent-color: var(--app-text-dim);
}

.cxn-radio-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cxn-radio-option-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cxn-radio-option-desc {
  font-size: 12px;
  color: var(--app-text-muted);
}

.cxn-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-app-sans);
  font-size: 13px;
  color: var(--app-text-primary);
  margin-bottom: 14px;
}

.cxn-checkbox-row input {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--app-accent-green);
}

.cxn-storage-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--app-accent-green) 30%, var(--app-border));
  background: color-mix(in srgb, var(--app-accent-green) 8%, var(--app-surface-elevated));
  font-family: var(--font-app-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text-primary);
  margin-bottom: 10px;
}

.cxn-storage-indicator svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  color: var(--app-accent-green);
}

/* ── Glass enhancement layer for the shared .modal (main.css) -- additive
   only, scoped to pages carrying .cxn-page. Non-blurred (this rebuild's
   flatter direction), just a slightly elevated surface. ───────────────── */

body:has(.cxn-page) .modal {
  background: var(--app-surface-elevated);
  border: 1px solid var(--app-border);
}

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

@media (prefers-reduced-motion: reduce) {
  .cxn-stat-card,
  .cxn-card-outer,
  .cxn-btn,
  .cxn-btn-hero-green,
  .cxn-btn-hero-blue,
  .cxn-btn-hero-gray,
  .cxn-empty-card,
  .cxn-health-fill,
  .cxn-health-ring-progress {
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .cxn-page {
    padding-left: 18px;
    padding-right: 18px;
  }
  .cxn-header {
    padding: 22px 20px;
  }
  .cxn-card-top {
    flex-direction: column;
  }
  .cxn-col-right {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  .cxn-form-section .field-grid {
    grid-template-columns: 1fr;
  }
}

/* ── QUICK ACTIONS TOOLBAR ───────────────────────────────────────────── */

.cxn-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  min-height: 56px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.35);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.cxn-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.cxn-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* Custom Checkbox Styling */
.cxn-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-app-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text-muted);
  cursor: pointer;
  user-select: none;
}

.cxn-checkbox-wrap:hover {
  color: var(--app-text-primary);
}

.cxn-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, white 20%, var(--app-border));
  border-radius: 5px;
  background: var(--app-surface-elevated);
  cursor: pointer;
  position: relative;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  flex: 0 0 auto;
}

.cxn-checkbox:hover {
  border-color: var(--app-accent-green);
}

.cxn-checkbox:checked {
  background: var(--app-accent-green);
  border-color: var(--app-accent-green);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--app-accent-green) 40%, transparent);
}

.cxn-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #06130C;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cxn-checkbox:indeterminate {
  background: var(--app-accent-green);
  border-color: var(--app-accent-green);
}

.cxn-checkbox:indeterminate::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 2px;
  background: #06130C;
  border-radius: 1px;
}

.cxn-selection-count {
  font-family: var(--font-app-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--app-accent-green);
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-accent-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-green) 25%, transparent);
}

/* Bulk Action Buttons */
.cxn-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cxn-btn-bulk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: var(--font-app-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.cxn-btn-bulk svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.75;
}

.cxn-btn-bulk-green {
  border: none;
  background: linear-gradient(135deg, var(--app-accent-green), #4ADE80);
  color: #06130C;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--app-accent-green) 50%, transparent);
}

.cxn-btn-bulk-green:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--app-accent-green) 65%, transparent);
}

.cxn-btn-bulk-outline {
  border: 1px solid var(--app-border);
  background: var(--app-surface-elevated);
  color: var(--app-text-muted);
}

.cxn-btn-bulk-outline:hover {
  transform: translateY(-1px);
  color: var(--app-text-primary);
  border-color: color-mix(in srgb, white 20%, transparent);
  background: color-mix(in srgb, white 4%, var(--app-surface-elevated));
}

.cxn-btn-bulk-danger {
  border: 1px solid color-mix(in srgb, var(--app-danger) 40%, transparent);
  background: color-mix(in srgb, var(--app-danger) 10%, transparent);
  color: var(--app-danger);
}

.cxn-btn-bulk-danger:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--app-danger) 20%, transparent);
  border-color: var(--app-danger);
}

.cxn-btn-bulk:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Toolbar Search Input */
.cxn-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;
}

.cxn-search-wrap svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--app-text-dim);
  pointer-events: none;
}

.cxn-input-search {
  width: 100%;
  height: 38px;
  padding: 0 32px 0 36px;
  border-radius: 10px;
  background: var(--app-surface-elevated);
  border: 1px solid var(--app-border);
  color: var(--app-text-primary);
  font-family: var(--font-app-sans);
  font-size: 13px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.cxn-input-search:focus {
  border-color: var(--app-accent-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent-green) 20%, transparent);
}

.cxn-search-clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--app-text-muted);
  cursor: pointer;
}

.cxn-search-clear:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--app-text-primary);
}

.cxn-search-clear svg {
  width: 12px;
  height: 12px;
}

/* Toolbar Dropdown Trigger Buttons (Filter & Sort) */
.cxn-btn-toolbar-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-elevated);
  color: var(--app-text-muted);
  font-family: var(--font-app-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.cxn-btn-toolbar-dropdown:hover,
.cxn-btn-toolbar-dropdown[aria-expanded="true"] {
  border-color: color-mix(in srgb, white 20%, transparent);
  color: var(--app-text-primary);
  background: color-mix(in srgb, white 4%, var(--app-surface-elevated));
}

.cxn-btn-toolbar-dropdown svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.75;
  color: var(--app-text-dim);
}

.cxn-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--app-accent-green);
  color: #06130C;
  font-size: 11px;
  font-weight: 700;
}

/* Dropdowns positioning & menu style */
.cxn-filter-dropdown-wrap,
.cxn-sort-dropdown-wrap {
  position: relative;
}

.cxn-toolbar-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  width: 260px;
  max-height: 420px;
  overflow-y: auto;
  padding: 10px;
  background: var(--app-surface-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cxn-filter-section-title {
  font-family: var(--font-app-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-dim);
  margin-bottom: 4px;
}

.cxn-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-family: var(--font-app-sans);
  font-size: 13px;
  color: var(--app-text-primary);
  cursor: pointer;
  border-radius: 6px;
  transition: background 150ms ease;
}

.cxn-filter-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cxn-sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--app-text-muted);
  font-family: var(--font-app-sans);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.cxn-sort-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--app-text-primary);
}

.cxn-sort-option.is-active {
  color: var(--app-accent-green);
  font-weight: 700;
  background: color-mix(in srgb, var(--app-accent-green) 10%, transparent);
}

/* Selected-option checkmark -- without this, the icon had no width/height
   constraint at all and fell back to the browser's default replaced-
   element size (~163px), rendering as a huge, distorted diagonal shape
   instead of a small checkmark. Sized to match this page's other small
   toolbar icons (.cxn-view-btn svg is the same 16px). */
.cxn-sort-option svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  flex: 0 0 auto;
}

.cxn-filter-clear-btn {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--app-border);
  border-radius: 6px;
  background: transparent;
  color: var(--app-text-muted);
  font-family: var(--font-app-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

.cxn-filter-clear-btn:hover {
  color: var(--app-text-primary);
  border-color: color-mix(in srgb, white 20%, transparent);
}

/* Grid / List View Toggle Pill */
.cxn-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--app-surface-elevated);
  border: 1px solid var(--app-border);
}

.cxn-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--app-text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.cxn-view-btn:hover {
  color: var(--app-text-primary);
}

.cxn-view-btn.is-active {
  background: color-mix(in srgb, var(--app-accent-green) 15%, transparent);
  color: var(--app-accent-green);
}

.cxn-view-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

/* Checkbox on Grid Card */
.cxn-card-checkbox-wrap {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 10;
  opacity: 0.5;
  transition: opacity 150ms ease;
}

.cxn-card-outer:hover .cxn-card-checkbox-wrap,
.cxn-card-outer.is-selected .cxn-card-checkbox-wrap {
  opacity: 1;
}

.cxn-card-outer.is-selected {
  border-color: color-mix(in srgb, var(--app-accent-green) 40%, transparent);
  background: color-mix(in srgb, var(--app-accent-green) 3%, var(--cxn-bg-card));
}

/* LIST VIEW (Table-style rows) */
.cxn-list-table-header {
  display: grid;
  grid-template-columns: 36px 4px 36px minmax(200px, 2fr) minmax(110px, 1fr) minmax(90px, 1fr) minmax(130px, 1.2fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  font-family: var(--font-app-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-text-dim);
  border-bottom: 1px solid var(--app-border);
  margin-bottom: 6px;
}

.cxn-list-row-outer {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  transition: border-color 150ms ease, background 150ms ease;
  overflow: hidden;
}

.cxn-list-row-outer:hover {
  border-color: color-mix(in srgb, white 14%, var(--app-border));
  background: color-mix(in srgb, white 2%, var(--app-surface));
}

.cxn-list-row-outer.is-selected {
  border-color: color-mix(in srgb, var(--app-accent-green) 40%, transparent);
  background: color-mix(in srgb, var(--app-accent-green) 3%, var(--app-surface));
}

.cxn-list-row-main {
  display: grid;
  grid-template-columns: 36px 4px 36px minmax(200px, 2fr) minmax(110px, 1fr) minmax(90px, 1fr) minmax(130px, 1.2fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  min-height: 60px;
  cursor: pointer;
}

.cxn-row-accent-bar {
  width: 4px;
  height: 24px;
  border-radius: 999px;
}

.cxn-row-accent-bar.is-healthy { background: var(--app-accent-green); }
.cxn-row-accent-bar.is-paused { background: var(--app-warning); }
.cxn-row-accent-bar.is-failed { background: var(--app-danger); }
.cxn-row-accent-bar.is-pending { background: var(--app-accent-blue); }
.cxn-row-accent-bar.is-none { background: var(--app-border); }

.cxn-row-icon-wrap {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-green) 22%, transparent);
  color: var(--app-accent-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cxn-row-icon-wrap svg {
  width: 16px;
  height: 16px;
}

.cxn-row-name-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cxn-row-title {
  font-family: var(--font-app-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--app-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cxn-row-health-val {
  font-family: var(--font-app-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--app-accent-green);
}

.cxn-row-health-val.is-null {
  color: var(--app-text-dim);
}

.cxn-row-last-backup {
  font-family: var(--font-app-sans);
  font-size: 13px;
  color: var(--app-text-muted);
}

.cxn-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cxn-row-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--app-text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.cxn-row-expand-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

.cxn-row-expand-btn:hover {
  background: var(--app-border);
  color: var(--app-text-primary);
}

.cxn-row-details {
  padding: 0 20px 20px;
  border-top: 1px solid var(--app-border);
  margin-top: 4px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* No Results Card */
.cxn-no-results-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--app-surface);
  border: 1px dashed var(--app-border);
  border-radius: 16px;
  text-align: center;
  gap: 12px;
}

.cxn-no-results-icon {
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 12px;
  background: var(--app-surface-elevated);
  color: var(--app-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cxn-no-results-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.75;
}

.cxn-no-results-title {
  font-family: var(--font-app-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--app-text-primary);
  margin: 0;
}

.cxn-no-results-sub {
  font-family: var(--font-app-sans);
  font-size: 14px;
  color: var(--app-text-muted);
  max-width: 400px;
  margin: 0;
  line-height: 1.4;
}

.cxn-clear-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-accent-green) 25%, transparent);
  color: var(--app-accent-green);
  font-family: var(--font-app-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}

.cxn-clear-filters-btn:hover {
  background: color-mix(in srgb, var(--app-accent-green) 22%, transparent);
}

.cxn-clear-filters-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.75;
  flex: 0 0 auto;
}

/* ==========================================================================
   Phase 3.8: Connections + shared-shell light-first visual migration.

   This layer intentionally sits last. Earlier Connections rules encode the
   real DOM contracts, generated class names, and behavior-specific fixes; this
   layer retokens the page to the approved light-first system without changing
   any backend contract or client behavior.
   ========================================================================== */

body.connections-theme-page,
body.connections-theme-page:has(.cxn-page) {
  --cxn-bg-base: #F7F9FC;
  --cxn-glow-primary: #E0F2FE;
  --cxn-accent-mint: #10B981;
  --cxn-accent-cyan: #06B6D4;
  --cxn-accent-yellow: #F59E0B;
  --cxn-accent-orange: #F59E0B;
  --cxn-accent-teal: #14B8A6;
  --cxn-accent-indigo: #2563EB;
  --cxn-accent-pink: #EC4899;
  --cxn-accent-sky: #2563EB;
  --cxn-accent-lime: #84CC16;
  --cxn-accent-rose: #EF4444;
  --cxn-accent-fuchsia: #7C3AED;
  --cxn-border-subtle: #E2E8F0;
  --cxn-glass-border: #E2E8F0;
  --cxn-card-surface: #FFFFFF;
  --cxn-card-surface-elevated: #F8FAFC;

  --app-bg-base: #F7F9FC;
  --app-bg: #F7F9FC;
  --app-bg-gradient: #F7F9FC;
  --app-surface: #FFFFFF;
  --app-surface-elevated: #F8FAFC;
  --app-border: #E2E8F0;
  --app-border-strong: #CBD5E1;
  --app-text-primary: #0F172A;
  --app-text-secondary: #475569;
  --app-text-muted: #64748B;
  --app-text-dim: #94A3B8;
  --app-accent-green: #10B981;
  --app-success: #10B981;
  --app-accent-blue: #2563EB;
  --app-info: #2563EB;
  --app-accent-cyan: #06B6D4;
  --app-accent-purple: #7C3AED;
  --app-warning: #F59E0B;
  --app-danger: #EF4444;
  --app-accent-red: #EF4444;
  --app-topnav-bg: #FFFFFF;
}

:root[data-theme="dark"] body.connections-theme-page,
:root[data-theme="dark"] body.connections-theme-page:has(.cxn-page) {
  --cxn-bg-base: #0A0E1A;
  --cxn-glow-primary: #1E295E;
  --cxn-border-subtle: rgba(255, 255, 255, 0.08);
  --cxn-glass-border: rgba(255, 255, 255, 0.08);
  --cxn-card-surface: #101830;
  --cxn-card-surface-elevated: #141C36;

  --app-bg-base: #0A0E1A;
  --app-bg: #0A0E1A;
  --app-bg-gradient:
    radial-gradient(at 30% 0%, color-mix(in srgb, #1E295E 35%, transparent) 0, transparent 45%),
    radial-gradient(at 90% 60%, color-mix(in srgb, #1E295E 25%, transparent) 0, transparent 50%),
    #0A0E1A;
  --app-surface: #101830;
  --app-surface-elevated: #141C36;
  --app-border: rgba(255, 255, 255, 0.08);
  --app-border-strong: rgba(255, 255, 255, 0.16);
  --app-text-primary: #F8FAFC;
  --app-text-secondary: #CBD5E1;
  --app-text-muted: #94A3B8;
  --app-text-dim: #64748B;
  --app-accent-green: #10B981;
  --app-success: #10B981;
  --app-accent-blue: #3B82F6;
  --app-info: #3B82F6;
  --app-accent-cyan: #00E5FF;
  --app-accent-purple: #8B5CF6;
  --app-warning: #F59E0B;
  --app-danger: #EF4444;
  --app-accent-red: #EF4444;
  --app-topnav-bg:
    radial-gradient(circle at 12% -30%, color-mix(in srgb, #1E295E 45%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 88% -30%, color-mix(in srgb, #1E295E 45%, transparent) 0%, transparent 55%),
    #0A0E1A;
}

body.connections-theme-page .app-header .logo-icon-box {
  box-shadow: 0 0 14px color-mix(in srgb, var(--app-success) 14%, transparent);
}

body.connections-theme-page .app-header-icon-btn {
  color: var(--color-text-secondary);
}

body.connections-theme-page .app-header-icon-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}

body.connections-theme-page .cxn-page {
  max-width: none;
  margin: 0;
  padding: 28px 32px 64px;
  min-height: calc(100vh - 64px);
  background: var(--app-bg-gradient);
  color: var(--app-text-primary);
  overflow-x: hidden;
}

body.connections-theme-page .cxn-section + .cxn-section {
  margin-top: 18px;
}

body.connections-theme-page .cxn-header {
  padding: 0 4px 8px;
  margin-bottom: 18px;
  align-items: center;
}

body.connections-theme-page .cxn-header-icon-box {
  width: 56px;
  height: 56px;
  padding: 13px;
  border-radius: 14px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--app-accent-green) 12%, transparent);
}

body.connections-theme-page .cxn-title {
  color: var(--app-text-primary);
  font-size: 32px;
  letter-spacing: 0;
}

body.connections-theme-page .cxn-subtitle {
  color: var(--app-text-secondary);
}

body.connections-theme-page .cxn-card-base,
body.connections-theme-page .cxn-stat-card,
body.connections-theme-page .cxn-health-strip,
body.connections-theme-page .cxn-card-outer,
body.connections-theme-page .cxn-coming-soon-card,
body.connections-theme-page .cxn-empty-card,
body.connections-theme-page #cxn-toolbar {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.035);
}

:root[data-theme="dark"] body.connections-theme-page .cxn-card-base,
:root[data-theme="dark"] body.connections-theme-page .cxn-stat-card,
:root[data-theme="dark"] body.connections-theme-page .cxn-health-strip,
:root[data-theme="dark"] body.connections-theme-page .cxn-card-outer,
:root[data-theme="dark"] body.connections-theme-page .cxn-coming-soon-card,
:root[data-theme="dark"] body.connections-theme-page .cxn-empty-card,
:root[data-theme="dark"] body.connections-theme-page #cxn-toolbar {
  box-shadow: none;
}

body.connections-theme-page .cxn-stat-card:hover,
body.connections-theme-page .cxn-card-outer:hover {
  transform: none;
  border-color: var(--app-border-strong);
}

body.connections-theme-page .cxn-header-stats {
  gap: 14px;
}

body.connections-theme-page .cxn-stat-card {
  min-height: 138px;
  padding: 20px;
}

body.connections-theme-page .cxn-stat-card-foot {
  min-height: 24px;
}

body.connections-theme-page .cxn-stat-card-title,
body.connections-theme-page .cxn-health-label,
body.connections-theme-page .cxn-stat-card-caption {
  color: var(--app-text-secondary);
}

body.connections-theme-page .cxn-stat-card-value,
body.connections-theme-page .cxn-health-val,
body.connections-theme-page .cxn-provider-name,
body.connections-theme-page .cxn-health-ring-value {
  color: var(--app-text-primary);
}

body.connections-theme-page .cxn-icon-box,
body.connections-theme-page .cxn-header-icon-box,
body.connections-theme-page .cxn-db-icon-wrap,
body.connections-theme-page .cxn-row-icon-wrap,
body.connections-theme-page .cxn-recovery-readiness-icon,
body.connections-theme-page .cxn-action-icon,
body.connections-theme-page .cxn-metric-icon {
  box-shadow: 0 0 14px color-mix(in srgb, currentColor 12%, transparent);
}

body.connections-theme-page .cxn-accent-green .cxn-icon-box,
body.connections-theme-page .cxn-header-icon-box,
body.connections-theme-page .cxn-db-icon-wrap,
body.connections-theme-page .cxn-row-icon-wrap {
  background: color-mix(in srgb, var(--app-accent-green) 12%, transparent);
  border-color: color-mix(in srgb, var(--app-accent-green) 22%, transparent);
  color: var(--app-accent-green);
}

body.connections-theme-page .cxn-accent-blue .cxn-icon-box {
  background: color-mix(in srgb, var(--app-accent-blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--app-accent-blue) 18%, transparent);
  color: var(--app-accent-blue);
}

body.connections-theme-page .cxn-accent-purple .cxn-icon-box {
  background: color-mix(in srgb, var(--app-accent-purple) 10%, transparent);
  border-color: color-mix(in srgb, var(--app-accent-purple) 18%, transparent);
  color: var(--app-accent-purple);
}

body.connections-theme-page .cxn-accent-red .cxn-icon-box {
  background: color-mix(in srgb, var(--app-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--app-danger) 18%, transparent);
  color: var(--app-danger);
}

body.connections-theme-page .cxn-badge-pill,
body.connections-theme-page .cxn-badge,
body.connections-theme-page .cxn-stat-card-trend,
body.connections-theme-page .cxn-status-badge,
body.connections-theme-page .cxn-filter-badge,
body.connections-theme-page .cxn-coming-soon-badge {
  border: 1px solid transparent;
}

body.connections-theme-page .cxn-badge-pill-green,
body.connections-theme-page .cxn-badge-green,
body.connections-theme-page .cxn-stat-card-trend.is-green,
body.connections-theme-page .cxn-status-badge.is-healthy {
  color: #059669;
  background: #ECFDF5;
  border-color: #A7F3D0;
}

body.connections-theme-page .cxn-badge-neutral,
body.connections-theme-page .cxn-env-development,
body.connections-theme-page .cxn-badge-pill-comingsoon {
  color: var(--app-text-secondary);
  background: var(--app-surface-elevated);
  border-color: var(--app-border);
}

body.connections-theme-page .cxn-badge-warning,
body.connections-theme-page .cxn-badge-pill-yellow {
  color: #B45309;
  background: #FFFBEB;
  border-color: #FDE68A;
}

body.connections-theme-page .cxn-badge-pill-red,
body.connections-theme-page .cxn-env-production {
  color: #DC2626;
  background: #FEF2F2;
  border-color: #FECACA;
}

body.connections-theme-page .cxn-env-staging,
body.connections-theme-page .cxn-stat-card-trend.is-cyan {
  color: #2563EB;
  background: #EFF6FF;
  border-color: #BFDBFE;
}

body.connections-theme-page .cxn-stat-card-trend.is-purple {
  color: #7C3AED;
  background: #F5F3FF;
  border-color: #DDD6FE;
}

body.connections-theme-page .cxn-stat-card-trend.is-red {
  color: #DC2626;
  background: #FEF2F2;
  border-color: #FECACA;
}

:root[data-theme="dark"] body.connections-theme-page .cxn-badge-pill-green,
:root[data-theme="dark"] body.connections-theme-page .cxn-badge-green,
:root[data-theme="dark"] body.connections-theme-page .cxn-stat-card-trend.is-green,
:root[data-theme="dark"] body.connections-theme-page .cxn-status-badge.is-healthy {
  color: #A7F3D0;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.28);
}

:root[data-theme="dark"] body.connections-theme-page .cxn-badge-warning,
:root[data-theme="dark"] body.connections-theme-page .cxn-badge-pill-yellow {
  color: #FDE68A;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.3);
}

:root[data-theme="dark"] body.connections-theme-page .cxn-badge-pill-red,
:root[data-theme="dark"] body.connections-theme-page .cxn-env-production {
  color: #FECACA;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.3);
}

body.connections-theme-page .cxn-btn-hero-green,
body.connections-theme-page .cxn-btn-bulk-green {
  background: var(--app-accent-green);
  border: 1px solid var(--app-accent-green);
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.18);
}

body.connections-theme-page .cxn-btn-hero-green:hover,
body.connections-theme-page .cxn-btn-bulk-green:hover {
  background: #059669;
  border-color: #059669;
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.22);
}

body.connections-theme-page .cxn-btn-hero-blue,
body.connections-theme-page .cxn-btn-bulk-outline,
body.connections-theme-page .cxn-btn-toolbar-dropdown,
body.connections-theme-page .cxn-view-toggle,
body.connections-theme-page .cxn-btn-hero-gray,
body.connections-theme-page .cxn-clear-filters-btn {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #334155;
  box-shadow: none;
}

body.connections-theme-page .cxn-btn-hero-blue {
  color: #2563EB;
  border-color: #BFDBFE;
}

body.connections-theme-page .cxn-btn-hero-blue:hover,
body.connections-theme-page .cxn-btn-toolbar-dropdown:hover,
body.connections-theme-page .cxn-btn-toolbar-dropdown[aria-expanded="true"],
body.connections-theme-page .cxn-btn-hero-gray:hover,
body.connections-theme-page .cxn-btn-bulk-outline:hover {
  transform: none;
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

body.connections-theme-page .cxn-btn-bulk-danger,
body.connections-theme-page .cxn-btn.danger {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}

body.connections-theme-page #cxn-toolbar,
body.connections-theme-page .cxn-toolbar {
  padding: 12px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 18px;
}

body.connections-theme-page .cxn-checkbox-wrap {
  color: var(--app-text-primary);
}

body.connections-theme-page .cxn-checkbox,
body.connections-theme-page .cxn-input-search {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #0F172A;
}

body.connections-theme-page .cxn-input-search::placeholder {
  color: #94A3B8;
}

body.connections-theme-page .cxn-input-search:focus,
body.connections-theme-page .cxn-btn-toolbar-dropdown:focus-visible,
body.connections-theme-page .cxn-view-btn:focus-visible,
body.connections-theme-page .cxn-kebab-btn:focus-visible,
body.connections-theme-page .cxn-btn:focus-visible,
body.connections-theme-page .cxn-btn-hero-green:focus-visible,
body.connections-theme-page .cxn-btn-hero-blue:focus-visible,
body.connections-theme-page .cxn-btn-hero-gray:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

body.connections-theme-page .cxn-search-clear {
  background: #F1F5F9;
  color: #64748B;
}

body.connections-theme-page .cxn-view-btn.is-active {
  background: #ECFDF5;
  color: #10B981;
}

body.connections-theme-page .cxn-card-outer {
  overflow: visible;
}

body.connections-theme-page .cxn-card-outer::before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 16px 0 0 16px;
}

body.connections-theme-page .cxn-card-body {
  padding: 22px 24px 18px;
}

body.connections-theme-page .cxn-kebab-btn:hover,
body.connections-theme-page .cxn-kebab-btn[aria-expanded="true"],
body.connections-theme-page .cxn-row-expand-btn:hover,
body.connections-theme-page .cxn-dropdown-item:hover:not(:disabled),
body.connections-theme-page .cxn-filter-option:hover,
body.connections-theme-page .cxn-sort-option:hover {
  background: #F1F5F9;
  color: #0F172A;
}

body.connections-theme-page .cxn-dropdown-menu,
body.connections-theme-page .cxn-provider-import-menu,
body.connections-theme-page .cxn-toolbar-menu {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

body.connections-theme-page .cxn-dropdown-item,
body.connections-theme-page .cxn-filter-option {
  color: #334155;
}

body.connections-theme-page .cxn-dropdown-group-label,
body.connections-theme-page .cxn-filter-section-title {
  color: #64748B;
}

body.connections-theme-page .cxn-card-metrics-row {
  border-top: 1px solid #E2E8F0;
}

body.connections-theme-page .cxn-recovery-readiness,
body.connections-theme-page .cxn-recovery-pre-stat,
body.connections-theme-page .cxn-no-results-card,
body.connections-theme-page .cxn-list-row-outer,
body.connections-theme-page .cxn-radio-option,
body.connections-theme-page .cxn-form-section,
body.connections-theme-page .cxn-storage-indicator {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #0F172A;
}

body.connections-theme-page .cxn-recovery-readiness-value,
body.connections-theme-page .cxn-recovery-pre-stat-value,
body.connections-theme-page .cxn-no-results-title,
body.connections-theme-page .cxn-form-section-title,
body.connections-theme-page .cxn-radio-option-title {
  color: #0F172A;
}

body.connections-theme-page .cxn-recovery-readiness-hint,
body.connections-theme-page .cxn-recovery-pre-stat-label,
body.connections-theme-page .cxn-no-results-sub,
body.connections-theme-page .cxn-form-section-desc,
body.connections-theme-page .cxn-radio-option-desc,
body.connections-theme-page .cxn-health-ring-caption {
  color: #64748B;
}

body.connections-theme-page .cxn-recovery-readiness-icon {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #2563EB;
}

body.connections-theme-page .cxn-health-ring-track {
  stroke: #E2E8F0;
}

body.connections-theme-page .cxn-health-ring-progress {
  stroke: #10B981;
}

body.connections-theme-page .cxn-health-fill {
  background: linear-gradient(90deg, #10B981, #22C55E);
}

body.connections-theme-page .cxn-health-track {
  background: #E2E8F0;
}

body.connections-theme-page .cxn-actions,
body.connections-theme-page .cxn-card-bottom,
body.connections-theme-page .cxn-row-details {
  border-color: #E2E8F0;
}

body.connections-theme-page .cxn-btn {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #334155;
  box-shadow: none;
}

body.connections-theme-page .cxn-btn:hover:not(:disabled) {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
  transform: none;
}

body.connections-theme-page .modal {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

body.connections-theme-page .modal h3 {
  color: #0F172A;
}

body.connections-theme-page .modal .text-muted,
body.connections-theme-page .field-note,
body.connections-theme-page .text-muted {
  color: #64748B;
}

body.connections-theme-page .field input,
body.connections-theme-page .field select,
body.connections-theme-page .field textarea,
body.connections-theme-page .modal input,
body.connections-theme-page .modal select,
body.connections-theme-page .modal textarea {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
}

body.connections-theme-page .field input:focus,
body.connections-theme-page .field select:focus,
body.connections-theme-page .field textarea:focus,
body.connections-theme-page .modal input:focus,
body.connections-theme-page .modal select:focus,
body.connections-theme-page .modal textarea:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

:root[data-theme="dark"] body.connections-theme-page .cxn-btn-hero-blue,
:root[data-theme="dark"] body.connections-theme-page .cxn-btn-bulk-outline,
:root[data-theme="dark"] body.connections-theme-page .cxn-btn-toolbar-dropdown,
:root[data-theme="dark"] body.connections-theme-page .cxn-view-toggle,
:root[data-theme="dark"] body.connections-theme-page .cxn-btn-hero-gray,
:root[data-theme="dark"] body.connections-theme-page .cxn-clear-filters-btn,
:root[data-theme="dark"] body.connections-theme-page .cxn-checkbox,
:root[data-theme="dark"] body.connections-theme-page .cxn-input-search,
:root[data-theme="dark"] body.connections-theme-page .cxn-btn,
:root[data-theme="dark"] body.connections-theme-page .modal,
:root[data-theme="dark"] body.connections-theme-page .field input,
:root[data-theme="dark"] body.connections-theme-page .field select,
:root[data-theme="dark"] body.connections-theme-page .field textarea,
:root[data-theme="dark"] body.connections-theme-page .modal input,
:root[data-theme="dark"] body.connections-theme-page .modal select,
:root[data-theme="dark"] body.connections-theme-page .modal textarea,
:root[data-theme="dark"] body.connections-theme-page .cxn-dropdown-menu,
:root[data-theme="dark"] body.connections-theme-page .cxn-provider-import-menu,
:root[data-theme="dark"] body.connections-theme-page .cxn-toolbar-menu {
  background: var(--app-surface-elevated);
  border-color: var(--app-border);
  color: var(--app-text-primary);
}

:root[data-theme="dark"] body.connections-theme-page .cxn-recovery-readiness,
:root[data-theme="dark"] body.connections-theme-page .cxn-recovery-pre-stat,
:root[data-theme="dark"] body.connections-theme-page .cxn-no-results-card,
:root[data-theme="dark"] body.connections-theme-page .cxn-list-row-outer,
:root[data-theme="dark"] body.connections-theme-page .cxn-radio-option,
:root[data-theme="dark"] body.connections-theme-page .cxn-form-section,
:root[data-theme="dark"] body.connections-theme-page .cxn-storage-indicator {
  background: var(--app-surface-elevated);
  border-color: var(--app-border);
}

:root[data-theme="dark"] body.connections-theme-page .cxn-recovery-readiness-value,
:root[data-theme="dark"] body.connections-theme-page .cxn-recovery-pre-stat-value,
:root[data-theme="dark"] body.connections-theme-page .cxn-no-results-title,
:root[data-theme="dark"] body.connections-theme-page .cxn-form-section-title,
:root[data-theme="dark"] body.connections-theme-page .cxn-radio-option-title,
:root[data-theme="dark"] body.connections-theme-page .modal h3 {
  color: var(--app-text-primary);
}

:root[data-theme="dark"] body.connections-theme-page .cxn-recovery-readiness-hint,
:root[data-theme="dark"] body.connections-theme-page .cxn-recovery-pre-stat-label,
:root[data-theme="dark"] body.connections-theme-page .cxn-no-results-sub,
:root[data-theme="dark"] body.connections-theme-page .cxn-form-section-desc,
:root[data-theme="dark"] body.connections-theme-page .cxn-radio-option-desc,
:root[data-theme="dark"] body.connections-theme-page .cxn-health-ring-caption,
:root[data-theme="dark"] body.connections-theme-page .text-muted,
:root[data-theme="dark"] body.connections-theme-page .field-note {
  color: var(--app-text-muted);
}

:root[data-theme="dark"] body.connections-theme-page .cxn-kebab-btn:hover,
:root[data-theme="dark"] body.connections-theme-page .cxn-kebab-btn[aria-expanded="true"],
:root[data-theme="dark"] body.connections-theme-page .cxn-row-expand-btn:hover,
:root[data-theme="dark"] body.connections-theme-page .cxn-dropdown-item:hover:not(:disabled),
:root[data-theme="dark"] body.connections-theme-page .cxn-filter-option:hover,
:root[data-theme="dark"] body.connections-theme-page .cxn-sort-option:hover,
:root[data-theme="dark"] body.connections-theme-page .cxn-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--app-text-primary);
}

@media (max-width: 1280px) {
  body.connections-theme-page .cxn-header-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.connections-theme-page .cxn-page {
    padding: 20px 16px 48px;
  }

  body.connections-theme-page .cxn-header {
    align-items: flex-start;
  }

  body.connections-theme-page .cxn-header-right,
  body.connections-theme-page .cxn-toolbar-left,
  body.connections-theme-page .cxn-toolbar-right {
    width: 100%;
  }

  body.connections-theme-page .cxn-header-right > *,
  body.connections-theme-page .cxn-search-wrap,
  body.connections-theme-page .cxn-btn-toolbar-dropdown {
    flex: 1 1 100%;
    width: 100%;
  }

  body.connections-theme-page .cxn-header-stats,
  body.connections-theme-page .cxn-card-metrics-row {
    grid-template-columns: 1fr;
  }

  body.connections-theme-page .cxn-col-right {
    width: 100%;
  }
}