/* ===== App: Match Lab + Fill Console ===== */

/* Lock to Inter / admin scale; but allow theme switching */
:root {
  /* Match-Lab/Fill-Console specific edge-type semantic colors (locked across both apps) */
  --edge-impression: #9CA3AF;
  --edge-email:      #3B82F6;
  --edge-push:       #1E40AF;
  --edge-applied:    #F59E0B;
  --edge-worked:     #10B981;
  --edge-callout:    #DC2626;
  --edge-cancelled:  #F97316;

  /* Engagement tier categorical (Okabe-Ito derived, ordered most→least engaged) */
  --tier-1:  #0E7C66;  /* Current Active — green-blue */
  --tier-2:  #16A085;
  --tier-3:  #2EB6A0;  /* Reactivated */
  --tier-4:  #4DA6FF;  /* Resurrected */
  --tier-5:  #6E8FCF;  /* At-risk Active */
  --tier-6:  #C4A14A;  /* Lurking */
  --tier-7:  #B97A3F;  /* Dormant */
  --tier-8:  #9C7BB0;  /* Applicant-only */
  --tier-9:  #7A6F99;  /* Registered-only */
  --tier-10: #6B7280;  /* Suspended/Unknown */
  --tier-11: #5D6F8B;  /* Lead — pre-onboarded mongo_users.position='lead' */

  /* App-shell densities */
  --density-row: 36px;
  --rail-w: 240px;
  --rail-w-right: 320px;
  --queue-w: 320px;
  --diag-w: 380px;

  /* Internal-tools accent (overrides primary blue if user wants ESHYFT navy) */
  --accent: var(--color-primary);
}

[data-density="compact"] { --density-row: 30px; }
[data-density="cozy"]    { --density-row: 36px; }
[data-density="comfy"]   { --density-row: 44px; }

/* In dark mode, soften tier colors slightly so they read on dark surface */
[data-theme="dark"] {
  --tier-1:  #2DD4A6;
  --tier-2:  #34D9B5;
  --tier-3:  #5DDDC5;
  --tier-4:  #7FB6FF;
  --tier-5:  #93AEE0;
  --tier-6:  #E5C76B;
  --tier-7:  #DDA070;
  --tier-8:  #C9A8DD;
  --tier-9:  #A89BC5;
  --tier-10: #9CA3AF;
  --tier-11: #8B98AE;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--text-sm);
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

.tnum { font-variant-numeric: tabular-nums; }

/* Sticky panel headers */
.panel { background: var(--color-surface); border: 1px solid var(--color-border-base); border-radius: 12px; box-shadow: var(--shadow-sm); margin-bottom: var(--space-2); overflow: hidden; }
.panel-header {
  position: sticky; top: 0; z-index: 3;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-base);
  padding: var(--space-2) var(--space-3);
}
.panel-headline { font: 700 15px/1.25 var(--font-sans); color: var(--color-text-title); margin: 0; letter-spacing: -0.01em; }
.panel-sub { font: 400 11px/1.35 var(--font-sans); color: var(--color-text-secondary); margin-top: 1px; }
.panel-body { padding: var(--space-2) var(--space-3) var(--space-3); }

/* Geo map — fill viewport */
.panel-geo { display: flex; flex-direction: column; }
.panel-geo .panel-body { padding: 0; flex: 1; min-height: 0; display: flex; }
.panel-geo .geo-wrap { flex: 1; }

/* Layer fade transitions */
.layer-states, .layer-drill { transition: opacity 260ms var(--ease-standard), transform 320ms var(--ease-emph); transform-origin: center center; }
.layer-out { opacity: 0; pointer-events: none; transform: scale(0.96); }
.layer-in  { opacity: 1; }
.layer-drill.layer-in { animation: drillIn 320ms var(--ease-emph); }
@keyframes drillIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Sparkline stroke draw */
@keyframes spkDraw {
  from { stroke-dasharray: 240; stroke-dashoffset: 240; }
  to   { stroke-dasharray: 240; stroke-dashoffset: 0; }
}
.spk-draw { animation: spkDraw 520ms var(--ease-emph) both; }

/* Skeleton shimmer — used by panels during initial BQ load.
   Renders a moving highlight band across a muted base color. */
@keyframes skel-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skel {
  background: linear-gradient(
    90deg,
    var(--color-bg-shade)    0%,
    var(--color-border-base) 40%,
    var(--color-border-base) 60%,
    var(--color-bg-shade)    100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1400ms var(--ease-standard) infinite;
}
/* SVG-friendly variant: applies the shimmer to a fill via opacity pulse.
   SVG can't use CSS background-image, so we fade fill-opacity instead. */
@keyframes panel-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@keyframes skel-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.65; }
}
.skel-svg { animation: skel-pulse 1400ms var(--ease-standard) infinite; }

/* LossMap markers — root data-attrs are set by the per-panel toggles
   dropdown (LossMapToggles in match-lab-view.jsx). */
[data-ml-show-untouched="0"] .ml-untouched-line { display: none; }
/* Deleted filter: dim cells where >50% of non-worked shifts are isDeleted.
   Greys the cell rather than removing it so the operator can still see
   "this cell is mostly cancelled, deprioritize" in the same layout. */
[data-ml-filter-deleted="1"] .lossmap-cell[data-deleted-heavy="1"] {
  opacity: 0.25 !important;
  transition: opacity 200ms var(--ease-standard) !important;
}

/* Geo back button */
.geo-back {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border-base);
  color: var(--color-text-title);
  font: 500 11px/1 var(--font-sans);
  cursor: pointer;
  transition: background 160ms var(--ease-standard);
}
.geo-back:hover { background: rgba(255,255,255,0.08); }

/* Pulsing critical cell border */
@keyframes critPulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, 0.55); }
  50%      { box-shadow: inset 0 0 0 2.5px rgba(245, 158, 11, 1); }
}
.crit-pulse { animation: critPulse 1.6s var(--ease-standard) infinite; }

@keyframes slideInFromTop {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.slide-in { animation: slideInFromTop 240ms var(--ease-emph); }

@keyframes countTick {
  0%   { transform: translateY(6px); opacity: 0; }
  60%  { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.count-tick { animation: countTick 320ms var(--ease-emph); }

/* Insight drawer red-dot pulse */
@keyframes redDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.red-dot-pulse { animation: redDotPulse 1.4s var(--ease-standard) infinite; }
@keyframes redDotBurst {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}
.red-dot-burst { animation: redDotBurst 600ms var(--ease-emph); }

/* Toolbar chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--color-bg-shade); color: var(--color-text);
  border: 1px solid var(--color-border-base);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: all 120ms var(--ease-standard);
}
.chip:hover { background: var(--color-surface-hover); }
.chip.on { background: var(--color-primary-tint); color: var(--color-primary); border-color: var(--color-border-active); }
.chip .x { color: var(--color-text-secondary); margin-left: 2px; }

/* KPI card */
.kpi {
  background: var(--color-surface); border: 1px solid var(--color-border-base);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.kpi-label { font: 500 11px/1 var(--font-sans); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-value { font: 700 28px/1.05 var(--font-sans); color: var(--color-text-title); letter-spacing: -0.02em; }
.kpi-sub { font: 400 12px/1.3 var(--font-sans); color: var(--color-text-secondary); }
.kpi-delta-pos { color: var(--edge-worked); font-weight: 600; }
.kpi-delta-neg { color: var(--edge-callout); font-weight: 600; }

/* Tier badge */
.tier-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.license-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font: 700 10px/1 var(--font-sans); letter-spacing: 0.04em; }
.license-RN  { background: rgba(239, 70, 81, 0.15);  color: #EF4651; }
.license-LPN { background: rgba(21, 186, 162, 0.18); color: #15BAA2; }
.license-CNA { background: rgba(51, 153, 255, 0.16); color: var(--color-primary); }
[data-theme="dark"] .license-RN { color: #FF8A91; }
[data-theme="dark"] .license-LPN { color: #4FE1C8; }
[data-theme="dark"] .license-CNA { color: #8AC4FF; }

/* Top navigation bar (replaces .app-sidebar) — mirrors data-agent Navigation.tsx */
.app-topbar {
  position: sticky; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 24px;
  background: var(--color-header-bg);
  box-shadow: 0px 1px 3px var(--color-header-shadow), 0px 1px 2px var(--color-header-shadow);
  flex-shrink: 0;
}
.app-topbar .nav-cluster { display: flex; align-items: center; gap: 32px; }
.app-topbar .nav-links { display: flex; align-items: center; gap: 4px; }
.app-topbar .nav-link {
  padding: 8px 12px; border-radius: 6px;
  font: 500 14px/1.4 var(--font-sans);
  color: var(--color-text-secondary); text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.app-topbar .nav-link:hover { color: var(--color-text-title); background: var(--color-bg-shade); }
.app-topbar .nav-link.active { color: var(--color-primary); background: var(--color-primary-tint); }
.app-topbar .nav-link.disabled { color: var(--color-text-placeholder); cursor: default; }
.app-topbar .nav-link.disabled:hover { background: transparent; color: var(--color-text-placeholder); }
.app-topbar .right-cluster { display: flex; align-items: center; gap: 12px; }
.app-topbar .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary-tint); color: var(--color-primary);
  display: grid; place-items: center;
  font: 600 11px/1 var(--font-sans);
}
.soon-badge {
  font: 500 9px/1 var(--font-sans); padding: 2px 5px; border-radius: 4px;
  background: var(--color-bg-shade-secondary); color: var(--color-text-secondary);
  margin-left: 6px; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Header app title */
.app-header {
  height: 52px; background: var(--color-header-bg); box-shadow: var(--shadow-header);
  display: flex; align-items: center; padding: 0 18px; gap: 14px;
  border-bottom: 1px solid var(--color-border-base);
  flex-shrink: 0;
}
.app-title { font: 700 15px/1 var(--font-sans); color: var(--color-text-title); letter-spacing: -0.01em; }
.app-sub { font: 400 12px/1 var(--font-sans); color: var(--color-text-secondary); }

/* Buttons compact */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--color-surface); color: var(--color-text-title);
  border: 1px solid var(--color-border-base);
  font: 500 12px/1 var(--font-sans); cursor: pointer;
  transition: all 120ms var(--ease-standard);
}
.btn:hover { background: var(--color-surface-hover); }
.btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); border-radius: 999px; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-pill { border-radius: 999px; padding: 6px 14px; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text-title); }

/* Input */
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font: 500 11px/1 var(--font-sans); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }

/* Scrollbars (dark-friendly) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-border-base); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* Tooltip */
.tt {
  position: fixed; pointer-events: none;
  background: var(--color-text-title); color: var(--color-bg);
  border-radius: 8px; padding: 10px 12px;
  font: 400 12px/1.5 var(--font-sans);
  box-shadow: var(--shadow-lg);
  z-index: 5000; max-width: 280px;
}
[data-theme="dark"] .tt { background: #0B0E14; color: #F9FAFB; border: 1px solid #374151; }

/* Section divider in left rail */
.rail-sec {
  font: 600 10px/1 var(--font-sans);
  color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 14px 14px 6px;
}

/* Multi-select pill list */
.opt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 6px;
  cursor: pointer; font: 400 12px/1.3 var(--font-sans);
  color: var(--color-text);
}
.opt-row:hover { background: var(--color-surface-hover); }
.opt-row.on   { color: var(--color-text-title); }
.opt-row .check {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1.5px solid var(--color-border-base);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--color-surface);
}
.opt-row.on .check { background: var(--color-primary); border-color: var(--color-primary); color: white; }

.chat-thread-title-link {
  padding: 3px 6px; margin: -3px -6px;
  border-radius: 4px;
  transition: background 120ms var(--ease-standard, ease);
}
.chat-thread-title-link:hover { background: var(--color-surface-hover); }
.chat-thread-title-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

@keyframes tool-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-tint, rgba(51,153,255,0.0)); }
  50%      { box-shadow: 0 0 0 4px var(--color-primary-tint, rgba(51,153,255,0.25)); }
}
.tool-pill-running {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  animation: tool-pill-pulse 1.4s ease-in-out infinite;
}

/* Tooltip arrow no */