/* ── CubeWP Control Panel — Design System ─────────────────────────────────
   Load AFTER bootstrap.min.css. Overrides Bootstrap visuals to match the
   modal visibility remain intact — only colors / typography / spacing change.
   ─────────────────────────────────────────────────────────────────────────── */

/* Marketing-site font stack (sites.cubewp.com) so the panel, the client
   dashboard and the landing page are typographically identical. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand tokens mirrored from the live marketing site (sites.cubewp.com) and
     from the dashboard's signup.css, so the client dashboard and this admin
     panel share one palette. Names unchanged — values only — so the whole panel
     (and its Bootstrap bridge below) re-skins with no markup churn. */
  --bg:         #faf9f6;   /* marketing --paper (warm) */
  --surface:    #ffffff;
  --surface-2:  #f5f3ee;   /* warm equivalent of the old #f2f2f9 */
  --border:     #edebe4;
  --border-2:   #e3e0d8;
  --text:       #17162a;   /* marketing --ink */
  --muted:      #4a4860;   /* nav links, form labels, table cells               */
  --muted-1:    #3a384d;   /* higher-contrast — table col headers, high-vis labels */
  --muted-2:    #8e8ba3;   /* lowest-emphasis — sidebar section labels, brand sub  */
  --accent:     #5b3bf5;   /* marketing --indigo */
  --accent-h:   #7a5cff;   /* marketing --indigo-bright (lighter on hover) */
  /* Functional status colours stay AA-legible — see the note in signup.css. */
  --success:    #16a34a;
  --danger:     #dc2626;
  --warn:       #d97706;
  --info:       #3e9bff;
  --radius:     12px;
  --radius-sm:  8px;
  --r:          20px;
  --r-lg:       28px;
  --shadow-sm:  0 4px 16px -4px rgba(10, 8, 26, .05);
  --ease:       cubic-bezier(.16, 1, .3, 1);
  --sidebar-bg: #ffffff;
  --sidebar-w:  216px;
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ── Bootstrap token bridge ──────────────────────────────────────────────── */
:root, [data-bs-theme="light"] {
  --bs-primary:                  var(--accent);
  --bs-primary-rgb:              91, 59, 245;
  --bs-body-bg:                  var(--bg);
  --bs-body-bg-rgb:              250, 249, 246;
  --bs-body-color:               var(--text);
  --bs-secondary-bg:             var(--surface);
  --bs-tertiary-bg:              var(--border);
  --bs-border-color:             var(--border);
  --bs-border-color-translucent: rgba(10, 8, 26, 0.08);
  --bs-card-bg:                  var(--surface);
  --bs-modal-bg:                 var(--surface);
  --bs-link-color:               var(--accent);
  --bs-link-hover-color:         var(--accent-h);
  --bs-success:                  var(--success);
  --bs-danger:                   var(--danger);
  --bs-warning:                  var(--warn);
  --bs-code-color:               var(--accent);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  display: flex;
  min-height: 100vh;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth transitions on interactive elements */
a, button, input, .sidebar-link, .btn, .cp-card {
  transition: all 0.15s ease;
}

a { color: var(--accent); }
a:hover { color: var(--accent-h); }

code {
  background: rgba(91, 59, 245, 0.12) !important;
  color: var(--accent) !important;
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.8em;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* ── Login page overrides body-flex ─────────────────────────────────────── */
body.login-body { display: block; }

/* ── Scrollbars ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background: var(--border-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: var(--muted-2); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#cp-sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  z-index: 300;
}

.sidebar-brand {
  display: block;
  padding: 24px 20px 20px;
  text-decoration: none !important;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.03em;
  display: block;
}

.sidebar-brand-sub {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: block;
  margin-top: 3px;
}

.sidebar-nav { flex: 1; padding: 10px 0; }

.sidebar-section {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 18px 20px 5px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  position: relative;
}

/* First section label — no top border */
.sidebar-nav > .sidebar-section:first-child {
  border-top: none;
  padding-top: 12px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none !important;
  border-left: 2px solid transparent;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.sidebar-link i {
  width: 15px;
  text-align: center;
  font-size: 0.78rem;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.sidebar-link:hover {
  color: var(--text);
  background: rgba(91, 59, 245, 0.08);
}

.sidebar-link:hover i { opacity: 1; }

.sidebar-link.active {
  color: var(--accent);
  background: rgba(91, 59, 245, 0.10);
  border-left-color: var(--accent);
  font-weight: 600;
  box-shadow: inset 1px 0 8px rgba(91, 59, 245, 0.1);
}

.sidebar-link.active i { opacity: 1; }

.sidebar-footer { padding: 8px 0; border-top: 1px solid var(--border); }

/* ── Main wrapper ─────────────────────────────────────────────────────────── */
#cp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
#cp-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 60px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(91, 59, 245, 0.08), 0 4px 20px rgba(26, 26, 46, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
}

.topbar-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-title i { color: var(--accent); }
.topbar-sep { width: 1px; height: 18px; background: var(--border-2); flex-shrink: 0; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Search bar — pill shape */
#searchForm { max-width: 460px; flex: 1; }

#searchForm .form-control,
#searchForm input[type="search"],
#searchForm input[type="text"] {
  border-radius: 999px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text) !important;
  padding-left: 16px !important;
  font-size: 0.8rem;
}

#searchForm .form-control:focus,
#searchForm input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(91, 59, 245, 0.18), 0 0 12px rgba(91, 59, 245, 0.12) !important;
  background: var(--surface) !important;
}

/* Domain selector in topbar */
#searchForm .form-select,
.topbar-domain-select {
  border-radius: 999px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text) !important;
  font-size: 0.8rem;
}

/* ── Page content — fade-in ───────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

#cp-content {
  padding: 24px 28px 60px;
  flex: 1;
  animation: fadeIn 0.25s ease;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.cp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid rgba(91, 59, 245, 0.28);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.cp-card:hover {
  box-shadow: 0 4px 24px rgba(10, 8, 26, 0.08), 0 0 0 1px rgba(91, 59, 245, 0.12);
}

.cp-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(245, 243, 238, 0.6);
}

.cp-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

.cp-card-body { padding: 18px 20px; }

/* Bootstrap .card — for deploy page and others */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid rgba(91, 59, 245, 0.22) !important;
  border-radius: var(--radius) !important;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 24px rgba(10, 8, 26, 0.08) !important;
}

.card-header {
  background: rgba(245, 243, 238, 0.6) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 13px 18px !important;
}

.card-body { padding: 18px !important; color: var(--text) !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg:         transparent;
  --bs-table-hover-bg:   rgba(91, 59, 245, 0.06);
  --bs-table-color:      var(--text);
  --bs-table-border-color: var(--border);
  font-size: 0.8rem;
}

.table thead th {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-1) !important;
  border-bottom: 1px solid var(--border-2) !important;
  padding: 11px 12px;
  background: rgba(245, 243, 238, 0.9) !important;
  white-space: nowrap;
}

.table td {
  padding: 10px 12px;
  vertical-align: middle;
  border-color: var(--border) !important;
  transition: background 0.12s ease;
}

/* Alternating row backgrounds */
.table tbody tr:nth-of-type(odd) > td   { background: var(--surface)   !important; }
.table tbody tr:nth-of-type(even) > td  { background: var(--surface-2) !important; }

.table-hover tbody tr:hover > * {
  background: rgba(91, 59, 245, 0.06) !important;
  --bs-table-color: var(--text);
}

/* Reset Bootstrap table color modifiers */
.table-light  { --bs-table-bg: rgba(245,243,238,0.8) !important; }
.table-dark   { --bs-table-bg: rgba(245,243,238,0.8) !important; }
.table-secondary { --bs-table-bg: rgba(91,59,245,0.07) !important; }

.table-light th, .table-light td { background: rgba(245,243,238,0.8) !important; color: var(--muted-2) !important; }
.table-dark  th, .table-dark  td { background: rgba(245,243,238,0.8) !important; color: var(--muted-2) !important; }

.table-secondary td {
  background: rgba(91,59,245,0.07) !important;
  color: var(--muted) !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

.table-primary { --bs-table-bg: rgba(91,59,245,0.07) !important; }
.table-primary th { color: var(--accent) !important; background: rgba(91,59,245,0.07) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg: rgba(255,255,255,0.01) !important; }

/* ── Status badges ───────────────────────────────────────────────────────── */

/* Generic status badge base */
.badge-status {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}

/* Active — green pill */
.badge-active,
.badge[data-status="active"],
td .badge.bg-success:not(.progress-bar) {
  background: rgba(22, 163, 74, 0.12) !important;
  color: var(--success) !important;
  border: 1px solid rgba(22, 163, 74, 0.25) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

/* Marked For Cloning / provisioning — amber pill */
.badge-cloning,
.badge[data-status="cloning"] {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--warn) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

/* ── Action icon buttons in tables ───────────────────────────────────────── */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none !important;
}

.btn-icon:hover {
  background: rgba(91, 59, 245, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-icon.btn-icon-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Resource stat badges (APP NODES, cpu/mem etc.) ─────────────────────── */
.stat-badge,
.resource-badge {
  display: inline-block;
  background: rgba(91, 59, 245, 0.10);
  border: 1px solid rgba(91, 59, 245, 0.20);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 8px;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

.stat-badge.warn,
.resource-badge.warn {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.25);
  color: var(--warn);
}

.stat-badge.danger,
.resource-badge.danger {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--danger);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: var(--radius-sm) !important;
  transition: all 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-sm { font-size: 0.74rem; padding: 5px 12px; }

.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-h) !important;
  border-color: var(--accent-h) !important;
  box-shadow: 0 0 16px rgba(91, 59, 245, 0.35), 0 0 0 3px rgba(91, 59, 245, 0.2) !important;
}

.btn-accent {
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
  background: var(--accent-h);
  color: #fff;
  box-shadow: 0 0 16px rgba(91, 59, 245, 0.35), 0 0 0 3px rgba(91, 59, 245, 0.2);
}

.btn-secondary {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text) !important;
}
.btn-secondary:hover {
  background: var(--border) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.04); border-color: var(--border-2); }

.btn-warning {
  background: var(--warn) !important;
  border-color: var(--warn) !important;
  color: #07070f !important;
  font-weight: 700 !important;
}
.btn-warning:hover {
  background: #d08600 !important;
  border-color: #d08600 !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.3) !important;
}

.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.btn-danger:hover {
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3) !important;
}

.btn-outline-primary {
  --bs-btn-color:              var(--accent);
  --bs-btn-border-color:       rgba(91,59,245,0.4);
  --bs-btn-hover-bg:           rgba(91,59,245,0.1);
  --bs-btn-hover-color:        var(--accent);
  --bs-btn-hover-border-color: rgba(91,59,245,0.5);
  --bs-btn-active-bg:          rgba(91,59,245,0.15);
  --bs-btn-active-color:       var(--accent);
}

.btn-outline-secondary {
  --bs-btn-color:              var(--muted);
  --bs-btn-border-color:       var(--border-2);
  --bs-btn-hover-color:        var(--text);
  --bs-btn-hover-bg:           rgba(255,255,255,0.05);
  --bs-btn-hover-border-color: var(--border-2);
  --bs-btn-active-color:       var(--text);
  --bs-btn-active-bg:          rgba(255,255,255,0.08);
}

.btn-outline-danger {
  --bs-btn-color:              var(--danger);
  --bs-btn-border-color:       rgba(239,68,68,0.35);
  --bs-btn-hover-bg:           rgba(239,68,68,0.1);
  --bs-btn-hover-color:        var(--danger);
  --bs-btn-hover-border-color: rgba(239,68,68,0.5);
}

.btn-outline-warning {
  --bs-btn-color:              var(--warn);
  --bs-btn-border-color:       rgba(245,158,11,0.35);
  --bs-btn-hover-bg:           rgba(245,158,11,0.1);
  --bs-btn-hover-color:        var(--warn);
  --bs-btn-hover-border-color: rgba(245,158,11,0.5);
}

.btn-outline-dark {
  --bs-btn-color:              var(--muted);
  --bs-btn-border-color:       var(--border-2);
  --bs-btn-hover-color:        var(--text);
  --bs-btn-hover-bg:           rgba(255,255,255,0.05);
  --bs-btn-hover-border-color: var(--border-2);
}

.btn-link { color: var(--accent) !important; }
.btn-link:hover { color: var(--accent-h) !important; }
.link-danger  { color: var(--danger)  !important; }
.link-success { color: var(--success) !important; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border-2) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus, .form-select:focus {
  background: var(--surface-2) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 3px rgba(91, 59, 245, 0.18), 0 0 10px rgba(91, 59, 245, 0.1) !important;
}

.form-control::placeholder { color: var(--muted-2); opacity: 1; }
.form-label { font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.form-select option { background: var(--surface); color: var(--text); }
.form-control-color { padding: 2px 6px !important; height: 34px !important; }

.input-group-text {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
  color: var(--muted) !important;
  font-size: 0.8rem;
}

.form-check-input { background-color: var(--border-2); border-color: var(--border-2); }
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(91,59,245,0.18) !important; border-color: var(--accent) !important; }
.form-check-label { font-size: 0.78rem; color: var(--muted); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge { font-weight: 600; font-size: 0.65rem; letter-spacing: 0.02em; border-radius: 6px; }
.bg-secondary { background: var(--border-2) !important; color: var(--muted) !important; }
.bg-success   { background: rgba(34,197,94,0.13)  !important; color: var(--success) !important; }
.bg-danger    { background: rgba(239,68,68,0.13)   !important; color: var(--danger)  !important; }
.bg-info      { background: rgba(91,59,245,0.13)  !important; color: var(--accent)  !important; }
.bg-warning   { background: rgba(245,158,11,0.15)  !important; color: var(--warn)    !important; }
.bg-primary   { background: rgba(91,59,245,0.15)  !important; color: var(--accent) !important; }
.bg-light     { background: var(--border)           !important; color: var(--text)   !important; }
.bg-dark      { background: var(--bg)               !important; color: var(--text)   !important; }
.text-dark    { color: var(--text) !important; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-sm) !important;
  font-size: 0.8rem;
  border: none !important;
  border-left: 3px solid !important;
}
.alert-success { background: rgba(34,197,94,0.08)   !important; color: var(--success) !important; border-color: var(--success) !important; }
.alert-danger  { background: rgba(239,68,68,0.08)   !important; color: var(--danger)  !important; border-color: var(--danger)  !important; }
.alert-warning { background: rgba(245,158,11,0.08)  !important; color: var(--warn)    !important; border-color: var(--warn)    !important; border: 1px solid rgba(245,158,11,0.25) !important; border-left: 3px solid var(--warn) !important; }
.alert-info    { background: rgba(91,59,245,0.08)  !important; color: var(--accent)  !important; border-color: var(--accent)  !important; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}
.modal-header  { border-bottom: 1px solid var(--border) !important; padding: 16px 20px !important; }
.modal-title   { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--text) !important; }
.modal-body    { padding: 20px !important; }
.modal-footer  { border-top: 1px solid var(--border) !important; padding: 14px 20px !important; gap: 8px; }
.modal-backdrop.show { background: rgba(26, 26, 46, 0.45); opacity: 1; }
.btn-close       { opacity: .55; }
.btn-close:hover { opacity: 1; }

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress {
  background: var(--border-2) !important;
  height: 10px !important;
  border-radius: 100px !important;
  overflow: hidden;
}
.progress-bar { font-size: 0.6rem; line-height: 10px; font-weight: 700; }
.progress-bar.bg-info      { background: var(--accent)   !important; color: #fff !important; }
.progress-bar.bg-success   { background: var(--success)  !important; color: #fff !important; }
.progress-bar.bg-danger    { background: var(--danger)   !important; color: #fff !important; }
.progress-bar.bg-secondary { background: var(--border-2) !important; }

/* ── Log / pre output ────────────────────────────────────────────────────── */
.log-output, .modal-body pre {
  background: #02020a;
  color: #a0f0a0;
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  padding: 16px;
  margin: 0;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 0;
  border: 1px solid var(--border);
  line-height: 1.7;
}
.modal-body pre { border-radius: var(--radius-sm); max-height: 60vh; }

/* Logs page — full textarea */
#cp-content textarea.log-output,
#cp-content .log-textarea,
#cp-content textarea[readonly] {
  background: #02020a !important;
  color: #a0f0a0 !important;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
  font-size: 0.8rem !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  line-height: 1.7 !important;
  resize: vertical;
}

/* Collapse row (deploy log) */
tr.collapse > td, tr.collapsing > td { padding: 0 !important; }

/* ── Deploy page ─────────────────────────────────────────────────────────── */

/* Webhook / deploy info card — left accent bar */
.card.deploy-webhook,
.card[id*="webhook"],
.deploy-page .card:first-of-type {
  border-left: 3px solid var(--accent) !important;
  border-top: 2px solid rgba(91, 59, 245, 0.22) !important;
}

/* Warning alert when secret not set */
.alert-warning,
.deploy-warning {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--warn) !important;
  border-left: 3px solid var(--warn) !important;
}

/* ── Options page ────────────────────────────────────────────────────────── */

/* Option name cell — bold */
.options-page td:first-child,
.table td.option-name,
.table td.opt-key {
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Env key labels styled as inline code badges */
td .env-key,
td code,
.option-key-badge {
  display: inline-block;
  background: rgba(91, 59, 245, 0.12) !important;
  color: var(--accent) !important;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.76rem;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Options inputs with glow focus */
.options-page .form-control,
.options-page .form-select,
.options-page input,
.options-page select {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border-2) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}

.options-page .form-control:focus,
.options-page input:focus,
.options-page select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(91, 59, 245, 0.18), 0 0 10px rgba(91, 59, 245, 0.1) !important;
  background: var(--surface-2) !important;
}

/* ── Status dots ─────────────────────────────────────────────────────────── */
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; }
.status-dot::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.success::before { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
.status-dot.danger::before  { background: var(--danger);  box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
.status-dot.warning::before { background: var(--warn);    box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }

/* ── Login page ──────────────────────────────────────────────────────────── */
.login-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  background-image: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(91,59,245,0.10) 0%, transparent 70%);
}
.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: 0 8px 40px rgba(26, 26, 46, 0.10), 0 0 0 1px rgba(91,59,245,0.08);
}
.login-logo    { font-size: 1.3rem; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
.login-tagline { font-size: 0.76rem; color: var(--muted); margin-bottom: 28px; }

/* ── Misc utilities ──────────────────────────────────────────────────────── */
.text-muted   { color: var(--muted)   !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-warning { color: var(--warn)    !important; }
.text-accent  { color: var(--accent)  !important; }
.small        { font-size: 0.76rem !important; }
.shadow-sm    { box-shadow: 0 2px 16px rgba(26,26,46,0.08) !important; }
.bg-dark      { background: var(--bg) !important; }

/* ── SweetAlert2 ─────────────────────────────────────────────────────────── */
.swal2-popup {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 20px 60px rgba(26, 26, 46, 0.14) !important;
}
.swal2-title, .swal2-html-container { color: var(--text) !important; }
.swal2-confirm {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.15s ease !important;
}
.swal2-confirm:hover {
  background: var(--accent-h) !important;
  box-shadow: 0 0 16px rgba(91, 59, 245, 0.4) !important;
}
.swal2-cancel  { background: var(--border-2) !important; color: var(--text) !important; border-radius: var(--radius-sm) !important; }
.swal2-toast   { background: var(--surface) !important; border: 1px solid var(--border-2) !important; }
.swal2-toast .swal2-title { color: var(--text) !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #cp-sidebar { display: none; }
  #cp-topbar  { padding: 0 16px; height: 54px; }
  #cp-content { padding: 16px 16px 40px; }
}


/* ═══ Table overflow + pinned Actions column ════════════════════════════════
   BUG THIS FIXES: .cp-card is `overflow: hidden`, and the Sites table is wider
   than the card on a laptop — so the ACTIONS column was CLIPPED at the right
   edge with no way to scroll to it. The row actions were literally unreachable.

   Fix: tables get their own horizontal scroll container, and the Actions column
   is pinned to the right so it stays visible without scrolling at all.
   ═════════════════════════════════════════════════════════════════════════ */
.cp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cp-table-wrap .table thead th:last-child,
.cp-table-wrap .table tbody td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
}
.cp-table-wrap .table thead th:last-child {
  z-index: 3;
  background: var(--surface-2) !important;  /* opaque: rows scroll underneath */
}

/* Pinned body cells must be opaque too, matching the zebra striping. */
.cp-table-wrap .table tbody tr:nth-of-type(odd)  > td:last-child { background: var(--surface)   !important; }
.cp-table-wrap .table tbody tr:nth-of-type(even) > td:last-child { background: var(--surface-2) !important; }
.cp-table-wrap .table-hover tbody tr:hover > td:last-child       { background: rgba(91, 59, 245, 0.06) !important; }

/* Divider so the pinned column reads as pinned while content scrolls under it. */
.cp-table-wrap .table thead th:last-child::after,
.cp-table-wrap .table tbody td:last-child::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}

/* Row actions never wrap onto a second line. */
.cp-table-wrap .table td:last-child { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   AGENCY MANAGEMENT  (views/agencies.php)

   Layout only. Every colour, radius and font comes from the tokens at the top
   of this file, so this module re-skins with the rest of the panel and cannot
   drift into a second visual dialect.

   Laptop-first: the two-panel grid collapses at 1200px and the low-priority
   columns are dropped at 1100px, rather than letting a wide table push the
   whole page sideways.
   ═══════════════════════════════════════════════════════════════════════════ */

/* THE PAGE HAS A MEASURE. #cp-content is full-bleed, which is right for a log
   viewer and wrong for a data page: on a 1920 monitor the seven summary cards
   became seven wide, near-empty boxes and one table row spread its columns
   across 1700px. Capping the module (not #cp-content, which other views rely
   on) keeps density constant from a laptop to a large display. */
.ag-wrap { max-width: 1500px; margin: 0 auto; }

.ag-lede { color: var(--muted); font-size: .82rem; margin: 0 0 14px; max-width: 70ch; }

/* ── summary cards ─────────────────────────────────────────────────────── */
.ag-stats {
  display: grid;
  /* auto-FILL, not auto-fit: auto-fit collapses empty tracks and stretches the
     few real cards to fill the row, which is exactly the "seven enormous boxes"
     effect. auto-fill keeps the track size honest. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.ag-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.ag-stat-v { font: 700 1.35rem/1.2 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.ag-stat-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); margin-top: 2px; }
.ag-stat-danger .ag-stat-v { color: var(--danger); }
.ag-stat-info   .ag-stat-v { color: var(--accent); }

/* ── toolbar ───────────────────────────────────────────────────────────── */
.ag-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.ag-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.ag-search i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted-2); font-size: .75rem; pointer-events: none;
}
.ag-search .form-control { padding-left: 30px; }
.ag-filter { width: auto; min-width: 150px; flex: 0 0 auto; }

/* ── table ─────────────────────────────────────────────────────────────── */
.ag-table td, .ag-table th { vertical-align: middle; }
/* Explicit measures for the list table. Without them the browser distributes
   free space evenly and a 470px-wide capacity bar sits beside a two-word badge. */
.ag-list-table { table-layout: fixed; }
.ag-list-table th:nth-child(1), .ag-list-table td:nth-child(1) { width: 22%; }
.ag-list-table th:nth-child(2), .ag-list-table td:nth-child(2) { width: 9%; }
.ag-list-table th:nth-child(3), .ag-list-table td:nth-child(3) { width: 12%; }
.ag-list-table th:nth-child(4), .ag-list-table td:nth-child(4) { width: 15%; }
.ag-list-table th:nth-child(5), .ag-list-table td:nth-child(5) { width: 18%; }
.ag-list-table th:nth-child(6), .ag-list-table td:nth-child(6) { width: 14%; }
.ag-list-table th:nth-child(7), .ag-list-table td:nth-child(7) { width: 9%; }
.ag-list-table th:nth-child(8), .ag-list-table td:nth-child(8) { width: 40px; }
.ag-list-table td { overflow-wrap: anywhere; }
.ag-table tbody tr.ag-row { cursor: pointer; }
.ag-name { font-weight: 600; font-size: .82rem; color: var(--text); }
.ag-sub  { font-size: .7rem; color: var(--muted-2); }
.ag-mono { font-family: var(--font-mono); font-size: .72rem; }
.ag-na   { color: var(--muted-2); font-style: italic; font-size: .74rem; }
.ag-node-n { font-size: .78rem; }
.ag-chev { color: var(--muted-2); font-size: .7rem; }
.ag-row:hover .ag-chev { color: var(--accent); }
.ag-count {
  font-size: .68rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border-radius: 999px; padding: 1px 8px; margin-left: 6px;
}
/* Icon + label, so a state never depends on colour alone. */
.ag-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; }
.ag-badge i { font-size: .68em; }
.ag-warn-inline {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; font-weight: 600; color: var(--warn); margin-top: 3px;
}
.ag-cap-line { font-size: .78rem; font-variant-numeric: tabular-nums; }
.ag-cap-bar { height: 5px; margin-top: 4px; max-width: 160px; }

/* ── pager ─────────────────────────────────────────────────────────────── */
.ag-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border);
}
.ag-pager-info { font-size: .72rem; color: var(--muted-2); }
.ag-pager-btns { display: flex; gap: 6px; }

/* ── empty + skeleton ──────────────────────────────────────────────────── */
.ag-empty { text-align: center; padding: 44px 20px; }
.ag-empty-sm { padding: 26px 16px; }
.ag-empty i { font-size: 1.6rem; color: var(--border-2); display: block; margin-bottom: 10px; }
.ag-empty-t { font-weight: 600; color: var(--text); font-size: .86rem; }
.ag-empty-s { font-size: .76rem; color: var(--muted-2); max-width: 46ch; margin: 4px auto 0; }
.ag-skel {
  height: 14px; margin: 10px 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: ag-shimmer 1.4s ease infinite;
}
.ag-skel-rows { padding: 8px 0; }
.ag-skel-head { padding: 4px 0 14px; }
@keyframes ag-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ag-skel { animation: none; } }

/* ── detail ────────────────────────────────────────────────────────────── */
.ag-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.ag-head-name { font: 700 1.4rem/1.2 var(--font-display); color: var(--text); margin: 0; }
.ag-head-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.ag-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; margin-bottom: 12px; align-items: start; }
/* The detail cards differ a lot in height (the node card is long, capacity is
   short). Three columns on a wide screen distributes that instead of leaving a
   tall column beside a short one and a large void. */
.ag-grid-3 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.ag-panel { margin-bottom: 0; }
.ag-panel-h {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: .82rem; color: var(--text);
}
.ag-panel-h i { color: var(--accent); font-size: .8rem; }
.ag-panel-b { padding: 14px 16px; }
.ag-sec-h {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-2); font-weight: 600; margin: 16px 0 8px;
}
.ag-panel-b > .ag-sec-h:first-child { margin-top: 0; }

/* Key/value. A hostname is the longest unbreakable string on this page, so the
   value column breaks rather than widening the panel. */
.ag-kvs { margin: 0; }
.ag-kv { display: grid; grid-template-columns: 40% 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border); }
.ag-kv:first-child { border-top: 0; }
.ag-kv dt { font-size: .74rem; color: var(--muted-2); font-weight: 500; }
.ag-kv dd { font-size: .78rem; color: var(--text); margin: 0; overflow-wrap: anywhere; }

.ag-health { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ag-health .ag-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted-2); }
.ag-health.ok   .ag-dot { background: var(--success); }
.ag-health.warn .ag-dot { background: var(--warn); }
.ag-health.bad  .ag-dot { background: var(--danger); }
.ag-health-t { font-weight: 700; font-size: .88rem; color: var(--text); }
.ag-health-s { font-size: .74rem; color: var(--muted-2); }
.ag-err { display: block; margin-top: 4px; word-break: break-word; }
.ag-alert { font-size: .78rem; padding: 10px 12px; border-radius: var(--radius-sm); }
.ag-note {
  display: flex; gap: 7px; font-size: .72rem; color: var(--muted-2);
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 9px 11px; margin-top: 12px;
}
.ag-note i { color: var(--muted-2); margin-top: 2px; }
.ag-note code {
  font-size: .7rem; padding: 0 3px; background: transparent;
  color: var(--muted); border: 0; white-space: nowrap;
}

/* Provisioning ladder — shape and text carry the state, not colour. */
.ag-steps { list-style: none; margin: 0; padding: 0; }
.ag-step { display: flex; align-items: center; gap: 9px; font-size: .78rem; padding: 5px 0; color: var(--muted-2); }
.ag-step i { font-size: .7rem; }
.ag-step-done    { color: var(--muted); }
.ag-step-done i  { color: var(--success); }
.ag-step-current { color: var(--text); font-weight: 600; }
.ag-step-current i { color: var(--accent); }
.ag-step-fail    { color: var(--danger); font-weight: 600; }

.ag-cap-big { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ag-cap-n  { font: 700 1.8rem/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.ag-cap-of { font-size: 1rem; color: var(--muted-2); }
.ag-cap-bar-lg { height: 8px; margin-top: 8px; }

.ag-timeline { list-style: none; margin: 0; padding: 0; }
.ag-timeline li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.ag-timeline li:first-child { border-top: 0; }
.ag-tl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 6px; }
.ag-tl-l { font-size: .78rem; color: var(--text); }

/* ── laptop widths ─────────────────────────────────────────────────────── */
/* One column before the two panels are squeezed into unreadable strips. */
@media (max-width: 1200px) {
  .ag-grid { grid-template-columns: 1fr; }
}
/* Column priorities: agency, plan, both states, capacity and the chevron stay.
   Node detail and the owned/client split move to the detail page rather than
   making the whole application scroll sideways. */
@media (max-width: 1100px) {
  .ag-col-node, .ag-col-sites { display: none; }
}
@media (max-width: 860px) {
  .ag-toolbar { gap: 6px; }
  .ag-filter  { flex: 1 1 140px; min-width: 0; }
  .ag-kv      { grid-template-columns: 1fr; gap: 2px; }
  .ag-head-actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITES LIST — filter bar, table, actions, pagination
   ═══════════════════════════════════════════════════════════════════════════

   The laptop problem this solves: the old row carried seven icon buttons in one
   group, which forced the table wider than its card and pushed the Actions
   header outside it. Widths below are proportional, and the action column is now
   a fixed, small, two-control cell — so the space goes to the domain, which is
   what an operator actually scans.
   ------------------------------------------------------------------------- */

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.cp-filters {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cp-filters-row {
  display: flex;
  flex-wrap: wrap;               /* wraps instead of overflowing on a laptop */
  align-items: center;
  gap: 8px;
}
.cp-filter-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
}
.cp-filter-search i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--muted, #7a7a8c); pointer-events: none;
}
.cp-filter-search input {
  width: 100%; height: 34px;
  padding: 0 12px 0 32px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: inherit;
}
.cp-filter-search input:focus {
  outline: none;
  border-color: var(--accent, #5b3bf5);
  box-shadow: 0 0 0 3px rgba(91, 59, 245, .12);
}
.cp-filter-sel {
  height: 34px;
  max-width: 190px;
  padding: 0 28px 0 10px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, #fff) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237a7a8c'%3e%3cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3e%3c/svg%3e") no-repeat right 8px center/14px;
  color: inherit;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.cp-filter-sel:focus { outline: none; border-color: var(--accent, #5b3bf5); }

/* Active filters — always visible, always removable (brief 11). */
.cp-filter-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px;
}
.cp-chips-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #7a7a8c); margin-right: 2px;
}
.cp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 10px;
  font-size: 12px; text-decoration: none;
  background: rgba(91, 59, 245, .08);
  border: 1px solid rgba(91, 59, 245, .22);
  border-radius: 999px;
  color: var(--accent, #5b3bf5);
}
.cp-chip:hover { background: rgba(91, 59, 245, .16); color: var(--accent, #5b3bf5); }
.cp-chip-k { opacity: .75; }
.cp-chip-v { font-weight: 650; }
.cp-chip-x { font-size: 14px; line-height: 1; opacity: .6; }
.cp-chip:hover .cp-chip-x { opacity: 1; }
.cp-chip-clear {
  font-size: 12px; text-decoration: none; color: var(--muted, #7a7a8c);
  margin-left: 4px; border-bottom: 1px dotted currentColor;
}
.cp-chip-clear:hover { color: var(--danger, #dc2626); }

.cp-sites-count { font-size: 12.5px; color: var(--muted, #7a7a8c); }
.cp-sites-count strong { color: var(--text, #1a1a2e); font-weight: 680; }

/* ── Table ──────────────────────────────────────────────────────────────── */
/* Proportional widths so the domain gets the room the icons used to take. */
.cps-c-n      { width: 44px; }
.cps-c-status { width: 116px; }
.cps-c-site   { width: auto; min-width: 260px; }
.cps-c-infra  { width: 160px; }
.cps-c-owner  { width: 190px; }
.cps-c-act    { width: 92px; }

#wrapperSiteList thead th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  color: var(--muted, #7a7a8c);
  white-space: nowrap;
}
#wrapperSiteList tbody td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
#wrapperSiteList tbody tr:hover .cps-domain { color: var(--accent, #5b3bf5); }

/* Site cell — domain first and largest; the id compact beside it. */
.cps-site { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cps-id {
  flex: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 650;
  color: var(--muted, #7a7a8c);
  background: var(--bg-2, #f4f4f8);
  border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px;
}
.cps-domain {
  font-size: 13.5px; font-weight: 620;
  color: var(--text, #1a1a2e); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cps-wp { flex: none; font-size: 11px; color: var(--muted-2, #9a9aab); }
.cps-wp:hover { color: var(--accent, #5b3bf5); }
.cps-sub {
  display: flex; align-items: center; gap: 10px;
  margin-top: 2px; min-width: 0;
}
.cps-email, .cps-custom {
  font-size: 11.5px; color: var(--muted, #7a7a8c);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cps-custom { color: var(--accent, #5b3bf5); opacity: .85; flex: none; }

/* Infrastructure — role first, then placement. */
.cps-role {
  display: inline-block; font-size: 11px; font-weight: 650;
  padding: 1px 7px; border-radius: 5px; border: 1px solid transparent;
}
.cps-role-shared    { background: rgba(37,99,235,.10);  color: #1d4ed8; border-color: rgba(37,99,235,.22); }
.cps-role-dedicated { background: rgba(217,119,6,.10);  color: #b45309; border-color: rgba(217,119,6,.22); }
.cps-role-agency    { background: rgba(124,58,237,.10); color: #6d28d9; border-color: rgba(124,58,237,.22); }
.cps-role-unknown   { background: var(--bg-2, #f4f4f8); color: var(--muted, #7a7a8c); border-color: var(--border); }
.cps-node { display: block; font-size: 11px; color: var(--muted, #7a7a8c); margin-top: 2px; }

/* Owner */
/* Ownership on the universal Sites row (blueprint §8.5 / C5). */
.cps-own { display: block; font-size: 10.5px; margin-top: 1px; white-space: nowrap; }
.cps-own i { font-size: 9px; opacity: .8; }
.cps-own-agency { color: var(--muted, #7a7a8c); }
.cps-own-client { color: var(--info-text, #0b5ed7); }
/* Agency detail: ownership × liveness card pair (§8.5). */
.ag-own-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.ag-own { padding: 12px 14px; }
.ag-own-h { font-size: 11.5px; color: var(--muted, #7a7a8c); text-transform: uppercase; letter-spacing: .04em; }
.ag-own-n { font-size: 26px; font-weight: 600; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.ag-own-u { font-size: 13px; font-weight: 400; color: var(--muted, #7a7a8c); }
@media (max-width: 640px) { .ag-own-grid { grid-template-columns: 1fr; } }
.cps-agency { display: block; font-size: 11.5px; color: var(--text, #1a1a2e); margin-top: 2px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cps-cap { display: inline-block; font-size: 10.5px; margin-top: 2px; color: var(--muted, #7a7a8c); }
.cps-cap-premium { color: #6d28d9; font-weight: 620; }

/* Actions — ONE visible control plus an overflow menu. */
.cps-actions { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.cps-menu { --bs-dropdown-min-width: 232px; font-size: 13px; }
.cps-menu .dropdown-header { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.cps-menu .dropdown-item { display: flex; align-items: center; }
.cps-warn { margin-left: auto; font-size: 10px; color: #b45309; }
.cps-menu .cps-danger { color: var(--danger, #dc2626); }
.cps-menu .cps-danger:hover { background: rgba(220,38,38,.08); color: var(--danger, #dc2626); }

/* Empty + pagination */
.cps-empty { text-align: center; padding: 40px 16px !important; color: var(--muted, #7a7a8c); }
.cps-empty i { display: block; font-size: 22px; opacity: .4; margin-bottom: 10px; }
.cps-empty strong { display: block; color: var(--text, #1a1a2e); font-size: 14px; margin-bottom: 3px; }
.cps-empty span { font-size: 12.5px; }

.cps-pager {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--border);
}
.cps-pager-info { font-size: 12.5px; color: var(--muted, #7a7a8c); flex: 1; }
.cps-pager-info strong { color: var(--text, #1a1a2e); }
.cps-pager-nav { display: flex; align-items: center; gap: 6px; }
.cps-pager-page { font-size: 12px; color: var(--muted, #7a7a8c); }
.cps-pager .disabled { opacity: .4; pointer-events: none; }

/* ── Laptop widths ──────────────────────────────────────────────────────────
   1280–1440 is where this page is actually used. The columns already collapse
   via Bootstrap's d-none utilities; these keep the remaining ones from
   crowding rather than letting the table push past its card. */
@media (max-width: 1440px) {
  .cps-c-owner { width: 170px; }
  .cps-c-infra { width: 148px; }
  .cp-filter-sel { max-width: 165px; font-size: 12px; }
}
@media (max-width: 1280px) {
  .cps-c-status { width: 104px; }
  .cps-c-owner  { width: 152px; }
  .cps-domain   { font-size: 13px; }
  .cp-filter-sel { max-width: 150px; }
}
/* Below md the table scrolls inside ITS OWN container — never the page. */
@media (max-width: 767.98px) {
  .cp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cp-filters-row { gap: 6px; }
  .cp-filter-search { flex: 1 1 100%; }
  .cp-filter-sel { flex: 1 1 calc(50% - 3px); max-width: none; }
  .cps-pager { flex-wrap: wrap; }

  /* THE DOMAIN MUST NEVER BE THE THING THAT COLLAPSES.
     The site cell is a flex row of [id chip][domain][wp icon]. The chip and the
     icon are `flex: none`, so when the column narrowed it was the domain — the
     one field the row exists to show — that shrank to zero width. Measured at
     375px: every row displayed an id and an email and no site name at all.
     Giving it the full line makes it the item that gets the space, and pushes
     the two fixed-size affordances underneath instead. */
  .cps-site   { flex-wrap: wrap; row-gap: 2px; }
  .cps-domain { flex: 1 1 100%; }
  .cps-id     { order: 2; }
  .cps-wp     { order: 3; }
}

/* ── Open row menu vs. the pinned Actions column ──────────────────────────────
   BUG THIS FIXES: the overflow menu opened UNDER the rows below it.

   The pinned column above sets `position: sticky; z-index: 2` on every
   td:last-child. That makes each action cell its own stacking context, so the
   menu's own z-index (Bootstrap's 1000) is confined INSIDE that cell and can no
   longer compete with anything outside it. Cells then paint in document order,
   which is why row 6's opaque action cell landed on top of row 2's open menu.

   The fix is to raise the CELL, not the menu — the menu cannot escape a context
   its own ancestor created. `cps-open` is toggled by Bootstrap's dropdown events
   in app.js; the :has() rule is the same thing without JS, kept separate so a
   browser lacking :has() still gets the class-based rule rather than dropping
   both (an unsupported selector invalidates its whole list).

   The menu is ALSO clipped by `.cp-table-wrap`'s scroll container — overflow-x
   auto computes overflow-y to auto too — which is why the toggle asks Popper for
   the fixed strategy: a fixed-positioned menu is not clipped by ancestor
   overflow. Both are needed; neither alone is enough. */
.cp-table-wrap .table tbody td:last-child.cps-open { z-index: 6; }
.cp-table-wrap .table tbody td:last-child:has(.dropdown-menu.show) { z-index: 6; }

/* ── Column widths must actually BIND ────────────────────────────────────────
   With the default `table-layout: auto` the widths above are only hints: the
   browser still sizes every column to its widest content, so one long domain
   (or one long email) pushed the table past its card and brought the horizontal
   scrollbar back — the exact problem the pinned Actions column exists to work
   around. Measured at 1280: the table wanted 1079px inside a 1000px card.

   `fixed` makes the declared widths authoritative and gives the leftover to the
   `auto` Site column, which is the one that should absorb slack. Scoped to this
   table so no other list changes behaviour. */
#wrapperSiteList .table { table-layout: fixed; }

/* An ellipsis needs a flex item that is ALLOWED to shrink. Flex items default to
   min-width:auto — the content's own minimum — so text-overflow never triggered
   however narrow the column got. */
.cps-site  > *,
.cps-sub   > * { min-width: 0; }
.cps-domain    { flex: 0 1 auto; }

/* Plan, agency and capability are three separate facts; side by side they were
   clipped at the column edge ("Free Prem…"). Stacked, each stays readable. */
.cps-cap { display: block; }

/* DO NOT give this cell `overflow: hidden`.
   It is the obvious way to stop a wide control from stretching the table, and it
   silently CLIPS the row's dropdown menu to a 92px box — measured: the menu was
   painted, 236px wide, and invisible. The width is kept in check by every control
   in this column being icon-only instead. */
.cps-actions .cps-danger { color: var(--danger, #dc2626); }
.cps-actions .cps-danger:hover { background: rgba(220, 38, 38, .08); }

/* Template chip in the Site cell — the vertical a site was built from. */
.cps-tpl {
  flex: none;
  font-size: 11px;
  color: var(--muted, #7a7a8c);
  background: var(--bg-2, #f4f4f8);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0 5px;
  white-space: nowrap;
}
.cps-tpl i { font-size: 9px; opacity: .6; margin-right: 2px; }

/* ── New-site chooser: kind, then how to start ────────────────────────────── */
.cp-step-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 650; color: var(--muted, #7a7a8c); margin-bottom: 8px;
}
.cp-kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-kind-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; text-align: left;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.cp-kind-card:hover:not(:disabled) { border-color: var(--accent, #5b3bf5); }
.cp-kind-card.is-on {
  border-color: var(--accent, #5b3bf5);
  background: rgba(91, 59, 245, .06);
}
.cp-kind-card > i { font-size: 17px; color: var(--accent, #5b3bf5); margin-bottom: 6px; }
.cp-kind-name { font-size: 14px; font-weight: 650; color: var(--text, #1a1a2e); }
.cp-kind-desc { font-size: 12px; color: var(--muted, #7a7a8c); }

/* Shown, never selectable: the design is agreed but provisioning is phase P3.
   Greyed is honest about direction; clickable would enqueue an unrunnable job. */
.cp-kind-card.is-disabled { opacity: .55; cursor: not-allowed; }
.cp-kind-card.is-disabled:hover { border-color: var(--border); }
.cp-kind-soon {
  margin-top: 6px; font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #7a7a8c);
  background: var(--bg-2, #f4f4f8);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}
@media (max-width: 575.98px) { .cp-kind-grid { grid-template-columns: 1fr; } }

/* Site kind on a row — only shown when it is NOT the default, so 179 existing
   WordPress sites gain no visual noise from a column that says the same thing. */
.cps-kind {
  flex: none; font-size: 11px; font-weight: 650;
  padding: 0 5px; border-radius: 5px;
  background: rgba(13, 148, 136, .10); color: #0f766e;
  border: 1px solid rgba(13, 148, 136, .22);
}

/* Agencies → release infrastructure control (§9.8 stage 3). */
.ag-release-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; max-width: 520px; }
.ag-release-row input { max-width: 240px; }
.ag-release-out { margin-top: 6px; min-height: 1.2em; }