/* Firstline > Booking desk. Loaded after app.css and queue.css and uses their tokens, so the accent follows the brand. */
.manage-body section.desk { gap: 18px; }
/* sections inside the desk are groups, not settings sections: no rule or padding under each */
.manage-body section.desk section { padding-block-end: 0; border-block-end: 0; }
.desk .q-head { align-items: center; }
.dk-seg { max-inline-size: 100%; }
.dk-seg > button { padding-inline: 12px; }
.dk-filters { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; min-inline-size: 0; }
.dk-picks { display: flex; flex-wrap: wrap; gap: 12px; min-inline-size: 0; }
.dk-pick { display: grid; gap: 4px; min-inline-size: 180px; }
.dk-pick > span { font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.dk-period { display: flex; align-items: center; gap: 10px; }

/* the bar of bulk actions */
.dk-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; background: var(--inverse); color: var(--on-inverse); position: sticky; inset-block-end: 12px; z-index: 5; margin-block-start: 16px; box-shadow: var(--shadow-card); }
.dk-bulk .btn:not(.primary) { background: color-mix(in oklch, var(--inverse) 82%, white); color: var(--on-inverse); }
.dk-bulk .btn:not(.primary):hover { background: color-mix(in oklch, var(--inverse) 70%, white); color: var(--on-inverse); }
.dk-bulk .btn.link { background: none; }
.dk-bulk-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dk-live { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* trips by org, then by travel week */
.dk-list { display: grid; gap: 32px; min-inline-size: 0; }
.dk-org { display: grid; gap: 14px; min-inline-size: 0; }
.dk-org-head { display: flex; align-items: center; gap: 0 10px; margin: 0; padding-block-end: 8px; border-block-end: 1px solid var(--line); font: 600 15px/1.2 var(--font); letter-spacing: 0; text-transform: none; }
.dk-org-head .swatch { margin-inline-end: 0; }
.dk-week { display: grid; min-inline-size: 0; }
.dk-week-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 8px 0; border-block-end: 1px solid var(--line); font-size: 14px; }
.dk-rows { list-style: none; margin: 0; padding: 0; }
.dk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 176px 110px 64px 150px; grid-template-areas: "chk main state cost src acts" "err err err err err err"; gap: 4px 16px; align-items: start; padding: 12px 0; border-block-end: 1px solid var(--line); }
.dk-row.on { background: var(--ground-alt); }
.dk-check { grid-area: chk; padding-block-start: 2px; }
.dk-main { grid-area: main; display: grid; gap: 3px; min-inline-size: 0; }
.dk-case { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.dk-dest { font-weight: 500; color: var(--ink-muted); }
.dk-dates { font-size: 14px; color: var(--ink-muted); overflow-wrap: anywhere; }
.dk-travs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.dk-trav.not-ready { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.dk-warn { color: var(--warn); font-weight: 500; }
.dk-fix { display: inline-flex; gap: 12px; }
.dk-fix .btn.link:disabled { color: var(--ink-muted); text-decoration: none; background: none; }
.dk-bad { color: var(--critical); font-size: 14px; font-weight: 500; }
.dk-run { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; font-weight: 500; }
.dk-run.good { color: var(--ink-muted); }
.dk-run.warn { color: var(--warn); }
.dk-run.bad { color: var(--critical); }
.dk-state { grid-area: state; display: grid; gap: 6px; justify-items: start; }
.dk-chg { font-size: 13px; font-weight: 500; }
.dk-cost { grid-area: cost; display: grid; gap: 2px; font-size: 14px; }
.dk-within { color: var(--ink-muted); font-size: 13px; font-weight: 400; }
.dk-over { color: var(--warn); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.dk-src { grid-area: src; display: grid; gap: 2px; font-size: 13px; justify-items: end; }
.dk-acts { grid-area: acts; display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.dk-row .dk-acts { flex-direction: column; align-items: stretch; }
.dk-acts .btn.link { font-size: 14px; }
.dk-filters { margin-block-end: 12px; }
.dk-row .dk-acts .btn, .dk-state .status { white-space: normal; text-align: center; }
.btn.dk-btn { background: var(--band); box-shadow: none; }
.btn.dk-btn:hover { background: var(--line); color: var(--ink); }
.dk-err { grid-area: err; }
.dk-profile { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; padding: 12px; margin-block: 6px; background: var(--ground-alt); }
.dk-profile label { display: grid; gap: 4px; font-size: 13px; }
.dk-profile .actions { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }

/* changes and receipts */
.dk-sub { display: grid; gap: 4px; min-inline-size: 0; }
.dk-item { display: grid; grid-template-columns: 140px minmax(0, 1fr) 120px 380px; grid-template-areas: "org main state acts" "err err err err"; gap: 4px 16px; align-items: start; padding: 12px 0; border-block-end: 1px solid var(--line); }
.dk-item .q-org { grid-area: org; }
.dk-item .dk-main { font-size: 14px; }
.dk-item .dk-acts { align-items: start; }
.dk-review { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.dk-review label { display: grid; gap: 2px; font-size: 12px; }
.dk-review input { inline-size: 110px; min-height: 32px; padding: 4px 8px; }
.dk-review select { inline-size: 170px; min-height: 32px; padding: 4px 8px; }

/* billing */
.dk-bill { display: grid; gap: 14px; min-inline-size: 0; }
.dk-bill-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 16px; }
.dk-bill-head .dk-org-head { flex: 1 1 260px; }
.dk-bill-head .actions { display: flex; flex-wrap: wrap; gap: 8px; }
table.dk-table { min-inline-size: 860px; font-size: 13px; }
table.dk-table .nw { white-space: nowrap; }
table.dk-table td, table.dk-table th { vertical-align: top; }
table.dk-table .dk-item-cell { min-inline-size: 200px; }
table.dk-table tr.billed td { color: var(--ink-muted); }
table.dk-table tr.dk-sub-row th, table.dk-table tr.dk-sub-row td { font-weight: 600; background: none; border-block-end: 1px solid var(--line); }
table.dk-table tfoot th, table.dk-table tfoot td { background: var(--band); }

@media (max-width: 900px) {
  .dk-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "chk main main" ". state cost" ". src src" ". acts acts" "err err err"; }
  .dk-row .dk-acts { flex-direction: row; justify-content: start; }
  .dk-src { justify-items: start; grid-auto-flow: column; justify-content: start; gap: 8px; }
  .dk-cost { justify-items: end; text-align: end; }
  .dk-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "org state" "main main" "acts acts" "err err"; }
  .dk-item .dk-acts { justify-content: start; }
}
@media (max-width: 640px) {
  .desk .q-head { display: grid; grid-template-columns: minmax(0, 1fr); }
  .dk-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
  .dk-seg > button { min-inline-size: 0; justify-content: space-between; text-align: start; white-space: normal; }
  .dk-filters, .dk-picks { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; }
  .dk-pick { min-inline-size: 0; }
  .dk-bulk { position: static; }
  .dk-bulk-acts .btn { flex: 1 1 auto; }
  .dk-acts { justify-content: start; }
  .dk-acts .btn { flex: 1 1 auto; }
  .dk-review input, .dk-review select { inline-size: 100%; }
  .dk-review label { flex: 1 1 120px; }
}