/*!
 * Dispatch Board
 * Copyright (c) 2026 Virtuoso Technologies Ltd. All rights reserved.
 *
 * Proprietary. Unauthorized copying, duplicating, modifying or
 * distributing this file, in whole or in part, by any means, without
 * written permission from Virtuoso Technologies Ltd. is prohibited and is
 * a violation of copyright law. See the LICENSE file.
 */
/* Dispatch Board — money checks and the Customer service week grid: Billing › Money check (js/billing-money.js), the per
   diem "whose fault" day list (js/billing-ops.js), Equipment › Yard (js/yard.js) and the Customer service grid (js/cs.js).
   Scoped to .money-* / .pd-* / .yard-* / .cs-* and built from the app's tokens, so light and dark themes and the signature
   looks follow along. */

.money-list { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
.money-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.money-head { display: flex; align-items: center; gap: 8px; }
.money-head strong { font-size: var(--fs-md); }
.money-amt { font-family: "IBM Plex Mono", monospace; font-size: 18px; font-weight: 700; color: var(--status-critical); }
.money-amt.zero { color: var(--ink-faint); }
.money-top { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.money-top li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-muted); min-width: 0; }
.money-top li span:first-child { overflow-wrap: anywhere; min-width: 0; }
.money-top li .mono { flex: none; color: var(--ink); }
.money-todo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.money-email { padding: 0 16px 16px; max-width: 720px; }
.money-email .check-inline { display: flex; margin: 4px 0; }

/* Per diem: the day-by-day reasoning behind "whose fault". */
.pd-days summary { cursor: pointer; font-size: 12px; color: var(--ink-muted); margin: 0 0 6px; }
.pd-days .history-list li { align-items: center; }
.pd-days .status-pill { flex: none; }

/* Equipment › Yard */
.yard-spot { width: 88px; border: 1px solid var(--border-strong); border-radius: min(var(--ctl-radius), 10px); padding: 5px 8px; font: inherit; font-size: 13px; background: var(--surface-2); color: var(--ink); }
.yard-spot:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.yard-days.over { color: var(--status-critical); font-weight: 700; }
.yard-days.soon { color: var(--status-risk); font-weight: 700; }

/* Customer service › week grid (js/cs.js): rows of what is due, columns Late + the next 7 days, a count per cell. */
.cs-grid-wrap { padding: 0 16px 12px; overflow-x: auto; }
.cs-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 13px; }
.cs-grid th, .cs-grid td { padding: 5px 6px; text-align: center; border-bottom: 1px solid var(--border); }
.cs-grid tbody tr:last-child th, .cs-grid tbody tr:last-child td { border-bottom: 0; }
.cs-grid thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.cs-grid thead th.late { color: var(--status-critical); }
.cs-grid tbody th { text-align: left; font-weight: 600; color: var(--ink); white-space: nowrap; cursor: help; }
.cs-cell { display: inline-block; min-width: 34px; padding: 3px 8px; border-radius: 999px; font: inherit; font-weight: 700; font-family: "IBM Plex Mono", monospace;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.cs-cell:hover { border-color: var(--accent); }
.cs-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cs-cell.warn { background: var(--status-risk-soft); color: var(--status-risk); border-color: transparent; }
.cs-cell.critical { background: var(--status-critical-soft); color: var(--status-critical); border-color: transparent; }
.cs-cell.on { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.cs-cell.zero { border: 0; background: none; color: var(--ink-faint); cursor: default; min-width: 0; }
.cs-cell-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 0 16px 10px; padding: 8px 12px; border-radius: 8px;
  background: var(--status-transit-soft); color: var(--ink); font-size: 13px; }

@media (max-width: 640px) {
  .cs-grid-wrap { padding: 0 10px 10px; }
  .cs-cell-bar { margin: 0 10px 10px; }
  .money-list, .money-email { padding: 0 10px; }
  .money-head { flex-wrap: wrap; }
}