/* Collections overview (/csm/overview/) — layout A "collector cockpit",
   2026-09-26. Loaded after static/sales/dashboard.css (shared so-* rules). */
.dco-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dco-seg a { padding: 4px 10px; border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-decoration: none; }
.dco-seg a.is-on { background: var(--brand); color: var(--on-brand, #fff); }
.dco-alert { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-fg); font-size: var(--text-sm); }
.dco-alert a { margin-inline-start: auto; color: inherit; font-weight: 600; white-space: nowrap; }

/* Aging colours: not due → oldest. */
.dco-age-0 { background: var(--ok); } .dco-age-1 { background: #8aa83a; } .dco-age-2 { background: var(--chart-cat-4, #eda100); }
.dco-age-3 { background: var(--chart-cat-2, #eb6834); } .dco-age-4 { background: var(--crit); } .dco-age-5 { background: #6b1d17; }

.dco-aging { display: flex; gap: 2px; height: 36px; border-radius: var(--radius-sm); overflow: hidden; }
.dco-aging__seg { flex: 1 1 0; min-width: 64px; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space-2); color: #fff; text-decoration: none; font-size: var(--text-2xs); line-height: 1.25; white-space: nowrap; overflow: hidden; }
.dco-aging__seg b { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.dco-aging__seg:hover { filter: brightness(1.1); }

.dco-main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3); }
.dco-main > .chart-panel, .dco-side { min-height: 0; min-width: 0; }
.dco-work { overflow: hidden; }
.dco-work .so-tabs { flex: none; margin: calc(-1 * var(--space-1)) 0 var(--space-1); }
.dco-work .so-tab { background: none; border-top: 0; border-inline-start: 0; border-inline-end: 0; cursor: pointer; font-family: inherit; }
.dco-panels { flex: 1; min-height: 0; overflow: auto; }
.dco-list[hidden] { display: none; }
.dco-row { display: flex; align-items: center; gap: var(--space-2); padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); color: inherit; text-decoration: none; }
.dco-row:last-child { border-bottom: none; }
.dco-row:hover b { color: var(--brand); }
.dco-ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand-strong); font-weight: 700; }
.dco-ico--crit { background: var(--crit-bg); color: var(--crit-fg); }
.dco-ico--warn { background: var(--warn-bg); color: var(--warn-fg); }
.dco-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dco-row__main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dco-row__main span { font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dco-when { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.dco-when--crit { color: var(--crit-fg); font-weight: 600; }
.dco-when--warn { color: var(--warn-fg); font-weight: 600; }
.dco-prio { font-size: var(--text-2xs); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); }
.dco-prio--urgent { background: var(--crit-bg); color: var(--crit-fg); }
.dco-prio--high { background: var(--warn-bg); color: var(--warn-fg); }
.dco-more { flex: none; display: inline-block; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--brand); text-decoration: none; }

.dco-side { display: flex; flex-direction: column; gap: var(--space-3); overflow: auto; }
.dco-debt { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 90px; gap: var(--space-2); align-items: center; padding: 4px 0; font-size: var(--text-sm); color: inherit; text-decoration: none; }
.dco-debt span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dco-debt:hover span:first-child { color: var(--brand); }
.dco-debt__t { display: flex; height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.dco-debt__t i { display: block; height: 100%; }
.dco-debt b { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dco-trend { flex: 1; min-height: 150px; }
.dco-cols { flex: 1; min-height: 80px; display: flex; gap: var(--space-2); align-items: stretch; }
.dco-cols div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; font-size: var(--text-2xs); color: var(--text-subtle); }
.dco-cols i { display: block; width: 100%; min-height: 2px; background: var(--brand); border-radius: 3px 3px 0 0; }
.dco-cols b { color: var(--text); font-variant-numeric: tabular-nums; }
.dco-cols span { text-transform: capitalize; }

@media (min-width: 1101px) { .dco-main { height: var(--dco-main-h, auto); } }
@media (max-width: 1100px) { .dco-main { grid-template-columns: minmax(0, 1fr); } .dco-panels { max-height: 480px; } .dco-aging { height: auto; flex-wrap: wrap; } }
@media (max-width: 720px) { .dco-row { flex-wrap: wrap; } .dco-row__main { flex-basis: calc(100% - 36px); } }