@charset "utf-8";
/* =========================================================================
   S Provisions — Dashboard
   Loaded *after* accounting's app.css, which this site links to directly.
   Every colour, face and control here comes from that file's tokens; this
   one only adds the shapes a board of loads needs that a ledger does not —
   a load row you can act on without opening it, a bar for doing the same
   thing to twenty loads, a timeline.
   ========================================================================= */

/* Wider than accounting, but not the whole window. Accounting holds its pages
   to 1240px, which suits a ledger and left this board cramped; letting it run
   edge to edge was tried and did not work either — on the office screen, about
   2000px across, a load's details sat at the far left and its driver and
   buttons at the far right with half a screen of nothing between them. 1600px
   keeps a row's two ends within one glance of each other.

   The header, the nav and the page all take their width from this one token,
   so changing it here moves them together and nothing in accounting moves. */
:root { --wrap: 1600px; }
@media (min-width: 900px) {
  .top__bar { padding-left: 24px; padding-right: 24px; }
  .nav      { padding-left: 16px; padding-right: 16px; }
  .wrap     { padding-left: 24px; padding-right: 24px; }
}

/* Ledes run the width of the page here. They are status lines as often as
   prose, and a measure cap leaves the action beside them stranded mid-row. */
.page-lede { max-width: none; }

/* A KPI tile that is also the way into the list behind its number. */
.kpi--link { display: block; color: inherit; }
.kpi--link:hover { color: inherit; box-shadow: inset 0 0 0 1.5px var(--rule-hard); }
.kpi--navy.kpi--link:hover { box-shadow: inset 0 0 0 1.5px var(--amber); }

/* =========================================================================
   Find and filter
   ========================================================================= */
.board-tools {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px;
}
.board-tools .input { margin-top: 0; }
.board-tools__q { flex: 1 1 260px; min-width: 0; }
.board-tools__driver { flex: 0 1 200px; }

@media (max-width: 560px) {
  .board-tools__driver { flex: 1 1 100%; }
  .board-tools .btn--navy { flex: 1 1 auto; }
}

/* =========================================================================
   A load on the board
   The same left spline the rowcards use, coloured by stage. Unlike a rowcard
   the row is not one big link: it holds a checkbox, a driver list and the
   next-step buttons, so only the load number is the way in.
   ========================================================================= */
.board-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 8px;
}
.board-head__all {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mid);
  min-height: 32px;
}

.load {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--paper);
  border-left: 4px solid var(--navy);
  padding: 13px 16px 13px 12px; margin-bottom: 8px;
}
.load.is-picked { background: #FFFBF3; box-shadow: inset 0 0 0 1.5px var(--amber-rule); }

.load__pick {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; min-height: 30px; cursor: pointer;
}
.load__pick input, .board-head__all input, .paypick input {
  width: 19px; height: 19px; accent-color: var(--navy); cursor: pointer; margin: 0;
}

.load__main { flex: 1 1 320px; min-width: 0; }
.load__top { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.load__ref {
  font-family: var(--display); font-weight: 600; font-size: 18px;
  letter-spacing: .03em; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule-hard);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.load__ref:hover { color: var(--navy-lift); text-decoration-color: var(--amber); }
.load__customer { font-size: 14.5px; font-weight: 600; color: var(--ink-mid); }

.load__route {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
  font-size: 15px; font-weight: 600; margin-top: 5px;
}
.load__arrow { color: var(--amber-ink); font-weight: 700; }
.load__cars { font-size: 13.5px; color: var(--ink-mid); margin-top: 2px; overflow-wrap: anywhere; }

.load__facts {
  display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center;
  font-size: 13px; color: var(--ink-mid); margin-top: 6px;
}
.load__flag {
  margin-top: 7px; padding: 6px 10px;
  background: #FDF4F3; border-left: 3px solid var(--red);
  font-size: 13.5px; font-weight: 500; color: #8A2F29;
}

/* What a finished load is still waiting on, said in the colour of the thing:
   an outline rather than a filled tag, so the stage stays the loudest mark
   on the row. */
.chip {
  display: inline-block;
  font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border: 1.5px solid currentColor;
  background: var(--paper);
}

.load__side {
  flex: 0 0 230px; display: grid; gap: 7px; justify-items: stretch;
}
.load__price {
  font-family: var(--display); font-weight: 600; font-size: 20px;
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1;
}
.load__price .u-soft { font-family: var(--label); font-size: 12px; font-weight: 600;
                       letter-spacing: .12em; text-transform: uppercase; }
.load__assign { display: flex; gap: 6px; }
.load__driver {
  flex: 1 1 auto; min-width: 0; width: 100%;
  padding: 8px 9px; min-height: 40px;
  border: 1.5px solid var(--rule-firm); background: var(--paper);
  font-size: 15px; font-weight: 600;
}
.load__driver:focus { border-color: var(--amber); outline: none; }
/* Nobody has it yet: the one control on the row that is asking for something. */
.load__driver.is-empty { border-color: var(--amber-rule); background: #FFFBF3; color: var(--amber-ink); }
.load__driver-fixed { text-align: right; font-size: 15px; font-weight: 600; }
/* The list submits itself when JavaScript is running; the button is for when
   it is not. */
.js .load__set { display: none; }
.load__next { display: flex; gap: 6px; }
.load__next .btn { flex: 1 1 0; padding-left: 8px; padding-right: 8px; }

@media (max-width: 720px) {
  .load { flex-wrap: wrap; }
  .load__main { flex: 1 1 0; }
  .load__side {
    flex: 1 1 100%; grid-template-columns: 1fr; margin-left: 42px;
    border-top: 1px solid var(--rule); padding-top: 9px;
  }
  .load__price { text-align: left; }
  .load__driver-fixed { text-align: left; }
}

/* =========================================================================
   Doing one thing to many loads
   Pinned to the foot of the window once something is ticked, so it is under
   the thumb whichever row was ticked last.
   ========================================================================= */
.bulkbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--navy-deep); color: #fff;
  padding: 10px 14px; margin-top: 12px;
}
.js .bulkbar {
  position: fixed; left: 50%; bottom: 14px; transform: translate(-50%, 160%);
  width: calc(100vw - 24px); max-width: 760px; z-index: 60; margin: 0;
  box-shadow: 0 12px 34px rgba(10,23,48,.4);
  border-top: 3px solid var(--amber);
  transition: transform .16s ease-out;
}
.js .bulkbar.is-up { transform: translate(-50%, 0); }
.bulkbar__count {
  font-family: var(--label); font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; margin-right: 4px;
}
.bulkbar__count strong { font-family: var(--display); font-size: 18px; color: var(--amber); letter-spacing: 0; }
.bulkbar__pick {
  min-height: 38px; padding: 6px 9px; border: 0;
  background: #fff; color: var(--ink); font-size: 15px;
}
.bulkbar__sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.22); margin: 0 4px; }
.bulkbar .bulkbar__btn { border-color: rgba(255,255,255,.4); color: #fff; }
.bulkbar .bulkbar__btn:hover { border-color: var(--amber); color: #fff; }

@media (max-width: 560px) {
  .bulkbar__sep { display: none; }
  .bulkbar__pick { flex: 1 1 130px; }
  .bulkbar .btn { flex: 1 1 auto; }
}

/* =========================================================================
   One load, in full
   ========================================================================= */
.loadhead {
  background: var(--navy-deep); color: #fff; padding: 20px 22px;
  display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
}
.loadhead__ref {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: .03em; line-height: 1; overflow-wrap: anywhere;
}
.loadhead__sub { font-size: 14.5px; color: rgba(255,255,255,.72); margin-top: 7px; }
.loadhead__price {
  font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums; text-align: right;
}
.loadhead .u-label { color: rgba(255,255,255,.55); }

/* The four things that move a load along, side by side. Each is its own small
   form, so changing one never resubmits the others. */
.steps4 {
  display: grid; gap: 1px; background: var(--rule-mid);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.step4 { background: var(--paper); padding: 14px 16px; }
.step4.is-done { background: #F3F8F5; }
.step4.is-next { background: #FFFBF3; }
.step4__label {
  font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; gap: 7px; align-items: center;
}
.step4.is-done .step4__label { color: var(--green); }
.step4.is-next .step4__label { color: var(--amber-ink); }
.step4__value { font-size: 16px; font-weight: 600; margin-top: 4px; min-height: 24px; }
.step4__form { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.step4__form .input { margin-top: 0; flex: 1 1 130px; min-width: 0; min-height: 40px; padding: 8px 9px; font-size: 15px; }
.step4__form .btn { flex: none; }
.step4__undo {
  background: none; border: 0; padding: 0; margin-top: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; text-decoration-style: dotted;
}
.step4__undo:hover { color: var(--red); }

.twocol { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.place__name {
  font-family: var(--display); font-weight: 600; font-size: 18px;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; margin-top: 3px;
}
.place__line { font-size: 14.5px; color: var(--ink-mid); line-height: 1.5; }
.place__note {
  margin-top: 9px; padding-left: 11px; border-left: 2px solid var(--amber-rule);
  font-size: 13.5px; color: var(--ink-mid); line-height: 1.5;
}

/* Label–value rows: what a thing is, then what it says. */
.kv { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 0; font-size: 14.5px; }
.kv > dt, .kv > dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.kv > dt {
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); padding-top: 11px;
}
.kv > dd { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.kv > dt:last-of-type, .kv > dd:last-of-type { border-bottom: 0; }

.timeline__row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px;
}
.timeline__row:last-child { border-bottom: 0; }
.timeline__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 7px; background: var(--navy); }
.timeline__dot.is-auto { background: var(--amber); }
.timeline__text { flex: 1 1 200px; min-width: 0; }
.timeline__when {
  flex: none; text-align: right;
  font-family: var(--label); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}

.more > summary {
  cursor: pointer; list-style: none;
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
  padding: 8px 0;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: '＋ '; }
.more[open] > summary::before { content: '－ '; }
.more > summary:hover { color: var(--navy); }

/* Field grid for the add and edit forms: twelve columns, explicit spans, so
   a ZIP box is not as wide as a street. Read down on a phone. */
.fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 14px; }
.fields > * { grid-column: span 12; }
@media (min-width: 700px) {
  .fields > .f-2 { grid-column: span 2; }
  .fields > .f-3 { grid-column: span 3; }
  .fields > .f-4 { grid-column: span 4; }
  .fields > .f-5 { grid-column: span 5; }
  .fields > .f-6 { grid-column: span 6; }
  .fields > .f-8 { grid-column: span 8; }
}
.fields__head {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: .075em; text-transform: uppercase;
  padding-top: 8px; border-top: 1px solid var(--rule); margin-top: 4px;
}
.fields__head:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* =========================================================================
   Pay
   ========================================================================= */
.paygroup { background: var(--paper); border-left: 4px solid var(--green); margin-bottom: 12px; }
.paygroup__head {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 15px 18px;
}
.paygroup__who { flex: 1 1 220px; min-width: 0; }
.paygroup__name {
  font-family: var(--display); font-weight: 600; font-size: 20px;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.15;
}
.paygroup__sub { font-size: 13.5px; color: var(--ink-mid); margin-top: 2px; }
.paygroup__total {
  font-family: var(--display); font-weight: 600; font-size: 26px;
  font-variant-numeric: tabular-nums; flex: none;
}
.paygroup__body { border-top: 1px solid var(--rule); }
.paygroup__foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--rule); background: var(--paper-alt);
}

.paypick {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 18px; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.paypick:last-child { border-bottom: 0; }
.paypick:hover { background: var(--paper-alt); }
.paypick.is-off { cursor: default; background: var(--paper-alt); }
.paypick input { margin-top: 3px; flex: none; }
.paypick__main { flex: 1 1 220px; min-width: 0; font-size: 14.5px; }
.paypick__sub { font-size: 13px; color: var(--ink-mid); margin-top: 1px; }
.paypick__amt {
  flex: none; text-align: right; min-width: 92px;
  font-family: var(--display); font-weight: 500; font-size: 17px; font-variant-numeric: tabular-nums;
}
.paypick__basis { font-family: var(--body); font-size: 12px; color: var(--ink-soft); font-weight: 400; }

/* =========================================================================
   Drivers
   ========================================================================= */
.sentence {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px;
  font-size: 16px; line-height: 2.1;
}
.sentence__word { color: var(--ink-mid); }
.sentence__pick {
  padding: 7px 10px; border: 1.5px solid var(--rule-firm); background: var(--paper);
  font-size: 16px; font-weight: 600; font-family: inherit; color: var(--ink);
  min-height: 40px; max-width: 100%;
}
.sentence__pick:focus { border-color: var(--amber); outline: none; }
.sentence__pick--num { width: 96px; text-align: center; font-family: var(--display); }

/* =========================================================================
   Print — a pay statement alone
   ========================================================================= */
@media print {
  .bulkbar, .board-tools, .board-head, .load__pick, .load__side { display: none !important; }
}

/* A table wider than a phone scrolls inside its own box, not the page. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }