/* ===========================================================================
   SetuHaul Warehouse — the planner's desk.

   One job above all: turn requested arrivals into commitments without ever
   overbooking a dock. So the queue leads, every card shows the two checks
   that matter (weight vs dock limit, ETA vs window) as explicit ticks, and
   the Confirm button is disabled — with the reason — when a check fails.
   =========================================================================== */

@import url("/dispatch/dispatch.css");

/* The import brings the shared sign-in and chrome; below is planner-only. */

/* ---------------------------------------------------------------- queue */

.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
         gap: var(--s-3); }
.req {
  padding: var(--s-4);
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-2); border-left: 4px solid var(--hi-vis-pure);
}
.req--blocked { border-left-color: var(--stop); }
.req__top { display: flex; align-items: baseline; gap: var(--s-2); }
.req__ref { font-family: var(--font-data); font-weight: 700; }
.req__prio {
  margin-left: auto; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps);
  padding: 2px 8px; border-radius: 99px;
  background: var(--signal-wash); color: var(--signal);
}
.req__prio--CRITICAL { background: var(--stop-wash); color: var(--stop); }
.req__prio--HIGH { background: var(--hi-vis-wash); color: var(--hi-vis); }
.req__plan {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin: var(--s-3) 0;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}
.req__dock { font-size: 24px; font-weight: 700; }
.req__win { font-size: 17px; }
.req__unload { margin-left: auto; font-size: var(--t-small); color: var(--ink-3); }
.req__checks { display: flex; flex-direction: column; gap: 4px;
               padding-top: var(--s-3); border-top: 1px dashed var(--rule);
               font-size: var(--t-small); }
.chk { display: flex; gap: var(--s-2); align-items: baseline; }
.chk--ok   { color: var(--clearance); }
.chk--bad  { color: var(--stop); font-weight: 600; }
.chk--warn { color: var(--hi-vis); font-weight: 600; }
.req__actions { margin-top: var(--s-3); display: flex; gap: var(--s-2);
                align-items: center; }
.req__actions .btn--primary { min-height: 42px; padding: 0 var(--s-5); }
.req__why { font-size: var(--t-micro); color: var(--ink-3); }
.queue .empty, .day .empty { color: var(--ink-3); font-style: italic;
                             padding: var(--s-3); }

/* ------------------------------------------------------------------ day */

.day { display: flex; flex-direction: column; gap: var(--s-2); }
.lane {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-2);
}
.lane__dock {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  text-align: center; padding: var(--s-2) 0;
  background: var(--asphalt); color: #fff; border-radius: var(--r-1);
}
.lane__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.slotchip {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
  padding: 5px 10px; border-radius: var(--r-1);
  background: var(--clearance-wash); color: var(--clearance);
  border: 1px solid var(--clearance-edge);
}
.slotchip--live { background: var(--signal-wash); color: var(--signal);
                  border-color: transparent; }
/* A dock that has failed, and any promise trapped inside that window. Both
   read as STOP: the appointment cannot be kept and a human must move it. */
.slotchip--out { background: var(--stop-wash); color: var(--stop);
                 border-color: var(--stop-edge); font-weight: 700; }
.slotchip--broken { background: var(--stop-wash); color: var(--stop);
                    border-color: var(--stop-edge);
                    text-decoration: line-through;
                    text-decoration-thickness: 1px; }
.lane--blocked { background: var(--stop-wash); border-radius: var(--r-2); }
.daynote { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4);
           background: var(--stop-wash); color: var(--stop);
           border-left: 3px solid var(--stop); border-radius: var(--r-1);
           font-size: var(--t-small); font-weight: 600; }
.slotchip b { font-weight: 700; }

/* Dock-issue reporting: the planner is the facility's sensor. */
.lane__report {
  display: block; margin: 4px auto 0;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #fff9; background: none;
  border: 1px solid #fff3; border-radius: var(--r-1);
  padding: 1px 6px; cursor: pointer;
}
.lane__report:hover { color: #fff; border-color: #fff8; }
.lane__clear {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--stop);
  background: none; border: 1px solid var(--stop-edge);
  border-radius: var(--r-1); padding: 1px 8px; cursor: pointer;
  align-self: center;
}
.lane__clear:hover { background: var(--stop-wash); }
.lane__input {
  background: var(--concrete-deep); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-1);
  font-size: var(--t-small); padding: 6px 10px; min-height: 34px;
}
input.lane__input { flex: 1 1 220px; }