/* ============ Satellites — styles for grouped Campaigns / Platforms table / Credentials ============ */

/* ---------- shared: a page that fills the viewport with two scroll regions ---------- */
.page-fill { display: flex; flex-direction: column; height: calc(100vh - 52px); min-height: 0; }

/* ===================== SCREEN 1 — Campaigns (two-panel) ===================== */
.camp2 { display: flex; flex: 1; min-height: 0; gap: 0; }
.camp2 > * { min-width: 0; }

.camp-resizer {
  flex: none;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  border-left: 1px solid var(--border-soft);
  margin: 0 7px;
  border-radius: 2px;
  transition: background .15s, border-color .15s;
  position: relative;
}
.camp-resizer:hover { background: color-mix(in oklab, var(--accent) 25%, transparent); border-color: var(--accent); }
.camp-resizer.dragging { background: color-mix(in oklab, var(--accent) 40%, transparent); border-color: var(--accent); }

/* left: groups */
.grp-panel { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.grp-search { padding: 12px; border-bottom: 1px solid var(--border-soft); }
.grp-search .input { width: 100%; }
.grp-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.grp-foot { padding: 10px 12px; border-top: 1px solid var(--border-soft); }

.grp-item { border-radius: 8px; border: 1px solid transparent; overflow: hidden; transition: background .12s; }
.grp-head { display: flex; align-items: center; gap: 9px; padding: 9px 10px; cursor: pointer; user-select: none; border-left: 2px solid transparent; }
.grp-item:hover .grp-head { background: var(--surface-2); }
.grp-item.selected { background: color-mix(in oklab, var(--accent) 9%, transparent); border-color: color-mix(in oklab, var(--accent) 24%, var(--border-soft)); }
.grp-item.selected .grp-head { border-left-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.grp-chev { color: var(--muted); display: inline-flex; transition: transform .14s; flex: none; }
.grp-chev.open { transform: rotate(0deg); }
.grp-ic { color: var(--muted); flex: none; }
.grp-item.selected .grp-ic { color: var(--accent); }
.grp-meta { flex: 1; min-width: 0; }
.grp-name-wrap { display: flex; align-items: center; gap: 5px; }
.grp-name { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-rename-btn { opacity: 0; background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px; line-height: 1; border-radius: 3px; display: inline-flex; transition: opacity .12s; }
.grp-rename-btn:hover { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.grp-item:hover .grp-rename-btn { opacity: 1; }
.grp-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.grp-countbadge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border-soft); flex: none; }
.grp-item.selected .grp-countbadge { background: color-mix(in oklab, var(--accent) 18%, var(--surface-3)); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
.grp-mini { height: 3px; border-radius: 2px; background: var(--surface-3); margin: 0 10px 9px; overflow: hidden; }
.grp-mini > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; box-shadow: 0 0 calc(var(--glow) * 8px) var(--accent); }

/* left: child campaign rows (when expanded) */
.grp-children { padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 1px; }
.grp-child { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 30px; border-radius: 6px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.grp-child:hover { background: var(--surface-2); color: var(--text); }
.grp-child .cdot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.grp-child .cdom { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-child .cpct { font-size: 10px; color: var(--muted); }

/* right: campaign rows */
.camp-right { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.camp-right-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; flex: none; min-width: 0; }
.camp-right-title { font-family: var(--font-head); font-weight: 600; font-size: 21px; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; min-width: 0; }
.camp-right-title .gtag { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding: 2px 8px; border: 1px solid var(--border-soft); border-radius: 6px; }
.camp-rows { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); }

.crow { display: grid; grid-template-columns: minmax(0, 1.5fr) 116px minmax(0, 1.2fr) auto; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .1s; }
.crow:last-child { border-bottom: none; }
.crow:hover { background: var(--surface-2); }
.crow-id { min-width: 0; }
.crow-dom { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow-niche { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow-niche-editable { display: inline-flex; align-items: center; gap: 5px; cursor: text; border-radius: 3px; padding: 0 2px; margin: 0 -2px; }
.crow-niche-editable:hover { color: var(--text); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.crow-pencil { display: none; color: var(--accent); flex-shrink: 0; }
.crow-niche-editable:hover .crow-pencil { display: inline-flex; }
.crow-prog { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crow-prog .bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.crow-prog .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 3px; }
.crow-prog .lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }
.crow-chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.crow-sched { justify-self: end; }

.statchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.statchip .d { width: 5px; height: 5px; border-radius: 50%; }

/* empty state */
.camp-empty { flex: 1; display: grid; place-items: center; border: 1px dashed var(--border); border-radius: var(--radius); background: color-mix(in oklab, var(--surface) 60%, transparent); }
.camp-empty .inner { text-align: center; color: var(--muted); }
.camp-empty .glyph { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 18px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent); background: radial-gradient(120% 120% at 30% 20%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%); box-shadow: 0 0 calc(var(--glow) * 24px) -6px color-mix(in oklab, var(--accent) 50%, transparent); }
.camp-empty h3 { font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--text-dim); margin: 0 0 6px; letter-spacing: .03em; }
.camp-empty p { margin: 0; font-size: 12.5px; }

/* ===================== SCREEN 2 — Platforms table ===================== */
.plat-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text-dim); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .12s; }
.pill:hover { border-color: var(--muted); color: var(--text); }
.pill.on { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); color: var(--accent); }
.pill .pcount { font-family: var(--font-mono); font-size: 10px; opacity: .8; }

.plat-tbl-wrap { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: auto; background: var(--surface); max-height: calc(100vh - 230px); }
table.plat-tbl { width: 100%; border-collapse: collapse; min-width: 820px; }
.plat-tbl th { position: sticky; top: 0; z-index: 5; text-align: left; font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.plat-tbl td { padding: 9px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.plat-grouphead td { position: sticky; top: 37px; z-index: 4; background: #141d2f; padding: 7px 14px; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
.plat-grouphead .gh { display: flex; align-items: center; gap: 12px; }
.plat-grouphead .gh-name { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.plat-grouphead .gh-suffix { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.plat-grouphead .gh-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.plat-row { transition: background .1s; }
.plat-row:hover { background: var(--surface-2); }
.plat-name-cell { display: flex; align-items: center; gap: 10px; }
.plat-name-cell .nm { font-weight: 500; color: var(--text); font-size: 13px; }
.plat-email { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
.plat-suffix { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.plat-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.plat-actions { display: flex; justify-content: flex-end; gap: 4px; }
.plat-row .del-btn { opacity: 0; transition: opacity .1s; }
.plat-row:hover .del-btn { opacity: 1; }

/* ===================== SCREEN 3 — Credentials matrix ===================== */
.cred-tbl-wrap { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: auto; background: var(--surface); max-height: calc(100vh - 220px); }
table.cred-tbl { border-collapse: separate; border-spacing: 0; width: 100%; }
.cred-tbl th, .cred-tbl td { border-bottom: 1px solid var(--border-soft); }
.cred-tbl thead th { position: sticky; top: 0; z-index: 6; background: var(--surface-2); border-bottom: 1px solid var(--border); }

/* identity (first) column — sticky left */
.cred-idh { left: 0; z-index: 7 !important; text-align: left !important; min-width: 168px; padding: 12px 16px !important; }
.cred-idcell { position: sticky; left: 0; z-index: 3; background: var(--surface); padding: 10px 16px; min-width: 168px; border-right: 1px solid var(--border); }
.cred-row:hover .cred-idcell { background: var(--surface-2); }
.cred-idname { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }
.cred-idnote { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* platform column header: 20px logo + name below, ~72px wide */
.cred-colh { width: 72px; min-width: 72px; padding: 10px 6px 9px !important; text-align: center !important; vertical-align: bottom; }
.cred-colh .ch { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cred-colh .ch-name { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: .01em; color: var(--muted); text-transform: none; }
.cred-tbl tbody tr:hover { background: var(--surface-2); }
.cred-cell { width: 72px; text-align: center; padding: 8px 6px; position: relative; }
.cred-cell .stack { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-height: 34px; justify-content: center; }
.tokdot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 calc(var(--glow) * 8px) currentColor; }
.tokdot.valid { background: var(--st-deployed); color: var(--st-deployed); }
.tokdot.invalid { background: #ef4444; color: #ef4444; }
.tokdot.missing { background: #475569; color: transparent; box-shadow: none; border: 1px solid #5b6b82; }
.activate-btn { opacity: 0; transition: opacity .1s; font-family: var(--font-body); font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; border: 1px solid; cursor: pointer; white-space: nowrap; background: transparent; line-height: 1.4; }
.cred-row:hover .activate-btn { opacity: 1; }
.activate-btn.go { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); }
.activate-btn.go:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.activate-btn.fix { color: #f87171; border-color: #5c2233; }
.activate-btn.fix:hover { background: #2a0f16; }
.activate-btn.live { color: var(--st-deployed); border-color: color-mix(in oklab, var(--st-deployed) 40%, var(--border)); }
.cred-legend { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.cred-legend .lg { display: inline-flex; align-items: center; gap: 7px; }

/* add-account inline form row */
.add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 14px 16px; border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border-soft)); border-radius: var(--radius); background: var(--surface); margin-bottom: 14px; }
.add-row .form-field { gap: 5px; }

/* ===================== DASHBOARD — Group cards ===================== */
.grp-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 24px; }
.grp-card { cursor: pointer; padding: 16px 18px !important; transition: border-color .15s, box-shadow .15s; }
.grp-card:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--border-soft)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent), 0 4px 18px rgba(0,0,0,.35); }
.grp-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.grp-card-ic { color: var(--accent); opacity: .8; flex-shrink: 0; }
.grp-card-title { flex: 1; min-width: 0; }
.grp-card-name { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-card-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.grp-card-pct { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); flex-shrink: 0; }
.grp-card-domains { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.grp-card-dot { display: flex; align-items: center; gap: 6px; }
.grp-card-dom { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 1180px) {
  .crow { grid-template-columns: minmax(0, 1.4fr) 92px minmax(0, 1fr); gap: 12px; }
  .crow-sched { display: none; }
}
@media (max-width: 1024px) {
  /* camp2 uses flex now — handled via JS panelW state */
}