/* ============================================================
   CRM THEME — last stylesheet, overrides everything above
   Turns the call-pop into a Salesforce / HubSpot-feeling
   record screen: sticky contact rail, dense cards,
   blue chrome on white, mono-tonal status dots.
   ============================================================ */

:root {
  /* CRM palette — HomeSquare brand colors */
  --crm-blue: #1F3A6B;          /* HSP Build navy */
  --crm-blue-d: #15294D;
  --crm-blue-soft: #ECF0F7;
  --crm-blue-border: #C9D3E4;

  --crm-bg: #F2F4F7;            /* neutral cool-gray canvas */
  --crm-panel: #FFFFFF;
  --crm-panel-2: #F7F8FA;       /* very light gray surface */
  --crm-border: #E4E7EB;        /* neutral hairline */
  --crm-border-2: #D1D5DB;
  --crm-rule: #EEF0F3;

  --crm-ink: #1A1916;           /* HSP ink */
  --crm-text: #2D2A24;
  --crm-text-2: #5C574D;
  --crm-muted: #8A8478;

  --crm-green: #2F6B43;         /* HSP Handyman green */
  --crm-amber: #B8923A;         /* HSP Estate gold */
  --crm-red:   #B8362A;         /* HSP danger */
  --crm-eg:    #C6541E;         /* HSP Electric/Generator burnt orange */

  --crm-radius: 12px;
  --crm-radius-sm: 8px;
  --crm-shadow-card: 0 1px 0 rgba(27,39,51,0.02), 0 2px 6px rgba(27,39,51,0.05);
  --crm-shadow-pop:  0 8px 20px rgba(27,39,51,0.12);
}

/* ---------- Reset surfaces ---------- */
html, body {
  background: var(--crm-bg) !important;
  color: var(--crm-text) !important;
  font-family: "HSP Pro Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

/* Hide the division bar — CRM doesn't need brand color stripes */
.division-strip { display: none !important; }

/* ---------- App bar — wordmark-led masthead ---------- */
#app-bar {
  display: flex !important;
  align-items: center !important;
  height: 120px !important;
  padding: 0 32px !important;
  background: #F6F4EE !important;
  border-bottom: 1px solid var(--crm-border) !important;
  gap: 18px !important;
  position: sticky;
  top: 0;
  z-index: 50;
}
#app-bar .brand {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  flex: 0 0 auto !important;
}
/* The wordmark JPG is 1024×1024 with massive whitespace around the text.
   Crop it with aspect-ratio + object-fit:cover so it reads as a wide
   masthead, not a tiny square floating in cream. */
#app-bar .brand img {
  height: 100px !important;
  width: auto !important;
  aspect-ratio: 1024 / 220 !important;
  object-fit: cover !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
  display: block !important;
}
#app-bar .app-bar-sep { background: var(--crm-border) !important; height: 26px !important; width: 1px !important; }
#app-bar .app-bar-context,
#app-bar .app-bar-sep { display: none !important; }

#app-bar::after {
  content: "";
  flex: 1;
}

/* ---------- App grid: contact rail + main ---------- */
#app {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  align-items: start !important;
  max-width: none !important;
  padding: 0 !important;
  gap: 0 !important;
}

#caller-header {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  position: sticky !important;
  top: 48px !important;
  align-self: start !important;
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
  background: var(--crm-panel) !important;
  border-right: 1px solid var(--crm-border) !important;
  padding: 18px 18px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
}
#caller-header::before { display: none !important; }

#caller-header .caller-id {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#caller-header .caller-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--crm-green) !important;
  background: #E8F4ED !important;
  border: 1px solid #C7E3D2 !important;
  padding: 3px 8px !important;
  border-radius: 999px;
  align-self: flex-start;
}
#caller-header .caller-eyebrow .live-dot {
  width: 6px; height: 6px;
  background: var(--crm-green) !important;
  box-shadow: 0 0 0 3px rgba(31,138,91,0.20) !important;
}

#caller-header .caller-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--crm-ink) !important;
  line-height: 1.15 !important;
  margin: 4px 0 0 !important;
  font-family: inherit !important;
}

#caller-header .caller-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  color: var(--crm-text-2) !important;
}
#caller-header .caller-line .dot { display: none !important; }
#caller-header .caller-line > * {
  display: flex;
  align-items: center;
  gap: 8px;
}
#caller-header .caller-line .phone {
  color: var(--crm-ink) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  font-feature-settings: "tnum";
}
#caller-header .caller-line a {
  color: var(--crm-blue) !important;
  text-decoration: none !important;
}
#caller-header .caller-line a:hover { text-decoration: underline !important; }

/* Caller meta as key-fact table */
#caller-header .caller-meta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 14px 0 !important;
  border-top: 1px solid var(--crm-border) !important;
  border-bottom: 1px solid var(--crm-border) !important;
  margin: 0 !important;
  background: transparent !important;
}
#caller-header .caller-meta > div {
  display: grid !important;
  grid-template-columns: 100px 1fr !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
}
#caller-header .caller-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px 24px !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
#caller-header .caller-meta > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  width: auto !important;
}
#caller-header .caller-meta .stat-label {
  width: auto !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  color: #1a1916 !important;
}
#caller-header .caller-meta .stat-value {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--crm-ink) !important;
  white-space: nowrap !important;
}
  font-weight: 600 !important;
}
#caller-header .caller-meta .stat-value {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--crm-ink) !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
}
#caller-header .caller-meta .stat-value.dim { color: var(--crm-muted) !important; font-weight: 500 !important; }
#caller-header .caller-meta .rpm-link {
  color: var(--crm-blue) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-family: inherit !important;
}

/* ---------- Right: status strip becomes record toolbar ---------- */
#status-strip {
  grid-column: 2 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  padding: 10px 16px !important;
  background: var(--crm-panel) !important;
  border-bottom: 1px solid var(--crm-border) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: sticky;
  top: 48px;
  z-index: 40;
}
#status-strip::before {
  content: "Snapshot";
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crm-muted);
  align-self: center;
  padding-right: 8px;
  border-right: 1px solid var(--crm-border);
  margin-right: 4px;
}

.status-chip {
  background: var(--crm-panel-2) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius) !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--crm-text) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px !important;
  box-shadow: none !important;
}
.status-chip strong { color: var(--crm-ink); font-weight: 600; }
.status-chip .icon svg { width: 13px; height: 13px; stroke-width: 2; color: var(--crm-text-2); }
.status-chip.active .icon svg { color: var(--crm-green); }
.status-chip.gen    .icon svg { color: var(--crm-amber); }
.status-chip.upcoming .icon svg { color: var(--crm-blue); }
.status-chip.last .icon svg { color: var(--crm-muted); }
.status-chip.ticket .icon svg { color: var(--crm-red); }
.status-chip .dim { color: var(--crm-muted); }

/* ---------- Properties card lives in the contact rail ---------- */
#caller-header .properties-rail-card {
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--crm-panel-2);
  overflow: hidden;
  margin-top: 6px;
}
#caller-header .properties-rail-card .prc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--crm-panel);
  border-bottom: 1px solid var(--crm-border);
}
#caller-header .properties-rail-card .prc-head h4 {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--crm-ink);
}
#caller-header .properties-rail-card .prc-head .count {
  margin-left: auto;
  font-size: 12.5px; font-weight: 700;
  color: var(--crm-text-2);
  background: var(--crm-panel-2);
  border: 1px solid var(--crm-border);
  border-radius: 999px;
  padding: 1px 7px;
}
#caller-header .properties-rail-card .prc-list {
  display: flex; flex-direction: column;
}
/* Compact property row — single-line address with ID on the right,
   city + tags on a thin secondary line. ~50% less vertical than the
   previous 3-stack layout so 7+ properties fit without the rail
   scrolling past the viewport. */
#caller-header .properties-rail-card .prc-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--crm-rule);
  border-left: 3px solid var(--crm-blue);
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 1px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 120ms;
}
#caller-header .properties-rail-card .prc-item:hover {
  background: var(--crm-panel-2);
}
#caller-header .properties-rail-card .prc-item:last-child { border-bottom: 0; }
#caller-header .properties-rail-card .prc-addr {
  font-weight: 600;
  color: var(--crm-ink);
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#caller-header .properties-rail-card .prc-meta {
  font-size: 11px;
  color: var(--crm-text-2);
  line-height: 1.2;
  grid-column: 1 / -1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#caller-header .properties-rail-card .prc-meta:empty { display: none; }
#caller-header .properties-rail-card .prc-id {
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--crm-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  align-self: baseline;
}
#caller-header .properties-rail-card .prc-item:hover .prc-id {
  color: var(--crm-blue);
}

/* Tighter card head + smaller gap inside the list */
#caller-header .properties-rail-card .prc-head { padding: 8px 12px !important; }
#caller-header .properties-rail-card .prc-head h4 { font-size: 11px !important; letter-spacing: 0.08em !important; }
#caller-header .properties-rail-card .prc-list { gap: 0 !important; }

/* Hide the in-grid Properties card since we're rendering it in the rail */
#client-summary > .card[data-card="properties"] { display: none !important; }

/* ---------- Main: client summary panels ---------- */
#client-summary {
  grid-column: 2 !important;
  padding: 14px 16px 80px !important;
  background: transparent !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  column-count: auto !important;
  column-fill: auto !important;
  align-items: start !important;
}
#client-summary .summary-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
}
#client-summary > .card { margin: 0 !important; break-before: auto !important; }
#client-summary > .card[data-card="open-services"],
#client-summary > .card[data-card="invoices"] { break-before: auto !important; break-after: auto !important; }
@media (max-width: 640px) {
  #client-summary { grid-template-columns: 1fr !important; }
}

#client-summary > .card {
  background: var(--crm-panel) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow-card) !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  break-inside: avoid;
}
#client-summary > .card::before { display: none !important; }

.card .card-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  background: var(--crm-panel-2) !important;
  border-bottom: 1px solid var(--crm-border) !important;
  cursor: pointer;
  user-select: none;
  min-height: 0 !important;
}
.card .card-head .icon { display: inline-flex; }
.card .card-head .icon svg {
  width: 14px; height: 14px;
  stroke-width: 2;
  color: var(--crm-text-2) !important;
}
.card .card-head h3,
.card .card-head .card-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--crm-ink) !important;
  margin: 0 !important;
  font-family: inherit !important;
  line-height: 1.4;
}
.card .card-head .count {
  background: var(--crm-panel) !important;
  border: 1px solid var(--crm-border) !important;
  color: var(--crm-text-2) !important;
  font-size: 11px !important;
  padding: 1px 7px !important;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 2px;
}
.card .card-head .head-spacer { flex: 1 1 auto !important; }
.card .card-head .card-summary {
  margin-left: 0 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-weight: 600 !important;
  color: var(--crm-text) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 8px 0 0 !important;
}
.card .card-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
.card .card-head .card-summary.money { color: var(--crm-ink) !important; }
/* Open invoices: total-due pill matches the "Invoiced — AR" stage red
   (--st-8 = #E81516) so the visual ties to the AR processing stage in
   both light and dark modes. */
.card[data-card="invoices"] .card-head .card-summary.money {
  background: #E81516 !important;
  border-color: #E81516 !important;
  color: #FFFFFF !important;
}
.card .card-head .head-toggle,
.card .card-head .chev {
  margin-left: 4px;
  color: var(--crm-muted) !important;
  transition: transform 160ms;
}
.card.closed .card-head .chev,
.card.closed .card-head .head-toggle { transform: rotate(-90deg); }

.card .card-body { padding: 4px 0 !important; }
.card.closed .card-body { display: none !important; }
.card.closed .card-head { border-bottom: 0 !important; }

/* ---------- Rows ---------- */
#client-summary .card .card-body > .row {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--crm-rule) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px 12px !important;
  align-items: start !important;
  box-shadow: none !important;
  border-left: 3px solid transparent !important;
  padding-left: 12px !important;
}
#client-summary .card .card-body > .row:last-child { border-bottom: 0 !important; }
#client-summary .card .card-body > .row:hover {
  background: var(--crm-blue-soft) !important;
  border-color: var(--crm-rule) !important;
  border-left-color: var(--crm-blue) !important;
  cursor: pointer;
}

/* ---------- Service row processing-stage emphasis ---------- */
/* Per-stage color tokens */
#client-summary .svc-row.stage-new          { --stage-c: #30D2E1; --stage-fg:#0F4C53; --stage-bg:#E6FBFD; --stage-br:#A6E9EF; }
#client-summary .svc-row.stage-incomm       { --stage-c: #8DC7F3; --stage-fg:#1E3A66; --stage-bg:#EAF4FE; --stage-br:#C7DEF7; }
#client-summary .svc-row.stage-sales-appt   { --stage-c: #6D39DC; --stage-fg:#FFFFFF; --stage-bg:#EFE7FB; --stage-br:#C8B4F1; }
#client-summary .svc-row.stage-estimate     { --stage-c: #D6D01C; --stage-fg:#4A461C; --stage-bg:#FBF8D4; --stage-br:#EDE598; }
#client-summary .svc-row.stage-approved     { --stage-c: #11C315; --stage-fg:#FFFFFF; --stage-bg:#E0F7E1; --stage-br:#A2E4A4; }
#client-summary .svc-row.stage-plan-pending { --stage-c: #4BC14E; --stage-fg:#FFFFFF; --stage-bg:#E6F7E7; --stage-br:#B6E1B7; }
#client-summary .svc-row.stage-scheduled    { --stage-c: #491EA4; --stage-fg:#FFFFFF; --stage-bg:#ECE5F8; --stage-br:#BFA8E5; }
#client-summary .svc-row.stage-plan-sched   { --stage-c: #7034F1; --stage-fg:#FFFFFF; --stage-bg:#EEE4FD; --stage-br:#C9B1F8; }
#client-summary .svc-row.stage-in-progress  { --stage-c: #FF9E42; --stage-fg:#5A2E00; --stage-bg:#FFEBD7; --stage-br:#FFC890; }
#client-summary .svc-row.stage-cancelled    { --stage-c: #96090B; --stage-fg:#FFFFFF; --stage-bg:#F8DCDC; --stage-br:#E29A9B; }
#client-summary .svc-row.stage-invoice-pend { --stage-c: #2430E1; --stage-fg:#FFFFFF; --stage-bg:#E0E3FB; --stage-br:#A8AEF1; }
#client-summary .svc-row.stage-ar           { --stage-c: #E81516; --stage-fg:#FFFFFF; --stage-bg:#FCE0E0; --stage-br:#F4A4A4; }
#client-summary .svc-row.stage-collected    { --stage-c: #1B1B1B; --stage-fg:#FFFFFF; --stage-bg:#E4E4E4; --stage-br:#B4B4B4; }
#client-summary .svc-row.stage-overdue      { --stage-c: var(--crm-red); --stage-fg:#FFFFFF; --stage-bg:#FCE7E3; --stage-br:#F0B0A8; }
#client-summary .svc-row.stage-completed    { --stage-c: var(--crm-green); --stage-fg:#FFFFFF; --stage-bg:#E1F1E7; --stage-br:#A9D6B9; }
#client-summary .svc-row.stage-archived,
#client-summary .svc-row.stage-rejected,
#client-summary .svc-row.stage-failed,
#client-summary .svc-row.stage-spam         { --stage-c: var(--crm-muted); --stage-fg:#FFFFFF; --stage-bg:#F1F2F4; --stage-br:#D6D9DE; opacity: 0.85; }

/* Apply the stage color: chunky left bar + tinted background */
#client-summary .card[data-card="open-services"] .card-body > .row,
#client-summary .card[data-card="services"] .card-body > .row {
  border-left: 0 !important;
  padding-left: 0 !important;
  background: linear-gradient(to right, var(--stage-bg, transparent) 0, var(--stage-bg, transparent) 8px, #fff 8px, #fff 100%) !important;
  position: relative;
  overflow: hidden;
}
#client-summary .card[data-card="open-services"] .card-body > .row::before,
#client-summary .card[data-card="services"] .card-body > .row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 8px;
  background: var(--stage-c, var(--crm-border-2));
}
#client-summary .card[data-card="open-services"] .card-body > .row .row-main,
#client-summary .card[data-card="services"] .card-body > .row .row-main {
  padding-left: 18px;
}

/* Stage pill — solid colored chip, dominant */
#client-summary .svc-row .stage-pill {
  background: var(--stage-c, var(--crm-panel-2)) !important;
  color: var(--stage-fg, var(--crm-ink)) !important;
  border: 1px solid var(--stage-c, var(--crm-border)) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
#client-summary .svc-row .stage-pill::before { display: none !important; }
/* Yellow/light stages need dark text */
#client-summary .svc-row.stage-estimate .stage-pill,
#client-summary .svc-row.stage-new .stage-pill,
#client-summary .svc-row.stage-incomm .stage-pill {
  color: var(--stage-fg) !important;
}
#client-summary .card[data-card="invoices"]      .row.invoice          { border-left-color: var(--crm-eg) !important; }
#client-summary .card[data-card="invoices"]      .row.invoice.overdue  { border-left-color: var(--crm-red) !important; background: rgba(184,54,42,0.05) !important; }
#client-summary .card[data-card="past-invoices"] .row                  { border-left-color: var(--crm-green) !important; }
#client-summary .card[data-card="generators"]    .row                  { border-left-color: var(--crm-eg) !important; }
#client-summary .card[data-card="plans"]         .row                  { border-left-color: var(--crm-amber) !important; }
#client-summary .card[data-card="properties"]    .row                  { border-left-color: var(--crm-blue) !important; }

.row .row-main { min-width: 0; }
.row .row-title {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 4px;
}
.row .row-title .title-text {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--crm-ink) !important;
  font-family: inherit !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
}
.row .row-title .title-text:hover {
  color: var(--crm-blue) !important;
  text-decoration: underline !important;
}

.row .row-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 16px !important;
  font-size: 11.5px !important;
  margin-top: 2px !important;
}
.row .row-meta .field { display: inline-flex !important; gap: 5px; align-items: baseline; }
.row .row-meta .field-label {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--crm-muted) !important;
  font-weight: 600 !important;
}
.row .row-meta .field-value {
  font-size: 12px !important;
  color: var(--crm-text) !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
}
.row .row-meta .field-value.money {
  font-family: "Roboto Mono", ui-monospace, monospace !important;
  font-weight: 600 !important;
  color: var(--crm-ink) !important;
}

.row .row-side {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: var(--crm-muted) !important;
}
.row .row-side > span:not(.invoice-amount):not(.invoice-id) {
  font-family: "Roboto Mono", monospace !important;
  font-size: 10.5px !important;
  color: var(--crm-muted) !important;
}

/* ---------- Badges → dot-prefixed CRM pills ---------- */
.badge,
.stage-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--crm-panel-2) !important;
  border: 1px solid var(--crm-border) !important;
  color: var(--crm-text) !important;
  text-transform: none !important;
  box-shadow: none !important;
  animation: none !important;
}
.stage-pill::before, .badge::before { display: none !important; }
.stage-pill.stage-intake    { background: #FDF4DC !important; border-color: #ECD58F !important; color: #6B5219 !important; }
.stage-pill.stage-scheduled { background: var(--crm-blue-soft) !important; border-color: var(--crm-blue-border) !important; color: var(--crm-blue-d) !important; }
.stage-pill.stage-overdue   { background: #FCEAE7 !important; border-color: #F2B8B0 !important; color: #7E2A20 !important; }
.stage-pill.stage-completed { background: #E6F4EC !important; border-color: #BFE0CD !important; color: #1F6E47 !important; }
.stage-pill.stage-archived,
.stage-pill.stage-rejected,
.stage-pill.stage-spam      { background: var(--crm-panel-2) !important; color: var(--crm-muted) !important; }
.stage-pill::before {
  display: inline-block !important;
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge.overdue {
  background: var(--crm-red) !important;
  color: #FFFFFF !important;
  border-color: var(--crm-red) !important;
}
.badge.upcoming { background: var(--crm-blue-soft) !important; color: var(--crm-blue-d) !important; border-color: var(--crm-blue-border) !important; }
.badge.warranty { background: #FDF4DC !important; color: #6B5219 !important; border-color: #ECD58F !important; }
.badge.active   { background: #E6F4EC !important; color: #1F6E47 !important; border-color: #BFE0CD !important; }
.badge.inactive,
.badge.expired,
.badge.archived,
.badge.spam     { background: var(--crm-panel-2) !important; color: var(--crm-muted) !important; }

/* ---------- Invoice amount typography ---------- */
.invoice-amount {
  font-family: "Roboto Mono", monospace !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--crm-ink) !important;
  letter-spacing: -0.005em !important;
}
.invoice-amount.overdue { color: var(--crm-red) !important; font-size: 15px !important; font-weight: 700 !important; }
.invoice-id { color: var(--crm-muted) !important; font-size: 10.5px !important; }

/* Invoice action buttons */
.invoice-actions { gap: 6px !important; margin-top: 8px !important; }
.row .row-side .iv-btn,
.iv-btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  height: 28px !important;
  border-width: 1px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

/* ---------- Action bar (bottom) ---------- */
#actions {
  grid-column: 1 / -1 !important;
  position: sticky !important;
  bottom: 0 !important;
  background: var(--crm-panel) !important;
  border-top: 1px solid var(--crm-border) !important;
  box-shadow: 0 -1px 6px rgba(27,39,51,0.04) !important;
  padding: 10px 24px !important;
  z-index: 30;
}
#actions .actions-inner {
  display: flex !important;
  gap: 8px !important;
  max-width: none !important;
  margin: 0 !important;
}
.btn {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 7px 14px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid var(--crm-border-2) !important;
  background: var(--crm-panel) !important;
  color: var(--crm-text) !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-family: inherit !important;
}
/* Undo / destructive — solid red so the agent sees the rollback clearly. */
#actions .btn.danger {
  background: var(--danger) !important;
  color: #FFFFFF !important;
  border-color: var(--danger) !important;
}
#actions .btn.danger:hover {
  background: #8E2A20 !important;
  border-color: #8E2A20 !important;
  color: #FFFFFF !important;
}
.btn:hover { background: var(--crm-panel-2) !important; border-color: var(--crm-text-2) !important; color: var(--crm-ink) !important; }
.btn .icon svg { width: 14px; height: 14px; stroke-width: 2; }
.btn.primary {
  background: var(--crm-blue) !important;
  border-color: var(--crm-blue) !important;
  color: #FFFFFF !important;
}
.btn.primary:hover { background: var(--crm-blue-d) !important; border-color: var(--crm-blue-d) !important; }
.menu-trigger .caret { width: 14px; height: 14px; opacity: 0.8; }

/* Archive menu popover */
.menu {
  background: var(--crm-panel) !important;
  border: 1px solid var(--crm-border) !important;
  box-shadow: var(--crm-shadow-pop) !important;
  border-radius: 12px !important;
  padding: 6px !important;
}
.menu .menu-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--crm-muted);
  padding: 8px 10px 4px;
  font-weight: 700;
}
.menu button {
  font-size: 12.5px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: var(--crm-text) !important;
}
.menu button:hover { background: var(--crm-blue-soft) !important; color: var(--crm-ink) !important; }
.menu button.danger { color: var(--crm-red) !important; }
.menu button.danger:hover { background: #FCEAE7 !important; }
.menu hr { border: 0; border-top: 1px solid var(--crm-border); margin: 4px 0; }

/* ---------- Generator spec sheet ---------- */
.spec-toggle {
  background: var(--crm-panel-2) !important;
  border-color: var(--crm-border) !important;
  color: var(--crm-text-2) !important;
  border-radius: 8px !important;
}
.spec-sheet {
  background: var(--crm-panel-2) !important;
  border-color: var(--crm-border) !important;
  border-radius: 10px !important;
}
.spec-group-title { color: var(--crm-muted) !important; }
.spec-label { color: var(--crm-muted) !important; }
.spec-value { color: var(--crm-text) !important; font-family: inherit !important; }

/* ---------- Responsive collapse ---------- */
@media (max-width: 1000px) {
  #app { grid-template-columns: 1fr !important; }
  #caller-header {
    grid-row: auto !important;
    position: static !important;
    max-height: none !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--crm-border) !important;
  }
  #status-strip { position: static !important; }
}

/* ---------- Bury the tweaks badge styling so it survives ---------- */
.tweaks-fab, #tweaks-panel { z-index: 100; }