/* Business screens: leads, revenue, analytics, user activity. Uses the tokens from styles.css. */
:root {
  --chart-0: #ff4a0a;
  --chart-1: #5b9dff;
  --chart-2: #2ebd6b;
  --chart-3: #e8a317;
  --chart-4: #b18cff;
  --chart-5: #2dd0c0;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
input[type='date'], input[type='number'] {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; min-height: 42px; color-scheme: dark;
}
input[type='date']:focus-visible, input[type='number']:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

/* ---------- badges ---------- */
.badge-info { color: var(--info); background: var(--info-soft); border-color: rgba(91, 157, 255, 0.4); }
.badge-warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(232, 163, 23, 0.45); }
.badge-danger { color: var(--danger); background: var(--danger-soft); border-color: rgba(229, 72, 77, 0.45); }

/* ---------- stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat-grid-tight { margin: 4px 0 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.stat-label { color: var(--muted); font-size: 0.8rem; }
.stat-value { font-size: 1.3rem; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.stat-sub { color: var(--muted); font-size: 0.76rem; overflow-wrap: anywhere; }
.stat-good .stat-value { color: var(--success); }
.stat-bad { border-color: rgba(229, 72, 77, 0.5); }
.stat-bad .stat-value { color: var(--danger); }
.stat-warn { border-color: rgba(232, 163, 23, 0.5); }
.stat-warn .stat-value { color: var(--warn); }
.stat-link:hover { border-color: var(--accent); }

/* ---------- charts ---------- */
.biz-chart { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chart-host { width: 100%; min-width: 0; }
.biz-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.biz-svg text { font-family: var(--font); }
.g-grid { stroke: var(--border); stroke-width: 1; }
.t-axis { fill: var(--muted); font-size: 11px; }
.t-label { fill: var(--text); font-size: 12.5px; }
.t-value { fill: var(--text); font-size: 11px; font-weight: 600; }
.t-sub { fill: var(--muted); font-size: 11px; font-weight: 400; }
.g-hit { fill: transparent; }
.g-hit:hover { fill: rgba(255, 255, 255, 0.05); }
.g-goal { stroke: var(--success); stroke-width: 1.5; stroke-dasharray: 5 4; }
.g-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-area { opacity: 0.16; }
.g-track { fill: var(--surface-2); }
svg .fill-0 { fill: var(--chart-0); } svg .fill-1 { fill: var(--chart-1); } svg .fill-2 { fill: var(--chart-2); }
svg .fill-3 { fill: var(--chart-3); } svg .fill-4 { fill: var(--chart-4); } svg .fill-5 { fill: var(--chart-5); }
svg .stroke-0 { stroke: var(--chart-0); } svg .stroke-1 { stroke: var(--chart-1); } svg .stroke-2 { stroke: var(--chart-2); }
svg .stroke-3 { stroke: var(--chart-3); } svg .stroke-4 { stroke: var(--chart-4); } svg .stroke-5 { stroke: var(--chart-5); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.swatch.fill-0 { background: var(--chart-0); } .swatch.fill-1 { background: var(--chart-1); } .swatch.fill-2 { background: var(--chart-2); }
.swatch.fill-3 { background: var(--chart-3); } .swatch.fill-4 { background: var(--chart-4); } .swatch.fill-5 { background: var(--chart-5); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-data { margin-top: 2px; }
.chart-data > summary { cursor: pointer; color: var(--muted); font-size: 0.82rem; padding: 4px 0; width: fit-content; }
.chart-data > summary:hover { color: var(--text); }
.chart-data-wrap { max-height: 280px; overflow: auto; margin: 6px 0 0; }
.chart-data .table th, .chart-data .table td { padding: 6px 10px; font-size: 0.85rem; }
.chart-data .table thead th { position: sticky; top: 0; background: var(--surface); }
.chart-data .table tbody th { font-weight: 500; text-align: left; white-space: nowrap; }
.biz-spark { display: block; width: 100%; height: 44px; margin-top: 8px; }
.spark-wrap { min-width: 0; }

.biz-charts { margin-top: 4px; margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.biz-card { overflow: hidden; }
.card-note { margin: -6px 0 12px; }
.biz-analysis .group-title:first-child { margin-top: 8px; }

/* ---------- filters ---------- */
.biz-filters { margin-bottom: 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 14px; min-height: 36px; font: inherit; cursor: pointer; }
.chip:hover { color: var(--text); border-color: #3a3a3a; }
.chip.is-active { background: var(--accent-soft); color: var(--accent); border-color: rgba(255, 74, 10, 0.5); }
.chip-count { font-size: 0.78rem; font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 1px 8px; }
.chip.is-active .chip-count { background: rgba(255, 74, 10, 0.18); color: var(--accent); }
.biz-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; align-items: end; margin-bottom: 4px; }
.biz-toolbar .field { margin-bottom: 12px; }
.biz-toolbar-toggle { margin-bottom: 12px; display: flex; align-items: center; min-height: 42px; }
.biz-toolbar-toggle .switch { margin-bottom: 0; }
.biz-toolbar-reset { margin-bottom: 12px; display: flex; align-items: flex-end; }
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.form-actions.top-actions { margin: 0 0 12px; }
.inline-actions { margin: -6px 0 10px; }

/* ---------- lead + entry tables ---------- */
.lead-table { min-width: 900px; }
.entry-table { min-width: 860px; }
.cell-line.mono { white-space: nowrap; }
.lead-table td[data-label='Received'], .lead-table td[data-label='Follow-up'], .entry-table td[data-label='Date'] { white-space: nowrap; }
.lead-table td, .entry-table td { vertical-align: top; }
.cell-main { min-width: 160px; }
.lead-link { font-weight: 600; display: block; overflow-wrap: anywhere; }
.cell-line { display: block; overflow-wrap: anywhere; }
.cell-wrap { min-width: 180px; overflow-wrap: anywhere; }
.status-select { width: auto; min-width: 118px; min-height: 36px; padding: 6px 10px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; }
.status-new { color: var(--accent); border-color: rgba(255, 74, 10, 0.45); }
.status-contacted { color: var(--info); border-color: rgba(91, 157, 255, 0.45); }
.status-qualified { color: var(--warn); border-color: rgba(232, 163, 23, 0.5); }
.status-won { color: var(--success); border-color: rgba(46, 189, 107, 0.45); }
.status-lost { color: var(--danger); border-color: rgba(229, 72, 77, 0.45); }
.status-select option { color: var(--text); background: var(--surface); }
.follow { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.follow-overdue > span:first-child { color: var(--danger); font-weight: 600; }
.follow-today > span:first-child { color: var(--warn); font-weight: 600; }
.amount-income { color: var(--success); }
.amount-refund { color: var(--danger); }
.td-actions { white-space: nowrap; }

@media (max-width: 760px) {
  .lead-table, .entry-table { min-width: 0; display: block; }
  .lead-table thead, .entry-table thead { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .lead-table tbody, .entry-table tbody { display: block; }
  .lead-table tr, .entry-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .lead-table tr:last-child, .entry-table tr:last-child { border-bottom: 0; }
  .lead-table td, .entry-table td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 4px 12px; border: 0; text-align: left; white-space: normal; }
  .lead-table td::before, .entry-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; padding-top: 2px; }
  .lead-table td:not([data-label]), .entry-table td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .lead-table td:not([data-label])::before, .entry-table td:not([data-label])::before { content: none; }
  .lead-table td.num, .entry-table td.num { text-align: left; }
  .td-actions { text-align: left; }
}

/* ---------- lead detail ---------- */
.contact-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.stepper { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.step { min-width: 0; position: relative; }
.step-btn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 6px 2px; border-radius: 10px; min-height: 64px; }
.step-btn:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
.step-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.step-dot { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border); background: var(--bg); font-size: 0.85rem; font-weight: 650; color: var(--muted); }
.step-label { font-size: 0.85rem; text-align: center; overflow-wrap: anywhere; }
.step.is-done .step-dot { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.step.is-current .step-dot { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.step.is-current .step-btn { color: var(--text); }
.step.is-current .step-label { font-weight: 650; }
.stepper-foot { margin: 0 0 12px; }
.lost-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.timeline { list-style: none; margin: 14px 0 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--border); }
.timeline-item { padding-bottom: 6px; }
.timeline-item .message-text { margin: 4px 0; }

/* ---------- tabs ---------- */
.tablist { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 16px; scrollbar-width: thin; }
.tab { flex: none; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; padding: 10px 14px; min-height: 44px; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab[aria-selected='true'] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab:focus-visible { outline-offset: -2px; }
.tabpanel { min-width: 0; }
.tabpanel .card .table-wrap { margin-bottom: 0; }

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: 1.1rem; }
  .step-btn { min-height: 60px; }
  .step-label { font-size: 0.78rem; }
  .biz-toolbar { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- revenue: honest banner ---------- */
.rv-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: 10px; border: 1px solid rgba(232, 163, 23, 0.4); background: var(--warn-soft); color: #f0d18a; }
.rv-banner .icon { margin-top: 3px; color: var(--warn); }
.rv-banner p { margin-top: 4px; color: #e2cfa0; font-size: 0.9rem; }