/* Dashboard (Analytics page) CSS: the command center, the chart cards and the 11 Oct redesign.
   Split #4 of index.html: moved unchanged, linked at the exact spot it used to sit so the cascade order is
   the same. The theme ramps, the phone-only overrides and other rules that name dashboard classes stay in
   index.html, in the blocks they were written in. */
  /* ══ DASHBOARD — command center ══════════════════════════════════ */
  .dash-greeting { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
  .dash-greet-hi { font-family:var(--font-display); font-size:21px; font-weight:700; letter-spacing:-0.02em; color:var(--text); line-height:1.15; }
  .dash-greet-sub { font-size:13px; color:var(--text2); margin-top:3px; }
  /* Period buttons across from the greeting (dxRangeHtml), as in the approved mockup */
  .dx-range { display:flex; flex:none; gap:2px; padding:3px; border-radius:10px; background:none; }
  .dx-range button { font-family:inherit; font-size:12px; line-height:1; padding:6px 12px; border:0; border-radius:8px; background:none; color:var(--text2); cursor:pointer; white-space:nowrap; }
  .dx-range button:hover { color:var(--text); }
  .dx-range button.on { background:#fff; color:var(--text); font-weight:600; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.1); }
  .dx-range button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  [data-theme="dark"] .dx-range { background:none; }
  [data-theme="dark"] .dx-range button.on { background:rgba(255,255,255,.14); box-shadow:none; }
  @media (max-width:768px) {
    /* The global 44px tap floor (.main button) would make these tall slabs;
       36px is the floor chips and .btn get on a phone. */
    #dash-greeting .dx-range button { min-height:36px; font-size:13px; }
  }
  @media (max-width:560px) {
    /* The greeting stacks here, so the period goes full width under it. */
    #dash-greeting .dx-range { display:grid; grid-template-columns:repeat(4,1fr); align-self:stretch; }
    #dash-greeting .dx-range button { padding:0 4px; }
  }

  /* Hero metric strip */
  .dash-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:14px; }
  /* ── Dashboard cards: glass, not white boxes ──────────────────────────────
     The page is a WARM off-white (#faf9f6). These cards used to paint 70% pure
     white on top of it, which is both brighter and colder than their
     surroundings — measured at 15 points lighter — so they read as white boxes
     sitting on the page rather than panes set into it.
     The fill is now a faint cool grey: 4 points off the page tone and leaning
     blue rather than cream, which is how glass reads. Still translucent, so the
     page shows through; the edge and the shadow do the defining.
     Dropping the fill further was tried and does nothing — transparent over a
     light page is still light. The colour was the problem, not the alpha.
     No blur: the drawer has the app behind it to blur, these have a flat page.
     The accent colours inside the cards are untouched, by Reuven's call. */
  .dash-metric {
    background:rgba(238,241,246,0.72);
    border:1px solid rgba(120,140,180,0.28); border-radius:14px;
    padding:16px 18px;
    box-shadow:
      0 6px 18px rgba(20,50,140,0.10),
      0 1px 3px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -1px 0 rgba(80,130,210,0.14),
      inset 1px 0 0 rgba(255,255,255,0.28),
      inset -1px 0 0 rgba(80,130,210,0.08);
    position:relative; isolation:isolate;
    transition:transform .15s, box-shadow .15s, border-color .15s;
  }
  /* The gloss. Lighter than it was: at 0.35 this white wash put back most of
     the brightness the fill just gave up, which is the thing that made these
     read as white boxes. 0.18 is a sheen on glass, not a coat of paint.
     ::before on a card whose content is not positioned would paint over the
     number, so it is pinned behind with z-index and the card makes its own
     stacking context (isolation) to keep that local. */
  .dash-metric::before, .dash-card::before {
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 100%);
    z-index:-1;
  }
  .dash-metric:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(37,99,235,0.35); }
  .dash-metric-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; }
  .dash-metric-label { font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--text2); }
  .dash-metric-icon {
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent);
  }
  .dash-metric-icon i { width:17px; height:17px; }
  .dash-metric-value { font-size:27px; font-weight:800; letter-spacing:-0.02em; color:var(--text); line-height:1; }
  .dash-metric-sub { font-size:11px; color:var(--text3); margin-top:6px; }

  /* Ruby, 16 Sep 2026: half-height metric tiles on a phone.
     Six tiles at desktop proportions filled the entire first screen, so the
     pipeline underneath was never visible without scrolling. The numbers are
     the point, not the padding: the gap above the value drops from 13px to
     4px, the icon from 34px to 24px, and the value from 27px to 22px. Every
     tile keeps its label, its number and its sub-line - nothing is removed,
     it just stops taking a whole screen to say 486. Desktop is untouched. */
  @media (max-width: 768px) {
    .dash-metric { padding:9px 12px; border-radius:12px; }
    .dash-metric-head { margin-bottom:4px; gap:6px; }
    .dash-metric-label { font-size:10px; letter-spacing:0.03em; }
    .dash-metric-icon { width:24px; height:24px; border-radius:8px; }
    .dash-metric-icon i { width:13px; height:13px; }
    .dash-metric-value { font-size:22px; }
    .dash-metric-sub { font-size:10px; margin-top:2px; }
  }

  /* Reply-time rating pill */
  .dash-rating { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; }
  .dash-rating::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
  .dash-rating-great { color:#15803d; background:rgba(21,128,61,.12); }
  .dash-rating-good  { color:#4d7c0f; background:rgba(101,163,13,.15); }
  .dash-rating-fair  { color:#b45309; background:rgba(217,119,6,.15); }
  .dash-rating-poor  { color:#b91c1c; background:rgba(220,38,38,.12); }
  .dash-rating-none  { color:var(--text3); background:var(--bg3); }

  /* Card base (attention + quick actions) */
  .dash-card {
    background:rgba(238,241,246,0.72);
    border:1px solid rgba(120,140,180,0.28); border-radius:14px;
    padding:18px 20px;
    box-shadow:
      0 6px 18px rgba(20,50,140,0.10),
      0 1px 3px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -1px 0 rgba(80,130,210,0.14),
      inset 1px 0 0 rgba(255,255,255,0.28),
      inset -1px 0 0 rgba(80,130,210,0.08);
    position:relative; isolation:isolate;
  }
  .dash-card-head { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text); margin-bottom:14px; }
  .dash-card-head i { width:15px; height:15px; color:var(--accent); }

  /* Leasing funnel — flat blue bars + icon-chip header, matches the stat cards.
     Desktop-first (base); tightened for phones in the @media(max-width:560px) block. */
  .dash-funnel-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .dash-funnel-chip {                                   /* same chip as .dash-metric-icon */
    width:34px; height:34px; border-radius:8px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent);
  }
  .dash-funnel-chip i { width:17px; height:17px; }
  .dash-funnel-title { font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text2); line-height:1.15; }
  .dash-funnel-crumb { font-size:11px; color:var(--text3); margin-top:3px; }
  .dash-funnel-list { display:flex; flex-direction:column; gap:2px; }
  .dash-funnel-row {
    display:flex; align-items:center; gap:14px; width:100%; padding:9px 6px;
    border:none; background:transparent; border-radius:8px; cursor:pointer; font-family:inherit;
    transition:background .14s;
  }
  .dash-funnel-row:hover { background:var(--accent-soft); }
  .dash-funnel-label { width:86px; flex-shrink:0; text-align:left; font-size:13px; font-weight:500; color:var(--text2); }
  .dash-funnel-track { flex:1; height:8px; border-radius:4px; background:var(--bg3); }
  .dash-funnel-fill {
    display:block; height:100%; border-radius:4px; min-width:6px;
    background:var(--accent);
    transition:width .45s cubic-bezier(.4,0,.2,1);
  }
  .dash-funnel-n { width:48px; flex-shrink:0; text-align:right; font-size:21px; font-weight:700; letter-spacing:-0.01em; color:var(--text); }
  .dash-funnel-conv { width:46px; flex-shrink:0; text-align:right; font-size:12px; font-weight:500; color:var(--text3); }

  /* Showings pipeline — flat tiles with a solid colored top border (matches the funnel system).
     --c (set inline per tile) drives the top-border + number color. */
  .dash-stat-grid { display:flex; gap:6px; }
  .dash-stat-tile {
    flex:1; min-width:0; text-align:center;
    background:var(--bg); border:0.5px solid var(--border2);
    border-top:2.5px solid var(--c); border-radius:0 0 8px 8px;
    padding:12px 2px;
  }
  .dash-stat-n { font-size:24px; font-weight:500; line-height:1; color:var(--c); }
  .dash-stat-l { font-size:11px; font-weight:500; margin-top:6px; color:var(--text3); white-space:nowrap; }
  [data-theme="dark"] .dash-stat-tile { background:var(--bg2); }   /* elevate vs the dark card; border var(--border2) + --c top auto-adapt */

  /* Action zone grid — both cards share the taller card's height */
  .dash-action-grid { display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch; }

  /* Needs attention */
  .dash-attn-list { display:flex; flex-direction:column; gap:3px; }
  .dash-attn-row {
    display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px;
    cursor:pointer; transition:background .14s; text-align:left; width:100%;
    border:none; background:transparent; font-family:inherit;
  }
  .dash-attn-row:hover { background:var(--accent-soft); }
  .dash-attn-icon {
    width:30px; height:30px; border-radius:9px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--bg3); color:var(--text2);
  }
  .dash-attn-icon i { width:15px; height:15px; }
  .dash-attn-label { flex:1; min-width:0; font-size:13px; color:var(--text); font-weight:500; }
  .dash-attn-count {
    font-size:13px; font-weight:700; color:var(--text3); padding:1px 9px; border-radius:20px;
    background:var(--bg3); min-width:26px; text-align:center;
  }
  .dash-attn-row.has-items .dash-attn-count { color:#fff; background:var(--accent); }
  .dash-attn-row.has-items .dash-attn-icon { background:var(--accent-soft); color:var(--accent); }
  .dash-attn-chev { color:var(--text3); display:inline-flex; flex-shrink:0; }
  .dash-attn-chev i { width:15px; height:15px; }

  /* Quick actions */
  .dash-qa-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  .dash-qa {
    display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 12px;
    background:var(--bg2); border:1px solid var(--border2); border-radius:12px;
    cursor:pointer; font-family:inherit;
    transition:transform .14s, background .14s, border-color .14s, box-shadow .14s;
  }
  .dash-qa:hover { transform:translateY(-2px); background:var(--accent-soft); border-color:rgba(37,99,235,0.4); box-shadow:var(--shadow-sm); }
  .dash-qa-icon {
    width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent);
  }
  .dash-qa-icon i { width:19px; height:19px; }
  .dash-qa-label { font-size:12.5px; font-weight:600; color:var(--text); }

  /* Analytics section header (demotes charts below) */
  .dash-section-head { display:flex; align-items:center; gap:14px; margin-top:6px; }
  .dash-section-head > span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--text3); white-space:nowrap; }
  .dash-section-rule { flex:1; height:1px; background:var(--border2); }

  /* Analytics panels — secondary, flat (border only, no shadow) */
  .dash-panel { background:var(--bg); border:1px solid var(--border2); border-radius:14px; padding:18px; }
  .dash-panel-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; }
  /* ── Leads by Stage · Lead Payment Type ────────────────────────────────
     A fixed-height card where ONLY the ranked-row list scrolls. The header,
     the blended summary bar, the stat rail and the footnote are pinned, so
     both cards line up rail-to-rail however many rows either one carries.
     Declared after .dash-panel so the tighter inset wins on a tie. */
  .dch-card { height:405px; padding:22px 24px 20px; display:flex; flex-direction:column; min-height:0; }
  .dch-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
  .dch-title { font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--text); }
  .dch-sub { font-size:13px; color:var(--text2); letter-spacing:-.005em; margin-left:9px; }
  .dch-period { font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text2); white-space:nowrap; }

  .dch-blend { margin-top:20px; height:12px; border-radius:6px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--border2); background:var(--chart-track); }
  .dch-blend-fill { height:12px; border-radius:6px; transform-origin:left center; }

  .dch-rail { margin-top:14px; display:flex; align-items:stretch; }
  .dch-cell { flex:1; min-width:0; }
  .dch-cell + .dch-cell { border-left:1px solid var(--border2); padding-left:16px; margin-left:16px; }
  .dch-val { display:flex; align-items:center; gap:8px; }
  .dch-chip { width:12px; height:3px; flex:none; }
  .dch-count { font-size:17px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
  .dch-clabel { margin-top:4px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); line-height:1.3; overflow-wrap:break-word; }

  .dch-section { position:relative; flex:1; min-height:0; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
  .dch-section--titled { display:flex; flex-direction:column; }
  .dch-seclabel { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text2); flex:none; }
  .dch-scroller { height:100%; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:8px; margin-right:-8px; }
  .dch-scrollwrap { position:relative; flex:1; min-height:0; margin-top:12px; }
  .dch-fade { position:absolute; left:0; right:0; bottom:0; height:26px; pointer-events:none; background:var(--chart-fade); }

  .dch-row { display:grid; grid-template-columns:minmax(88px,132px) 1fr 34px 34px; gap:12px; align-items:center;
    padding:5px 6px; margin:0 -6px; border-radius:7px; transition:background .15s;
    background:none; border:0; font-family:inherit; text-align:left; cursor:pointer; flex:0 0 auto; }
  .dch-row:hover { background:var(--chart-rowhover); }
  .dch-label { font-size:13px; color:var(--text); letter-spacing:-.006em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dch-track { height:8px; border-radius:4px; background:var(--chart-track); overflow:hidden; }
  .dch-fill { display:block; height:8px; border-radius:4px; transform-origin:left center; }
  .dch-n { font-size:13.5px; font-weight:500; letter-spacing:-.006em; font-variant-numeric:tabular-nums; text-align:right; }
  .dch-pct { font-size:12px; color:var(--text2); letter-spacing:-.004em; font-variant-numeric:tabular-nums; text-align:right; }
  .dch-none { font-size:13px; color:var(--text2); padding:6px 2px; }

  .dch-foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex:none; }
  .dch-foot span { font-size:13px; color:var(--text2); letter-spacing:-.005em; text-wrap:pretty; }
  .dch-foot button { font-size:13px; font-weight:500; white-space:nowrap; letter-spacing:-.005em; color:var(--accent); background:none; border:0; padding:0; cursor:pointer; font-family:inherit; }
  .dch-foot button:hover { text-decoration:underline; }

  /* Grow-in is decoration only: the bar is already at its true width before the
     animation runs, so a card that never animates still reads correctly.

     IT RUNS ONCE, AND ONLY ON THE CARD'S FIRST DRAW. It used to sit on the
     elements themselves, and the bars are rebuilt from innerHTML — so every one
     of the three or four repaints a single dashboard refresh performs (the
     server tally lands, then the showings load, then the contacts list arrives)
     collapsed every bar back to zero width and grew it again. Four visible
     replays in about a second, which reads as the page breaking rather than as
     polish. Now the class is added for the first paint and taken off once the
     animation has finished, so a later repaint just shows the new number. */
  @keyframes dch-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  .dch-card.dch-anim .dch-blend-fill { animation:dch-grow .8s cubic-bezier(.32,.72,0,1) both; }
  .dch-card.dch-anim .dch-fill { animation:dch-grow .7s cubic-bezier(.32,.72,0,1) both; }
  @media (prefers-reduced-motion:reduce) { .dch-card.dch-anim .dch-blend-fill, .dch-card.dch-anim .dch-fill { animation:none; } }

  .dch-scroller::-webkit-scrollbar { width:8px; }
  .dch-scroller::-webkit-scrollbar-track { background:transparent; }
  .dch-scroller::-webkit-scrollbar-thumb { background:var(--border2); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
  /* Agent Performance — pin the header so it stays put (no bleed) while rows scroll. */
  .agent-perf-table thead th { position:sticky; top:0; z-index:2; background:var(--bg); box-shadow:0 1px 0 var(--border2); }
  .dash-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    min-height:150px; color:var(--text3); font-size:12px; text-align:center;
  }
  .dash-empty i { width:26px; height:26px; opacity:.55; }

  @media (max-width:1024px) {
    .dash-metrics { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
    .dash-action-grid { grid-template-columns:1fr; }
  }
  @media (max-width:560px) {
    .dash-qa-grid { grid-template-columns:repeat(2,1fr); }
    .dash-greeting { flex-direction:column; align-items:flex-start; }
    /* Funnel: same widget, tightened — smaller value, narrower label, less row padding */
    .dash-funnel-row { padding:7px 2px; gap:10px; }
    .dash-funnel-label { width:80px; }
    .dash-funnel-n { width:40px; font-size:17px; }
    .dash-funnel-conv { width:42px; }
    /* Showings tiles: same 5-up card, tighter so the full word still fits */
    .dash-stat-n { font-size:22px; }
    .dash-stat-l { font-size:10px; }
    /* My Tasks: same list, tightened rows for phones */
    .dw-task-row { padding:11px 0; gap:10px; }
    .dw-task-name { font-size:14.5px; }
  }

  /* Dark mode — elevated cards read lighter than the page.
     The glass above is a LIGHT-mode treatment: a 70% white fill on a dark page
     would be a white card with dark text rules written for a dark one. Dark
     mode keeps its own fill and gets the same idea in its own key — a faint
     light edge and a deeper shadow, so the cards lift the way the light ones
     now do without turning the page into a different theme. */
  [data-theme="dark"] .dashboard-tasks-widget,
  [data-theme="dark"] .dash-metric,
  [data-theme="dark"] .dash-card {
    background:var(--bg3); border-color:var(--border2);
    box-shadow:
      0 6px 18px rgba(0,0,0,0.28),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }
  /* The gloss is a white wash; on a dark card it reads as fog. */
  [data-theme="dark"] .dash-metric::before,
  [data-theme="dark"] .dash-card::before { background:none; }
  [data-theme="dark"] .dash-metric:hover { border-color:rgba(79,139,232,0.45); }
  [data-theme="dark"] .dash-attn-icon,
  [data-theme="dark"] .dash-attn-count { background:rgba(255,255,255,0.06); }
  [data-theme="dark"] .dash-qa { background:rgba(255,255,255,0.03); border-color:var(--border2); }
  [data-theme="dark"] .dash-qa:hover { background:var(--accent-soft); border-color:rgba(79,139,232,0.5); }
  [data-theme="dark"] .dash-panel { background:var(--bg); border-color:var(--border2); }
  [data-theme="dark"] .dash-funnel-track { background:rgba(255,255,255,0.08); }   /* card is var(--bg3) in dark, so tint the track instead */
  [data-theme="dark"] .dash-rating-great { color:#4ade80; background:rgba(74,222,128,.13); }
  [data-theme="dark"] .dash-rating-good  { color:#a3e635; background:rgba(163,230,53,.13); }
  [data-theme="dark"] .dash-rating-fair  { color:#fbbf24; background:rgba(251,191,36,.13); }
  [data-theme="dark"] .dash-rating-poor  { color:#f87171; background:rgba(248,113,113,.13); }
  [data-theme="dark"] .dash-rating-none  { color:var(--text3); background:rgba(255,255,255,.06); }

  /* ══ DASHBOARD REDESIGN (Ruby, 11 Oct 2026) ══════════════════════════════
     Built from the approved mockup. One hero card (Leases signed) carries the
     only animation on the page; every other card is a plain white card with
     the soft shadow the live tiles already had, and no blue tint. Numbers are
     shown once: the old six-card strip, the separate funnel card, What's
     pressing and My Tasks are folded into Showings / Hero + Needs you /
     Lead to lease. Quick actions and Reply time were removed on his call. */
  .dx-card {
    background:var(--bg); border:1px solid rgba(26,47,92,.08); border-radius:16px;
    box-shadow:0 6px 18px rgba(20,50,140,0.10), 0 1px 3px rgba(0,0,0,0.06);
    position:relative;
  }
  .dx-pad { padding:18px 20px; }
  .dx-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:12px; }
  .dx-title { font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--text); }
  .dx-sub { font-size:13px; color:var(--text2); margin-left:8px; font-weight:400; }
  .dx-period { font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text2); white-space:nowrap; }
  .dx-up { color:#15803d; font-weight:600; } .dx-down { color:#b91c1c; font-weight:600; }

  /* Ask Pace — live (12 Oct 2026). A question typed here, or a suggestion,
     opens the Pace chat and is asked there as a new chat. Nothing is answered
     on the dashboard itself: there is no room to talk here. */
  .dx-ask { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; border-radius:14px; margin:0; cursor:text; }
  .dx-ask:focus-within { border-color:var(--f-active-bd); }
  .dx-ask-ic { width:28px; height:28px; border-radius:8px; background:var(--f-av-bg); color:var(--f-av-fg); display:flex; align-items:center; justify-content:center; flex:none; }
  .dx-ask-ic i, .dx-ask-ic svg { width:15px; height:15px; }
  .dx-ask-q { flex:1; min-width:0; height:30px; padding:0; border:none; outline:none; background:none;
    font-family:inherit; font-size:13.5px; color:var(--text); text-overflow:ellipsis; }
  .dx-ask-q::placeholder { color:var(--text3); }
  .dx-ask-sug { display:flex; gap:6px; }
  .dx-ask-sug button { font-family:inherit; font-size:11.5px; color:var(--text2); background:var(--bg3); border:none; border-radius:20px;
    padding:4px 10px; white-space:nowrap; cursor:pointer; }
  .dx-ask-sug button:hover { color:var(--accent); background:var(--accent-soft); }
  .dx-ask-go { width:30px; height:30px; border-radius:50%; border:none; padding:0; flex:none; cursor:pointer;
    background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; }
  .dx-ask-go:hover { filter:brightness(1.06); }
  .dx-ask-go i, .dx-ask-go svg { width:15px; height:15px; }

  /* Clickable step tiles (Showings + Lead to lease). They grow on hover. */
  .dx-tiles { display:grid; grid-template-columns:repeat(5,1fr); margin:2px -20px 0; }
  .dx-tiles.dx-four { grid-template-columns:repeat(4,1fr); margin-right:0; }
  .dx-tile { position:relative; padding:12px 20px 14px; border:0; border-left:1px solid var(--border); background:none;
    text-align:left; font-family:inherit; color:inherit; cursor:pointer; border-radius:12px;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
  .dx-tile:first-child { border-left-color:transparent; }
  .dx-tile:hover, .dx-tile:focus-visible { transform:scale(1.06); background:var(--bg); z-index:2; outline:none;
    box-shadow:0 10px 28px rgba(20,50,140,.14), 0 2px 6px rgba(0,0,0,.06); border-left-color:transparent; }
  .dx-tile:hover + .dx-tile { border-left-color:transparent; }
  .dx-tl { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text2); }
  .dx-ic { width:24px; height:24px; border-radius:7px; background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; flex:none; }
  .dx-ic i { width:13px; height:13px; }
  .dx-go { margin-left:auto; font-size:11.5px; color:var(--accent); opacity:0; transition:opacity .15s; }
  .dx-tile:hover .dx-go { opacity:1; }
  .dx-tv { font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--text); margin:8px 0 2px; font-variant-numeric:tabular-nums; }
  .dx-td { font-size:11.5px; color:var(--text3); min-height:15px; }
  .dx-tc { display:inline-block; margin-top:8px; font-size:11px; border:1px solid var(--border2); border-radius:6px; padding:1px 7px; color:var(--text2); }
  @media (prefers-reduced-motion:reduce) { .dx-tile, .dx-tile:hover { transition:none; transform:none; } }

  /* Showings */
  .dx-shw { display:grid; grid-template-columns:1fr 300px; gap:22px; }
  .dx-stack { display:flex; height:8px; border-radius:5px; overflow:hidden; gap:2px; margin:12px 0 8px; background:var(--chart-track); }
  .dx-stack i { display:block; min-width:2px; }
  .dx-stackl { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color:var(--text2); align-items:center; }
  .dx-stackl i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
  .dx-stackl b { margin-left:auto; font-weight:600; color:var(--text); }
  .dx-nolog { margin-top:8px; font-size:12px; color:var(--text2); background:none; border:0; padding:0; font-family:inherit; cursor:pointer; text-align:left; }
  .dx-nolog:hover { color:var(--accent); }
  .dx-week { border-left:1px solid var(--border); padding-left:20px; display:flex; flex-direction:column; }
  .dx-wk-h { font-size:12.5px; font-weight:600; color:var(--text2); margin-bottom:8px; }
  .dx-wds { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; flex:1; }
  .dx-wd { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color:var(--text3);
    background:none; border:0; padding:0; font-family:inherit; cursor:pointer; }
  .dx-wd b { font-size:13px; color:var(--text); font-weight:600; }
  .dx-wb { flex:1; width:100%; min-height:70px; background:var(--chart-track); border-radius:7px; display:flex; align-items:flex-end; overflow:hidden; }
  .dx-wb i { display:block; width:100%; border-radius:7px; background:linear-gradient(180deg,#4fb4f5,#5b5bf0); }
  .dx-wd:hover .dx-wb i { filter:brightness(1.1); }
  .dx-wd.today span { color:var(--accent); font-weight:700; }
  .dx-wd.today .dx-wb { box-shadow:inset 0 0 0 1.5px var(--accent); }

  /* The phone-only Back button on Needs you stays hidden everywhere else (desktop showed it). */
  .dx-np-back { display:none; }
  /* Row 1: hero + Needs you */
  .dx-row1 { display:grid; grid-template-columns:1fr 1.55fr; gap:16px; }
  .dx-hero { padding:20px 22px; min-height:340px; overflow:hidden; }
  .dx-hero2 { display:none; }
  .dx-hl { position:relative; z-index:1; display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); }
  .dx-live { font-size:10.5px; font-weight:600; color:#15803d; background:#ecfdf3; border:1px solid #d1fadf; padding:2px 7px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; text-transform:none; letter-spacing:0; }
  .dx-live i, .dx-pace i { width:6px; height:6px; border-radius:50%; background:#22c55e; animation:dx-pulse 1.6s infinite; }
  @keyframes dx-pulse { 50% { opacity:.3; } }
  .dx-hv { position:relative; z-index:1; font-size:64px; font-weight:700; letter-spacing:-.03em; line-height:1; margin:14px 0 8px; color:var(--text); font-variant-numeric:tabular-nums; }
  .dx-hs { position:relative; z-index:1; font-size:13px; color:var(--text2); }
  .dx-hs + .dx-hs { margin-top:4px; color:var(--text3); }
  .dx-wave { position:absolute; left:0; bottom:0; width:100%; height:62%; display:block; pointer-events:none;
    /* fade the top edge so a crest never sits on top of the text above it */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%); mask-image:linear-gradient(180deg,transparent 0,#000 30%); }

  .dx-chips { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; }
  .dx-chip { font-size:12px; color:var(--text2); border:1px solid var(--border2); border-radius:20px; padding:3px 10px; background:var(--bg); font-family:inherit; cursor:pointer; }
  .dx-chip b { font-weight:600; color:var(--text); margin-left:4px; }
  .dx-chip.on { background:var(--text); color:var(--bg); border-color:var(--text); } .dx-chip.on b { color:var(--bg); }
  .dx-items { max-height:296px; overflow-y:auto; margin-right:-8px; padding-right:8px; }
  .dx-item { display:grid; grid-template-columns:36px 1fr auto; column-gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--border); cursor:pointer; }
  .dx-av { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--f-av-bg); color:var(--f-av-fg); flex:none; }
  .dx-av i { width:16px; height:16px; }
  .dx-who { font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:baseline; gap:8px; min-width:0; }
  .dx-who > span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dx-when { font-size:11px; font-weight:400; color:var(--text2); white-space:nowrap; }
  .dx-when.late { color:#b91c1c; }
  .dx-ctx { font-size:12px; color:var(--text3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dx-right { display:flex; gap:6px; align-self:end; }
  .dx-tg, .dx-act { display:flex; align-items:center; justify-content:center; width:84px; height:24px; box-sizing:border-box;
    font-family:inherit; font-size:11px; font-weight:600; border-radius:20px; white-space:nowrap; }
  .dx-tg { background:var(--bg3); color:var(--text2); }
  .dx-act { background:var(--bg); color:var(--text); border:1px solid var(--border2); cursor:pointer; }
  .dx-act:hover { background:var(--bg2); }
  .dx-pace { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text2); border-top:1px solid var(--border); padding-top:11px; }
  .dx-pace b { color:var(--text); }
  .dx-seeall { display:none; }
  .dx-done { display:flex; align-items:center; gap:8px; color:var(--text2); font-size:13px; padding:12px 2px; }
  .dx-done i { width:16px; height:16px; color:#22a06b; }

  /* Lead to lease funnel + totals */
  .dx-fun { width:100%; height:130px; display:block; }
  .dx-total { margin-top:8px; display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
  .dx-total b { color:#15803d; } .dx-total em { font-style:normal; font-size:11.5px; color:var(--text3); margin-left:6px; }

  /* Leads & tours chart */
  .dx-legend { display:flex; gap:16px; font-size:12px; color:var(--text2); }
  .dx-legend i { display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle; }
  .dx-area { width:100%; height:220px; display:block; }
  .dx-tip { position:absolute; pointer-events:none; background:var(--bg); border:1px solid var(--border2); box-shadow:0 8px 22px rgba(15,23,42,.10);
    border-radius:10px; padding:8px 11px; font-size:12px; color:var(--text); display:none; min-width:140px; z-index:3; }
  .dx-tip div { display:flex; justify-content:space-between; gap:14px; } .dx-tip .t { color:var(--text3); margin-bottom:4px; }

  /* Leads by stage / Lead payment type keep their own .dch-* insides; they just
     wear the new card. */
  .dch-card.dx-card { border-color:rgba(26,47,92,.08); }

  /* Agent performance */
  .dx-agsum { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:4px; }
  .dx-agsum div { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); font-weight:600; padding-left:12px; border-left:1px solid var(--border); }
  .dx-agsum div:first-child { padding-left:0; border-left:0; }
  .dx-agsum b { display:block; font-size:20px; color:var(--text); letter-spacing:0; margin-bottom:2px; text-transform:none; }
  .dx-agt { width:100%; min-width:620px; border-collapse:collapse; font-size:13px; }
  .dx-agt th { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); font-weight:600; text-align:right; padding:8px 10px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:1; }
  .dx-agt td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:right; color:var(--text); font-variant-numeric:tabular-nums; }
  .dx-agt th:first-child, .dx-agt td:first-child { text-align:left; }
  .dx-agt tr:last-child td { border-bottom:0; }
  .dx-ag { display:flex; align-items:center; gap:12px; font-weight:600; }
  .dx-bar { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; }
  .dx-bar span { width:70px; height:6px; border-radius:4px; background:var(--chart-track); overflow:hidden; }
  .dx-bar span i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#5b5bf0,#4fb4f5); }
  .dx-bar em { font-style:normal; font-size:11px; color:var(--text3); width:30px; text-align:right; }
  .dx-mut { color:var(--text3) !important; } .dx-pend { color:#b45309 !important; }

  [data-theme="dark"] .dx-card { background:var(--bg3); border-color:var(--border2); box-shadow:0 6px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06); }
  [data-theme="dark"] .dx-tile:hover { background:var(--bg3); box-shadow:0 10px 28px rgba(0,0,0,.45); }
  [data-theme="dark"] .dx-live { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25); color:#4ade80; }
  [data-theme="dark"] .dx-agt th { background:var(--bg3); }
  [data-theme="dark"] .dx-up { color:#4ade80; } [data-theme="dark"] .dx-total b { color:#4ade80; }
  /* the card is --bg3 in dark, so anything that was --bg3 on it would vanish */
  [data-theme="dark"] .dx-tg, [data-theme="dark"] .dx-ask-sug button { background:rgba(255,255,255,.07); }
  /* The app's global dark table rules paint rows --bg (!important); this table
     sits on a --bg3 card, so pin it to the card like the report paper does. */
  [data-theme="dark"] .dx-agt, [data-theme="dark"] .dx-agt tbody, [data-theme="dark"] .dx-agt tr,
  [data-theme="dark"] .dx-agt tbody td { background:transparent !important; }
  [data-theme="dark"] .dx-agt thead th { background:var(--bg3) !important; }
  [data-theme="dark"] .dx-card .dch-fade { background:linear-gradient(180deg,rgba(29,40,64,0),var(--bg3)); }

  @media (max-width:1024px) {
    .dx-shw { grid-template-columns:1fr; }
    .dx-week { border-left:0; padding-left:0; border-top:1px solid var(--border); padding-top:14px; }
    .dx-row1 { grid-template-columns:1fr; }
    .dx-hero { min-height:240px; }
  }
  @media (max-width:768px) {
    .dx-pad { padding:14px 14px; }
    .dx-ask-sug { display:none; }
    .main .dx-ask-go { width:30px; height:30px; min-height:0; }
    .main .dx-ask { padding:5px 5px 5px 12px; }
    .main .dx-ask-q { min-height:0; height:30px; }
    .dx-tiles, .dx-tiles.dx-four { grid-template-columns:repeat(2,1fr); margin:0 -14px; }
    .dx-tile { border-left:0; border-top:1px solid var(--border); padding:10px 14px 12px; }
    .dx-tile:hover { transform:none; box-shadow:none; }
    .dx-tv { font-size:24px; }
    .dx-fun-wrap { overflow:hidden; margin:6px -14px 0; width:calc(100% + 28px); }
    .dx-fun { display:block; height:72px; max-width:none; }
    .dx-hv { font-size:52px; }
    .dx-row1 { grid-template-columns:1fr 1fr; gap:12px; }
    .dx-row1 > #dash-pressing { grid-column:1 / -1; }
    .dx-hero { min-height:150px; padding:14px 14px; }
    .dx-hero2 { display:block; }
    .dx-hero .dx-hv { font-size:40px; margin:10px 0 6px; }
    .dx-hero .dx-hl { font-size:10px; flex-wrap:wrap; gap:4px 6px; }
    .dx-hero .dx-hs { font-size:12px; }
    .dx-hero #dx-hero-sub { display:none; }
    .dx-wave { height:30%; }
    .dx-sub { display:none; }
    .dx-ctx { max-width:56vw; }
    .dx-tg { display:none; }
    .dx-agsum { grid-template-columns:repeat(2,1fr); row-gap:10px; }
    .dx-agsum div:nth-child(3) { padding-left:0; border-left:0; }
    .dx-area { height:120px; }
    /* Agent performance on a phone: fits the card (no sideways cut-off), with the same 14px side inset */
    #dx-agents .dx-agt { min-width:0; table-layout:auto; }
    #dx-agents .dx-agt th:nth-child(5), #dx-agents .dx-agt td:nth-child(5) { display:none; }
    #dx-agents .dx-agt th span { display:none; }
    #dx-agents .dx-agt th, #dx-agents .dx-agt td { padding:8px 5px; }
    #dx-agents .dx-agt th:nth-child(n+2):nth-child(-n+4), #dx-agents .dx-agt td:nth-child(n+2):nth-child(-n+4) { width:1%; white-space:nowrap; padding-left:7px; padding-right:7px; }    #dx-agents .dx-agt th:first-child, #dx-agents .dx-agt td:first-child { padding-left:0; }
    #dx-agents .dx-agt th:last-child, #dx-agents .dx-agt td:last-child { padding-right:0; }
    #dx-agents .dx-ag { gap:6px; white-space:nowrap; }
    #dx-agents .dx-agt th:nth-child(n+2):nth-child(-n+4), #dx-agents .dx-agt td:nth-child(n+2):nth-child(-n+4) { text-align:center; }
    #dx-agents .dx-agt td:nth-child(4) .dx-bar { display:flex; justify-content:center; }
    #dx-agents .dx-av { display:none; }
    #dx-agents .dx-bar > span { display:none; }
    #dx-agents .dx-bar b { min-width:0 !important; }
    #dx-agents .dx-bar em { display:none; }
    /* One-line, shorter column names on a phone */
    #dx-agents .dx-agt th { white-space:nowrap; font-size:0; vertical-align:bottom; }
    #dx-agents .dx-agt th::before { font-size:10px; letter-spacing:.05em; }
    #dx-agents .dx-agt th:nth-child(1)::before { content:'Agent'; }
    #dx-agents .dx-agt th:nth-child(2)::before { content:'Listings'; }
    #dx-agents .dx-agt th:nth-child(3)::before { content:'Tours'; }
    #dx-agents .dx-agt th:nth-child(4)::before { content:'Leased'; }
    #dx-agents .dx-agt th:nth-child(6)::before { content:'Paid'; }
    #dx-agents .dx-agt { font-size:12.5px; }
    #dx-agents .dx-av { width:28px; height:28px; font-size:10.5px; }
    #dx-agents .dx-ag { gap:8px; }
    /* Needs you on a phone: one swipe row of filters, the top three people, See all for the rest */
    .dx-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -14px 4px; padding:0 14px; }
    .dx-chips::-webkit-scrollbar { display:none; }
    .dx-chip { flex:none; white-space:nowrap; }
    .dx-items { max-height:none; overflow:visible; margin-right:0; padding-right:0; }
    #dash-pressing:not(.dx-np) .dx-item:nth-child(n+4) { display:none; }
    .dx-item { padding:9px 0; column-gap:10px; }
    .main .dx-act { width:62px; height:28px; min-height:0; min-width:0; }
    .dx-seeall { display:flex; align-items:center; justify-content:center; width:100%; height:36px; margin-top:2px; border:0; border-top:1px solid var(--border); background:none;
      font-family:inherit; font-size:13px; font-weight:600; color:var(--accent); cursor:pointer; }
    /* Filters as plain text with thin dividers, like the Tasks strip */
    .dx-chips { gap:0; }
    .dx-chip { border:0; border-left:1px solid var(--border2); border-radius:0; background:none; padding:2px 12px; font-size:13px; color:var(--text2); }
    .dx-chip:first-child { border-left:0; padding-left:0; }
    .dx-chip.on { background:none; color:var(--text); font-weight:700; } .dx-chip.on b { color:var(--text); }
    .dx-np-back { display:none; }
    /* See all: the full list opens as its own page under the same header, with a Back button */
    #dash-pressing.dx-np { position:fixed; left:0; right:0; top:calc(46px + var(--safe-top)); bottom:0; z-index:900; margin:0; border-radius:0; border:0;
      overflow-y:auto; padding:10px 14px 110px; background:var(--bg2); }
    #dash-pressing.dx-np .dx-np-back { display:flex; align-items:center; gap:4px; height:36px; margin:0 0 4px -6px; border:0; background:none; font-family:inherit; font-size:14px; font-weight:600; color:var(--accent); cursor:pointer; }
    #dash-pressing.dx-np .dx-np-back svg { width:18px; height:18px; }
    #dash-pressing.dx-np .dx-seeall { display:none; }
    .dx-pace { font-size:12px; padding-top:9px; }
    /* Compact phone dashboard: tiles swipe sideways instead of stacking two-by-two */
    .dx-tiles, .dx-tiles.dx-four { display:flex; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin:0 -14px; padding:0 14px; gap:0; }
    .dx-tiles::-webkit-scrollbar { display:none; }
    .dx-tile { flex:0 0 122px; scroll-snap-align:start; border-top:0; border-left:1px solid var(--border); padding:6px 12px 8px; }
    .dx-tile:first-child { border-left-color:transparent; padding-left:0; }
    .dx-tiles, .dx-tiles.dx-four { scroll-padding-left:14px; padding-right:14px; margin-left:-14px !important; margin-right:-14px !important; width:calc(100% + 28px); max-width:none; box-sizing:border-box; }
    .dx-tl { white-space:nowrap; }
    .dx-go { display:none; }
    .dx-total { padding:8px 10px; font-size:12px; }
    #dx-showings .dx-week { padding-top:10px; }
    .dx-shw, .dx-shw > div { min-width:0; max-width:100%; }
    .dx-shw { grid-template-columns:minmax(0,1fr); }
    .dx-wds { min-width:0; }
    #page-analytics .analytics-grid { grid-template-columns:1fr 1fr !important; gap:10px !important; }
    #page-analytics .dch-card { height:auto !important; padding:12px 12px 10px !important; }
    #page-analytics .dch-card .dch-sub, #page-analytics .dch-card .dch-rail, #page-analytics .dch-card .dch-foot span { display:none; }
    #page-analytics .dch-card .dch-title { font-size:13px; }
    #page-analytics .dch-card .dch-period { display:none; }
    #page-analytics .dch-card .dch-scroller > *:nth-child(n+5) { display:none; }
    #page-analytics .dch-card .dch-scroller { max-height:none; overflow:visible; }
  }