/* ============================================================
   BIDII CLEANERS — job & customer dashboard
   Loaded on top of bidii.css and office.css. Only the pieces
   that are specific to this screen live here; the shell, the
   tables, the badges and the drawer are shared.
   ============================================================ */

.db-split { display: grid; gap: 1.2rem; align-items: start; }
/* The jobs table carries seven columns. Below 1360px the side column
   squeezed it until job numbers wrapped and the status pill fell off the
   edge, so below that the side column drops underneath instead. */
@media (min-width: 1360px) { .db-split { grid-template-columns: minmax(0,1fr) 330px; gap: 1.4rem; } }

/* A job number and a date are each one token - wrapping them mid-way makes
   the table unreadable. If space still runs out the wrapper scrolls. */
.of-table td.db-no, .of-table td.db-when { white-space: nowrap; }
.of-table td.db-when .sub { white-space: normal; }

/* ---------- Today's round ---------- */
.db-today { list-style: none; margin: 0; padding: 0; }
.db-today li {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--b-line);
}
.db-today li:last-child { border-bottom: 0; }
.db-time {
  flex-shrink: 0; width: 52px; font-weight: 800; font-size: .92rem;
  font-variant-numeric: tabular-nums; color: var(--b-blue);
}
.db-today .body { flex: 1; min-width: 0; }
.db-today .who { font-weight: 700; font-size: .94rem; }
.db-today .what { font-size: .84rem; color: var(--b-slate); }
.db-today .right { text-align: right; flex-shrink: 0; }
.db-today .amt { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .92rem; }

.db-crew {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 800; color: #fff;
  border-radius: var(--b-pill); padding: .12rem .6rem;
  white-space: nowrap;
}

/* ---------- Crew load ---------- */
.db-load { display: grid; gap: .85rem; }
.db-load-row .top {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .86rem; margin-bottom: .3rem;
}
.db-load-row .top b { font-weight: 800; }
.db-load-row .top .n { color: var(--b-slate); font-variant-numeric: tabular-nums; }
.db-bar { height: 8px; border-radius: 4px; background: var(--b-line); overflow: hidden; }
.db-bar span { display: block; height: 100%; border-radius: 4px; }

/* ---------- Source mix ---------- */
.db-mix { display: grid; gap: .6rem; }
.db-mix-row { display: flex; align-items: center; gap: .7rem; font-size: .86rem; }
.db-mix-row .lab { flex: 1; }
.db-mix-row .n { font-weight: 800; font-variant-numeric: tabular-nums; }
.db-mix-track { width: 86px; height: 6px; border-radius: 3px; background: var(--b-line); overflow: hidden; flex-shrink: 0; }
.db-mix-track span { display: block; height: 100%; background: var(--b-blue); }

/* ---------- Row that can be opened ---------- */
.of-table tbody tr.db-row { cursor: pointer; }
.of-table tbody tr.db-row:focus-visible { outline: 3px solid var(--b-blue); outline-offset: -3px; }

.db-notes {
  background: var(--b-wash); border-radius: var(--b-r-sm);
  padding: .8rem .95rem; font-size: .88rem; color: var(--b-ink); line-height: 1.6;
}
.db-sub-h {
  font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--b-slate);
  margin: 1.4rem 0 .6rem;
}
.db-drawer-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.db-drawer-actions .of-btn { flex: 1 1 auto; }