/* ────────────────────────────────────────────────────────────────────
 * Spartan CRM — Unhappy Clients (disgruntled-client escalation)
 * Companion to modules/39-disgruntled-watch.js (detection + alert list)
 *              modules/39b-unhappy-clients.js (topbar dropdown + page)
 *
 * A-570 (2026-08-06, Phoenix): "These Unhappy Clients need a separate drop
 * down alert bar, High UI, instead of a big drop down."
 *
 * The old full-width charcoal banner (`#management-alerts-root .ma-banner`)
 * is GONE — it sat over the topbar on every page and covered the app. The
 * escalation now lives in:
 *   • a pulsing topbar button + High-UI dropdown panel  (.uc-btn / .uc-drop)
 *   • the Unhappy Clients page                          (.uc-page-*)
 *
 * The visual language is kept deliberately distinct from the red "Team
 * Response Watch" / "Comms Breach" surfaces — amber→red on charcoal with a
 * warning triangle, so "an unhappy client needs a human NOW" never reads as
 * "someone is slow to reply". Pulse speed tracks the worst open severity:
 *   high     → uc-pulse-high     (orange-red, 1.3s)
 *   critical → uc-pulse-critical (deep red,   0.85s)
 * All motion is gated by prefers-reduced-motion.
 *
 * The `.ma-*` rules below are a DEFENSIVE reset only: a browser holding a
 * cached copy of the old JS could still mount #management-alerts-root, and
 * this guarantees it can never paint over the app again.
 * ──────────────────────────────────────────────────────────────────── */

/* ── retired banner: never paint, never reserve space ─────────────── */
#management-alerts-root { display: none !important; }
body.ma-active { padding-top: 0 !important; }

/* ── topbar button ─────────────────────────────────────────────────── */
.uc-btn {
  position: relative; padding: 7px; border: none; background: none; cursor: pointer;
  border-radius: 8px; line-height: 1; font-size: 18px; color: #6b7280;
  transition: background .15s, color .15s;
}
.uc-btn:hover { background: #f3f4f6; }
.uc-btn svg { width: 19px; height: 19px; color: currentColor; vertical-align: -2px; }
.uc-btn.uc-live { color: #B45309; background: #FEF3C7; }
.uc-btn.uc-live.uc-sev-critical { color: #DC2626; background: #FEE2E2; }
.uc-badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; font-size: 10px; font-weight: 800; color: #fff; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; background: #D97706;
}
.uc-btn.uc-sev-critical .uc-badge { background: #DC2626; }

@keyframes ucPulse { 0% { box-shadow: 0 0 0 0 rgba(217,119,6,.5) } 70% { box-shadow: 0 0 0 10px rgba(217,119,6,0) } 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0) } }
@keyframes ucPulseCrit { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.6) } 70% { box-shadow: 0 0 0 11px rgba(220,38,38,0) } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0) } }
@keyframes ucShake { 0%,100% { transform: rotate(0) } 12% { transform: rotate(-12deg) } 26% { transform: rotate(10deg) } 40% { transform: rotate(-6deg) } 54% { transform: rotate(3deg) } 68% { transform: rotate(0) } }
/* A-806 — Graham, 2026-09-15, pointing at the topbar indicator cluster: "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."

   These buttons live in the topbar, which is on screen on EVERY page of the
   app. Before this they pulsed a halo AND rotated the icon +/-12deg, forever,
   at 1.3s (high) or 0.85s (critical) — two of them side by side, out of phase
   with each other, all day. That is the bar he circled.

   The alarm now lasts the 5s boot window (body.sp-boot-pulse, set in
   modules/99-init.ts) and then the button settles: no motion, and no coloured
   plate behind the icon. The icon and its count badge stay exactly as they
   were, which is the "just showing the notifications" half of the ask — the
   number is the information, the throbbing pink box was not. */
body.sp-boot-pulse .uc-btn.uc-pulse-high     { animation: ucPulse 1.3s ease-out infinite; }
body.sp-boot-pulse .uc-btn.uc-pulse-critical { animation: ucPulseCrit .85s ease-out infinite; }
body.sp-boot-pulse .uc-btn.uc-pulse-high svg,
body.sp-boot-pulse .uc-btn.uc-pulse-critical svg { animation: ucShake 1.3s ease-in-out infinite; transform-origin: 50% 42%; }
body.sp-boot-pulse .uc-btn.uc-pulse-critical svg { animation-duration: .85s; }

/* Once the burst is over the plate goes; the icon keeps its severity colour and
   the badge keeps the count, so the row reads like every other topbar icon.
   `body:not(...)` so an absent class lands on the calm state, never the alarm. */
body:not(.sp-boot-pulse) .uc-btn.uc-live,
body:not(.sp-boot-pulse) .uc-btn.uc-live.uc-sev-critical { background: none; }
body:not(.sp-boot-pulse) .uc-btn.uc-live:hover,
body:not(.sp-boot-pulse) .uc-btn.uc-live.uc-sev-critical:hover { background: #f3f4f6; }

/* A-806 — the badge joins the two-tier severity system shared with the rest of
   the cluster (js/topbar-branch-pill.css): urgent is red, and the amber
   mid-tier is dropped. Three shades of "bad" next to each other read as
   decoration rather than as a ranking — the DROPDOWN is where the difference
   between high and critical is explained, and it still says so there. */
/* A-806 — the same button + badge metrics as the rest of the topbar indicator
   cluster (the .tb-ind-btn / .tb-badge system in js/topbar-branch-pill.css).
   These live HERE, not there, because this file owns the .uc-* classes and
   loads after it. Same 34x34 target, same 16px pill badge with tabular figures
   and a white ring, so the three .uc-* buttons sit in the same grid as the
   other three and cannot drift apart again. */
.uc-btn {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
}
.uc-btn svg { width: 19px; height: 19px; vertical-align: 0; }
.uc-badge {
  top: 1px; right: 1px;
  border-radius: 999px;
  font-family: 'Archivo Narrow', sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  box-shadow: 0 0 0 2px #fff;
}
/* Two severity tiers, not three: urgent is red. Three shades of "bad" side by
   side read as decoration rather than a ranking — the dropdown is where high
   vs critical is actually explained, and it still says so there. */
.uc-badge,
.uc-btn.uc-sev-critical .uc-badge { background: #DC2626; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .uc-btn, .uc-btn svg { animation: none !important; }
  .uc-btn.uc-live { box-shadow: inset 0 0 0 2px rgba(217,119,6,.75); }
  .uc-btn.uc-live.uc-sev-critical { box-shadow: inset 0 0 0 2px rgba(220,38,38,.85); }
}

/* ── dropdown panel ───────────────────────────────────────────────── */
@keyframes ucDropIn { from { opacity: 0; transform: translateY(-6px) scale(.985) } to { opacity: 1; transform: translateY(0) scale(1) } }
.uc-drop {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: 460px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid #e8eaee; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(17,24,39,.20), 0 4px 14px rgba(17,24,39,.08);
  z-index: 100; overflow: hidden; animation: ucDropIn .16s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.uc-drop-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 16px; background: linear-gradient(135deg, #1c1917 0%, #292524 65%, #451a03 165%);
}
.uc-drop-title {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Syne, sans-serif; font-weight: 800; font-size: 15px; color: #fff;
}
.uc-drop-title svg { width: 17px; height: 17px; color: #FBBF24; }
.uc-drop-count { background: #FBBF24; color: #1c1917; border-radius: 10px; font-size: 10px; font-weight: 800; padding: 2px 8px; }
.uc-drop-refresh {
  font-size: 11px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 5px 10px;
  cursor: pointer; font-family: inherit; font-weight: 700;
}
.uc-drop-refresh:hover { background: rgba(255,255,255,.2); color: #fff; }
.uc-drop-sub {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  padding: 8px 16px; background: #fafafa; border-bottom: 1px solid #f0f2f4;
  font-size: 10.5px; font-weight: 700; color: #6b7280;
}
.uc-drop-list { max-height: min(70vh, 520px); overflow-y: auto; }
.uc-drop-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 16px; background: #fafbfc; border-top: 1px solid #f0f2f4;
}
.uc-drop-foot span { font-size: 10.5px; color: #9ca3af; font-weight: 600; }
.uc-drop-foot button {
  font-size: 11px; font-weight: 700; color: #a16207; background: none;
  border: none; cursor: pointer; font-family: inherit;
}

/* ── one alert row (dropdown) ─────────────────────────────────────── */
.uc-row {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 11px; align-items: start;
  padding: 12px 16px 12px 12px; border-bottom: 1px solid #f4f4f5;
  cursor: pointer; transition: background .12s;
}
.uc-row:hover { background: #fffbeb; }
.uc-row-rail { align-self: stretch; border-radius: 3px; background: #D97706; min-height: 34px; }
/* Severity rail — matched on the severity class alone, so it applies to BOTH
   the dropdown row (.uc-row) and the page row (.uc-list-row). Scoping these to
   `.uc-row` left every critical case on the page painted amber. */
.uc-sev-critical > .uc-row-rail { background: #DC2626; }
.uc-sev-medium > .uc-row-rail { background: #CA8A04; }
.uc-row-main { min-width: 0; }
.uc-row-client { font-size: 13px; font-weight: 800; color: #111; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-row-head { font-size: 12px; color: #92400e; font-weight: 700; margin-top: 2px; line-height: 1.3; }
.uc-row-reason { font-size: 11px; color: #6b7280; margin-top: 3px; font-style: italic; line-height: 1.35; }
.uc-row-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 10px; font-weight: 700; color: #9ca3af; }
.uc-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; border: 1px solid #e5e7eb; background: #f9fafb; color: #6b7280; }
.uc-chip-ch { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.uc-chip-state { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.uc-chip-sev-critical { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
.uc-chip-sev-high { background: #FFEDD5; border-color: #FDBA74; color: #C2410C; }
.uc-chip-sev-medium { background: #FEF9C3; border-color: #FDE047; color: #A16207; }
.uc-chip-ack { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.uc-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.uc-row-age { font-size: 10px; color: #9ca3af; white-space: nowrap; }
.uc-mini {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 7px; cursor: pointer; font-family: inherit; white-space: nowrap;
  border: 1px solid #e5e7eb; background: #fff; color: #374151; transition: background .12s, border-color .12s;
}
.uc-mini:hover { background: #f3f4f6; border-color: #d1d5db; }
.uc-mini-read { background: #1c1917; border-color: #1c1917; color: #fff; }
.uc-mini-read:hover { background: #292524; border-color: #292524; }
.uc-empty { padding: 34px 16px; text-align: center; color: #9ca3af; font-size: 12px; }
.uc-empty-tick { font-size: 26px; margin-bottom: 6px; }

/* ── page ─────────────────────────────────────────────────────────── */
.uc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.uc-tile { padding: 14px 16px; border: 1px solid #eceef1; border-radius: 12px; background: #fff; }
.uc-tile-l { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; }
.uc-tile-v { font-size: 26px; font-weight: 800; font-family: Syne, sans-serif; margin-top: 4px; line-height: 1; }
.uc-tile-s { font-size: 11px; color: #9ca3af; margin-top: 4px; }

.uc-reps { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; }
.uc-rep {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 10px;
  border: 1px solid #eceef1; border-radius: 12px; background: #fff; cursor: pointer;
  flex-shrink: 0; transition: border-color .12s, box-shadow .12s;
}
.uc-rep:hover { border-color: #d1d5db; }
.uc-rep.on { border-color: #a16207; box-shadow: 0 0 0 2px rgba(250,204,21,.12); }
.uc-rep-av { width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.uc-rep-n { font-size: 12.5px; font-weight: 800; color: #111; white-space: nowrap; }
.uc-rep-c { font-size: 10.5px; color: #6b7280; margin-top: 1px; white-space: nowrap; }

.uc-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.uc-filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.uc-filter-l { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; margin-right: 2px; }
.uc-fchip {
  font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 20px;
  border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; font-family: inherit;
}
.uc-fchip.on { border-color: #a16207; background: #facc15; color:#000; }

.uc-card {
  border: 1px solid #eceef1; border-radius: 14px; background: #fff; padding: 0;
  overflow: hidden; margin-bottom: 10px;
}
.uc-list-row {
  display: grid; grid-template-columns: 4px 34px 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px 14px 12px; border-bottom: 1px solid #f4f4f5; cursor: pointer; transition: background .12s;
}
.uc-list-row:last-child { border-bottom: none; }
.uc-list-row:hover { background: #fffbeb; }
.uc-list-av { width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.uc-list-client { font-size: 14px; font-weight: 800; color: #111; font-family: Syne, sans-serif; line-height: 1.25; }
.uc-list-sub { font-size: 12px; color: #6b7280; margin-top: 3px; line-height: 1.35; overflow-wrap: anywhere; }

/* detail */
.uc-back { font-size: 12px; padding: 6px 12px; margin-bottom: 14px; }
.uc-det-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.uc-det-name { font-size: 22px; font-weight: 800; color: #111; font-family: Syne, sans-serif; line-height: 1.15; }
.uc-det-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.uc-det-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.uc-verdict {
  display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: start;
  padding: 14px 16px; border-radius: 12px; margin-bottom: 14px;
  background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%); border: 1px solid #fde68a;
}
.uc-verdict.uc-sev-critical { background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%); border-color: #fecaca; }
.uc-verdict-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(217,119,6,.14); border: 1px solid rgba(217,119,6,.4); display: flex; align-items: center; justify-content: center; color: #B45309; }
.uc-verdict.uc-sev-critical .uc-verdict-ico { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.35); color: #DC2626; }
.uc-verdict-ico svg { width: 20px; height: 20px; }
.uc-verdict-h { font-size: 15px; font-weight: 800; color: #78350f; line-height: 1.3; }
.uc-verdict.uc-sev-critical .uc-verdict-h { color: #7f1d1d; }
.uc-verdict-r { font-size: 12.5px; color: #92400e; margin-top: 4px; font-style: italic; line-height: 1.45; }
.uc-verdict-w { font-size: 11px; color: #a16207; margin-top: 7px; font-weight: 700; }

.uc-sec-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; margin: 18px 0 9px; display: flex; align-items: center; gap: 8px; }
.uc-sec-h span { font-weight: 700; letter-spacing: 0; text-transform: none; color: #c7ccd3; }

.uc-msg { border: 1px solid #eceef1; border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: #fff; }
.uc-msg.uc-msg-trigger { border-color: #fbbf24; box-shadow: 0 0 0 2px rgba(251,191,36,.16); }
.uc-msg-head { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; background: #fafafa; border-bottom: 1px solid #f0f2f4; }
.uc-msg-head.uc-out { background: #f5f7ff; }
.uc-msg-dir { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; flex-shrink: 0; }
.uc-msg-dir.in { background: #FEF3C7; color: #92400e; border: 1px solid #FDE68A; }
.uc-msg-dir.out { background: #E0E7FF; color: #3730A3; border: 1px solid #C7D2FE; }
.uc-msg-who { min-width: 0; flex: 1; }
.uc-msg-from { display: block; font-size: 12.5px; font-weight: 800; color: #111; overflow-wrap: anywhere; }
.uc-msg-to { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; overflow-wrap: anywhere; }
.uc-msg-at { font-size: 10.5px; color: #9ca3af; white-space: nowrap; flex-shrink: 0; }
.uc-msg-subj { font-size: 12.5px; font-weight: 700; color: #374151; padding: 9px 14px 0; overflow-wrap: anywhere; }
.uc-msg-body {
  padding: 12px 14px 14px; font-size: 13.5px; line-height: 1.7; color: #374151;
  font-family: 'DM Sans', sans-serif; overflow-x: auto; max-width: 100%;
}
.uc-msg-body img { max-width: 100%; height: auto; }
.uc-msg-body table { max-width: 100%; }
.uc-msg-att {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px solid #f0f2f4; background: #fafafa;
}
.uc-msg-att-l { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9ca3af; }
.uc-att {
  font-size: 11px; font-weight: 700; color: #374151; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 3px 9px; overflow-wrap: anywhere;
}
.uc-att em { font-style: normal; font-weight: 600; color: #9ca3af; }
/* The wait between two messages. In a complaint the silences are the story, so
   a gap of two days or more is drawn in red rather than left to be subtracted. */
.uc-gap { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; padding-left: 14px; }
.uc-gap::after { content: ""; flex: 1; height: 1px; background: #eceef1; }
.uc-gap span {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #9ca3af; white-space: nowrap;
}
.uc-gap-long span { color: #B45309; }
.uc-gap-long::after { background: #FDE68A; }

.uc-note { font-size: 11.5px; color: #9ca3af; margin-top: 10px; line-height: 1.5; }
.uc-warn {
  display: flex; gap: 9px; align-items: flex-start; padding: 11px 14px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12px; line-height: 1.5;
  margin-bottom: 14px;
}

@media (max-width: 720px) {
  .uc-drop { width: calc(100vw - 24px); }
  .uc-list-row { grid-template-columns: 4px 1fr; }
  .uc-list-av { display: none; }
  .uc-det-actions { margin-left: 0; }
}