/* ============================================================================
   Customer portal. Layered on site.css and reusing its tokens, so the portal reads
   as the same company rather than a bolted-on app. Dark theme only, matching the
   site; the light theme was reviewed and rejected.
   ========================================================================== */

.p-wrap { max-width: 1200px; margin: 0 auto; padding: 40px var(--gut) 72px; }
.p-wrap--narrow { max-width: 460px; }

.p-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline;
  justify-content: space-between; margin-bottom: 28px; }
.p-head h1 { font-size: 30px; margin: 0; }
.p-head .p-sub { font-size: 14px; color: var(--dim); margin: 6px 0 0; }

.p-who { font-size: 13px; color: var(--dim); text-align: right; line-height: 1.7; }
.p-who strong { color: #fff; display: block; font-size: 15px; }
.p-who .p-tier { display: inline-block; margin-top: 4px; font-family: var(--font-head);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line-strong); padding: 3px 8px; color: #fff; }
.p-who button { margin-top: 10px; }

/* ------------------------------------------------------------------ sign-in */
.p-card { background: var(--surface); border: 1px solid var(--line); padding: 28px; }
.p-card h1 { font-size: 24px; margin: 0 0 6px; }
.p-card .p-lede { font-size: 14px; color: var(--dim); margin: 0 0 22px; line-height: 1.6; }

.p-field { margin-bottom: 16px; }
.p-field label { display: block; font-family: var(--font-head); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
.p-field input {
  width: 100%; background: var(--bg); border: 1px solid var(--line-strong);
  color: #fff; font-family: var(--font-body); font-size: 16px; padding: 12px 14px;
  border-radius: var(--radius);
}
.p-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.p-hint { font-size: 12px; color: var(--dim); margin: 6px 0 0; line-height: 1.5; }

.p-msg { padding: 12px 14px; border-left: 3px solid var(--line-strong);
  background: var(--surface-2); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.p-msg--err { border-left-color: var(--accent); color: #fff; }
.p-msg--ok { border-left-color: #3fb950; }
.p-msg[hidden] { display: none; }

.p-alt { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--dim); line-height: 1.7; }
.p-alt a, .p-linkish {
  color: var(--accent-text); background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; text-decoration: underline;
}

/* -------------------------------------------------------------------- stats */
.p-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-bottom: 28px; }
@media (min-width: 700px) { .p-stats { grid-template-columns: repeat(4, 1fr); } }
.p-stat { background: var(--surface); padding: 18px 20px; }
.p-stat .k { font-family: var(--font-head); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); }
.p-stat .v { font-family: var(--font-head); font-size: 28px; margin-top: 6px; }
.p-stat--alert .v { color: var(--accent-text); }
/* The "updated" tile holds a date and a clock time rather than a count. At 28px that
   wrapped onto three lines at 375px and read as broken. Its own size, and it never wraps
   mid-value. */
.p-stat--when .v { font-size: 17px; line-height: 1.35; letter-spacing: .01em; }

/* -------------------------------------------------------------------- tabs */
.p-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px;
  flex-wrap: wrap; }
.p-tab { background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--dim); font-family: var(--font-head); font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; cursor: pointer; }
.p-tab:hover { color: #fff; }
.p-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------- search */
.p-search { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.p-search input[type="text"], .p-search input[type="date"], .p-search select {
  background: var(--bg); border: 1px solid var(--line-strong); color: #fff;
  font-family: var(--font-body); font-size: 15px; padding: 10px 12px; border-radius: var(--radius);
}
.p-search input[type="text"] { flex: 1 1 240px; min-width: 0; }

/* -------------------------------------------------------------------- table */
.p-tablewrap { border: 1px solid var(--line); overflow-x: auto; }
table.p-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }

/* On a phone the load table would otherwise need sideways scrolling to reach the button
   that opens a load, which is the one thing every row is for. Below 640px the reference,
   delivered date and terminal drop out -- all three are on the load's own page -- leaving
   container (with the last free day beneath it) and status, which fit without scrolling. */
/* Desktop keeps the last free day in its own column, so the phone-only copy is hidden. */
.p-inline-lfd { display: none; }

@media (max-width: 640px) {
  table.p-table { min-width: 0; font-size: 13px; }
  /* Reference, last free day, delivered date and terminal all appear on the load's own
     page; the last free day also rides along under the container number below. */
  table.p-table th:nth-child(2), table.p-table td:nth-child(2),
  table.p-table th:nth-child(4), table.p-table td:nth-child(4),
  table.p-table th:nth-child(5), table.p-table td:nth-child(5),
  table.p-table th:nth-child(6), table.p-table td:nth-child(6) { display: none; }
  .p-inline-lfd { display: block; font-family: var(--font-body); font-size: 11px;
    color: var(--dim); margin-top: 5px; letter-spacing: .04em; }
  table.p-table th, table.p-table td { padding: 11px 10px; }
  /* Even with three columns the Open button pushed off the right edge, which hid the one
     control every row exists for. The whole row is tappable (and Enter-activated), so on a
     phone the button collapses to a chevron that always fits. */
  table.p-table td:last-child .btn { display: none; }
  table.p-table td:last-child::after { content: "\203A"; font-size: 22px; color: var(--dim); }
  table.p-table th:last-child, table.p-table td:last-child {
    width: 1%; padding-left: 0; padding-right: 12px; text-align: right;
  }
}
table.p-table th {
  background: var(--surface-2); text-align: left; font-family: var(--font-head);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.p-table td { padding: 13px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top; }
table.p-table tr:last-child td { border-bottom: 0; }
table.p-table tbody tr:hover { background: var(--surface-2); }
.p-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .02em; }
.p-strong { font-weight: 600; }
.p-muted { color: var(--dim); }
.p-nowrap { white-space: nowrap; }

/* status pills */
.p-pill { display: inline-block; font-family: var(--font-head); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px;
  border: 1px solid var(--line-strong); }
.p-pill--hold { border-color: var(--accent); color: var(--accent-text); }
.p-pill--open { border-color: #3fb950; color: #7ee787; }
.p-pill--closed { color: var(--dim); }
.p-pill--transload { border-color: #6e9be0; color: #a6c8ff; }

.p-empty { padding: 34px 20px; text-align: center; color: var(--dim); font-size: 15px;
  line-height: 1.7; background: var(--surface); border: 1px solid var(--line); }

.p-sechead { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 34px 0 14px; flex-wrap: wrap; }
.p-sechead h2 { font-size: 19px; margin: 0; }
.p-sechead .p-note { font-size: 13px; color: var(--dim); }

/* ------------------------------------------------------------------- detail */
.p-back { background: none; border: 0; color: var(--accent-text); font: inherit;
  cursor: pointer; padding: 0; margin-bottom: 18px; text-decoration: underline; }
.p-detail { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .p-detail { grid-template-columns: 1.4fr 1fr; } }
.p-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.p-dl > div { padding: 14px 16px; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line); }
.p-dl > div:nth-child(2n) { border-right: 0; }
.p-dl dt { font-family: var(--font-head); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 5px; }
.p-dl dd { margin: 0; font-size: 15px; }

.p-doclist { border: 1px solid var(--line); }
.p-doc { display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); }
.p-doc:last-child { border-bottom: 0; }
.p-doc .p-docname { font-weight: 600; font-size: 15px; }
.p-doc .p-docmeta { font-size: 12px; color: var(--dim); margin-top: 4px; line-height: 1.5; }
.p-doc .p-tag { display: inline-block; font-family: var(--font-head); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line-strong); padding: 2px 6px; margin-top: 6px; }
.p-doc--all { background: var(--surface-2); }

.p-spin { color: var(--dim); font-size: 15px; padding: 30px 0; }

/* -------------------------------------------------------------------- admin */
.p-admin-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .p-admin-grid { grid-template-columns: 1fr 1fr; } }
.p-box { background: var(--surface); border: 1px solid var(--line); padding: 22px; }
.p-box h2 { font-size: 17px; margin: 0 0 4px; }
.p-box .p-boxnote { font-size: 13px; color: var(--dim); margin: 0 0 18px; line-height: 1.6; }
.p-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.p-row > .p-field { flex: 1 1 180px; margin-bottom: 12px; }
.p-field select {
  width: 100%; background: var(--bg); border: 1px solid var(--line-strong); color: #fff;
  font-family: var(--font-body); font-size: 16px; padding: 12px 14px; border-radius: var(--radius);
}
.p-btn-sm { font-size: 12px; padding: 7px 12px; letter-spacing: .1em; }
.p-warn { border-left: 3px solid #d29922; background: var(--surface-2);
  padding: 12px 14px; font-size: 13px; line-height: 1.6; margin-bottom: 18px; }