/* ECR Connect — the Dashboard (2026-10-07), from the approved mockup
   https://claude.ai/artifact/VMqtHCXYewVLob3tvFKEqg. ECR's site only; Sam's site never loads
   this. Built on the Leads screen's pieces (ecr-leads.css, always loaded with it). Every colour
   is var(--dk-<role>, <light colour>), as test/dark-mode.test.js requires. */

#dashApp[hidden] { display: none; }
#dashApp { max-width: 1180px; margin: 0 auto; font-size: 14px; display: flex; flex-direction: column; gap: 16px;
  --db-row: 128px; --db-gap: 12px; }
.db-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.db-seg { display: inline-flex; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 10px; overflow: hidden; background: var(--dk-surface, #fff); }
.db-seg button { min-height: 36px; padding: 0 14px; border: 0; background: transparent; color: var(--dk-ink, #1a1a1a); font: 700 13px Helvetica, Arial, sans-serif; cursor: pointer; }
.db-seg button + button { border-left: 1.5px solid var(--dk-line, var(--border)); }
.db-seg button[aria-pressed="true"] { background: var(--purple); color: #ffffff; }

/* ONE GRID, FIVE COLUMNS (2026-10-09, Thomas: "They should snap to specific sizes so it keeps
   things clean"). A box is 1, 2, 3 or 5 fifths wide, nothing in between, and Short (one row, a
   figure's height as before) or Tall (three rows, the chart's height as before). The boxes keep
   their order, and one that does not fit what is left of a row starts the next (no dense
   packing). Below 700px every box is a row of its own, in the same order. */
.db-board { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: var(--db-row); gap: var(--db-gap); }
@media (min-width: 700px) {
  .db-board { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .db-box[data-w="2"], .db-gap[data-w="2"] { grid-column: span 2; }
  .db-box[data-w="3"], .db-gap[data-w="3"] { grid-column: span 3; }
  .db-box[data-w="5"], .db-gap[data-w="5"] { grid-column: span 5; }
}
.db-box[data-h="tall"], .db-gap[data-h="tall"] { grid-row: span 3; }
.db-box { position: relative; min-width: 0; min-height: 0; overflow: hidden; container-type: inline-size;
  background: var(--dk-surface, #fff); border: 1px solid var(--dk-line, var(--border)); border-radius: 12px; }

/* The five figures. A Small one shows its number at a size that fits a fifth; a bigger or taller
   one shows it larger. */
.db-tile { padding: 14px; }
.db-tile-in { display: flex; flex-direction: column; gap: 4px; height: 100%; min-width: 0; }
.db-k { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dk-ink-2, #46555e); }
.db-v { font: 800 clamp(17px, 13cqi, 28px) Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-tile:not([data-w="1"]) .db-v { font-size: clamp(28px, 8cqi, 44px); }
.db-tile[data-h="tall"] .db-v { font-size: clamp(30px, 17cqi, 48px); margin: 6px 0; }
.db-v.db-none, .db-tile .db-v.db-none { font-size: 15px; font-weight: 700; color: var(--dk-ink-2, #46555e); white-space: normal; }
.db-s { font-size: 13px; color: var(--dk-ink-2, #46555e); }
.db-src { font-size: 11.5px; color: var(--dk-ink-2, #46555e); margin-top: auto; padding-top: 6px; }
/* The label and the figure are never the part that gives way in a box a row high: between 700
   and about 1,000px wide the figure was squashed to half its height (review, 2026-10-09). The
   line under it gives way first, whole lines at a time (fitTiles in ecr-dashboard.js), and a
   narrow figure sets its words a little smaller. */
.db-k, .db-v, .db-src { flex-shrink: 0; }
.db-s { line-height: 1.3; min-height: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.db-s[data-lines="1"] { -webkit-line-clamp: 1; }
.db-s[data-lines="0"], .db-src[data-off] { display: none; }
@container (max-width: 170px) {
  .db-k { font-size: 11px; letter-spacing: .3px; }
  .db-v.db-none, .db-tile .db-v.db-none { font-size: 14px; }
  .db-s { font-size: 12.5px; }
}

.db-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.db-good { background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }
.db-warn { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #7a4f00); }
.db-bad { background: var(--dk-bad-soft, #fbe4e2); color: var(--dk-bad-text, #9b1c14); }
.db-off { background: var(--dk-tint, #eef0f3); color: var(--dk-ink-2, #46555e); }

/* The larger boxes: a heading, where it comes from, then a body that takes the rest of the box
   and scrolls within it if a Short or Small box cannot show everything. */
.db-panel { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.db-panel h3 { font: 800 17px Raleway, Helvetica, Arial, sans-serif; margin: 0; color: var(--dk-ink, #1a1a1a); }
.db-why { margin: 0; color: var(--dk-ink-2, #46555e); font-size: 13px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.db-box[data-h="short"] .db-why { -webkit-line-clamp: 1; }
/* Only the body gives way when a box is Short: the heading, where it comes from and a note keep
   their lines (the source line was squashed to a few pixels; review, 2026-10-09). A Short box
   shows a note's first line; the rest is on pointing at it. */
.db-panel > h3, .db-panel > .db-why, .db-panel > .db-note { flex-shrink: 0; }
.db-box[data-h="short"].db-panel > .db-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.db-box[data-h="short"].db-panel > .db-note[hidden] { display: none; }
.db-box[data-h="short"].db-panel { padding: 12px 14px; gap: 6px; }
/* And its heading keeps to one line, cut short with its full words on pointing (the h3's title): a
   heading wrapping onto three lines left a Small Short box 15px of body (review after the merge,
   2026-10-09). */
.db-box[data-h="short"].db-panel > h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-note { margin: 0; font-size: 13px; color: var(--dk-ink-2, #46555e); }
.db-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }

/* Invoiced by month: one series, the title names it. Drawn to the box's own size. */
.db-chart { position: relative; overflow: hidden; }
.db-chart svg { position: absolute; left: 0; top: 0; display: block; }
.db-chart .db-bar { fill: var(--dk-accent-line, #402a82); }
.db-chart .db-bar.db-partial { fill: var(--dk-accent-line-soft, #b9addf); }
.db-chart .db-gridline { stroke: var(--dk-line, #eceef2); }
.db-chart .db-axis { fill: var(--dk-ink-2, #46555e); font-size: 11px; }
.db-chart .db-peak { fill: var(--dk-ink, #1a1a1a); font-size: 11px; font-weight: 700; }
.db-tip { position: absolute; pointer-events: none; background: var(--dk-ink, #1a1a1a); color: var(--dk-surface, #fff); font-size: 12.5px;
  padding: 6px 9px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -110%); z-index: 1; }

/* From quote to booked, where quotes came from, and rides completed by chauffeur. */
.db-bars { display: flex; flex-direction: column; gap: 9px; }
.db-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.db-row .db-lab { font-size: 13px; color: var(--dk-ink, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-track { height: 14px; background: var(--dk-tint, #eceef2); border-radius: 4px; overflow: hidden; }
.db-fill { height: 100%; background: var(--dk-accent-line, #402a82); border-radius: 0 4px 4px 0; }
.db-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dk-ink, #1a1a1a); }
.db-rate b { color: var(--dk-ink, #1a1a1a); }
.db-body h3 { font-size: 15px; }
@media (prefers-reduced-motion: no-preference) { .db-fill { transition: width .35s ease; } }

/* The tables. */
.db-tw { overflow: auto; }
.db-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.db-table th { text-align: left; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--dk-ink-2, #46555e); font-weight: 700;
  padding: 6px 8px; border-bottom: 1px solid var(--dk-line, var(--border)); position: sticky; top: 0; background: var(--dk-surface, #fff); }
.db-table td { padding: 8px; border-bottom: 1px solid var(--dk-line, #eceef2); vertical-align: top; color: var(--dk-ink, #1a1a1a); }
.db-table .db-n { text-align: right; font-variant-numeric: tabular-nums; }
.db-table .db-sub { display: block; font-size: 12px; color: var(--dk-ink-2, #46555e); }
.db-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--dk-accent-text, var(--purple)); font-weight: 700; cursor: pointer; text-align: left; }
.db-linkbtn:hover { text-decoration: underline; }

/* A box shows what fits its size: narrower, the tables keep their first columns and the bars
   their labels shorter. Measured on the box itself, so a phone's full-width box reads the same. */
@container (max-width: 560px) { .db-table .db-c-trip { display: none; } }
@container (max-width: 460px) {
  .db-table .db-c-who { display: none; }
  .db-row { grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 44px; gap: 8px; }
}
@container (max-width: 260px) {
  .db-table .db-c-pay, .db-table .db-c-count { display: none; }
  .db-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
  .db-row .db-track { grid-column: 1 / -1; order: 1; height: 10px; }
}

.db-head h2 { margin: 0; font: 800 24px Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); }
.db-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Arranging (2026-10-09) ------------------------------------------------------------------
   Arrange rests as an outline like every button and fills while pressed (it is on). Its bar, the
   fifths ruler and each box's controls show only while arranging, and only at 700px and wider;
   below that the boxes simply stack in the saved order. */
.db-arrange-btn[aria-pressed="true"] { background: var(--purple); color: #ffffff; }
.db-arrange-bar[hidden], .db-ruler[hidden] { display: none; }
.db-arrange-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; position: sticky; top: 8px; z-index: 5;
  background: var(--dk-surface, #fff); border: 1.5px solid var(--dk-accent-line, var(--purple)); border-radius: 10px; padding: 8px 12px;
  color: var(--dk-ink, #1a1a1a); font-size: 13.5px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.db-arrange-bar > p { margin: 0; flex: 1 1 360px; }
.db-touch-only { display: none; }
@media (any-pointer: coarse) { .db-touch-only { display: inline; } }
.db-arrange-bar .db-arrange-msg { flex-basis: 100%; order: 3; color: var(--dk-bad-text, #9b1c14); font-weight: 700; }
.db-arrange-do { display: flex; gap: 8px; flex-wrap: wrap; }
.db-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.db-ruler { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--db-gap); margin-bottom: -8px; }
.db-ruler span { border-top: 2px dashed var(--dk-accent-line, #6f5fb8); font-size: 11px; font-weight: 700; color: var(--dk-ink-2, #46555e); text-align: center; padding-top: 2px; }

.db-tools { display: none; }
@media (min-width: 700px) {
  /* A finger swiping up or down on a box scrolls the page, as it does when not arranging; a finger
     moving sideways drags the box, and the grip (top left) drags it any way (review after the merge,
     2026-10-09: with touch-action none on every box, the page could not be scrolled on an iPad). */
  .db-arranging .db-box { outline: 2px dashed var(--dk-accent-line, #6f5fb8); outline-offset: -2px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
  .db-arranging .db-box.db-lifted { touch-action: none; }
  /* While arranging, what is in a box does not answer a click: a press anywhere on it is a drag. */
  .db-arranging .db-box > :not(.db-tools) { pointer-events: none; }
  .db-arranging .db-tools { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .db-arranging.db-dragging, .db-arranging.db-dragging * { cursor: grabbing; }
}
@media (max-width: 699px) { .db-arrange-btn, .db-arrange-bar, .db-ruler { display: none !important; } }
.db-tools > * { position: absolute; pointer-events: auto; }
.db-grip { left: 0; top: 0; padding: 12px 10px 8px 3px; font-size: 14px; line-height: 1; color: var(--dk-ink-2, #46555e); touch-action: none; cursor: grab; }
.db-mv { right: 8px; top: 8px; display: flex; gap: 4px; }
/* The size buttons stay inside the box, clear of the corner, on ONE row, and what is in the box is
   laid out ABOVE them: while arranging, a strip at the foot of every box is theirs (40px; 30px in a
   narrow box). They used to sit over the box's own words: the line under each figure, every source
   line, and at 720 to 760 wide, wrapped onto two rows, half of a figure (review after the merge,
   2026-10-09). A figure's line and source line give way whole when there is not room for them
   above the strip (fitTiles in ecr-dashboard.js); a larger box's body gives way, and the chart is
   drawn to the height left. The heading keeps clear of the arrows. */
.db-sizes { left: 8px; right: 28px; bottom: 8px; display: flex; flex-wrap: nowrap; gap: 3px; }
@media (min-width: 700px) {
  .db-arranging .db-k, .db-arranging .db-panel > h3 { padding-right: 58px; }
  .db-arranging .db-panel > h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .db-arranging .db-tile-in { padding-bottom: 26px; }
  .db-arranging .db-panel > .db-body { margin-bottom: 24px; }
  .db-arranging .db-panel[data-h="short"] > .db-body { margin-bottom: 28px; }
}
.db-tool { min-width: 26px; height: 26px; padding: 0 6px; border: 1px solid var(--dk-line-strong, #8a979e); border-radius: 6px;
  background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a); font: 700 12px Helvetica, Arial, sans-serif; cursor: pointer; }
.db-tool:not(:disabled):hover { border-color: var(--dk-accent-line, var(--purple)); color: var(--dk-accent-text, var(--purple)); }
.db-tool[aria-pressed="true"], .db-tool[aria-pressed="true"]:not(:disabled):hover { background: var(--purple); border-color: var(--dk-accent-line, var(--purple)); color: #ffffff; }
.db-tool:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 1px; }
.db-tool:disabled { visibility: hidden; }
/* A narrow box (its inside 190px or less: a fifth, below about 1,200 wide) has smaller buttons,
   and the five size buttons smaller still, so they stay one row down to a fifth at 700 wide. */
@container (max-width: 190px) {
  .db-tool { min-width: 22px; height: 22px; padding: 0 4px; font-size: 11px; border-radius: 5px; }
  .db-sizes .db-tool { min-width: 15px; padding: 0 2px; font-size: 10px; border-radius: 4px; }
  .db-mv { right: 4px; top: 4px; gap: 2px; }
  .db-sizes { left: 4px; right: 24px; bottom: 4px; gap: 2px; }
}
/* In a narrow box a single word of the heading can be wider than the room beside the arrows
   (COLLECTED at 720 wide), so there the heading goes below them; and the strip at the foot is
   30px. */
@media (min-width: 700px) {
  @container (max-width: 190px) {
    .db-arranging .db-k, .db-arranging .db-panel > h3 { padding-right: 0; }
    .db-arranging .db-tile-in { padding-top: 14px; padding-bottom: 16px; }
    .db-arranging .db-panel > h3 { padding-top: 12px; }
    .db-arranging .db-panel[data-h="short"] > h3 { padding-top: 16px; }
    .db-arranging .db-panel > .db-body { margin-bottom: 14px; }
    .db-arranging .db-panel[data-h="short"] > .db-body { margin-bottom: 18px; }
  }
}
.db-rz { right: 2px; bottom: 2px; width: 20px; height: 20px; cursor: nwse-resize; touch-action: none;
  border-right: 3px solid var(--dk-accent-line, #6f5fb8); border-bottom: 3px solid var(--dk-accent-line, #6f5fb8); border-radius: 0 0 9px 0; }
.db-sizetag { right: 28px; bottom: 9px; max-width: calc(100% - 36px); background: var(--purple); color: #ffffff; font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 3px 8px; }
.db-sizetag[hidden] { display: none; }
.db-sizing { outline-style: solid !important; }

/* The box being moved rides above the page, and a "Drop here" gap holds where it will land;
   the others make room around it, so nothing ever overlaps. */
.db-lifted { position: fixed; z-index: 60; margin: 0; transform: rotate(-1.2deg); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); pointer-events: none; opacity: .96; }
.db-gap { display: grid; place-items: center; border: 2px dashed var(--dk-accent-line, #6f5fb8); border-radius: 12px;
  background: var(--dk-accent-soft, #ece6fb); color: var(--dk-ink-2, #46555e); font-size: 13px; font-weight: 700; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .db-lifted { transform: none; } }