/* Job Site Run design system — "night dispatch" industrial aesthetic
   Display: Barlow Condensed · Body: Barlow · Data/tickets: IBM Plex Mono */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ink: #15181d;        /* asphalt */
  --panel: #1d2127;
  --panel-2: #232830;
  --line: #313845;
  --concrete: #e8e9e5;   /* light page bg */
  --paper: #fbfaf6;      /* rate ticket */
  --orange: #ff5a1f;     /* safety orange */
  --orange-dim: #c4400f;
  --amber: #ffb020;
  --green: #3ecf6e;
  --txt: #e8eaee;
  --txt-dim: #9aa3b2;
  --txt-ink: #23262b;
  --radius: 6px;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: 'Barlow', system-ui, sans-serif;
  background: var(--ink); color: var(--txt);
  min-height: 100vh; font-size: 15px; line-height: 1.45;
}
body.light { background: var(--concrete); color: var(--txt-ink); }

.disp { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* top band */
.band {
  background: var(--ink); color: var(--txt);
  border-bottom: 3px solid var(--orange);
  padding: 14px 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.band .logo { font-family: 'Barlow Condensed'; font-weight: 700; font-size: 26px;
  text-transform: uppercase; letter-spacing: .06em; }
.band .logo span { color: var(--orange); }
.band .tag { color: var(--txt-dim); font-size: 13px; }
.band nav { margin-left: auto; display: flex; gap: 16px; }
.band nav a { color: var(--txt-dim); text-decoration: none; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; font-family: 'Barlow Condensed'; font-weight: 600; }
.band nav a:hover, .band nav a.on { color: var(--orange); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 26px 20px 60px; }

h1.page { font-family: 'Barlow Condensed'; font-weight: 700; font-size: 34px;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.sub { color: var(--txt-dim); margin-bottom: 24px; }
body.light .sub { color: #5b6068; }

/* forms */
label { display: block; font-family: 'Barlow Condensed'; font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; margin: 14px 0 5px; color: var(--txt-dim); }
body.light label { color: #4d525a; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--txt);
  font: inherit;
}
body.light input, body.light select, body.light textarea {
  background: #fff; color: var(--txt-ink); border-color: #c9ccc8;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 1px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }

button.cta {
  margin-top: 22px; width: 100%; padding: 14px; border: 0; border-radius: var(--radius);
  background: var(--orange); color: #1a0d05; cursor: pointer;
  font-family: 'Barlow Condensed'; font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: .08em;
}
button.cta:hover { background: #ff6e3a; }
button.cta:disabled { background: #6b7280; cursor: not-allowed; }
button.ghost {
  padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: transparent; color: var(--txt); cursor: pointer;
  font-family: 'Barlow Condensed'; font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: .06em;
}
button.ghost:hover { border-color: var(--orange); color: var(--orange); }

/* rate ticket — the signature element */
.ticket {
  background: var(--paper); color: var(--txt-ink);
  border-radius: 4px; padding: 20px 22px; position: relative;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background-image: radial-gradient(circle at 6px 0, transparent 5px, var(--paper) 5px);
  background-size: 16px 8px;
}
.ticket::before { top: -7px; transform: rotate(180deg); }
.ticket::after { bottom: -7px; }
.ticket h3 { font-family: 'Barlow Condensed'; font-size: 18px; letter-spacing: .1em;
  text-transform: uppercase; border-bottom: 2px solid var(--txt-ink); padding-bottom: 8px; margin-bottom: 10px; }
.ticket .row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.ticket .row.dim { color: #7a7d76; }
.ticket .rule { border-top: 1px dashed #b9bcb2; margin: 8px 0; }
.ticket .total { font-size: 19px; font-weight: 600; }
.ticket .stamp { display: inline-block; margin-top: 12px; padding: 3px 10px;
  border: 2px solid var(--orange-dim); color: var(--orange-dim); border-radius: 3px;
  font-family: 'Barlow Condensed'; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; transform: rotate(-2deg); }

/* cards / board */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 14px; }
.card .route { font-family: 'Barlow Condensed'; font-weight: 600; font-size: 18px;
  letter-spacing: .02em; }
.card .route .arrow { color: var(--orange); padding: 0 6px; }
.meta { color: var(--txt-dim); font-size: 13px; margin-top: 4px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 11px;
  font-family: 'Barlow Condensed'; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pill.booked { background: #3a2d12; color: var(--amber); }
.pill.assigned { background: #14304a; color: #6fb6ff; }
.pill.enroute_pickup, .pill.loaded { background: #3a1c0c; color: var(--orange); }
.pill.delivered { background: #11321d; color: var(--green); }
.money { font-family: 'IBM Plex Mono'; font-weight: 600; }
.money.big { font-size: 20px; color: var(--green); }

.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.col h2 { font-family: 'Barlow Condensed'; font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-dim); border-bottom: 2px solid var(--line);
  padding-bottom: 6px; margin-bottom: 12px; }
.col h2 b { color: var(--orange); }

.statbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 26px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: var(--radius); padding: 12px 14px; }
.stat .k { font-family: 'Barlow Condensed'; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-dim); }
.stat .v { font-family: 'IBM Plex Mono'; font-size: 22px; font-weight: 600; margin-top: 2px; }

.empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 26px;
  text-align: center; color: var(--txt-dim); font-size: 13px; }

@media (max-width: 900px) {
  .board { grid-template-columns: 1fr 1fr; }
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* address autocomplete dropdown */
.ac-list { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 6px 6px;
  max-height: 220px; overflow-y: auto; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
body.light .ac-list { background: #fff; border-color: #c9ccc8; }
.ac-item { padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--txt); }
body.light .ac-item { color: var(--txt-ink); }
.ac-item:hover, .ac-item.on { background: rgba(255,90,31,.12); color: var(--orange); }