/* renderer/outreach-funnel.css — 📊 the cold-outreach funnel panel (renderer/outreach-funnel.js). Sharon 30.10.26: the
   dashboard from the reel — ONE white rounded panel inside the dark window, six cards (2 wide on top, 4 below), each a
   small grey label, a big dark number, a small coloured square icon (purple, teal, indigo, red, amber, light blue). */
.ofn {
  --ofn-bg: #ffffff; --ofn-card: #ffffff; --ofn-line: #eceef3; --ofn-label: #6b7280; --ofn-num: #111827; --ofn-sub: #6b7280;
  --ofn-out: #8b5cf6; --ofn-in: #2dd4bf; --ofn-track: #f1f2f6;
  color-scheme: light;
  margin: 0 0 14px; padding: 12px; background: var(--ofn-bg); color: var(--ofn-num); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); font-size: 13px; line-height: 1.4; text-align: right;
}
.ofn *, .ofn *::before, .ofn *::after { box-sizing: border-box; }
.ofn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 10px; flex-wrap: wrap; }
.ofn-title { font-weight: 700; font-size: 14px; color: var(--ofn-num); }
.ofn-periods { display: inline-flex; gap: 2px; padding: 2px; background: var(--ofn-track); border-radius: 9px; }
.ofn-periods button {
  min-height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; box-shadow: none;
  color: var(--ofn-label); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ofn-periods button[aria-selected="true"] { background: #fff; color: var(--ofn-num); box-shadow: 0 1px 2px rgba(17, 24, 39, .12); }
.ofn-periods button:focus-visible { outline: 2px solid var(--ofn-out); outline-offset: 1px; }
.ofn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ofn-card {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 11px 12px 12px;
  background: var(--ofn-card); border: 1px solid var(--ofn-line); border-radius: 12px;
}
.ofn-card.is-wide { grid-column: span 2; }
.ofn-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ofn-l { color: var(--ofn-label); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofn-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; }
.ofn-ic svg { display: block; }
.ofn-ic.is-purple { background: #8b5cf6; }
.ofn-ic.is-teal { background: #14b8a6; }
.ofn-ic.is-indigo { background: #6366f1; }
.ofn-ic.is-red { background: #ef4444; }
.ofn-ic.is-amber { background: #f59e0b; }
.ofn-ic.is-sky { background: #38bdf8; }
.ofn-v { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--ofn-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ofn-v.is-none { color: #c4c8d0; cursor: help; }
.ofn-s { color: var(--ofn-sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.ofn-s b { color: var(--ofn-num); font-weight: 700; }
.ofn-bar { display: flex; height: 8px; margin-top: 4px; overflow: hidden; border-radius: 99px; background: var(--ofn-track); }
.ofn-bar i { display: block; height: 100%; }
.ofn-bar i.is-out, .ofn-leg i.is-out { background: var(--ofn-out); }
.ofn-bar i.is-in, .ofn-leg i.is-in { background: var(--ofn-in); }
.ofn-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ofn-sub); font-size: 12px; }
.ofn-leg span { display: inline-flex; align-items: center; gap: 5px; }
.ofn-leg span[title] { cursor: help; }
.ofn-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.ofn-leg b { color: var(--ofn-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.ofn-foot { margin: 8px 2px 0; color: #9ca3af; font-size: 11.5px; }
.ofn-err { margin: 4px 2px; color: #b91c1c; font-size: 12.5px; }
.ofn-grid.is-loading i { display: block; height: 92px; border-radius: 12px; background: var(--ofn-track); animation: ofn-pulse 1.2s ease-in-out infinite; }
.ofn-grid.is-loading i:nth-child(-n+2) { grid-column: span 2; }
@keyframes ofn-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ofn-grid.is-loading i { animation: none; } }
@media (max-width: 560px) {
  .ofn { padding: 10px; border-radius: 14px; }
  .ofn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ofn-v { font-size: 24px; }
}