/* sales-flash.css — Weekly Sales Flash report modal (Phase 5)
   Tokens + brand language consistent with the rest of Formon (paper/ink/accent).
   Targets iPad M5 11" (834 portrait / 1194 landscape): modal caps height and
   scrolls its body, buttons stay in viewport. */

.sf-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 18, 16, 0.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 18vh;
  overflow-y: auto;
  z-index: 1019;
}

.sf-modal {
  background: var(--color-paper-50, #FAF8F2);
  border: 1px solid var(--color-paper-200, #ECE7D8);
  border-radius: 16px;
  width: 100%; max-width: 680px;
  box-shadow: 0 12px 40px rgba(20, 18, 16, 0.22);
  display: flex; flex-direction: column;
  max-height: 84vh;
  overflow: hidden;
}

.sf-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 18px 20px 12px;
  border-bottom: 1px solid var(--color-paper-200, #ECE7D8);
}
.sf-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-size: 20px; margin: 0;
  color: var(--color-ink-900, #2C2C2A);
}
.sf-sub { font-size: 12px; color: var(--color-ink-100, #6E6C67); margin-top: 2px; }
.sf-x {
  border: none; background: transparent; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--color-ink-300, #54534F);
  padding: 0 4px; border-radius: 8px;
}
.sf-x:hover { background: var(--color-paper-100, #F4F1E8); }

/* KPI strip */
.sf-kpis {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-paper-200, #ECE7D8);
}
.sf-kpi {
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  background: var(--color-paper-100, #F4F1E8);
  color: var(--color-ink-300, #54534F);
  border: 1px solid var(--color-paper-200, #ECE7D8);
}
.sf-kpi b { font-weight: 600; color: var(--color-ink-900, #2C2C2A); }
.sf-kpi small { color: var(--color-ink-100, #6E6C67); }
.sf-kpi-met  { background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.30); }
.sf-kpi-met b { color: var(--color-success, #16A34A); }
.sf-kpi-near { background: rgba(229,166,91,0.14); border-color: rgba(229,166,91,0.32); }

/* body — scrolls */
.sf-body { padding: 8px 20px 16px; overflow-y: auto; }
.sf-field { padding: 10px 0; border-bottom: 1px solid var(--color-paper-100, #F4F1E8); }
.sf-field:last-child { border-bottom: none; }
.sf-field-h {
  font-size: 13px; font-weight: 600; margin: 0 0 6px;
  color: var(--color-ink-900, #2C2C2A);
  letter-spacing: 0.2px;
}
.sf-list { margin: 0; padding-left: 18px; }
.sf-list li { font-size: 13px; color: var(--color-ink-300, #54534F); margin: 2px 0; line-height: 1.4; }
.sf-empty { font-size: 13px; color: var(--color-ink-100, #6E6C67); font-style: italic; }

.sf-qlist li { list-style: none; }
.sf-qlist { padding-left: 0; }
.sf-q-name { font-weight: 600; color: var(--color-ink-900, #2C2C2A); }
.sf-q-meta { font-size: 11px; color: var(--color-ink-100, #6E6C67); }
.sf-q-amt { font-weight: 600; color: var(--color-success, #16A34A); }
.sf-q-status {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--color-paper-200, #ECE7D8); color: var(--color-ink-700, #3A3936);
  text-transform: capitalize;
}
.sf-q-sent { background: rgba(46,112,176,0.14); color: var(--color-sky-800, #1F4D7A); }
.sf-q-negotiating { background: rgba(229,166,91,0.16); color: var(--color-peach-800, #7D4F12); }

.sf-text {
  width: 100%; box-sizing: border-box;
  min-height: 60px; resize: vertical;
  border: 1px solid var(--color-paper-200, #ECE7D8);
  border-radius: 10px; padding: 8px 10px;
  font: inherit; font-size: 13px; color: var(--color-ink-900, #2C2C2A);
  background: #fff;
}
.sf-text:focus { outline: 2px solid var(--color-accent, #FFD500); outline-offset: -1px; }

/* footer */
.sf-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--color-paper-200, #ECE7D8);
}
.sf-btn {
  border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; line-height: 1; border: 1px solid transparent;
}
.sf-btn-ghost {
  background: transparent; border-color: var(--color-ink-300, #54534F);
  color: var(--color-ink-900, #2C2C2A);
}
.sf-btn-ghost:hover { background: var(--color-paper-100, #F4F1E8); }
.sf-btn-primary {
  background: var(--color-accent, #FFD500);
  border-color: var(--color-accent, #FFD500);
  color: var(--color-accent-text, #000000);
}
.sf-btn-primary:hover { background: var(--color-accent-hover, #f0c700); border-color: var(--color-accent-hover, #f0c700); }

/* ---- account-panel analyzer rollup (Sprint A item 2) ---- */
.tcpanel-analyzer-rollup { margin-top: 4px; }
.sf-rollup-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-rollup-stat {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12px; color: var(--color-ink-100, #6E6C67);
}
.sf-rollup-stat b { font-size: 14px; font-weight: 600; color: var(--color-ink-900, #2C2C2A); }
.sf-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; }
.sf-spark i { width: 5px; border-radius: 1px; display: inline-block; background: var(--color-paper-200, #ECE7D8); }
.sf-spark i.pos { background: var(--color-success, #16A34A); }
.sf-spark i.neg { background: #C0392B; }
.sf-rollup-sentiment.pos { color: var(--color-success, #16A34A); }
.sf-rollup-sentiment.neg { color: #C0392B; }
.sf-rollup-empty { font-size: 12px; color: var(--color-ink-100, #6E6C67); font-style: italic; }

@media (max-width: 860px) {
  .sf-modal { max-width: 100%; max-height: 88vh; }
}