/* predictions.css - Predictions surface
 *
 * Extracted verbatim from style.css. Rules keep their original
 * relative order, and @media rules travel with the surface so its
 * responsive overrides still land after the rules they override.
 */
.predictions-view { padding: 1.5rem; color: var(--fg-primary, #e5e7eb); }
.predictions-card { background: #1F2121; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 1rem; overflow: hidden; }
.predictions-card h2 { font-size: 1rem; margin: 0 0 .8rem; }
.predictions-table-wrap { overflow-x: auto; }
.predictions-card table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.predictions-card th { color: #aeb4be; font-size: .72rem; text-transform: uppercase; }
body.route-predictions .predictions-view {
  max-width: 1180px; margin: 0 auto; padding: 0.75rem 1.25rem 3rem;
}
.predictions-view .predictions-header,
.predictions-view .predictions-header .eyebrow,
.predictions-view .predictions-lede,
.predictions-view .predictions-header h1 { display: none; }
.predictions-view .predictions-toolbar--solo {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.75rem;
}
.pred-tool:hover { background: rgba(33,150,243,.12); border-color: rgba(33,150,243,.35); color: #fff; }

/* SuperViz-style section divisions on Predictions overview */
.pred-sections { display: flex; flex-direction: column; gap: 0; }
.pred-section + .pred-section { margin-top: 40px; }
.pred-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pred-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0f2f5;
}
.pred-section-blurb {
  margin: 0;
  font-size: 12px;
  color: #7a8595;
}
.pred-outbound-slot:empty { display: none; }
.pred-outbound-slot:not(:empty) {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem;
}
@media (min-width: 1080px) {
  .pred-outbound-slot:not(:empty) { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
  .pred-grid { grid-template-columns: 1fr 1fr; }
  /* Sales hero: Best use of time spans the Sales grid */
  .pred-section[data-section="sales"] .pred-grid > .pred-card:first-of-type {
    grid-column: 1 / -1;
  }
}
.pred-card {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06); border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem; overflow: hidden;
  transition: border-color .2s ease;
}
.pred-card:hover { border-color: rgba(33,150,243,.25); }
.pred-card-head { margin-bottom: .75rem; }
.pred-card-title h2 { font-size: 1rem; margin: 0; letter-spacing: -0.01em; font-weight: 600; color: #f0f2f5; }
.pred-card-sub { color: #7a8595; font-size: .82rem; margin: .3rem 0 0; }
.pred-badge--loading { background: rgba(255,255,255,.06); color: #8b95a3; animation: pred-pulse 1.4s ease-in-out infinite; }
.pred-badge--ok { background: rgba(76,175,80,.16); color: #7dc884; }
.pred-badge--fallback { background: rgba(255,183,77,.16); color: #ffb74d; }
.pred-badge--warm { background: rgba(33,150,243,.14); color: #64b5f6; }
.pred-row:first-child { border-top: 0; }
.pred-row:hover { background: rgba(33,150,243,.04); }
.pred-col { min-width: 0; }
.pred-col--right { text-align: right; }
.pred-name { color: #f0f2f5; font-size: .92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pred-sub { color: #6b7684; font-size: .74rem; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pred-num { color: #f0f2f5; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pred-num--dim { color: #b0b8c4; font-weight: 500; }
.pred-z--mid { color: #ffb74d; }
.pred-z--high { color: #ff7373; }
.pred-empty { padding: 1.5rem .5rem; color: #8b95a3; font-size: .88rem; text-align: center; }
.pred-empty--muted { color: #6b7684; }
.pred-skel-row:first-child { border-top: 0; }
.pred-skel-cell {
  height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: pred-shimmer 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.pred-skel-cell--rank { width: 34px; height: 22px; border-radius: 999px; }
.pred-skel-cell--name { height: 24px; }
.pred-skel-cell--num { height: 20px; }

@media (max-width: 820px) {
  body.route-predictions .predictions-view { padding: .25rem .9rem 2.5rem; }
  .predictions-view .predictions-header { margin-bottom: .65rem; }
  .predictions-view .predictions-header h1 { font-size: 1.4rem; }
  .predictions-title-row { align-items: flex-start; gap: .75rem; }
  .pred-tool { padding: .38rem .65rem; font-size: .76rem; }
  .pred-tool span { display: none; }
  .pred-grid { gap: .75rem; }
  .pred-card { padding: .85rem .85rem 1rem; border-radius: 12px; }
  .pred-card-title h2 { font-size: .94rem; }
  .pred-card-sub { font-size: .77rem; }
  .pred-row, .pred-skel-row {
    grid-template-columns: 34px minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,.7fr);
    gap: .5rem; padding: .55rem .1rem;
  }
  .pred-rank { min-width: 28px; height: 20px; font-size: .68rem; }
  .pred-name { font-size: .87rem; }
  .pred-sub { font-size: .68rem; }
  .pred-num { font-size: .88rem; }
  .pred-z { font-size: .82rem; }
}
.pred-card--wide { grid-column: 1 / -1; }

@media (min-width: 640px) {
  .pred-el-kpis { grid-template-columns: 1fr 1fr 1fr; }
}
.pred-el-kpi {
  background: rgba(33,150,243,.06);
  border: 1px solid rgba(33,150,243,.15);
  border-radius: 10px;
  padding: .85rem;
}
.pred-el-kpi-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2196F3;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pred-el-kpi-label {
  color: #f0f2f5;
  font-size: .82rem;
  font-weight: 500;
  margin-top: .2rem;
}
.pred-el-kpi-sub {
  color: #7a8595;
  font-size: .72rem;
  margin-top: .3rem;
}

@media (min-width: 900px) {
  .pred-el-charts { grid-template-columns: 1fr 1fr; }
  .pred-el-charts .pred-el-chart:nth-child(1) { grid-column: 1 / -1; }
}
.pred-el-chart {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  padding: .85rem;
}
.pred-el-canvaswrap {
  position: relative;
  height: 260px;
  width: 100%;
}
.pred-el-canvaswrap--short { height: 120px; }

@media (max-width: 640px) {
  .pred-el-canvaswrap { height: 220px; }
  .pred-el-canvaswrap--short { height: 100px; }
}
.pred-el-explore {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: .9rem;
}
.pred-el-explore-title {
  font-size: .85rem;
  font-weight: 600;
  color: #f0f2f5;
  margin-bottom: .6rem;
}
.pred-el-input {
  flex: 1 1 140px;
  min-width: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: .5rem .7rem;
  color: #f0f2f5;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.pred-el-input:focus {
  outline: none;
  border-color: #2196F3;
  background: rgba(33,150,243,.06);
}
.pred-tool--primary {
  background: #2196F3;
  color: #fff;
  border: 1px solid #2196F3;
  border-radius: 8px;
  padding: .5rem .95rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.pred-tool--primary:hover { background: #1976D2; border-color: #1976D2; }
.pred-el-scorerow:last-child { border-bottom: 0; }
.pred-el-scorerow b { color: #f0f2f5; font-variant-numeric: tabular-nums; }
.pred-el-abstain {
  padding: .7rem;
  background: rgba(255,183,77,.1);
  border: 1px solid rgba(255,183,77,.25);
  border-radius: 8px;
  color: #ffb74d;
  font-size: .85rem;
}
.pred-meta-row .pred-label {
  font-size: 11px;
  color: var(--text-tertiary, #999);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.pred-num-sm {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  font-variant-numeric: tabular-nums lining-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pred-mini-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #666);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.pred-mini-list .pred-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 13px;
}
.pred-mini-list .pred-row:last-child { border-bottom: 0; }
.pred-mini-list .pred-rank {
  color: var(--text-tertiary, #999);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pred-mini-list .pred-row-name {
  color: var(--text-primary, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pred-mini-list .pred-row-num {
  color: #2196F3;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.pred-badge--ok {
  background: #E3F2FD;
  color: #1976D2;
}
.pred-badge--warm {
  background: #f3f4f6;
  color: #6b7280;
}
.pred-badge--loading {
  background: #f3f4f6;
  color: #9ca3af;
}

@media (max-width: 820px) {
  .pred-meta-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.pred-version-label {
  font-family: inherit !important;
  font-weight: 500 !important;
  color: var(--text-secondary, #8a8a8a) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.02em;
}
.pred-total-row .pred-total-num {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary, #f0f2f5);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}
.pred-total-row .pred-total-label {
  font-size: 12px;
  color: var(--text-tertiary, #8a8a8a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pred-meta-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.pred-card--clickable {
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.pred-card--clickable:hover {
  transform: translateY(-2px);
  border-color: #2196F3 !important;
  box-shadow: 0 8px 24px rgba(33, 150, 243, 0.10);
}
.pred-card--clickable:focus-visible {
  outline: 2px solid #2196F3;
  outline-offset: 2px;
}
.pred-showmore-btn:hover {
  background: rgba(33, 150, 243, 0.08);
  border-color: #2196F3;
}
.predictions-detail {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.pred-detail-head {
  margin-bottom: 20px;
}
.pred-detail-back:hover { color: #2196F3; border-color: #2196F3; }
.pred-detail-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #f0f2f5);
  margin: 0 0 4px;
}
.pred-detail-sub {
  font-size: 13px;
  color: var(--text-tertiary, #999);
  margin: 0;
}
.pred-detail-toolbar .pred-detail-ps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary, #999);
}
.pred-detail-toolbar select {
  background: var(--surface, #1a1a1a);
  border: 1px solid var(--border, #2a2a2a);
  color: var(--text-primary, #f0f2f5);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
}
.pred-detail-info {
  color: var(--text-tertiary, #8a8a8a);
  font-size: 12px;
  margin-right: auto;
  margin-left: 8px;
}
.pred-detail-pgbtn, .pred-detail-csv {
  background: var(--surface, #1a1a1a);
  border: 1px solid var(--border, #2a2a2a);
  color: var(--text-primary, #f0f2f5);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.pred-detail-pgbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.pred-detail-csv:hover { border-color: #2196F3; color: #2196F3; }
.pred-detail-tablewrap {
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 12px;
  overflow: auto;
  background: var(--surface, #1a1a1a);
  /* Sticky thead + body scroll: without a max-height the wrap grows with the
     table and sticky never engages. Match the winback call-sheet viewport. */
  max-height: calc(100vh - 220px);
}
.pred-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pred-detail-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-alt, #1c1c1e);
  color: var(--text-secondary, #999);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border, #2a2a2a);
  user-select: none;
}
.pred-detail-th--right { text-align: right; }
.pred-detail-th--sortable { cursor: pointer; }
.pred-detail-th--sortable:hover { color: #2196F3; }
.pred-detail-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #23231f);
  color: var(--text-primary, #f0f2f5);
  font-variant-numeric: tabular-nums lining-nums;
}
.pred-detail-td--right { text-align: right; }

/* v42.3.46: wide call-sheet tables (winback) carry free-text note columns.
   Short cells stay on one line; note cells wrap inside a fixed-width inner
   block. max-width on a <td> does not constrain an auto-layout table, so the
   clamp has to live on a child element or the text overruns its neighbour. */
.predictions-detail .pred-detail-table { table-layout: auto; }
.predictions-detail .pred-detail-table thead th { white-space: nowrap; }
.predictions-detail .pred-detail-table tbody td:not(.pred-detail-td--wrap) {
  white-space: nowrap;
}
.predictions-detail .pred-detail-td--wrap { vertical-align: top; }
/* Long cells scroll in place rather than clamping. Clamping hid the tail of
   the text with no way to read it; a fixed max-height plus overflow-y keeps
   the row height stable while making every word reachable. */
.pred-detail-clamp {
  width: 300px;
  max-width: 300px;
  max-height: 4.2em;          /* 3 lines at 1.4 line-height */
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
  color: var(--text-secondary, #9aa0a6);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  overscroll-behavior: contain;
}
.pred-detail-clamp::-webkit-scrollbar { width: 6px; }
.pred-detail-clamp::-webkit-scrollbar-track { background: transparent; }
.pred-detail-clamp::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.pred-detail-clamp:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.32); }

/* The win-back summary is prose, not a note fragment, so it gets more width
   and one more visible line before it starts scrolling. */
.pred-detail-clamp--wide {
  width: 460px;
  max-width: 460px;
  max-height: 5.6em;          /* 4 lines */
  color: var(--text-primary, #e8eaed);
}

/* Customer name links through to the customer card. */
.pred-detail-custlink {
  color: #2196F3;
  text-decoration: none;
  border-bottom: 1px solid rgba(33, 150, 243, 0.35);
}
.pred-detail-custlink:hover {
  border-bottom-color: #2196F3;
}
.pred-detail-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pred-detail-empty {
  text-align: center;
  padding: 40px 20px !important;
  color: var(--text-tertiary, #666);
}

@media (max-width: 820px) {
  .predictions-detail { padding: 14px; }
  .pred-detail-toolbar { flex-wrap: wrap; }
  .pred-detail-info { width: 100%; margin: 4px 0; }
  .pred-detail-tablewrap { -webkit-overflow-scrolling: touch; }
  .pred-detail-clamp { width: 220px; max-width: 220px; }
  .pred-detail-clamp--wide { width: 260px; max-width: 260px; }
}
.cust-detail-view--panel .pred-detail-back { display: none; }
.cust-detail-view--panel .pred-section {
  padding: 0;
  margin: 0 0 14px 0;
}
.cust-detail-view--panel .pred-section:last-child { margin-bottom: 0; }
.cust-detail-view--panel .pred-grid {
  grid-template-columns: 1fr 1fr;   /* two-col on narrow panel */
  gap: 10px;
}
.cust-detail-view--panel .pred-card { padding: 12px; }
.cust-detail-view--panel .pred-num { font-size: 20px; }
.cust-detail-view--panel .pred-detail-tablewrap { overflow-x: auto; }
.cust-detail-view--panel .pred-detail-table { font-size: 12px; }

@media (max-width: 820px) {
  .cust-detail-view--panel .pred-grid { grid-template-columns: 1fr; }
}
.cust-detail-tabs .pred-detail-tab {
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #E0E0E0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cust-detail-tabs .pred-detail-tab:hover {
  color: #2196F3;
  border-color: rgba(33,150,243,0.55);
}
.cust-detail-tabs .pred-detail-tab.active {
  background: #2196F3;
  color: #fff;
  border-color: #2196F3;
}
html body .pred-el-chips {
  background: transparent !important;
  border: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html body .pred-el-chip {
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: var(--text-secondary, #9ca3af);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
}

.pred-card-head { position: relative; }
.pred-tool--model-lab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #5BA9F2;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.pred-tool--model-lab:hover {
  background: rgba(33,150,243,0.12);
  border-color: rgba(33,150,243,0.35);
  color: #fff;
}
.pred-detail-head .pred-tool--model-lab {
  margin-top: 0.75rem;
}

/* Knock-next cell → single-zone Mapbox modal (Phoenix dark-v11 stack) */
.pred-knock-zone {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #64b5f6;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.pred-knock-zone:hover { color: #90caf9; }

.pred-knock-map-modal {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pred-knock-map-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.pred-knock-map-sheet {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2, #131a24);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.5);
}
.pred-knock-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.pred-knock-map-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #e8eef7;
}
.pred-knock-map-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: #94a3b8;
  word-break: break-all;
}
.pred-knock-map-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.1);
  color: #e8eef7;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pred-knock-map-close:hover { background: rgba(33, 150, 243, 0.2); border-color: rgba(33, 150, 243, 0.55); }
.pred-knock-map-host {
  position: relative;
  width: 100%;
  height: min(62vh, 560px);
  min-height: 320px;
  background: #0b1018;
}
.pred-knock-map-loading,
.pred-knock-map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}
.pred-knock-map-fallback { color: #fca5a5; }

@media (max-width: 820px) {
  .pred-knock-map-modal { padding: 8px; }
  .pred-knock-map-host { height: min(70vh, 480px); min-height: 260px; }
}