/* ────────────────────────────────────────────────────────────────────
 * Spartan CRM — Topbar branch switcher (WIP-V2.1-PAGES-POLISH-02)
 * Companion to the renderTopBar() output in modules/07-shared-ui.js.
 *
 * Each branch gets its own colour + pulse:
 *   all → red (Spartan brand) lightly pulsing
 *   VIC → blue
 *   ACT → purple
 *   SA  → green
 *   TAS → amber
 *
 * Hover lifts the pill on a 180ms transform. Click + drop-down handled
 * by the existing data-action="ui-toggle-branch-drop" wiring.
 * ──────────────────────────────────────────────────────────────────── */

/* Brand-token aliases so we can change palette in one place later */
.branch-pill {
  --bp-bg:#fff;
  --bp-color:#0a0a0a;
  --bp-border:#e7e5e4;
  --bp-dot:#6b7280;
  --bp-glow:rgba(196,18,48,.35);
  --bp-soft-bg:rgba(196,18,48,.06);

  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid var(--bp-border);
  border-radius:9px;
  background:var(--bp-bg);
  color:var(--bp-color);
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  font-family:inherit;
  position:relative;
  transition:transform 180ms cubic-bezier(.4,0,.2,1),
             box-shadow 180ms cubic-bezier(.4,0,.2,1),
             background 180ms cubic-bezier(.4,0,.2,1),
             border-color 180ms cubic-bezier(.4,0,.2,1);
  will-change:transform, box-shadow;
}
.branch-pill .branch-pill-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--bp-dot);
  box-shadow:0 0 0 0 var(--bp-glow);
  flex-shrink:0;
}
.branch-pill .branch-pill-label {
  white-space:nowrap;
  line-height:1;
}
.branch-pill svg {
  width:11px;
  height:11px;
  opacity:.7;
  margin-left:2px;
}

/* ── Branch-specific tokens ──────────────────────────────────────── */
.branch-pill.branch-pill-all {
  --bp-dot:#C41230;
  --bp-glow:rgba(196,18,48,.35);
  --bp-color:#0a0a0a;
  --bp-border:rgba(196,18,48,.25);
  --bp-soft-bg:#fff;
}
.branch-pill.branch-pill-VIC,
.branch-pill.branch-pill-VIC.active {
  --bp-dot:#1d4ed8;
  --bp-glow:rgba(29,78,216,.35);
  --bp-color:#1d4ed8;
  --bp-border:rgba(29,78,216,.35);
  --bp-soft-bg:rgba(29,78,216,.08);
  background:var(--bp-soft-bg);
  color:var(--bp-color);
  border-color:var(--bp-border);
}
.branch-pill.branch-pill-ACT,
.branch-pill.branch-pill-ACT.active {
  --bp-dot:#7c3aed;
  --bp-glow:rgba(124,58,237,.35);
  --bp-color:#7c3aed;
  --bp-border:rgba(124,58,237,.35);
  --bp-soft-bg:rgba(124,58,237,.08);
  background:var(--bp-soft-bg);
  color:var(--bp-color);
  border-color:var(--bp-border);
}
.branch-pill.branch-pill-SA,
.branch-pill.branch-pill-SA.active {
  --bp-dot:#059669;
  --bp-glow:rgba(5,150,105,.35);
  --bp-color:#047857;
  --bp-border:rgba(5,150,105,.35);
  --bp-soft-bg:rgba(5,150,105,.08);
  background:var(--bp-soft-bg);
  color:var(--bp-color);
  border-color:var(--bp-border);
}
.branch-pill.branch-pill-TAS,
.branch-pill.branch-pill-TAS.active {
  --bp-dot:#D97706;
  --bp-glow:rgba(217,119,6,.35);
  --bp-color:#92400E;
  --bp-border:rgba(217,119,6,.35);
  --bp-soft-bg:rgba(217,119,6,.08);
  background:var(--bp-soft-bg);
  color:var(--bp-color);
  border-color:var(--bp-border);
}

/* ── Pulse keyframes per branch (the dot pulses, not the whole chip) ── */
@keyframes branch-pulse-red {
  0%,100% { box-shadow:0 0 0 0 rgba(196,18,48,.55); }
  50%     { box-shadow:0 0 0 5px rgba(196,18,48,0); }
}
@keyframes branch-pulse-blue {
  0%,100% { box-shadow:0 0 0 0 rgba(29,78,216,.55); }
  50%     { box-shadow:0 0 0 5px rgba(29,78,216,0); }
}
@keyframes branch-pulse-purple {
  0%,100% { box-shadow:0 0 0 0 rgba(124,58,237,.55); }
  50%     { box-shadow:0 0 0 5px rgba(124,58,237,0); }
}
@keyframes branch-pulse-green {
  0%,100% { box-shadow:0 0 0 0 rgba(5,150,105,.55); }
  50%     { box-shadow:0 0 0 5px rgba(5,150,105,0); }
}
@keyframes branch-pulse-amber {
  0%,100% { box-shadow:0 0 0 0 rgba(217,119,6,.55); }
  50%     { box-shadow:0 0 0 5px rgba(217,119,6,0); }
}

.branch-pill.branch-pill-all  .branch-pill-dot { animation: branch-pulse-red    2.4s ease-in-out infinite; }
.branch-pill.branch-pill-VIC  .branch-pill-dot { animation: branch-pulse-blue   2.4s ease-in-out infinite; }
.branch-pill.branch-pill-ACT  .branch-pill-dot { animation: branch-pulse-purple 2.4s ease-in-out infinite; }
.branch-pill.branch-pill-SA   .branch-pill-dot { animation: branch-pulse-green  2.4s ease-in-out infinite; }
.branch-pill.branch-pill-TAS  .branch-pill-dot { animation: branch-pulse-amber  2.4s ease-in-out infinite; }

/* ── Hover lift ──────────────────────────────────────────────────── */
.branch-pill:hover {
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 4px 12px -2px rgba(10,10,10,.18);
}
.branch-pill:active { transform:translateY(0) scale(1.02); }

/* ── Drop-down ───────────────────────────────────────────────────── */
.branch-drop {
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:11px;
  box-shadow:0 8px 28px rgba(10,10,10,.14);
  z-index:100;
  min-width:160px;
  padding:5px;
}
.branch-drop-item {
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 14px;
  font-size:13px;
  font-weight:500;
  color:#374151;
  cursor:pointer;
  border-radius:7px;
  transition:background 120ms cubic-bezier(.4,0,.2,1), transform 120ms cubic-bezier(.4,0,.2,1);
}
.branch-drop-item:hover { background:#f9fafb; transform:translateX(2px); }
.branch-drop-item.on    { font-weight:700; }
/* Tint the selected row with the branch colour */
.branch-drop-item.branch-pill-all.on  { color:#C41230; background:rgba(196,18,48,.08); }
.branch-drop-item.branch-pill-VIC.on  { color:#1d4ed8; background:rgba(29,78,216,.08); }
.branch-drop-item.branch-pill-ACT.on  { color:#7c3aed; background:rgba(124,58,237,.08); }
.branch-drop-item.branch-pill-SA.on   { color:#047857; background:rgba(5,150,105,.08); }
.branch-drop-item.branch-pill-TAS.on  { color:#92400E; background:rgba(217,119,6,.08); }
.branch-drop-item .branch-pill-dot { width:8px; height:8px; border-radius:50%; }
.branch-drop-item.branch-pill-all .branch-pill-dot { background:#C41230; }
.branch-drop-item.branch-pill-VIC .branch-pill-dot { background:#1d4ed8; }
.branch-drop-item.branch-pill-ACT .branch-pill-dot { background:#7c3aed; }
.branch-drop-item.branch-pill-SA  .branch-pill-dot { background:#059669; }
.branch-drop-item.branch-pill-TAS .branch-pill-dot { background:#D97706; }

@media (prefers-reduced-motion: reduce) {
  .branch-pill,
  .branch-pill .branch-pill-dot,
  .branch-drop-item {
    animation:none !important;
    transition:none !important;
  }
}

/* ── Calendar day hover pulse (2026-06-01) ──────────────────────────────
 * Reuses the same box-shadow ripple as .branch-pill-dot but triggered by
 * :hover, plays TWICE at 0.15s/cycle (≈0.3s total) then stops. Apply by
 * adding class="cal-day-pulse" to any day-like cell across the V1 + V2
 * calendar surfaces. Spartan red — matches the existing 'today' highlight
 * in both V2 (bg-[#C41230]) and the V1 chip palette.
 *
 * Implementation note: pure CSS, no JS wiring. CSS animations on :hover
 * naturally restart when the user leaves the element and re-enters, which
 * satisfies the locked spec (mouseenter triggers the pulse).
 * ─────────────────────────────────────────────────────────────────────── */
/*
 * Updated 2026-06-01 (iter 2 — user clarification): target moved from day
 * headers / V2 day-strip cards to the V1 week-grid HOUR CELLS (.cal-cell).
 * Hour cells live inside #calWeekGrid which has overflow:hidden, so the
 * pure-outset halo would get clipped at the grid edge. Adding an INSET
 * companion shadow so the pulse is visible from BOTH sides regardless of
 * parent clipping: outset halo for free-standing day cards (V2 strip), inset
 * glow for clipped hour cells.
 */
@keyframes cal-day-pulse-ripple {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(196,18,48,.55),
                inset 0 0 0 0 rgba(196,18,48,0);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(196,18,48,0),
                inset 0 0 0 4px rgba(196,18,48,.30);
  }
}
.cal-day-pulse:hover {
  /* Updated 2026-06-01 iter 3 — user feedback: pulse much slower and
   * keep looping while the cursor is over the cell. 2.4s/cycle infinite
   * matches the branch-pill dot pulse one-for-one, so the cadence reads
   * as the same family of affordance throughout the app. */
  animation: cal-day-pulse-ripple 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cal-day-pulse:hover { animation: none !important; }
}