/* ────────────────────────────────────────────────────────────────────
 * 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(250,204,21,.35);
  --bp-soft-bg:rgba(250,204,21,.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(161,98,7,.35);
  --bp-color:#0a0a0a;
  --bp-border:rgba(161,98,7,.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(250,204,21,.55); }
  50%     { box-shadow:0 0 0 5px rgba(250,204,21,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); }
}

/* A-806 — motion only during the boot window (see _spBootPulseWindow in
   modules/99-init.ts). No class, no motion: the safe direction is the quiet one. */
/* The dot COLOURS are categorical (branch identity) and are untouched — only
   the motion is on the boot timer. The topbar is on screen on every page, so
   these five were pulsing all day, every day, behind whatever you were reading. */
body.sp-boot-pulse .branch-pill.branch-pill-all  .branch-pill-dot { animation: branch-pulse-red    2.4s ease-in-out infinite; }
body.sp-boot-pulse .branch-pill.branch-pill-VIC  .branch-pill-dot { animation: branch-pulse-blue   2.4s ease-in-out infinite; }
body.sp-boot-pulse .branch-pill.branch-pill-ACT  .branch-pill-dot { animation: branch-pulse-purple 2.4s ease-in-out infinite; }
body.sp-boot-pulse .branch-pill.branch-pill-SA   .branch-pill-dot { animation: branch-pulse-green  2.4s ease-in-out infinite; }
body.sp-boot-pulse .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:#a16207; background:rgba(250,204,21,.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:#facc15; }
.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(250,204,21,.55),
                inset 0 0 0 0 rgba(250,204,21,0);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(250,204,21,0),
                inset 0 0 0 4px rgba(250,204,21,.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; }
}

/* ── Premium global search (topbar) — A-159 ──────────────────────────────────
 * Command-palette styling for #topSearch. Focus/hover/empty-vs-typed states are
 * pure CSS (:focus / :hover / :placeholder-shown) so they survive the app's
 * full-page innerHTML re-render with no JS. The kbd hint shows only when empty +
 * unfocused; the clear (×) button shows only when the field has text.
 * ────────────────────────────────────────────────────────────────────────── */
.sp-ts-wrap { position: relative; flex: 1; max-width: 460px; }
.sp-ts-input {
  width: 100%;
  height: 38px;
  padding: 0 80px 0 40px;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 11px;
  font-size: 13.5px;
  font-family: inherit;
  color: #1c1917;
  outline: none;
  box-shadow: 0 1px 2px rgba(10, 10, 10, .04);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sp-ts-input::placeholder { color: #a8a29e; }
.sp-ts-input:hover { border-color: #d6d3d1; }
.sp-ts-input:focus {
  border-color: #a16207;
  box-shadow: 0 0 0 3px rgba(250,204,21, .12), 0 1px 2px rgba(10, 10, 10, .04);
}
.sp-ts-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: #a8a29e; pointer-events: none; display: flex; transition: color .15s ease;
}
.sp-ts-input:focus ~ .sp-ts-icon { color: #a16207; }
.sp-ts-kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; display: flex; align-items: center;
  transition: opacity .12s ease;
}
.sp-ts-kbd kbd {
  font-family: inherit; font-size: 11px; line-height: 1; font-weight: 700;
  padding: 3px 7px; border: 1px solid #e7e5e4; border-bottom-width: 2px;
  border-radius: 6px; background: #fafaf9; color: #78716c;
}
.sp-ts-input:focus ~ .sp-ts-kbd,
.sp-ts-input:not(:placeholder-shown) ~ .sp-ts-kbd { opacity: 0; }
.sp-ts-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: none; background: transparent;
  color: #a8a29e; cursor: pointer; border-radius: 7px;
  transition: color .12s ease, background .12s ease;
}
.sp-ts-clear:hover { color: #a16207; background: #f5f5f4; }
.sp-ts-input:not(:placeholder-shown) ~ .sp-ts-clear { display: flex; }

.sp-ts-drop {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid #ececeb; border-radius: 14px;
  box-shadow: 0 20px 48px -12px rgba(10, 10, 10, .22), 0 6px 16px rgba(10, 10, 10, .06);
  z-index: 100; max-height: 420px; overflow-y: auto; overflow-x: hidden;
  padding: 6px;
  animation: sp-ts-drop-in .14s ease;
}
@keyframes sp-ts-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sp-ts-sec {
  padding: 9px 12px 4px; font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #a8a29e;
}
.sp-ts-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  cursor: pointer; border-radius: 10px; transition: background .1s ease;
}
.sp-ts-row + .sp-ts-row { margin-top: 1px; }
.sp-ts-row:hover { background: #f7f6f5; }
/* A-569 — keyboard-highlighted result. Same visual weight as :hover so the
   mouse and the arrow keys agree, plus a red rail to show which one Enter
   will open. */
.sp-ts-row.is-active { background: #f2efee; box-shadow: inset 2px 0 0 var(--spartan-red, #a16207); }
.sp-ts-av {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color:#000; background: #facc15;
}
.sp-ts-title { font-size: 13px; font-weight: 600; color: #1c1917; }
.sp-ts-sub { font-size: 11.5px; color: #a8a29e; margin-top: 1px; }
.sp-ts-amt { font-size: 13px; font-weight: 700; color: #1c1917; }
.sp-ts-empty { padding: 30px 20px; text-align: center; color: #a8a29e; font-size: 13px; }

/* ═════════════════════════════════════════════════════════════════════════════
   A-806 — THE TOPBAR INDICATOR CLUSTER, AS ONE SYSTEM
   Graham, 2026-09-15, circling this row: "The notification bar needs to pulse
   for the first 5 seconds, then come to a stop and colour disappear just
   showing the notifications at the top."

   The row is six buttons rendered by FIVE different modules (voicemail + maps +
   bell in 07-shared-ui, the eye in 07b-email-tracking-topbar, comms breach in
   40-comms-breach-panel, unhappy clients / CM hold / CM review via .uc-btn), and
   each had grown its own inline styling. The result read as several different
   species sitting next to each other:

     · two of the six sat on pink plates with pulsing haloes while the other four
       were bare icons — so the row had no common shape;
     · badges came in four colours (yellow/black, red/white, amber/white,
       green/white) with two radii, two font-weights and two paddings;
     · the voicemail badge used `border-radius:50%`, which on a two-digit count
       is not a circle but an ELLIPSE — "32" rendered as a squashed oval;
     · counts were proportional-figure, so a badge changed width as the number
       ticked and the icons beside it twitched;
     · the icons themselves were 18px in some buttons and 19px in others, with
       padding-based hit areas that differed by a couple of px each.

   One button shape, one badge shape, and severity carried by the badge only.

   SEVERITY IS TWO TIERS, NOT FOUR. `urgent` = someone must act now (comms
   breach, unhappy client, material on hold). `info` = things are waiting for
   you (voicemail, notifications, review). `ok` stays green because an email
   OPEN is good news, and green/amber/red here is categorical data, not brand
   (CLAUDE.md). `info` is the ForgeOS PLATE, which carries BLACK — never white.
   ═════════════════════════════════════════════════════════════════════════════ */
.tb-ind-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 9px;
  color: #6b7280;
  line-height: 1;
  transition: background .15s, color .15s;
}
.tb-ind-btn:hover  { background: #f3f4f6; color: #374151; }
.tb-ind-btn:focus-visible { outline: 2px solid var(--fos-ink, #a16207); outline-offset: 1px; }
.tb-ind-btn svg    { width: 19px; height: 19px; }

.tb-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  /* A pill, not `border-radius:50%`: at one digit it IS a circle, and at two or
     three it stays a capsule instead of deforming into an ellipse. */
  border-radius: 999px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  /* Counts tick over constantly; tabular figures stop the badge (and therefore
     the icons beside it) from changing width when 9 becomes 10. */
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Reads as a separate object sitting ON the icon rather than merging with it. */
  box-shadow: 0 0 0 2px #fff;
}
.tb-badge-urgent { background: #DC2626; color: #fff; }
.tb-badge-info   { background: var(--fos-plate, #facc15); color: var(--fos-on-plate, #000); }
.tb-badge-ok     { background: #15803d; color: #fff; }

/* The alarm plate belongs to the boot burst only — see _spBootPulseWindow in
   modules/99-init.ts. At rest every button in the row has the same bare shape,
   and the badge alone says how urgent it is. */
body.sp-boot-pulse .tb-ind-btn.tb-urgent { background: #FEE2E2; }

/* The .uc-* family (unhappy clients / CM hold / CM review) is aligned to these
   same metrics in js/management-alerts-bar.css — it owns those classes AND it
   loads after this file (index.html 414 vs 427), so an alignment written here
   would simply lose. Keeping each component's rules in its own stylesheet is
   also why that one cannot silently drift out of the system again. */