/* cody-crm.css — Cody CRM app shell + screen layout.
   Tokens and components come from cody-design; this is only app-level layout. */

/* ---- Shell frame (mobile-first: bottom nav) ---- */
.crm-shell{min-height:100vh;background:var(--surface-2);}
.crm-main{width:100%;max-width:1100px;margin:0 auto;padding:var(--space-4);
  padding-bottom:calc(64px + var(--space-4) + env(safe-area-inset-bottom));}

/* ---- Nav: fixed bottom bar on phone (slate brand surface) ---- */
.crm-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:stretch;height:64px;
  background:var(--cody-slate);border-top:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-2);
  padding-bottom:env(safe-area-inset-bottom);}
.crm-brand{display:none;}                       /* logo lives in the sidebar (desktop only) */
.crm-logo-full{display:none;}
.crm-logo-mark{display:none;}
.crm-nav-items{display:flex;flex:1;align-items:stretch;}

.crm-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 4px;background:transparent;border:0;cursor:pointer;font:inherit;
  font-size:var(--text-xs);font-weight:var(--weight-medium);color:rgba(255,255,255,.72);text-decoration:none;}
.crm-nav-item svg{width:22px;height:22px;flex-shrink:0;}
.crm-nav-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.crm-nav-item:hover{color:#fff;text-decoration:none;}
.crm-nav-item.active{color:var(--cody-blue);}

/* ---- Profile (sits in the nav as the last item) ---- */
.crm-profile{position:relative;display:flex;flex:1;}
.crm-profile-btn{width:100%;}
.crm-profile-name{display:none;}                /* username shows on the sidebar only */
.crm-menu-backdrop{position:fixed;inset:0;z-index:55;}
.crm-profile-menu{position:fixed;left:var(--space-3);right:var(--space-3);bottom:calc(64px + var(--space-2));
  background:var(--surface);color:var(--on-surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-3);overflow:hidden;z-index:60;}
.crm-profile-menu a,.crm-profile-menu button{display:block;width:100%;text-align:left;padding:13px 16px;
  background:transparent;border:0;font:inherit;color:var(--on-surface);text-decoration:none;cursor:pointer;}
.crm-profile-menu a:hover,.crm-profile-menu button:hover{background:var(--surface-2);text-decoration:none;}

/* ---- Screen helpers ---- */
.crm-page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4);}
.crm-page-head h1{font-size:var(--text-2xl);margin:0;}
.crm-page-head-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;}
.crm-search{position:relative;margin-bottom:var(--space-4);}
.crm-search .cody-input{width:100%;padding-left:38px;}
.crm-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--on-surface-muted);}
.crm-cards{display:grid;gap:var(--space-3);grid-template-columns:1fr;}
.crm-customer-card{display:flex;flex-direction:column;gap:4px;cursor:pointer;text-decoration:none;color:var(--on-surface);}
.crm-customer-card .row1{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.crm-customer-card .name{font-weight:var(--weight-semibold);}
.crm-customer-card .meta{font-size:var(--text-sm);color:var(--on-surface-muted);}
/* Name sits in its own header, divided from the stats below so the card reads as title + data. */
.crm-customer-head{padding-bottom:var(--space-2);border-bottom:1px solid var(--border);}
.crm-customer-stages{display:flex;flex-wrap:wrap;gap:6px;}
.crm-stage-pill{font-size:var(--text-xs);font-weight:var(--weight-medium);padding:2px 8px;border-radius:999px;}
.crm-stage-pill--open{background:var(--surface-2,#eef1f4);color:var(--on-surface-muted,#667085);}
.crm-stage-pill--sent{background:var(--color-primary-bg,#e7f0ff);color:var(--color-primary,#2b6cb0);}
.crm-stage-pill--negotiating{background:var(--color-warn-bg,#fff8e6);color:var(--color-warn,#b7791f);}
.crm-customer-metrics{display:flex;flex-wrap:wrap;gap:var(--space-4);}
.crm-metric{display:flex;flex-direction:column;gap:1px;}
.crm-metric-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--on-surface-muted);}
.crm-metric-value{font-weight:var(--weight-regular);color:var(--on-surface);}
/* Home cockpit: larger metric tiles + a nav-style red count badge on the follow-ups header. */
.crm-home-tile{padding:var(--space-4);}
.crm-home-tile .crm-metric-label{font-size:var(--text-base);}
.crm-home-tile .crm-metric-value{font-size:var(--text-2xl);font-weight:var(--weight-semibold);}
.crm-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--color-danger,#e5484d);color:#fff;font-size:var(--text-xs);font-weight:var(--weight-semibold);}
.crm-customer-sellers{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:2px;}
.crm-type-badge{display:inline-block;font-size:var(--text-xs);font-weight:var(--weight-medium);
  padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--on-surface-muted);white-space:nowrap;}
.crm-type-labels{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2);}
.crm-type-choices{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}
.crm-type-choices label{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);}
.crm-empty{text-align:center;color:var(--on-surface-muted);padding:var(--space-8) var(--space-4);}

/* Customer detail */
.crm-back{display:inline-flex;align-items:center;gap:4px;margin-bottom:var(--space-3);
  color:var(--on-surface-muted);text-decoration:none;font-size:var(--text-sm);font-weight:var(--weight-medium);}
.crm-back:hover{color:var(--on-surface);text-decoration:none;}
.crm-back svg{width:18px;height:18px;}
.crm-detail-header{position:static;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-1);}
.crm-detail-header .top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.crm-detail-header .name{font-size:var(--text-xl);font-weight:var(--weight-semibold);}
.crm-detail-header .sub{font-size:var(--text-sm);color:var(--on-surface-muted);margin-top:2px;}
.crm-detail-header .contacts-line{display:flex;gap:16px;margin-top:10px;font-size:var(--text-sm);color:var(--on-surface-muted);flex-wrap:wrap;}
.crm-detail-title{display:flex;align-items:baseline;gap:10px 12px;flex-wrap:wrap;}
.crm-moment-tag{font-size:var(--text-sm);font-weight:var(--weight-medium);white-space:nowrap;}
.crm-detail-header .crm-type-labels{margin-top:10px;}
.crm-detail-facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 24px;align-items:start;margin-top:14px;font-size:var(--text-sm);}
.crm-detail-facts dt{color:var(--on-surface-muted);font-weight:var(--weight-medium);}
.crm-detail-facts dd{margin:0;color:var(--on-surface);line-height:1.4;}
/* Phone: a slim sticky name bar is the only sticky element; tapping it expands/collapses the full
   detail card (collapsed by default). The sticky bar never resizes, so there's no sticky-resize scroll
   feedback (the jitter). Hidden on desktop, where the full card is always shown with its name via .top. */
.crm-detail-phonebar{display:none;}
@media (max-width:899.98px){
  .crm-detail-phonebar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;cursor:pointer;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:var(--space-3);margin-bottom:var(--space-3);box-shadow:var(--shadow-1);}
  .crm-detail-phonebar .name{flex:1;min-width:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .crm-detail-phonebar .cody-btn{flex:none;}
  .crm-phonebar-chevron{flex:none;color:var(--on-surface-muted);transition:transform .2s ease;}
  .crm-phonebar-chevron.is-open{transform:rotate(180deg);}

  /* Expanded, the bar squares its bottom and drops its shadow/gap so it fuses with the card below
     into a single card. Tapping it toggles .is-expanded on both. */
  .crm-detail-phonebar.is-expanded{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;}

  /* The detail card animates open (height + fade) rather than snapping. Collapsed it has zero height,
     padding and top/bottom border so nothing shows; expanded it fuses under the bar (no top border,
     square top). max-height is a ceiling above real content so it never clips (larger while editing). */
  .crm-detail-header{overflow:hidden;max-height:0;opacity:0;
    padding-top:0;padding-bottom:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;box-shadow:none;
    border-top-left-radius:0;border-top-right-radius:0;
    transition:max-height .28s ease,opacity .2s ease,padding .28s ease;}
  .crm-detail-header.is-expanded{max-height:500px;opacity:1;
    padding-top:var(--space-4);padding-bottom:var(--space-4);margin-bottom:var(--space-4);
    border-bottom-width:1px;box-shadow:var(--shadow-1);}
  .crm-detail-header.is-editing{max-height:1400px;}   /* the edit form is much taller than the read view */
  .crm-detail-header .top{display:none;}              /* the phone bar shows the name/edit instead */
}
.crm-section-label{display:flex;align-items:center;justify-content:space-between;margin:0 2px var(--space-2);
  font-size:var(--text-base);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--weight-semibold);color:var(--on-surface-muted);}
.crm-section{margin-bottom:var(--space-6);}
.crm-stack-card{margin-bottom:var(--space-3);}
.crm-linked-card{display:block;text-decoration:none;color:var(--on-surface);}

/* Pipeline board */
.crm-pipeline-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);}
.crm-pipeline-totals{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-6);font-size:var(--text-base);color:var(--on-surface-muted);}
.crm-pipeline-totals strong{font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--on-surface);margin-left:6px;}
.crm-total-won strong{color: #3cb57d;}
.crm-total-lost strong{color: #f8565b;}
.crm-pipeline-filters{display:flex;gap:8px;flex-wrap:wrap;}
.crm-pipeline-filters .cody-input{font-size:var(--text-sm);max-width:170px;}

/* Five equal columns that fill the width exactly (minmax 0, not 180px) so they never force
   side-scrolling; cards are then as wide as the no-scroll layout allows. */
.crm-pipeline-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);align-items:start;overflow-x:clip;}
/* Rounded corners; a straight inset top bar (pill ends, stopping short of the corners) keeps the
   header accent without a border-top curving around the rounded corners. */
.crm-col{position:relative;background:var(--surface-2);border-radius:var(--radius-lg);padding:14px 10px 12px;}
.crm-col::before{content:"";position:absolute;top:8px;left:12px;right:12px;height:3px;border-radius:var(--radius-pill);background:var(--col-accent,var(--border));opacity:.8;}
/* Label over subtotal (not side-by-side) so a long stage name like "Negotiating" never wraps and
   every column head stays the same height. */
.crm-col-head{display:flex;flex-direction:column;gap:2px;padding:2px 4px 10px;}
.crm-col-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--on-surface-muted);white-space:nowrap;}
.crm-col-sum{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--on-surface);}
.crm-col-empty{padding:4px;margin:0;}

/* One field per line (customer / lead / sum / offer+weight / seller) so nothing shares a line
   and wraps mid-value. */
.crm-deal-card{margin-bottom:10px;padding:12px;display:flex;flex-direction:column;gap:3px;border-radius:var(--radius-lg);}
.crm-deal-card:last-child{margin-bottom:0;}
.crm-deal-customer{font-weight:var(--weight-semibold);}
.crm-deal-lead{font-size:var(--text-sm);color:var(--on-surface-muted);}
.crm-deal-value{font-size:var(--text-base);font-weight:var(--weight-medium);white-space:nowrap;}
.crm-deal-offer{font-size:var(--text-sm);color:var(--on-surface-muted);white-space:nowrap;}
.crm-deal-seller{font-size:var(--text-sm);color:var(--on-surface-muted);}

/* One definition per stage colour, shared by the board column (.crm-col--*) and a rollup's status
   chips (.crm-stage--*) — see PipelineView.StageKey. A stage must never be one colour on the board
   and another on a card, which a second set of hex values would guarantee. */
/* The won green and lost red, named once. A delta marker pointing the good way has to be the same
   green as the Won column, or the two start telling slightly different stories. */
:root{--outcome-up:#3cb57d;--outcome-down:#f8565b;}
.crm-col--open,.crm-stage--open{--col-accent:#94A3B8;}
.crm-col--sent,.crm-stage--sent{--col-accent:var(--cody-blue);}
.crm-col--negotiating,.crm-stage--negotiating{--col-accent:#fadb74;}
.crm-col--won,.crm-stage--won{--col-accent:var(--outcome-up);}
.crm-col--lost,.crm-stage--lost{--col-accent:var(--outcome-down);}

/* Direction marker after an amount: quoted above the estimate points up in the Won green, below
   points down in the Lost red. Sized well under the figure it annotates — it qualifies the number,
   it is not a second number. */
.crm-delta{font-size:.7em;line-height:1;margin-left:4px;vertical-align:middle;}
.crm-delta--up{color:var(--outcome-up);}
.crm-delta--down{color:var(--outcome-down);}

/* Parent-lead card: the derived sum is the hero, the root's own estimate sits beside it so the miss
   is visible without opening anything. Chips carry the mix — precise, no legend, one line up to five. */
/* Fixed-width tracks, not flex: with flex the second column starts wherever the first one happens to
   end, so the estimate slides left and right from card to card as the sums differ. A track wide
   enough for "10 000 000 NOK" at --text-xl keeps every card's columns on the same two positions. */
.crm-rollup-figures{--rollup-figure-width:11.5rem;
  display:grid;grid-template-columns:repeat(2,var(--rollup-figure-width));gap:var(--space-6);}
.crm-rollup-figure{display:flex;flex-direction:column;gap:2px;min-width:0;}
/* Amounts never wrap inside their track — a wrapped figure would change the card's height and break
   the alignment the fixed tracks exist to hold. */
.crm-rollup-sum,.crm-rollup-estimate{white-space:nowrap;}
/* Phone: two 11.5rem tracks plus the gap no longer fit, so stack them. */
@media (max-width: 560px){
  .crm-rollup-figures{grid-template-columns:1fr;gap:var(--space-3);}
}
.crm-rollup-figure-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--on-surface-muted);}
.crm-rollup-sum{font-size:var(--text-xl);font-weight:var(--weight-semibold);}
.crm-rollup-estimate{font-size:var(--text-xl);font-weight:var(--weight-regular);color:var(--on-surface-muted);}
.crm-stage-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;}
.crm-stage-chip{font-size:var(--text-xs);font-weight:var(--weight-medium);padding:2px 8px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--col-accent) 20%,transparent);color:var(--on-surface);
  border:1px solid color-mix(in srgb,var(--col-accent) 45%,transparent);white-space:nowrap;}

/* Sub-lead rows, rendered only inside their parent's expanded panel. Denser than a compact card:
   they are a list of packages, not five cards competing with the parent for attention. */
.crm-sub-leads{display:flex;flex-direction:column;gap:var(--space-2);}
.crm-sub-lead{padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;
  border-left:3px solid transparent;transition:background .15s ease,border-color .15s ease,transform .15s ease;}
/* A row inside a panel needs more than a border tint to read as clickable — the tinted ground, the
   left marker and the nudge together make it unmistakable that the row opens something. */
.crm-sub-lead:hover,.crm-sub-lead:focus-visible{
  border-color:var(--cody-blue);border-left-color:var(--cody-blue);
  background:color-mix(in srgb,var(--cody-blue) 8%,var(--surface));
  transform:translateX(2px);}
.crm-sub-lead:hover .crm-sub-lead-title{color:var(--primary-text);}
.crm-sub-lead-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.crm-sub-lead-title{font-weight:var(--weight-medium);}
.crm-sub-lead-figures{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.crm-sub-lead-sum{font-weight:var(--weight-medium);white-space:nowrap;}

/* Back to the parent: its own row at the very top of a sub-lead's panel, since that is the one
   navigation a sub-lead always needs and reading order should offer it first. */
.crm-sub-lead-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--space-2);
  padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--on-surface);cursor:pointer;
  font-size:var(--text-sm);font-weight:var(--weight-medium);max-width:100%;}
.crm-sub-lead-back:hover{border-color:var(--cody-blue);color:var(--primary-text);
  background:color-mix(in srgb,var(--cody-blue) 10%,var(--surface-2));}
.crm-sub-lead-back-arrow{font-size:var(--text-base);line-height:1;}
.crm-sub-lead-back-title{color:var(--on-surface-muted);font-weight:var(--weight-regular);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

/* Section label with an explainer beside it. The bubble opens on hover and on focus, so it is
   reachable by keyboard and by tap (the marker is focusable) rather than hover-only. */
.crm-panel-label-row{display:flex;align-items:center;gap:6px;}
.crm-info{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;border:1px solid var(--border);
  font-size:11px;font-weight:var(--weight-semibold);font-style:italic;
  color:var(--on-surface-muted);cursor:help;flex-shrink:0;}
.crm-info:hover,.crm-info:focus-visible{border-color:var(--cody-blue);color:var(--primary-text);outline:none;}
.crm-info-bubble{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:min(320px,70vw);
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);color:var(--on-surface);box-shadow:0 8px 24px rgba(0,0,0,.18);
  font-size:var(--text-sm);font-weight:var(--weight-regular);font-style:normal;line-height:1.45;
  text-align:left;opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;}
.crm-info:hover .crm-info-bubble,.crm-info:focus-visible .crm-info-bubble{opacity:1;visibility:visible;}

/* Board card: the engagement a sub-lead belongs to, above its own title. */
.crm-deal-parent{font-size:var(--text-sm);color:var(--on-surface-muted);}

/* The one definition of the sub-lead arrow, shared by the pipeline card and the search dropdown.
   --primary-text, not --cody-blue: the raw brand cyan is near-invisible on a light surface, and this
   token is the readable Cody blue in both themes.
   Colour alone was not enough to notice — the glyph is thin at --text-sm and sits beside muted text —
   so it also steps up a size and to bold. No chip background: tried, and it read as too loud for a
   marker that appears on every sub-lead row. */
.crm-parent-arrow{color:var(--primary-text);font-weight:var(--weight-bold);
  font-size:var(--text-base);line-height:1;margin-right:2px;}

/* Five columns only fit past the sidebar (240px) on wide screens; below that,
   stack into full-width colour bands (tablet + laptop-normal use this "phone" view). */
@media (max-width: 1300px){
  .crm-pipeline-board{grid-template-columns:1fr;overflow-x:visible;}
}

/* Phone: stack the header into three total rows above the filters, and put both
   filters side-by-side on one row (half-width each) so they never wrap to two rows. */
@media (max-width: 720px){
  /* Header stacks: title on top, then the sync caption on its own line and the two buttons side-by-side. */
  .crm-page-head{flex-direction:column;align-items:stretch;}
  .crm-page-head-actions .meta{flex-basis:100%;}
  .crm-page-head-actions .cody-btn{flex:1;white-space:nowrap;}
  .crm-pipeline-bar{flex-direction:column;align-items:stretch;gap:var(--space-3);}
  .crm-pipeline-totals{flex-direction:column;align-items:flex-start;gap:2px;}
  /* Three filters wrap two-per-row (half width) instead of cramming onto one line where
     "My customers" truncates. */
  .crm-pipeline-filters{width:100%;flex-wrap:wrap;}
  .crm-pipeline-filters .cody-input{flex:1 1 45%;max-width:none;min-width:0;}
}
.crm-contact-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);}
.crm-contact-row:last-child{border-bottom:0;}
.crm-star{color:var(--primary-text);}
/* Interactive email/phone/website — blends into muted metadata, reveals as a link on hover */
.crm-contact-link{color:inherit;text-decoration:none;}
.crm-contact-link:hover{color:var(--primary-text);text-decoration:underline;}
.crm-note-block{margin-top:6px;padding:6px 10px;background:var(--surface-2);border-left:3px solid var(--cody-blue);font-size:var(--text-sm);color:var(--on-surface-muted);}
.crm-cols{display:grid;gap:var(--space-4);grid-template-columns:1fr;}

/* Lead status chip — amber for Negotiating (app-level; design system unchanged) */
.crm-badge--warn{background:color-mix(in srgb,#E8A13C 20%,transparent);color:#8A5A12;border-color:transparent;}
/* Pastel amber callout for soft warnings (similar name / already-a-customer / org-number conflict / insolvency). */
.crm-warn{background:var(--color-warn-bg,#fff8e6);border:1px solid color-mix(in srgb,var(--color-warn,#e0a912) 35%,transparent);
  color:var(--on-surface);border-radius:var(--radius);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);}
.crm-warn a{color:var(--color-warn,#b7791f);font-weight:var(--weight-semibold);}
/* Reminder types read at a glance: Follow-up = amber (warn), Call back = violet. */
.crm-badge--callback{background:color-mix(in srgb,#7C5CFC 18%,transparent);color:#4B2FAE;border-color:transparent;}
/* Follow-up urgency escalates by heat: amber (routine/stalled) → orange (offer expiring soon)
   → red (expired). Orange keeps expiring distinct from the amber crowd without stealing red. */
.crm-badge--expiring{background:color-mix(in srgb,#F0632B 22%,transparent);color:#9A3412;border-color:transparent;}
/* Expired = the terminal state: a solid vivid-red fill (not a pale tint like the others) so it
   jumps out of the list. Black text stays legible on this red and reads bolder than white. */
.crm-badge--expired{background:#CE2A38;color:#000;border-color:transparent;}
.crm-badge--stalled{background:color-mix(in srgb,#5B7C99 22%,transparent);color:#38566E;border-color:transparent;}
.crm-badge--muted{background:var(--surface-2);color:var(--on-surface-muted);border-color:transparent;}
.crm-reminder.crm-reminder--callback{border-left-color:#7C5CFC;background:color-mix(in srgb,#7C5CFC 8%,var(--surface));}
.crm-reminder.crm-reminder--callback .crm-reminder-tag{color:#4B2FAE;}

/* Avatars */
.crm-avatar{border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;}
.crm-avatar--initials{color:#fff;font-weight:var(--weight-semibold);line-height:1;text-transform:uppercase;}

/* Pipeline: one tidy row per offer (chip + its own actions) */
.crm-lead{border-top:1px solid var(--border);padding-top:var(--space-3);margin-top:var(--space-3);}
.crm-lead:first-of-type{border-top:0;padding-top:0;margin-top:0;}
.crm-lead-title{font-weight:var(--weight-semibold);margin-bottom:var(--space-2);}
.crm-offer-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border);}
.crm-offer-row:last-of-type{border-bottom:0;}
.crm-offer-actions{display:flex;gap:6px;flex-wrap:wrap;}
.crm-offer-row .cody-badge{padding:5px var(--space-3);font-size:var(--text-base);}
.crm-offer-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--space-2);width:100%;}
.crm-offer-add .cody-field{flex:1 1 8rem;}
.crm-offer-add .cody-field .cody-input{width:100%;}
.crm-offer-add .crm-of-sum{flex:2 1 10rem;}
.crm-offer-add .crm-of-weight{flex:0 1 6rem;}
.crm-note{background:var(--surface-2);border-radius:var(--radius-sm);padding:4.5px 10px;margin-top:8px;font-size:var(--text-base);color:var(--on-surface);}
.crm-note-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--text-sm);color:var(--on-surface-muted);margin-bottom:2px;}
/* Follow-up card (shared by the Follow-ups page and the Home cockpit via FollowUpCard.razor).
   The customer is the anchor, not the reminder: the team works per customer and prioritises
   certain ones, so scanning the feed must answer "which customer" before "which item".
   min-width:0 on the main column is what lets the customer name ellipsis inside a flex row. */
.crm-followup-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.crm-followup-main{flex:1;min-width:0;cursor:pointer;}
.crm-followup-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.crm-followup-customer{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--on-surface);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crm-followup-head .cody-badge{flex-shrink:0;}
.crm-followup-lead{font-size:var(--text-base);color:var(--on-surface);margin-top:1px;}
.crm-followup-note{font-size:var(--text-sm);color:var(--on-surface);margin-top:4px;}
.crm-followup-actions{position:relative;}
.crm-note-toggle{background:transparent;border:0;color:var(--on-surface-muted);cursor:pointer;padding:2px;display:inline-flex;border-radius:var(--radius-sm);flex-shrink:0;}
.crm-note-toggle:hover{background:var(--surface);color:var(--on-surface);}
/* Reminder actions open as an overlay so opening them doesn't resize the row (no ⋯ jump). */
.crm-reminder-actions{position:absolute;top:100%;right:0;margin-top:4px;display:flex;gap:6px;z-index:10;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:4px;box-shadow:var(--shadow-2);}

/* ---- Desktop (>=900px): left sidebar; detail goes two-column ---- */
@media (min-width:900px){
  .crm-shell{display:flex;}
  .crm-nav{position:sticky;top:0;bottom:auto;height:100vh;width:240px;flex-shrink:0;flex-direction:column;
    align-items:stretch;gap:var(--space-1);padding:var(--space-4) var(--space-3);
    background:var(--cody-slate);border-top:0;border-right:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-2);}
  .crm-brand{display:flex;align-items:center;height:auto;padding:0 12px;margin:var(--space-2) 0 var(--space-6);}
  .crm-logo-full{height:52px;display:block;}
  .crm-logo-mark{display:none;}
  .crm-nav-items{flex-direction:column;flex:1;gap:4px;}

  .crm-nav-item{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:var(--space-3);
    padding:10px 12px;border-radius:var(--radius);font-size:var(--text-base);}
  .crm-nav-item svg{width:20px;height:20px;}
  .crm-nav-item.active{                          /* contrast white raised pill = "you are here" */
    background:#fff;color:var(--cody-blue-strong);box-shadow:var(--shadow-2);}

  .crm-profile{flex:0 0 auto;margin-top:auto;}   /* pin profile to the bottom of the sidebar */
  .crm-profile-btn{justify-content:flex-start;}
  .crm-profile-label{display:none;}              /* sidebar shows the real username instead */
  .crm-profile-name{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .crm-profile-menu{position:absolute;left:0;right:0;top:auto;bottom:calc(100% + 6px);}

  .crm-main{flex:1;min-width:0;padding:var(--space-6);}
  .crm-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
  .crm-cols{grid-template-columns:1fr 1fr;align-items:start;}
}

/* Scoped under .crm-nav-item to beat the generic `.crm-nav-item span{overflow:hidden}`
   rule, so the badge can poke past the bell's corner and show 2-digit counts. */
.crm-nav-item .crm-nav-icon{position:relative;display:inline-flex;overflow:visible;}
.crm-nav-item .crm-nav-badge{overflow:visible;max-width:none;}
.crm-nav-badge{
  position:absolute;
  top:-6px;
  right:-8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:var(--color-danger,#e5484d);
  color:#fff;
  font-size:11px;
  font-weight:600;
}

/* Reminders — deliberately distinct from notes: amber accent + tag. */
.crm-reminders{display:flex;flex-direction:column;gap:6px;margin:6px 0;}
.crm-reminder{
  border-left:3px solid var(--color-warn,#e0a912);
  background:var(--color-warn-bg,#fff8e6);
  border-radius:6px;
  padding:6px 10px;
}
.crm-reminder-head{display:flex;align-items:center;justify-content:space-between;}
.crm-reminder-tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-warn-ink,#946800);
}
.crm-reminder-body{font-size:var(--text-base);margin-top:2px;}

/* Offers render as their own cards, like notes. */
.crm-offer-card{margin:8px 0;padding:10px 12px;}
.crm-offer-meta{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:6px;}
.crm-offer-meta > span:not(:first-child)::before{content:"·";margin:0 8px;opacity:.45;}

.crm-danger-text{color:var(--color-danger,#e5484d);}

/* A lead that just changed briefly highlights to confirm the save. Its position holds until the
   next load (see CustomerDetail.OrderedLeads), so the card must not move — background flash only. */
@keyframes crm-bump{
  0%{background:var(--color-warn-bg,#fff8e6);}
  70%{background:var(--color-warn-bg,#fff8e6);}
  100%{background:var(--color-surface,#fff);}
}
.crm-lead--bumped{animation:crm-bump 1.4s ease;}

/* ── Navigation transitions ──────────────────────────────────────────────
   The content stage re-keys on each navigation, replaying one entrance keyframe.
   Direction is set by MainLayout; first load has no class, so it stays static. */
@keyframes navInRight{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:none;}}
@keyframes navInLeft {from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:none;}}
@keyframes navFadeUp {from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes navItem   {from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* clip (not hidden) so the 30px inbound slide never shows a scrollbar, without
   creating a scroll container that would break the sticky detail header. */
.crm-stage{overflow-x:clip;}

/* Page transitions are desktop-only. On phone the stage is re-keyed and rebuilt on every tab
   change, and the slide + card-stagger played on that rebuild read as the UI "jumping around"
   (confirmed: emulating prefers-reduced-motion stopped it). Phone gets a clean instant swap;
   desktop keeps the polish. */
@media (min-width:900px){
  .crm-stage--right{animation:navInRight 280ms cubic-bezier(.22,.61,.36,1) both;}
  .crm-stage--left {animation:navInLeft  280ms cubic-bezier(.22,.61,.36,1) both;}
  .crm-stage--up   {animation:navFadeUp  280ms cubic-bezier(.22,.61,.36,1) both;}

  /* Async views (customer detail) fetch data after mount, so the stage slide would play on
     an empty container. This entrance fires when the loaded content actually renders. */
  .crm-stage--animate .crm-view-enter{animation:navFadeUp 400ms cubic-bezier(.22,.61,.36,1) both;}

  /* Staggered entrance for the primary repeating items (customer/pipeline/stat cards).
     Capped at 9 (min(i,9)*38ms). */
  .crm-stage--animate .crm-cards > *{animation:navItem 400ms cubic-bezier(.22,.61,.36,1) both;}
  .crm-stage--animate .crm-cards > *:nth-child(1){animation-delay:0ms;}
  .crm-stage--animate .crm-cards > *:nth-child(2){animation-delay:38ms;}
  .crm-stage--animate .crm-cards > *:nth-child(3){animation-delay:76ms;}
  .crm-stage--animate .crm-cards > *:nth-child(4){animation-delay:114ms;}
  .crm-stage--animate .crm-cards > *:nth-child(5){animation-delay:152ms;}
  .crm-stage--animate .crm-cards > *:nth-child(6){animation-delay:190ms;}
  .crm-stage--animate .crm-cards > *:nth-child(7){animation-delay:228ms;}
  .crm-stage--animate .crm-cards > *:nth-child(8){animation-delay:266ms;}
  .crm-stage--animate .crm-cards > *:nth-child(9){animation-delay:304ms;}
  .crm-stage--animate .crm-cards > *:nth-child(n+10){animation-delay:342ms;}
}

@media (prefers-reduced-motion: reduce){
  .crm-stage, .crm-stage *{animation:none !important;}
}

.crm-form-error{color:var(--color-danger,#e5484d);font-size:var(--text-sm);width:100%;}

/* Delete-customer confirmation modal. */
.crm-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;
}
.crm-modal{
  position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 32px));
  background:var(--color-surface,#fff);
  border-radius:12px;padding:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}

/* In-page search field (reusable across section pages): the input, plus a results dropdown
   anchored beneath it. Outside-click dismissal is handled by focusout in the component (a fixed
   backdrop would be trapped by the transformed .crm-stage ancestor and miss the margins). */
.crm-searchfield{position:relative;z-index:31;margin-bottom:var(--space-4);}
.crm-searchfield .crm-search{margin-bottom:0;}
.crm-searchfield-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:31;
  background:var(--color-surface,#fff);border:1px solid var(--surface-2);border-radius:12px;
  padding:12px;max-height:min(60vh,420px);overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.crm-search-group{margin-top:var(--space-3);}
.crm-search-group:first-child{margin-top:0;}
/* A filled band, not a bare label: at up to 10 rows per group the three categories ran together.
   --border is the separation tone in both themes — a grey band on light, a lifted one on dark. */
.crm-search-group-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--on-surface);margin-bottom:6px;padding:4px 10px;border-radius:6px;
  background:var(--border);}
.crm-search-result{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  padding:8px 10px;background:transparent;border:0;border-radius:8px;cursor:pointer;font:inherit;
  color:var(--on-surface);}
.crm-search-result:hover{background:var(--surface-2);}
.crm-search-result-title{font-weight:var(--weight-medium);}
.crm-search-result-sub{font-size:var(--text-sm);color:var(--on-surface-muted);}

/* Brreg lookup on the new-customer form reuses the .crm-searchfield dropdown + .crm-search-result
   rows (Google-style floating list, hover-darkens). Only the "already a customer" row differs:
   title/sub on the left, a link on the right, and no pick hover since it isn't selectable. */
.crm-brreg-field{z-index:32;}
/* "already a customer" row: title/sub stacked on the left (like a pick row), a clickable pill badge
   on the right. Must force flex-direction:row — .crm-search-result sets column, which otherwise
   stacks and centres this row. Not itself pickable, so no hover fill on the row. */
/* Keep the badge next to the name (flex-start + gap), not pushed to the far edge — on a wide
   desktop dropdown, space-between drifted it away from the name and it was easy to miss. */
.crm-brreg-existing{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;cursor:default;}
.crm-brreg-existing:hover{background:transparent;}
.crm-brreg-existing-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.crm-brreg-badge{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;white-space:nowrap;
  font-size:var(--text-sm);font-weight:var(--weight-semibold);padding:5px 12px;border-radius:999px;text-decoration:none;
  background:color-mix(in srgb,var(--cody-blue) 16%,transparent);color:var(--primary-text);}
.crm-brreg-badge:hover{background:color-mix(in srgb,var(--cody-blue) 26%,transparent);text-decoration:none;}

/* Compact lead card: a glance summary. Title + badges on top, then a single divider, then the
   figures — the offer sum as the hero, dates and owner as muted supporting lines. The full
   workspace opens in .crm-lead-panel on click — see CustomerPipelineSection. */
.crm-lead-compact{cursor:pointer;display:flex;flex-direction:column;}
.crm-lead-compact:hover{border-color:var(--cody-blue);}
.crm-lead-compact-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.crm-lead-badges{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
/* One divider between identity and figures; hierarchy (not a hairline per line) separates the rest. */
.crm-lead-compact-figures{border-top:1px solid var(--border);margin-top:10px;padding-top:10px;display:flex;flex-direction:column;gap:4px;}
.crm-lead-compact-sum{font-size:var(--text-xl);font-weight:var(--weight-semibold);}
.crm-lead-compact-owner{display:flex;align-items:center;gap:8px;margin-top:4px;}

/* Almost-full-screen panel holding the lead's full workspace (offers, notes, reminders).
   Reuses .crm-modal-backdrop + ModalSection teleport so it escapes the .crm-stage transform. */
.crm-lead-panel{
  position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(960px,calc(100vw - 48px));
  min-height:min(70vh,calc(100vh - 48px));
  max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--color-surface,#fff);
  border-radius:12px;padding:24px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.crm-lead-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px;}
/* The expanded card's title is the view heading — larger than the compact-card title it shares a class with. */
.crm-lead-panel-head .crm-lead-title{font-size:var(--text-xl);}

/* Two-line owner block in the lead panel: our seller + the customer-side contact, with the
   ⋯ actions menu anchored to the top-right corner. */
.crm-lead-owners{display:flex;flex-direction:column;gap:6px;position:relative;margin:6px 0;}
.crm-lead-owner{display:flex;flex-direction:column;gap:1px;}
.crm-lead-owner-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--on-surface-muted);}
.crm-lead-owner-value{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.crm-lead-owners-menu{position:absolute;top:0;right:0;}
.crm-lead-owners-actions{display:flex;gap:6px;margin-bottom:6px;}
.crm-lead-description{margin:8px 0;color:var(--on-surface);white-space:pre-wrap;}

/* Costing editor inside the lead panel: a top-bordered block, one grid row per cost line
   (category · description · amount · remove), a tidy subtotal row, and a summary with the profit. */
.crm-costing{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
/* Read-only cost lines: category (+ muted description) on the left, amount right, remove ✕.
   Tap a line to edit it in the pop-up. */
.crm-costing-lines{display:flex;flex-direction:column;gap:6px;}
.crm-costing-line{display:flex;align-items:center;gap:10px;cursor:pointer;}
.crm-costing-line-cat{min-width:4.5rem;}   /* category column lines up */
/* Description flexes + ellipsizes so a long one can't push the amount out of its right column. */
.crm-costing-line-desc{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Amount pinned to a fixed right-aligned column so the sums line up down the list. */
.crm-costing-line-amount{margin-left:auto;min-width:6.5rem;text-align:right;font-weight:var(--weight-medium);white-space:nowrap;}
/* Add/edit cost-line pop-up — sits above the lead panel (z-index 51), so higher. */
.crm-cost-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;}
.crm-cost-modal{position:fixed;z-index:61;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 24px));background:var(--color-surface,#fff);border-radius:12px;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.25);}
.crm-costing-actions{display:flex;gap:8px;margin-top:2px;}
.crm-costing-summary{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px;font-size:var(--text-lg);}

/* A centered "+ Add …" button, uniform across notes and reminders lists. */
.crm-add-row{display:flex;justify-content:center;margin-top:var(--space-2);}
/* Section headers inside the lead panel (Notes / Reminders / Offers), each separated by a top rule. */
.crm-panel-label{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border);}

@media (max-width:720px){
  /* Edge-to-edge on phone so the workspace has room and the add-offer form never clips. */
  .crm-lead-panel{
    width:100vw;max-width:100vw;height:100dvh;min-height:100dvh;max-height:100dvh;
    left:0;top:0;transform:none;border-radius:0;padding:16px;
  }
  /* Description spans full width above category · amount · remove so nothing gets squeezed. */
  /* Stack each cost line vertically: category (+ remove) on top, then description, then sum —
     full-width fields read far better than three cramped columns on a phone. */
  .crm-costing{gap:14px;}
  .crm-costing-summary{font-size:var(--text-base);}
}

/* Auth transition screens (MSAL RemoteAuthenticatorView). These render shell-free on EmptyLayout,
   so without this they'd be default unstyled text on a blank page — brand them as a centered card. */
.crm-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:var(--surface-2);}
.crm-auth-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;
  width:100%;max-width:400px;padding:var(--space-8) var(--space-6);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);}
.crm-auth-logo{height:48px;}
/* Style the view's own state messages (logging in / out, completing, failed) uniformly. */
.crm-auth-card p,.crm-auth-msg{margin:0;color:var(--on-surface-muted);font-size:var(--text-base);}

/* ---- Stats dashboard ---- */
.crm-stat-filters{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4);}
.crm-filter-seller{width:180px;margin-left:auto;}
@media (max-width:720px){
  .crm-stat-filters{gap:var(--space-2);}
  /* Full-width segmented tabs so the whole filter bar reads uniform on phone. */
  .crm-stat-filters .crm-seg{display:flex;width:100%;}
  .crm-stat-filters .crm-seg-btn{flex:1;}
  .crm-stat-filters .crm-period-nav{width:100%;justify-content:center;}
  .crm-stat-filters .crm-period-nav .cody-input{flex:1;min-width:0;}
  /* Widen the month/year select and week label so all three steppers span the same width on phone. */
  .crm-stat-filters .crm-period-select,
  .crm-stat-filters .crm-period-label{flex:1;}
  /* Stack the custom range inputs so the end-date picker popup doesn't open off-screen. */
  .crm-stat-filters .crm-period-nav--custom{flex-direction:column;align-items:stretch;}
  .crm-stat-filters .crm-period-nav--custom .cody-input{width:100%;flex:none;}
  .crm-period-nav--custom > span{display:none;}
  .crm-filter-seller{width:100%;margin-left:0;}
  .crm-stat-filters > .cody-btn{width:100%;}
}
.crm-info-btn{margin-left:6px;width:16px;height:16px;line-height:14px;border-radius:50%;border:1px solid var(--border);
  background:transparent;color:var(--on-surface-muted);font-size:11px;font-style:italic;cursor:pointer;padding:0;}
.crm-info-pop{margin-top:8px;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);font-size:var(--text-sm);color:var(--on-surface-muted);line-height:1.4;}
.crm-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.crm-seg-btn{border:0;background:transparent;padding:6px 14px;cursor:pointer;font-size:var(--text-sm);color:var(--on-surface);}
.crm-seg-btn.is-active{background:var(--cody-slate);color:#fff;}
.crm-period-nav{display:flex;align-items:center;gap:var(--space-1);}
.crm-period-label{padding:0 var(--space-1);text-align:center;font-weight:var(--weight-medium);}
/* Styled to read as the plain stepper label — the native dropdown is a "hidden" click affordance. */
.crm-period-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:0 var(--space-1);text-align:center;text-align-last:center;font:inherit;font-weight:var(--weight-medium);color:var(--on-surface);background:transparent;border:0;cursor:pointer;}
.crm-period-select:hover{opacity:.7;}
.crm-period-select:focus{outline:none;}
.crm-period-select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm);}
.crm-stat-cards{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3);}
.crm-stat-card{flex:1 1 160px;}
.crm-stat-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--on-surface-muted);margin-bottom:var(--space-1);}
.crm-stat-value{font-size:var(--text-xl);font-weight:var(--weight-semibold);white-space:nowrap;}
@media (max-width:480px){ .crm-stat-value{font-size:var(--text-lg);} }
/* Live "Right now" cards: two facts per card. Inline on desktop, stacked on their own lines on
   phone; the cards also go full-width on phone so the big value + facts have room to breathe. */
.crm-stat-sub{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:var(--text-sm);color:var(--on-surface-muted);}
@media (max-width:720px){
  .crm-stat-cards--live .crm-stat-card{flex-basis:100%;}
  .crm-stat-cards--live .crm-stat-value{font-size:var(--text-lg);}
  .crm-stat-sub{flex-direction:column;gap:1px;}
}
.crm-bar-row{display:flex;align-items:center;gap:var(--space-2);margin:6px 0;}
.crm-bar-label{width:88px;font-size:var(--text-sm);white-space:nowrap;}
.crm-bar-track{flex:1;min-width:2.5rem;height:14px;background:var(--border);border-radius:var(--radius-pill);overflow:hidden;}
.crm-bar-fill{display:block;height:100%;background:var(--cody-slate);border-radius:var(--radius-pill);transition:width .25s ease;}
.crm-bar-fill--loss{background:var(--danger-solid);}
.crm-bar-count{flex-shrink:0;display:inline-flex;align-items:baseline;justify-content:flex-end;gap:6px;font-size:var(--text-sm);color:var(--on-surface-muted);}
.crm-bar-seg{text-align:right;white-space:nowrap;}
.crm-bar-seg--count{width:1.75rem;}
.crm-bar-seg--pct{width:2.75rem;}
.crm-bar-seg--sum{width:9rem;}
@media (max-width:720px){
  /* The value card's count/%/sum block is too wide for one phone line — drop it below the bar. */
  .crm-bar-row--value{flex-wrap:wrap;}
  .crm-bar-row--value .crm-bar-count{flex-basis:100%;justify-content:flex-end;margin-top:2px;}
}
.crm-spark{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:var(--space-2);border-bottom:1px solid var(--border);}
.crm-spark-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;}
.crm-spark-count{font-size:var(--text-xs);color:var(--on-surface-muted);line-height:1;}
.crm-spark-fill{width:100%;min-height:2px;background:var(--cody-slate);border-radius:var(--radius-sm) var(--radius-sm) 0 0;}
.crm-spark-label{font-size:var(--text-xs);color:var(--on-surface-muted);white-space:nowrap;}
.crm-auth-action{text-decoration:none;}