/* ═══════════════════════════════════════════════════════════════════
   POP v4 — 2026-05-27 PT
   Site-wide canonical POP V2 classes — additive, opt-in, no overrides.

   ADDITIVE GUARANTEE:
   - All classes are NEW class names (.pop-*) — they do not collide
     with any existing class on any current page.
   - Pages opt in by adding the pop-* class to a span/div.
   - Existing reference pages (admin_reps.html .badge.*, specialists.html
     .spec-tier-*) are unchanged — they keep their inline styling and
     will remain bit-identical post-deploy.

   PALETTE (canonical, same as Ship 4.2 admin_reps + Ship 3 specialists):
     blue   = T1 / super-admin
     green  = T3 / approved / on
     violet = T2 add-on / user role
     amber  = T2 infra / admin role / off / pending
     red    = revoked / critical
     muted  = N/A / unknown

   STRUCTURE: badges (.pop-badge.*), activity pills (.pop-act.*),
   tier pills (.pop-tier-*), section title bar (.pop-section-title).

   USAGE EXAMPLES (Phase 2 retrofit candidates):
     <span class="pop-badge approved">approved</span>
     <span class="pop-tier-t1">T1 GOVERNANCE</span>
     <span class="pop-act on">ON</span>
     <div  class="pop-section-title">Section Title</div>
   ═══════════════════════════════════════════════════════════════════ */


/* ─── BADGE BASE ───────────────────────────────────────────────────── */
.pop-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: filter 180ms ease, transform 180ms ease;
}
.pop-badge:hover { filter: brightness(1.10); transform: scale(1.03); }

/* SUPER (T1 blue) — for super_admin / El Jefe sentinel */
.pop-badge.super {
  background: linear-gradient(135deg, rgba(2,136,209,0.92), rgba(2,136,209,0.62));
  border: 1px solid rgba(77,184,238,0.95);
  box-shadow:
    0 0 0 1px rgba(77,184,238,0.25),
    0 0 18px rgba(2,136,209,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

/* ADMIN role (T2-infra amber) — non-super admins (rare) */
.pop-badge.admin {
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.70));
  color: #1a0a00;
  border: 1px solid rgba(251,191,36,1);
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.30),
    0 0 18px rgba(245,158,11,0.55),
    inset 0 1px 0 rgba(255,255,255,0.40);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* USER role (T2 violet) — regular reps */
.pop-badge.user {
  background: linear-gradient(135deg, rgba(124,93,250,0.92), rgba(92,56,255,0.62));
  border: 1px solid rgba(184,164,255,0.95);
  box-shadow:
    0 0 0 1px rgba(184,164,255,0.25),
    0 0 18px rgba(92,56,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

/* APPROVED status (T3 green) */
.pop-badge.approved {
  background: linear-gradient(135deg, rgba(34,197,94,0.85), rgba(22,163,74,0.58));
  border: 1px solid rgba(95,224,128,0.95);
  box-shadow:
    0 0 0 1px rgba(95,224,128,0.25),
    0 0 18px rgba(34,197,94,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

/* REVOKED status (red) */
.pop-badge.revoked {
  background: linear-gradient(135deg, rgba(220,80,80,0.78), rgba(180,40,40,0.55));
  border: 1px solid rgba(240,120,120,0.80);
  box-shadow:
    0 0 0 1px rgba(240,120,120,0.20),
    0 0 14px rgba(220,80,80,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* PENDING status (amber, lighter than admin) */
.pop-badge.pending {
  background: linear-gradient(135deg, rgba(251,191,36,0.80), rgba(245,158,11,0.55));
  color: #1a0a00;
  border: 1px solid rgba(251,191,36,0.85);
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.22),
    0 0 14px rgba(245,158,11,0.45),
    inset 0 1px 0 rgba(255,255,255,0.30);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

/* MUTED / N/A */
.pop-badge.muted,
.pop-badge.na {
  background: rgba(120,120,130,0.20);
  color: #aaa;
  border: 1px solid rgba(180,180,180,0.22);
  text-shadow: none;
}


/* ─── ACTIVITY PILLS (ON / OFF) ─────────────────────────────────── */
.pop-act {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ACTIVE ON (bright green) */
.pop-act.on {
  background: linear-gradient(135deg, rgba(34,197,94,0.92), rgba(22,163,74,0.68));
  color: #ffffff;
  border: 1px solid rgba(95,224,128,0.95);
  box-shadow:
    0 0 0 1px rgba(95,224,128,0.30),
    0 0 16px rgba(34,197,94,0.60),
    inset 0 1px 0 rgba(255,255,255,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ACTIVE OFF (amber warning) */
.pop-act.off {
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.72));
  color: #1a0a00;
  border: 1px solid rgba(251,191,36,1);
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.30),
    0 0 16px rgba(245,158,11,0.55),
    inset 0 1px 0 rgba(255,255,255,0.40);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}


/* ─── TIER PILLS (for agent / specialist surfaces) ──────────────── */
.pop-tier {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 700;
  white-space: nowrap;
  color: #ffffff;
  display: inline-block;
  transition: filter 180ms ease, transform 180ms ease;
}

/* T1 Governance — blue */
.pop-tier-t1 {
  background: linear-gradient(135deg, rgba(2,136,209,0.92), rgba(2,136,209,0.62));
  border: 1px solid rgba(77,184,238,0.95);
  box-shadow:
    0 0 0 1px rgba(77,184,238,0.25),
    0 0 18px rgba(2,136,209,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: #ffffff;
  white-space: nowrap;
}

/* T3 Specialist — green */
.pop-tier-t3 {
  background: linear-gradient(135deg, rgba(34,197,94,0.85), rgba(22,163,74,0.58));
  border: 1px solid rgba(95,224,128,0.95);
  box-shadow:
    0 0 0 1px rgba(95,224,128,0.25),
    0 0 18px rgba(34,197,94,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: #ffffff;
  white-space: nowrap;
}

/* T2 Add-On — violet */
.pop-tier-t2 {
  background: linear-gradient(135deg, rgba(124,93,250,0.92), rgba(92,56,255,0.62));
  border: 1px solid rgba(184,164,255,0.95);
  box-shadow:
    0 0 0 1px rgba(184,164,255,0.25),
    0 0 18px rgba(92,56,255,0.60),
    inset 0 1px 0 rgba(255,255,255,0.22);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: #ffffff;
  white-space: nowrap;
}

/* T2 Infra — amber, dark text */
.pop-tier-t2-infra {
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.70));
  color: #1a0a00;
  border: 1px solid rgba(251,191,36,1);
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.3),
    0 0 18px rgba(245,158,11,0.60),
    inset 0 1px 0 rgba(255,255,255,0.40);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  white-space: nowrap;
}


/* ─── SECTION TITLE BAR (left-bar gradient header) ──────────────── */
.pop-section-title {
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-p, #f5f5f7);
  margin: 28px 0 14px 0;
  padding: 10px 0 10px 16px;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  border-left: 4px solid rgba(45,212,191,0.55);
  background: linear-gradient(90deg, rgba(45,212,191,0.10), transparent 60%);
}
.pop-section-title strong { color: #2DD4BF; font-weight: 800; }

.pop-section-sub {
  font-size: 12px;
  color: var(--text-s, #d2d6e1);
  margin: 0 0 12px 16px;
  font-style: italic;
}


/* ─── CARD + GRID (promotes specialists' .spec-card to the shared POP kit) ───
   2026-05-28 — additive. New names; no collision with specialists' inline
   .spec-card. Stripe + hover-pill key on the shared .pop-tier-* pills above.
   Pages opt in by using .pop-grid > a.pop-card with a .pop-tier-* inside. */
.pop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.pop-card {
  background: var(--surface);
  border: 1px solid var(--border-s);
  border-radius: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.pop-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.08);
  transition: background 180ms ease, height 180ms ease;
}
.pop-card:hover {
  border-color: rgba(255,255,255,0.18);
  background: var(--surface-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.pop-card:hover::before { height: 3px; }
.pop-card:hover [class*="pop-tier"] { filter: brightness(1.1); transform: scale(1.04); }

/* Tier-colored top stripe matches the card's pill */
.pop-card:has(.pop-tier-t1)::before       { background: linear-gradient(90deg, rgba(2,136,209,0.85), rgba(2,136,209,0.20) 80%, transparent); }
.pop-card:has(.pop-tier-t3)::before       { background: linear-gradient(90deg, rgba(34,197,94,0.80), rgba(34,197,94,0.20) 80%, transparent); }
.pop-card:has(.pop-tier-t2)::before       { background: linear-gradient(90deg, rgba(124,93,250,0.85), rgba(92,56,255,0.20) 80%, transparent); }
.pop-card:has(.pop-tier-t2-infra)::before { background: linear-gradient(90deg, rgba(251,191,36,0.85), rgba(245,158,11,0.20) 80%, transparent); }

/* Card internals */
.pop-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; }
.pop-card-name { font-size: 17px; font-weight: 600; color: var(--text-p); font-family: var(--body); letter-spacing: -0.2px; }
.pop-card-desc { color: var(--text-s); font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.pop-card-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-m); font-family: var(--mono); }
.pop-card-stats strong { color: var(--text-p); font-weight: 600; }
/* ─── END CARD + GRID ─── */


/* ═══════════════════════════════════════════════════════════════════
   GLOBAL POP LIFT (2026-05-28) — shared classes, every page.
   Additive; loads after style.css so it wins by cascade. A page that
   re-defines these in its own extra_css will override locally (per-page
   exception, mopped up individually). Container-safe: NO .card hover-lift
   (it's used as large containers too). Dramatic tier tile = .pop-card.
   ═══════════════════════════════════════════════════════════════════ */

/* Section titles → gradient left-bar + brighter (was a small muted label) */
.section-title {
  color: var(--text-p, #f5f5f7);
  letter-spacing: 0.18em;
  padding: 9px 0 9px 14px;
  border-left: 4px solid rgba(45,212,191,0.55);
  background: linear-gradient(90deg, rgba(45,212,191,0.10), transparent 60%);
}

/* Cards → brighter brand-accent top edge (was a faint white hairline).
   Static only — no movement — so large/nested cards don't misbehave. */
.card::before {
  height: 2px;
  left: 0; right: 0;
  background: linear-gradient(90deg, rgba(2,136,209,0.55), rgba(2,136,209,0.12) 70%, transparent);
}
/* ═══ END GLOBAL POP LIFT ═══ */


/* ═══════════════════════════════════════════════════════════════════
   POP BOLD ALLCLASSES (2026-05-28) — glow every page's badges + buttons
   in their correct color. !important to win over per-page extra_css
   (which loads after this). Colors read from each page's real CSS.
   Badges = gradient+glow. Buttons = gradient+glow + hover lift (filter/
   transform, so background isn't fought). Inline elements only — layout-safe.
   ═══════════════════════════════════════════════════════════════════ */

/* shared shape for all POP badges/buttons */
.up-badge, .admin-status, .status-badge, .source-pill, .snoop-fit-badge,
.snoop-signal-chip, .chip, .touch-badge, [class*="touch-"], .sr-chip,
.admin-btn, .forge-btn, .pg-btn, .up-btn, .li-btn, .lc-btn, .snoop-review-btn,
.ibtn, .sarah-btn, .pw-btn, .save-btn, .btn-save, .req-btn, .login-btn, .reset-btn, .p-btn {
  border-radius: 6px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}
/* buttons lift on hover (filter/transform — no background conflict) */
.admin-btn:hover, .forge-btn:hover, .pg-btn:hover, .up-btn:hover, .li-btn:hover,
.lc-btn:hover, .snoop-review-btn:hover, .ibtn:hover, .sarah-btn:hover, .pw-btn:hover,
.save-btn:hover, .btn-save:hover, .req-btn:hover, .login-btn:hover, .reset-btn:hover, .p-btn:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
}

/* ─── GREEN — active / approved / posted / fit ─── */
.up-badge.active, .admin-status.active, .status-badge.posted, .snoop-fit-badge,
.admin-btn.approve, .forge-btn.approve, .li-btn-approve, .up-btn.primary, .snoop-review-btn-approve {
  background: linear-gradient(135deg, rgba(34,197,94,0.90), rgba(22,163,74,0.62)) !important;
  border: 1px solid rgba(95,224,128,0.95) !important;
  box-shadow: 0 0 0 1px rgba(95,224,128,0.28), 0 0 16px rgba(34,197,94,0.55), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  color: #fff !important;
}

/* ─── RED — revoked / reject / deny / critical / T4 / active-filter ─── */
.up-badge.revoked, .admin-status.revoked, .chip.active, .touch-4, .sv-CRITICAL,
.forge-btn.reject, .admin-btn.deny, .pg-btn-reject, .snoop-review-btn-reject, .sarah-btn.danger {
  background: linear-gradient(135deg, rgba(229,72,72,0.88), rgba(185,40,40,0.60)) !important;
  border: 1px solid rgba(245,130,130,0.92) !important;
  box-shadow: 0 0 0 1px rgba(245,130,130,0.25), 0 0 16px rgba(229,72,72,0.52), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
.sv-CRITICAL { background: none !important; box-shadow: none !important; border: none !important; color: #ff6b6b !important; text-shadow: 0 0 14px rgba(239,68,68,0.6) !important; }

/* ─── AMBER — pending / serious / T3 / pin / revoke-btn ─── */
.up-badge.pending, .touch-3, .sv-SERIOUS, .forge-btn.pin, .admin-btn.revoke {
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.72)) !important;
  border: 1px solid rgba(251,191,36,1) !important;
  box-shadow: 0 0 0 1px rgba(251,191,36,0.30), 0 0 16px rgba(245,158,11,0.55), inset 0 1px 0 rgba(255,255,255,0.40) !important;
  color: #1a0a00 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important;
}
.sv-SERIOUS { background: none !important; box-shadow: none !important; border: none !important; color: #fbbf24 !important; text-shadow: 0 0 12px rgba(245,158,11,0.55) !important; }

/* ─── BLUE — role / approved / linkedin / T2 / regen / reinstate / edit ─── */
.up-badge.role, .status-badge.approved, .source-pill-linkedin, .touch-2,
.forge-btn.regen, .admin-btn.reinstate, .li-btn-edit, .lc-btn-primary, .snoop-signal-chip {
  background: linear-gradient(135deg, rgba(2,136,209,0.92), rgba(2,136,209,0.62)) !important;
  border: 1px solid rgba(77,184,238,0.95) !important;
  box-shadow: 0 0 0 1px rgba(77,184,238,0.25), 0 0 16px rgba(2,136,209,0.55), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  color: #fff !important;
}

/* ─── VIOLET — self / apollo / watch / copy ─── */
.up-badge.self, .source-pill-apollo, .sr-chip.active, .forge-btn.copy {
  background: linear-gradient(135deg, rgba(124,93,250,0.92), rgba(92,56,255,0.62)) !important;
  border: 1px solid rgba(184,164,255,0.95) !important;
  box-shadow: 0 0 0 1px rgba(184,164,255,0.25), 0 0 16px rgba(92,56,255,0.58), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
.sv-WATCH { background: none !important; box-shadow: none !important; border: none !important; color: #a78bfa !important; text-shadow: 0 0 12px rgba(124,93,250,0.55) !important; }

/* ─── TEAL — niobe / pg-approve ─── */
.source-pill-niobe, .pg-btn-approve {
  background: linear-gradient(135deg, rgba(45,212,191,0.90), rgba(20,160,140,0.62)) !important;
  border: 1px solid rgba(94,234,212,0.95) !important;
  box-shadow: 0 0 0 1px rgba(94,234,212,0.28), 0 0 16px rgba(45,212,191,0.55), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  color: #00231d !important; text-shadow: none !important;
}

/* ─── CYAN — forge edit ─── */
.forge-btn.edit {
  background: linear-gradient(135deg, rgba(34,211,238,0.90), rgba(14,165,190,0.62)) !important;
  border: 1px solid rgba(103,232,249,0.95) !important;
  box-shadow: 0 0 0 1px rgba(103,232,249,0.28), 0 0 16px rgba(34,211,238,0.52), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  color: #00222a !important; text-shadow: none !important;
}

/* ─── OWNER pills — assigned blue tint, unassigned muted ─── */
.owner-pill { background: linear-gradient(135deg, rgba(2,136,209,0.30), rgba(2,136,209,0.12)) !important; border: 1px solid rgba(77,184,238,0.45) !important; color: #cfeaff !important; }
.owner-pill.owner-unassigned, .source-pill-manual, .source-pill-other, .touch-1, .sv-INFO,
.admin-btn.delete, .up-btn.secondary, .lc-btn-cancel, .pg-btn-defer {
  background: rgba(120,124,136,0.18) !important; border: 1px solid rgba(180,184,196,0.22) !important; color: #b8bcc8 !important; text-shadow: none !important; box-shadow: none !important;
}

/* ─── BOLDER section bars + card edges (the timid first pass, intensified) ─── */
.section-title {
  border-left: 4px solid rgba(45,212,191,0.85) !important;
  background: linear-gradient(90deg, rgba(45,212,191,0.16), transparent 65%) !important;
  color: var(--text-p, #fff) !important;
}
.card::before {
  height: 3px !important;
  background: linear-gradient(90deg, rgba(2,136,209,0.85), rgba(2,136,209,0.20) 75%, transparent) !important;
}
/* ═══ END POP BOLD ALLCLASSES ═══ */


/* ═══ DASHBOARD SECTION POP (2026-05-28) — the one flat dashboard element.
   .v4-root scope + !important (dashboard-v4.css @imports after pop-v4.css).
   Matches the teal section-bar every other page got tonight. ═══ */
.v4-root .d-v4-section-title {
  color: var(--v4-text-1, #f5f5f7) !important;
  letter-spacing: 0.16em !important;
  padding: 8px 0 8px 13px !important;
  border-left: 3px solid rgba(45,212,191,0.80) !important;
  background: linear-gradient(90deg, rgba(45,212,191,0.14), transparent 62%) !important;
}
/* ═══ END DASHBOARD SECTION POP ═══ */