:root {
  /* Light theme (2026-08-09) - matches the ERP's brand palette
     (brand #b8860b / brand-dark #8a6508) so both tools feel like one system,
     per explicit request. Was a dark "TV command center" theme before this -
     if reverting, the old values are in git history / the pre-theme backup. */
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-strong: #f3f2ee;
  --border: rgba(184,134,11,0.28);
  --border-soft: rgba(184,134,11,0.18);
  --gold: #b8860b;
  --gold-light: #8a6508;
  --gold-dim: #9c7a1f;
  --text: #16130d;
  --text-dim: #6b6659;
  --text-faint: #9c9686;
  --green: #16a34a;
  --yellow: #b45309;
  --red: #dc2626;
  --blue: #2563eb;
  --radius: 16px;
  --radius-sm: 10px;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Lead Source categorical palette - darkened from the original dark-surface
     values for contrast on white; same hues/identity, not re-picked. */
  --src-whatsapp: #147a58;
  --src-website: #2563eb;
  --src-facebook: #6d3fc4;
  --src-instagram: #b23368;
  --src-99acres: #7c7211;
  --src-other: #b8451d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* 2026-08-10: was height:100vh + overflow:hidden (fixed single-screen
     layout, nothing below the fold ever reachable) - now that the rotator's
     content grows naturally instead of being clipped to a fixed box, the
     page can legitimately be taller than one screen, so it must be able to
     scroll. This IS the one and only scroll region now - .shell and every
     slide/list inside it are plain auto-height blocks, no nested overflow
     anywhere, so there is no scroll-trap and no "stuck" spot regardless of
     where the mouse happens to be. */
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(184,134,11,0.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Topbar ---------- */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-soft);
}
.brand-block { display: flex; align-items: baseline; gap: 12px; }
.brand-mark { font-family: var(--serif); font-weight: 400; letter-spacing: 0.3px; font-size: 1.28rem; }
.brand-mark .accent { color: var(--gold-light); }
.site-link {
  font-size: 0.76rem; color: var(--text-dim); border: 1px solid var(--border-soft);
  padding: 3px 9px; border-radius: 999px; transition: color 0.15s ease, border-color 0.15s ease;
}
.site-link:hover { color: var(--gold-light); border-color: var(--gold); }
.clock { color: var(--text-dim); font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.icon-btn {
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 8px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; cursor: pointer;
}
.staff-name-display { font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- Login gate (2026-08-10) ---------- */
.login-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: var(--bg, #f4f2ec);
}
.login-card {
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius, 12px);
  padding: 28px 24px; box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.login-brand { text-align: center; font-size: 1.5rem; margin-bottom: 2px; }
.login-sub { text-align: center; color: var(--text-dim); font-size: 0.85rem; margin: 0 0 8px; }
.login-card input.input, .login-card input {
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 0.9rem; outline: none;
}
.login-card button[type="submit"] {
  background: rgba(184,134,11,0.2); border: 1px solid var(--gold); color: var(--gold-light);
  padding: 9px; border-radius: 8px; font-size: 0.9rem; font-weight: 700; cursor: pointer; margin-top: 4px;
}
.login-error { color: var(--red); font-size: 0.8rem; min-height: 1em; text-align: center; }
.login-hint { font-size: 0.72rem; color: var(--text-faint, var(--text-dim)); text-align: center; margin: 6px 0 0; }
.pill-status {
  display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-soft); font-size: 0.78rem; color: var(--text-dim); white-space: nowrap;
}
.pill-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
.pill-status.ok .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.pill-status.bad .dot { background: var(--red); box-shadow: 0 0 6px var(--red); }

/* ---------- Shell (grows with its content; html/body is the ONE scroll
   region - see the html,body rule above for why) ---------- */
.shell { display: flex; flex-direction: column; padding: 14px 22px 16px; gap: 12px; }

/* ---------- Stat grid ---------- */
.stat-grid { flex: 0 0 auto; display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; }
.stat-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 14px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* WhatsApp-style "something changed" badge - top-right red circle with the
   +/-N delta since the last poll, cleared when the card is clicked (opened). */
.stat-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface);
  animation: stat-badge-pop 0.25s ease;
}
@keyframes stat-badge-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.stat-value { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 2.1rem; font-weight: 700; color: var(--gold-light); line-height: 1; }
.stat-label { font-size: 0.68rem; color: var(--text-dim); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.4px; text-align: center; }
.stat-card.hot { border-color: rgba(224,86,86,0.35); background: rgba(224,86,86,0.07); }
.stat-card.hot .stat-value { color: var(--red); }
.stat-card.warm { border-color: rgba(224,178,62,0.35); background: rgba(224,178,62,0.07); }
.stat-card.warm .stat-value { color: var(--yellow); }
.stat-card.cold { border-color: rgba(90,150,220,0.35); background: rgba(90,150,220,0.07); }
.stat-card.cold .stat-value { color: var(--blue); }
.stat-card.source-99acres { border-color: rgba(158,148,51,0.35); background: rgba(158,148,51,0.07); }
.stat-card.source-99acres .stat-value { color: var(--src-99acres); }

@media (max-width: 1500px) {
  .stat-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Second row: trend chart + top performer + email campaign ---------- */
.second-row { flex: 0 0 auto; display: grid; grid-template-columns: 1.7fr 1fr 1.4fr; gap: 12px; min-height: 148px; margin-bottom: 4px; }

.card {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; min-height: 0;
}
.card-title { font-family: var(--serif); font-size: 0.92rem; color: var(--text-dim); letter-spacing: 0.2px; margin-bottom: 8px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card-title-row .card-title { margin-bottom: 0; }
.card-title-sub { font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------- Trend chart: proper bars, gridlines, tooltip ---------- */
.trend-chart { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.trend-plot { flex: 1; display: flex; align-items: flex-end; gap: 10px; position: relative; padding-top: 6px; }
.trend-plot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: rgba(0,0,0,0.1);
}
.trend-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; cursor: default; }
.trend-bar {
  width: 60%; max-width: 34px; background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius: 5px 5px 2px 2px; min-height: 3px; position: relative;
}
.trend-bar-wrap:hover .trend-bar { filter: brightness(1.18); }
.trend-day-label { font-size: 0.68rem; color: var(--text-faint); margin-top: 6px; position: relative; z-index: 1; }
.trend-value-label { font-size: 0.68rem; color: var(--text-dim); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.trend-tooltip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
  background: #ffffff; border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px;
  font-size: 0.72rem; white-space: nowrap; color: var(--text); opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease; z-index: 5;
}
.trend-bar-wrap:hover .trend-tooltip { opacity: 1; }

/* ---------- Top performer banner ---------- */
.performer-panel { justify-content: center; }
.performer-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
.performer-name { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-light); }
.performer-count { font-size: 0.8rem; color: var(--text-dim); }
.performer-count b { color: var(--text); font-variant-numeric: tabular-nums; }
.performer-star { color: var(--gold); font-size: 1.1rem; }

/* ---------- Rotator: one large focused slide at a time ----------
   2026-08-10 fix: was position:absolute slides stacked via opacity inside a
   fixed-height box, which forced every slide's own content (the lead list,
   follow-up queue, etc.) into a SECOND, separate scroll region nested inside
   the outer page scroll - confusing (scrolling the page did nothing once the
   mouse was over that inner box, which was very easy to be, since it's most
   of the visible card). Switched to the same plain show/hide-in-normal-flow
   technique already proven on mobile: the active slide is sized by its own
   content like any other block on the page, and the ONE outer .shell scroll
   handles all of it - no nested scroll traps left anywhere. */
.rotator { flex: 1 1 auto; min-height: 340px; position: relative; }
.rotator .slide {
  position: static; opacity: 1; pointer-events: auto; min-height: 340px;
}
.rotator .slide:not(.active) { display: none; }
.rotator-dots {
  position: absolute; bottom: 10px; right: 16px; display: flex; gap: 6px; z-index: 2;
}
.rotator-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.15); transition: background 0.2s ease, transform 0.2s ease; cursor: pointer; }
.rotator-dots .dot:hover { transform: scale(1.4); background: rgba(184,134,11,0.5); }
.rotator-dots .dot.active { background: var(--gold); }

.score-filter { display: flex; gap: 6px; }
.filter-btn {
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-dim);
  border-radius: 8px; padding: 5px 12px; font-size: 0.78rem;
}
.filter-btn.active { background: rgba(184,134,11,0.2); color: var(--gold-light); border-color: var(--gold); }

/* ---------- Lead list ---------- */
.lead-list { display: flex; flex-direction: column; gap: 7px; }
.lead-row {
  display: grid; grid-template-columns: auto auto 1fr auto auto auto; align-items: center; gap: 12px;
  background: #f8f7f3; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px;
  padding: 10px 14px; transition: background 0.15s ease, transform 0.15s ease;
}
.lead-select-box { width: 15px; height: 15px; cursor: pointer; }
.lead-index { font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.bulk-delete-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 8px;
  background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.25); border-radius: 8px; font-size: 0.82rem;
}
.bulk-delete-bar button {
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
}
#bulkDeleteBtn { background: var(--red); color: #fff; border: 1px solid var(--red); }
#bulkDeleteClearBtn { background: none; border: 1px solid var(--border-soft); color: var(--text-dim); }
.lead-row:hover { background: rgba(184,134,11,0.08); transform: translateY(-1px); cursor: pointer; }
.lead-name { font-size: 0.94rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.lead-meta { font-size: 0.76rem; color: var(--text-dim); margin-top: 2px; }
.score-tag { padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
.score-tag.hot { background: rgba(224,86,86,0.15); color: var(--red); }
.score-tag.warm { background: rgba(224,178,62,0.15); color: var(--yellow); }
.score-tag.cold { background: rgba(90,150,220,0.15); color: var(--blue); }
.type-tag { padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.type-tag.property { background: rgba(184,134,11,0.16); color: var(--gold-light); }
.enquiry-message { font-size: 0.85rem; color: var(--text); background: #f7f6f2; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.lead-status-badge { font-size: 0.72rem; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: rgba(0,0,0,0.08); color: var(--text-dim); }
.lead-status-badge.status-visited { background: rgba(62,207,108,0.15); color: var(--green); }
.lead-status-badge.status-not_interested { background: rgba(224,86,86,0.15); color: var(--red); }
.lead-status-badge.status-booked { background: rgba(184,134,11,0.2); color: var(--gold-light); }
.lead-status-badge.status-followup_later { background: rgba(224,178,62,0.15); color: var(--yellow); }
.lead-notes-count { font-size: 0.75rem; color: var(--text-dim); min-width: 40px; text-align: right; }
.followup-date-badge { font-size: 0.7rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: rgba(184,134,11,0.12); color: var(--gold-light); }
.followup-date-badge.overdue { background: rgba(220,38,38,0.12); color: var(--red); font-weight: 700; }
.placeholder-note { font-size: 0.85rem; color: var(--text-dim); font-style: italic; padding: 12px 0; }

/* ---------- Properties: grid of cards with photo thumbnails ---------- */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-content: start;
}
.property-card {
  background: #f8f7f3; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease;
  display: flex; flex-direction: column;
}
.property-card:hover { transform: translateY(-2px); border-color: var(--border); }
.property-photo {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #e9e8e3;
  display: block;
}
.property-photo-placeholder {
  width: 100%; aspect-ratio: 16/10; background: linear-gradient(135deg, rgba(184,134,11,0.16), rgba(184,134,11,0.04));
  display: flex; align-items: center; justify-content: center; color: var(--gold-dim); font-size: 1.6rem;
}
.property-card-body { padding: 10px 12px; }
.property-name { font-size: 0.88rem; font-weight: 600; }
.property-meta { font-size: 0.74rem; color: var(--text-dim); margin-top: 3px; }
.property-status-tag { display: inline-block; margin-top: 6px; padding: 1px 7px; border-radius: 999px; font-size: 0.65rem; font-weight: 600; background: rgba(184,134,11,0.16); color: var(--gold-light); width: fit-content; }

/* ---------- Lead Source chart: horizontal bars, categorical palette ---------- */
.lead-source-chart { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 8px; }
.source-row { display: flex; align-items: center; gap: 14px; }
.source-row.clickable { cursor: pointer; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; transition: background 0.15s; }
.source-row.clickable:hover { background: rgba(0,0,0,0.06); }
.source-row.clickable.active { background: rgba(184,134,11,0.15); outline: 1px solid var(--gold); }
.source-label { width: 140px; flex: 0 0 auto; font-size: 0.92rem; display: flex; align-items: center; gap: 9px; }
.source-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.source-bar-track { flex: 1; height: 22px; background: #efeee8; border-radius: 6px; overflow: hidden; position: relative; }
.source-bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; }
.source-pct { width: 64px; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; }
.source-count { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }

/* ---------- Questions & Answers ---------- */
.questions-list { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.question-row {
  background: #f8f7f3; border: 1px solid rgba(0,0,0,0.08); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 16px;
}
.question-text { font-size: 0.86rem; color: var(--text-dim); }
.answer-text { font-size: 1.05rem; color: var(--gold-light); margin-top: 4px; font-weight: 600; }

/* ---------- Toast notifications (new lead/enquiry arrived) ---------- */
.toast-stack {
  position: fixed; top: 68px; right: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; background: #ffffff; border: 1px solid var(--gold); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 10px 14px; width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: toast-in 0.25s ease-out;
}
.toast-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gold-light); font-weight: 700; }
.toast-body { font-size: 0.82rem; color: var(--text); margin-top: 3px; }
.toast.leaving { animation: toast-out 0.25s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.leaving { animation: none; }
}
.toast-undo { border-color: var(--red); border-left-color: var(--red); }
.toast-undo .toast-title { color: var(--red); }
.toast-undo-btn {
  margin-top: 6px; background: rgba(220,38,38,0.12); border: 1px solid var(--red); color: var(--red);
  padding: 4px 12px; border-radius: 6px; font-size: 0.76rem; font-weight: 700; cursor: pointer;
}
.recently-deleted-btn {
  background: none; border: 1px solid var(--border-soft); color: var(--text-dim);
  padding: 5px 10px; border-radius: 8px; font-size: 0.72rem; cursor: pointer; margin-left: 8px;
}
.recently-deleted-btn:hover { border-color: var(--red); color: var(--red); }
.restore-btn {
  background: rgba(62,207,108,0.15); border: 1px solid var(--green); color: var(--green);
  padding: 5px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}

/* ---------- Modal (lead/property detail) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.hidden { display: none; }
#leadModalOverlay { z-index: 150; }
.modal-panel {
  background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; width: min(520px, 92vw); max-height: 86vh; overflow-y: auto; position: relative;
}
.modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-dim); font-size: 1.4rem; }
.modal-panel h3 { font-family: var(--serif); font-weight: 400; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.status-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.status-buttons button {
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 8px; padding: 7px 12px; font-size: 0.8rem;
}
.status-buttons button:hover { background: rgba(184,134,11,0.18); border-color: var(--gold); }
.status-current { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 14px; }
.notes-section { border-top: 1px solid rgba(0,0,0,0.1); padding-top: 12px; }
.notes-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.note-item { background: #f8f7f3; border-radius: 8px; padding: 8px 10px; }
.note-text { font-size: 0.85rem; }
.note-meta { font-size: 0.7rem; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-edit-btn, .note-delete-btn {
  background: none; border: none; font-size: 0.7rem; padding: 0; cursor: pointer; text-decoration: underline;
  color: var(--text-dim);
}
.note-edit-btn:hover { color: var(--gold-light); }
.note-delete-btn:hover { color: var(--red); }
.note-edit-textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 8px; padding: 8px; resize: none; outline: none; font-size: 0.85rem;
}
.note-save-btn, .note-cancel-btn {
  background: rgba(184,134,11,0.15); border: 1px solid var(--border-soft); color: var(--text);
  padding: 4px 10px; border-radius: 6px; font-size: 0.75rem;
}
.note-save-btn:hover { border-color: var(--gold); }
.add-note { display: flex; flex-direction: column; gap: 8px; }
.add-note textarea {
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 8px; padding: 8px; resize: none; outline: none; font-size: 0.85rem;
}
.add-note button {
  align-self: flex-end; background: rgba(184,134,11,0.2); border: 1px solid var(--gold); color: var(--gold-light);
  padding: 6px 16px; border-radius: 8px; font-size: 0.8rem;
}
.delete-record-row { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1); text-align: right; }
#deleteRecordBtn {
  background: none; border: 1px solid rgba(220,38,38,0.35); color: var(--red);
  padding: 6px 14px; border-radius: 8px; font-size: 0.78rem;
}
#deleteRecordBtn:hover { background: rgba(220,38,38,0.08); }
.property-link { color: var(--gold-light); font-size: 0.85rem; }
.property-link:hover { text-decoration: underline; }

/* ---------- Follow-up Queue ---------- */
.followup-queue-list { display: flex; flex-direction: column; gap: 7px; }
.followup-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #f8f7f3; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px;
  padding: 10px 14px;
}
.followup-row.overdue { border-color: rgba(224,86,86,0.3); background: rgba(224,86,86,0.05); }
.followup-name { font-size: 0.94rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.followup-timing { font-size: 0.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.followup-timing.overdue { color: var(--red); font-weight: 600; }

/* ---------- Site Visit Tracking ---------- */
.visit-lead-link { cursor: pointer; }
.visit-lead-link:hover { color: var(--gold-light); text-decoration: underline; }
.visit-status-select {
  font-size: 0.72rem; padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(0,0,0,0.08); color: var(--text-dim); border: 1px solid var(--border-soft); outline: none; cursor: pointer;
}
.visit-status-select.status-scheduled { background: rgba(224,178,62,0.15); color: var(--yellow); }
.visit-status-select.status-completed { background: rgba(62,207,108,0.15); color: var(--green); }
.visit-reschedule-row { display: flex; align-items: center; gap: 6px; }
.visit-reschedule-input {
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 8px; padding: 5px 8px; outline: none; font-size: 0.75rem;
}
.visit-reschedule-btn {
  background: rgba(184,134,11,0.2); border: 1px solid var(--gold); color: var(--gold-light);
  padding: 5px 12px; border-radius: 8px; font-size: 0.75rem; white-space: nowrap;
}
.visit-status-select.status-no_show { background: rgba(224,86,86,0.15); color: var(--red); }
.visit-status-select.status-cancelled { background: rgba(0,0,0,0.08); color: var(--text-faint); }
.visit-schedule-form { flex-direction: row !important; flex-wrap: wrap; align-items: center; }
.visit-schedule-form input {
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 8px; padding: 7px 10px; outline: none; font-size: 0.85rem;
}
.visit-schedule-form input[type="text"] { flex: 1 1 160px; }
.visit-schedule-form button {
  background: rgba(184,134,11,0.2); border: 1px solid var(--gold); color: var(--gold-light);
  padding: 6px 16px; border-radius: 8px; font-size: 0.8rem;
}

/* ---------- Lead Action Center: Whatsapp/Call/Assign/Task (2026-08-10) ----------
   Button label style deliberately matches the existing uppercase/letter-spaced
   label convention used elsewhere (.stat-label, .toast-title, .action-box-title)
   rather than inventing a new one - same treatment applied in the ERP too. */
.lead-quick-actions { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  padding: 7px 14px; border-radius: 8px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none;
}
.action-btn:hover { border-color: var(--gold); color: var(--gold-light); }
.action-btn.wa-btn { background: rgba(62,207,108,0.12); border-color: var(--green); color: var(--green); }
.action-btn.wa-btn:hover { background: rgba(62,207,108,0.22); }
.assign-task-row { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px; }
select.input, input.input {
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 8px; padding: 7px 10px; outline: none; font-size: 0.85rem;
}
#taskTitle { width: 100%; }
.assign-task-row select.input { flex: 1 1 140px; }
#assignStaffBtn, #createTaskBtn {
  background: rgba(184,134,11,0.2); border: 1px solid var(--gold); color: var(--gold-light);
  padding: 6px 16px; border-radius: 8px; font-size: 0.8rem;
}

/* ---------- My Tasks (Staff slide) - due-date buckets ---------- */
.my-tasks-toggle { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-dim); }
.task-bucket-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-dim); margin: 10px 0 4px; padding-top: 6px; border-top: 1px solid var(--border-soft);
}
.task-bucket-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.task-bucket-overdue { color: var(--red); }
.task-bucket-today { color: var(--gold-light); }

/* ---------- Lead Status donut chart (2026-08-10) ----------
   Always-visible card (NOT in the rotator - explicit request, easy to miss
   a slide buried in a 60s-per-slide carousel), same flex/scroll pattern as
   the other standalone cards above the rotator. */
.lead-status-card { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 210px; padding: 14px 16px; }
.donut-chart-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
.donut-chart-row { display: flex; align-items: center; gap: 24px; width: 100%; flex-wrap: wrap; justify-content: center; }
.donut-svg { width: 180px; height: 180px; flex: 0 0 auto; }
.donut-center-value { font-family: var(--sans); font-size: 20px; font-weight: 700; fill: var(--gold-light); font-variant-numeric: tabular-nums; }
.donut-center-label { font-size: 7px; fill: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.donut-legend-item {
  display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 4px 6px;
  border-radius: 8px; cursor: pointer; text-align: left; width: 100%;
}
.donut-legend-item:hover { background: rgba(184,134,11,0.1); }
.donut-legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.donut-legend-label { font-size: 0.82rem; color: var(--text); flex: 1 1 auto; }
.donut-legend-value { font-size: 0.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- My Notes (2026-08-10) - Google-Keep-style board, Owner-only,
   always-visible card (same pattern as Lead Status above). Same DB rows the
   ERP /notes page reads/writes - hidden by default via .hidden, revealed by
   dashboard.js only when currentStaffRole === 'OWNER'. */
.notes-card { flex: 0 0 auto; display: flex; flex-direction: column; padding: 14px 16px; gap: 10px; }
.notes-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notes-add-row .input { flex: 1 1 220px; }

/* ---------- IG/FB Reply Materials (2026-08-31) - reuses .notes-add-row/.input/
   .action-btn as-is; only the result list + help line are new here. ---------- */
.materials-card { flex: 0 0 auto; display: flex; flex-direction: column; padding: 14px 16px; gap: 10px; }
#matAddRow select.input { flex: 1 1 200px; }
#matAddRow input.input { flex: 1 1 180px; }
.materials-help { font-size: 0.72rem; color: var(--text-dim); line-height: 1.4; }
.materials-list { display: flex; flex-direction: column; gap: 6px; }
.material-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 12px;
}
.material-row.inactive { opacity: 0.5; }
.material-row-type {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-soft); color: var(--text-dim); flex-shrink: 0;
}
.material-row-type.media_id { border-color: var(--gold); color: var(--gold-light); }
.material-row-main { flex: 1 1 220px; min-width: 0; }
.material-row-value { font-size: 0.85rem; font-weight: 700; color: var(--text); word-break: break-word; }
.material-row-label { font-size: 0.75rem; color: var(--text-dim); }
.material-row-link { font-size: 0.72rem; color: var(--gold-light); word-break: break-all; text-decoration: none; }
.material-row-link:hover { text-decoration: underline; }
.material-row-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.material-row-actions button { background: none; border: 1px solid var(--border-soft); border-radius: 6px; color: var(--text-dim); font-size: 0.68rem; padding: 4px 9px; cursor: pointer; }
.material-row-actions button:hover { color: var(--gold-light); border-color: var(--gold); }
.notes-color-picker { display: flex; gap: 5px; }
.notes-color-swatch {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
}
.notes-color-swatch.active { border-color: var(--gold-light); }
/* #notesGrid itself is just a plain vertical stack now (Pinned section, then
   Others section, each with its own label) - the actual card grid lives in
   .notes-grid-inner, one per section. */
.notes-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); margin: 4px 0 8px; }
.notes-grid-inner {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px;
}
.note-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; border: 1px solid var(--border-soft);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.note-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.18); transform: translateY(-2px); }
.note-card-image-wrap { position: relative; }
.note-card-image { width: 100%; height: 110px; object-fit: cover; display: block; }
.note-card-image-remove {
  position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.55); color: #fff; border: none;
  border-radius: 999px; width: 20px; height: 20px; font-size: 0.65rem; cursor: pointer; line-height: 1;
}
.note-card-body { padding: 10px 12px; }
.note-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.note-card-title { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.note-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.note-card-actions button { background: none; border: none; color: var(--text-dim); font-size: 0.72rem; padding: 0; }
.note-card-actions button:hover { color: var(--gold-light); }
/* mynote- prefix (not note-item) - the pre-existing per-lead notes feature
   (in the lead detail modal) already owns .note-item/.note-text/.note-meta;
   reusing that name here silently broke the lead-notes list for everyone the
   moment this shipped (later CSS rule + later JS function decl both won the
   collision) - found live 2026-08-11 via a real user report. Always grep for
   an existing class/function name before reusing it in this file. */
.mynote-item-wrap { margin-bottom: 2px; }
.mynote-item { display: flex; align-items: flex-start; gap: 6px; font-size: 0.8rem; padding: 2px 0; }
.mynote-item input[type="checkbox"] { margin-top: 3px; }
.mynote-item-text { flex: 1 1 auto; color: var(--text); }
.mynote-item.checked .mynote-item-text { color: var(--text-dim); text-decoration: line-through; }
.mynote-item-due { background: none; border: none; color: var(--text-dim); font-size: 0.68rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.mynote-item-due.overdue { color: var(--red); font-weight: 700; }
.mynote-item-del { background: none; border: none; color: var(--text-dim); font-size: 0.7rem; cursor: pointer; opacity: 0; }
.mynote-item:hover .mynote-item-del { opacity: 1; }
.mynote-due-edit { display: flex; align-items: center; gap: 6px; margin: 4px 0 4px 20px; }
.mynote-due-edit.hidden { display: none; }
.mynote-due-edit input[type="datetime-local"] { font-size: 0.7rem; padding: 3px 6px; }
.mynote-due-clear { background: none; border: none; color: var(--text-dim); font-size: 0.68rem; cursor: pointer; }
.mynote-timer { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px 20px; font-size: 0.7rem; }
.mynote-timer-value { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.mynote-timer button { background: none; border: none; cursor: pointer; font-size: 0.68rem; padding: 0; }
.mynote-timer-start { color: var(--green); }
.mynote-timer-stop { color: var(--red); }
.mynote-timer-reset { color: var(--text-dim); }
.note-new-item-input {
  background: none; border: none; border-top: 1px dashed var(--border-soft); color: var(--text);
  font-size: 0.8rem; padding: 6px 0 0; margin-top: 6px; outline: none; width: 100%;
}
.note-new-item-input::placeholder { color: var(--text-dim); }
.note-card[data-color="yellow"] { background: rgba(184,134,11,0.10); }
.note-card[data-color="green"]  { background: rgba(62,207,108,0.10); }
.note-card[data-color="blue"]   { background: rgba(90,160,230,0.10); }
.note-card[data-color="pink"]   { background: rgba(230,110,160,0.10); }
.note-card[data-color="purple"] { background: rgba(150,110,230,0.10); }
.note-card[data-color="gray"]   { background: rgba(255,255,255,0.04); }
.notes-color-swatch[data-color="yellow"] { background: #b8860b; }
.notes-color-swatch[data-color="green"]  { background: #3ecf6c; }
.notes-color-swatch[data-color="blue"]   { background: #5aa0e6; }
.notes-color-swatch[data-color="pink"]   { background: #e66ea0; }
.notes-color-swatch[data-color="purple"] { background: #966ee6; }
.notes-color-swatch[data-color="gray"]   { background: #8a8a8a; }

/* ---------- Notes Topics (labels) + Sections (in-note sub-topics),
   2026-08-11 - modeled on the user's own Google Keep account (Labels
   sidebar + in-note checklist grouping like "Page pitch checklist"). Colors
   always auto-assigned server-side (owner_note_topics.color /
   owner_note_sections.color), never picked here. */
.notes-topic-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.notes-topic-chip.removable button {
  background: none; border: none; color: rgba(255,255,255,0.85); font-size: 0.6rem; cursor: pointer; padding: 0;
}
.notes-topic-chip.removable button:hover { color: #fff; }
.notes-topic-chip-name { color: #fff !important; font-size: 0.68rem; font-weight: 700; cursor: text; }
.notes-topic-chip-name:hover { text-decoration: underline; }
.notes-topic-rename-input {
  width: 80px; font-size: 0.68rem; padding: 0 4px; border: none; border-radius: 4px; outline: none;
  background: rgba(255,255,255,0.9); color: #222;
}
.note-topics-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; }
.note-card-description {
  width: 100%; resize: none; overflow: hidden; border: none; background: transparent;
  color: var(--text-dim); font-family: inherit; font-size: 0.78rem; line-height: 1.4;
  padding: 4px 0 8px; margin-bottom: 4px; border-bottom: 1px dashed var(--border);
}
.note-card-description:focus { color: var(--text); outline: none; }
.note-card-description::placeholder { color: var(--text-dim); opacity: 0.6; }
.notes-add-topic-btn, .notes-add-section-btn {
  background: none; border: 1px dashed var(--border-soft); color: var(--text-dim); font-size: 0.68rem;
  border-radius: 999px; padding: 2px 9px; cursor: pointer;
}
.notes-add-topic-btn:hover, .notes-add-section-btn:hover { border-color: var(--gold-light); color: var(--gold-light); }
.notes-add-section-btn { display: block; margin-top: 6px; border-radius: var(--radius-sm); }
.notes-topic-input, .notes-section-input {
  background: var(--surface-strong); border: 1px solid var(--border-soft); border-radius: 6px;
  color: var(--text); font-size: 0.7rem; padding: 2px 6px; outline: none;
}
.notes-section-input { width: 100%; margin-top: 6px; padding: 5px 8px; }
.notes-section-block {
  margin-top: 10px; padding-left: 8px; border-left: 3px solid var(--border-soft);
}
.notes-section-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.notes-section-block-head span { font-size: 0.76rem; font-weight: 700; }
.notes-section-block-head button {
  background: none; border: none; color: var(--text-dim); font-size: 0.65rem; cursor: pointer; opacity: 0;
}
.notes-section-block:hover .notes-section-block-head button { opacity: 1; }
.notes-section-new-item-input {
  background: none; border: none; color: var(--text); font-size: 0.75rem; outline: none; width: 100%;
  padding: 3px 0; margin-top: 2px;
}
.notes-section-new-item-input::placeholder { color: var(--text-dim); }

/* ---------- Daily Action Feed ("Aaj Ka Kaam") ---------- */
.daily-actions-card { margin-top: 14px; }
.daily-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.action-box {
  background: var(--surface-strong); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 12px; cursor: pointer; transition: border-color 0.2s ease;
}
.action-box:hover { border-color: var(--gold); }
.action-box-title { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.action-box-count { font-family: var(--sans); font-size: 1.7rem; font-weight: 700; color: var(--gold-light); line-height: 1.3; }
.action-box-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; min-height: 20px; }
.action-mini-row { display: flex; justify-content: space-between; gap: 6px; font-size: 0.72rem; }
.action-mini-primary { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-mini-secondary { color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
@media (max-width: 900px) {
  .daily-actions-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Control Center (Dashboard Intelligence) ---------- */
.intelligence-slide { display: flex; flex-direction: column; }
.intelligence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.intel-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.intel-subtitle {
  font-family: var(--serif); font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.3px;
  margin-top: 10px; text-transform: uppercase;
}
.intel-subtitle:first-child { margin-top: 0; }

.status-list { display: flex; flex-direction: column; gap: 6px; }
.status-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: #f8f7f3; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-sm);
}
.status-dot-sm { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-dim); }
.status-dot-sm.ok { background: #3ecf6a; box-shadow: 0 0 6px #3ecf6a; }
.status-dot-sm.bad { background: #d95926; box-shadow: 0 0 6px #d95926; }
.status-row-label { font-size: 0.82rem; flex: 1; }
.status-row-value { font-size: 0.78rem; font-weight: 600; }
.status-row-value.ok { color: #3ecf6a; }
.status-row-value.bad { color: #d95926; }

.data-source-list { display: flex; flex-direction: column; gap: 6px; }
.data-source-row {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
  background: rgba(184,134,11,0.05); border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.78rem;
}
.data-source-row span { color: var(--text-dim); font-size: 0.74rem; }

.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: flex; align-items: center; gap: 10px; }
.funnel-label { width: 78px; flex: 0 0 auto; font-size: 0.78rem; color: var(--text-dim); }
.funnel-track { flex: 1; height: 16px; background: #efeee8; border-radius: 6px; overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width 0.6s ease; }
.funnel-count { width: 32px; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.85rem; }

.error-list { display: flex; flex-direction: column; gap: 6px; }
.error-row {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
  background: rgba(217,89,38,0.08); border-left: 3px solid #d95926; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.78rem;
}
.error-row span { color: var(--text-dim); font-size: 0.72rem; }

@media (max-width: 900px) {
  .intelligence-grid { grid-template-columns: 1fr; }
}

/* ---------- Responsive: smaller/TV-portrait fallback ---------- */
@media (max-width: 1300px) {
  .second-row { grid-template-columns: 1fr; height: auto; }
  .trend-panel { height: 160px; }
  .performer-panel { height: 90px; }
}
@media (max-width: 1000px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Clickable stat cards (drill-down) ---------- */
.stat-card.clickable { cursor: pointer; }
.stat-card.clickable:hover { border-color: var(--gold); background: var(--surface-strong); }
.stat-card.hot.clickable:hover { border-color: var(--red); }
.stat-card.warm.clickable:hover { border-color: var(--yellow); }
.stat-card.cold.clickable:hover { border-color: var(--blue); }
.stat-card.source-99acres.clickable:hover { border-color: var(--src-99acres); }

/* ---------- Header "+ New Lead" button ---------- */
.new-lead-btn {
  /* Also carries the .icon-btn class (for the shared base look), which sets
     a fixed width:32px/justify-content:center meant for a single-glyph icon
     button - without overriding those here, "+ New Lead"'s text was clipped
     into that 32px box. Explicit width:auto + left-aligned content fixes it. */
  width: auto; justify-content: flex-start; gap: 4px;
  background: var(--gold); border: 1px solid var(--gold); color: #1a1a1a;
  border-radius: 8px; height: 32px; padding: 0 14px; display: inline-flex; align-items: center;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap; transition: background 0.15s ease;
}
.new-lead-btn:hover { background: var(--gold-light); }
.new-lead-btn { flex-shrink: 0; }

/* ---------------------------------------------------------------------
 * Mobile-first layout (<=768px). This dashboard was built as a fixed
 * single-viewport "TV command center" (html,body{height:100vh;
 * overflow:hidden}, rotator slides stacked via position:absolute+opacity
 * assuming a bounded-height parent) - correct for a wall display, but on a
 * phone that means content is either clipped or crushed into an
 * artificially fixed screen with no way to scroll to see the rest.
 * Colors/fonts are untouched here (already match bbgspacee.com's palette)
 * - this is purely a structural layout fix so the same content can breathe
 * on a small screen: the page scrolls normally, the stat grid becomes a
 * comfortable 2-column grid instead of 3 cramped columns, and the rotator
 * slides switch from absolute-stacked to normal document flow (each
 * showing at its own natural content height) since a scrolling page no
 * longer has the fixed viewport height the absolute-positioning trick
 * depended on. Desktop (>768px) is completely untouched - none of these
 * selectors exist in any narrower-only form above this point.
 * --------------------------------------------------------------------- */
@media (max-width: 768px) {
  html, body {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    overflow-x: hidden;
  }
  .shell { min-height: 0; padding: 12px 14px 20px; gap: 14px; }

  /* Stat cards: 2-column grid reads far more clearly on a phone than the
     desktop's 3+ columns - "one stat per card" stays true, numbers stay big. */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 16px 10px; }
  .stat-value { font-size: 1.85rem; }

  .second-row { grid-template-columns: 1fr; height: auto; gap: 10px; }
  .trend-panel { height: 170px; }
  .performer-panel { height: auto; padding: 16px; }

  /* Rotator: was position:absolute slides stacked via opacity inside a
     flex-fill-remaining-viewport-space parent - with the page now allowed
     to scroll, that parent has no bounded height to fill, which would
     collapse every slide to 0 height. Switched to plain show/hide in
     normal flow instead, so the active slide is simply sized by its own
     content like any other block on the page. */
  .rotator { position: relative; flex: 0 0 auto; min-height: 0; }
  .rotator .slide {
    position: static;
    opacity: 1;
    transition: none;
    min-height: 300px;
  }
  .rotator .slide:not(.active) { display: none; }
  .rotator-dots { position: absolute; bottom: 10px; right: 14px; }

  .intelligence-grid { gap: 16px; }
  .properties-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---------- Mobile topbar: wrap safety net + compact "+" New Lead button ---------- */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .topbar-actions { flex-wrap: wrap; gap: 8px; }
  .new-lead-btn { width: 32px; padding: 0; justify-content: center; }
  .new-lead-btn .btn-label { display: none; }
}

.mark-done-btn {
  background: var(--gold, #c5a059);
  color: #111;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
}
.mark-done-btn:hover { opacity: 0.85; }
.mark-done-btn:disabled { opacity: 0.5; cursor: default; }

.snooze-btn {
  background: transparent;
  color: var(--text-muted, #999);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 6px;
}
.snooze-btn:hover { opacity: 0.85; }
.snooze-btn:disabled { opacity: 0.5; cursor: default; }