/* /Components/Pages/Account/Register.razor.rz.scp.css */
/* Address fields are stored upper case (Register.aspx's "uppercase" class): show them that way
   while typing. ::deep because the <input> is rendered by the InputText child component. */
[b-e0nxzhe3sl] .register-upper { text-transform: uppercase; }
[b-e0nxzhe3sl] .register-upper::placeholder { text-transform: none; }
/* /Components/Pages/Account/Terms.razor.rz.scp.css */
/* Long legal text: a comfortable measure, and room between the clauses. The lettered points
   carry their own "(a)" markers, so the list bullets are dropped. */
.terms h3[b-l9sv54r6m7] { margin-top: var(--m-s5); color: var(--m-navy); }
.terms ul[b-l9sv54r6m7] { list-style: none; margin: 0 0 var(--m-s3); padding-left: var(--m-s4); }
.terms li[b-l9sv54r6m7] { margin-bottom: var(--m-s2); }
.terms li > ul[b-l9sv54r6m7] { margin-top: var(--m-s2); }
.terms p[b-l9sv54r6m7], .terms li[b-l9sv54r6m7] { font-size: .95rem; }
/* /Components/Pages/Addresses/AddressBook.razor.rz.scp.css */
/* Long e-mail addresses must not push a table row (or a phone card) wider than the screen. */
.cell-break[b-lrlglwbol0] { overflow-wrap: anywhere; }
/* /Components/Pages/Collections/BookCollection.razor.rz.scp.css */
/* Book a Collection — only what the design system does not have: the two-column page and the
   date buttons. Everything else is member.css. */

.bc-layout[b-wzgdh73dv2] { display: grid; gap: var(--m-s4); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 64rem) {
    .bc-layout[b-wzgdh73dv2] { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

.bc-notes[b-wzgdh73dv2] { white-space: pre-line; overflow-wrap: anywhere; }

.bc-profile[b-wzgdh73dv2] { line-height: 1.6; }
.bc-break[b-wzgdh73dv2] { overflow-wrap: anywhere; }

/* The dates a collection can be booked for: one large radio button each. */
.bc-dates[b-wzgdh73dv2] { border: 0; margin: 0; padding: 0; min-width: 0; }
.bc-dates legend[b-wzgdh73dv2] { padding: 0; margin-bottom: var(--m-s1); }

.bc-date-list[b-wzgdh73dv2] { display: grid; gap: var(--m-s2); grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }

.bc-date[b-wzgdh73dv2] {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 3.75rem; padding: var(--m-s2);
    background: var(--m-surface); border: 1px solid var(--m-line-strong); border-radius: var(--m-radius-sm);
    cursor: pointer; text-align: center;
}
.bc-date input[b-wzgdh73dv2] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bc-date:hover[b-wzgdh73dv2] { border-color: var(--m-navy); }
.bc-date:focus-within[b-wzgdh73dv2] { box-shadow: var(--m-focus); }
.bc-date.is-selected[b-wzgdh73dv2] { border-color: var(--m-navy); background: rgba(1, 5, 76, .07); box-shadow: inset 0 0 0 1px var(--m-navy); }
.bc-date.is-selected:focus-within[b-wzgdh73dv2] { box-shadow: inset 0 0 0 1px var(--m-navy), var(--m-focus); }

.bc-date-dow[b-wzgdh73dv2] { font-size: .8rem; color: var(--m-muted); }
.bc-date-day[b-wzgdh73dv2] { font-family: var(--uds-font-head); font-weight: 600; color: var(--m-navy); }

.bc-dates.has-error .bc-date[b-wzgdh73dv2] { border-color: var(--m-bad); }
/* /Components/Pages/Consignments/BookingAddressPicker.razor.rz.scp.css */
/* The address-book picker: a scrolling list of tappable entries inside the design
   system's dialog. Each entry is one full-width button (44px+ touch target). */

.picker-list[b-vxop44p5s9] {
    max-height: min(50dvh, 26rem);
    overflow-y: auto;
    margin-top: var(--m-s3);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius-sm);
}

.picker-list > li[b-vxop44p5s9] { padding: 0; }

.picker-item[b-vxop44p5s9] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; min-height: var(--m-control-h);
    padding: var(--m-s3) var(--m-s4);
    background: none; border: 0; cursor: pointer;
    font: inherit; text-align: left; color: var(--m-ink);
}
.picker-item:hover[b-vxop44p5s9], .picker-item:focus-visible[b-vxop44p5s9] { background: var(--m-surface-2); }
.picker-item strong[b-vxop44p5s9] { font-family: var(--uds-font-head); font-weight: 600; color: var(--m-navy); }
.picker-item span[b-vxop44p5s9] { overflow-wrap: anywhere; }
/* /Components/Pages/Consignments/BookingContentLines.razor.rz.scp.css */
/* Editable contents lines — see BookingParcelLines.razor.css for the pattern. */

.lines td[b-tapjjh1ljt] { vertical-align: top; }

.cell[b-tapjjh1ljt] { display: flex; flex-direction: column; gap: var(--m-s1); min-width: 0; }
.cell.hs[b-tapjjh1ljt] { max-width: 11rem; }
.cell.has-error input[b-tapjjh1ljt] { border-color: var(--m-bad); }
.cell .error[b-tapjjh1ljt] { font-size: .82rem; color: var(--m-bad); text-align: left; }

.computed[b-tapjjh1ljt] { display: inline-block; padding-top: var(--m-s2); color: var(--m-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 48rem) {
    .lines th:nth-child(2)[b-tapjjh1ljt], .lines td:nth-child(2)[b-tapjjh1ljt] { width: 60%; }
}

@media (max-width: 47.99rem) {
    .lines td[b-tapjjh1ljt] { align-items: center; }
    .lines td .cell[b-tapjjh1ljt] { flex: 1 1 auto; max-width: none; }
    .computed[b-tapjjh1ljt] { padding-top: 0; }
}
/* /Components/Pages/Consignments/BookingParcelLines.razor.rz.scp.css */
/* Editable grid lines. The design system's .table-cards turns each row into a card on a
   phone ("Label   value"); these rules make the VALUE an input that fills the space. */

.lines td[b-zkac1ybg58] { vertical-align: top; }

.cell[b-zkac1ybg58] { display: flex; flex-direction: column; gap: var(--m-s1); min-width: 0; }

.unit[b-zkac1ybg58] { display: flex; align-items: stretch; }
.unit input[b-zkac1ybg58] {
    min-width: 4.5rem;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    text-align: right; font-variant-numeric: tabular-nums;
}
.unit span[b-zkac1ybg58] {
    display: inline-flex; align-items: center; padding: 0 var(--m-s2);
    background: var(--m-surface-2); color: var(--m-muted); font-size: .82rem;
    border: 1px solid var(--m-line-strong); border-left: 0;
    border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
}

.cell.has-error input[b-zkac1ybg58] { border-color: var(--m-bad); }
.cell .error[b-zkac1ybg58] { font-size: .82rem; color: var(--m-bad); text-align: left; }

.computed[b-zkac1ybg58] { display: inline-block; padding-top: var(--m-s2); color: var(--m-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 47.99rem) {
    /* Card mode: label on the left, the box takes the rest of the row. */
    .lines td[b-zkac1ybg58] { align-items: center; }
    .lines td .cell[b-zkac1ybg58] { flex: 1 1 auto; max-width: 13rem; }
    .computed[b-zkac1ybg58] { padding-top: 0; }
}
/* /Components/Pages/Consignments/BookingTotalsBar.razor.rz.scp.css */
/* Four figures in a row; two by two on a phone. */

.totals[b-t8ko4w0337] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-s2);
    margin: 0 0 var(--m-s4);
}
@media (min-width: 40rem) { .totals[b-t8ko4w0337] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.totals > div[b-t8ko4w0337] {
    padding: var(--m-s3) var(--m-s4);
    background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius);
}
.totals dt[b-t8ko4w0337] {
    font-size: .74rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--m-muted);
}
.totals dd[b-t8ko4w0337] {
    margin: 0; font-family: var(--uds-font-head); font-size: 1.25rem; font-weight: 600; color: var(--m-navy);
    font-variant-numeric: tabular-nums;
}
.totals .is-key[b-t8ko4w0337] { border-color: var(--m-navy); background: rgba(1, 5, 76, .04); }
/* /Components/Pages/Consignments/ConsignmentList.razor.rz.scp.css */
/* List Consignment — only what the design system does not have. */

/* A cancelled booking is greyed, as the Web Forms grid did (the badge carries the meaning). */
.cl-cancelled td[b-qsyrp8vmbg] { color: var(--m-muted); }

.table .actions .btn + .btn[b-qsyrp8vmbg] { margin-left: var(--m-s2); }

/* The three "VIEW" panels: one column on a phone, side by side when there is room. */
.cl-panels[b-qsyrp8vmbg] { display: grid; gap: var(--m-s4) var(--m-s5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.cl-panels h3[b-qsyrp8vmbg] { padding-bottom: var(--m-s2); border-bottom: 1px solid var(--m-line); color: var(--m-navy); }
.cl-panels .facts[b-qsyrp8vmbg] { grid-template-columns: 1fr; }
.cl-panels .facts dd[b-qsyrp8vmbg] { margin: 0 0 var(--m-s2); overflow-wrap: anywhere; min-height: 1.5em; }
/* /Components/Pages/Consignments/NewConsignment.razor.rz.scp.css */
/* Add Consignment — only what the design system (member.css) does not already have. */

/* The step heading takes the focus when a step opens (so a screen reader announces it and the
   page scrolls to the top); it is not a control, so it shows no focus ring. */
h2:focus[b-i5lpbtljiz] { outline: none; box-shadow: none; }

.problem-list[b-i5lpbtljiz] { margin: var(--m-s2) 0 0; padding-left: 1.1rem; }

/* Review: the three addresses side by side on a wide screen, stacked on a phone. */
.review-grid[b-i5lpbtljiz] { display: grid; gap: 0 var(--m-s4); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .review-grid[b-i5lpbtljiz] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.address[b-i5lpbtljiz] { display: flex; flex-direction: column; gap: 2px; font-style: normal; overflow-wrap: anywhere; }
.address span:first-child[b-i5lpbtljiz] { font-weight: 600; color: var(--m-navy); }

.pre[b-i5lpbtljiz] { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Booked: the air waybill number is the thing to read. */
.awb-panel[b-i5lpbtljiz] { display: flex; flex-direction: column; align-items: center; gap: var(--m-s1); text-align: center; padding: var(--m-s5) var(--m-s4); }
.awb-label[b-i5lpbtljiz] { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--m-muted); }
.awb-number[b-i5lpbtljiz] { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.1; color: var(--m-navy); letter-spacing: .02em; user-select: all; }

.doc-list > li[b-i5lpbtljiz] { flex-wrap: wrap; padding-left: 0; padding-right: 0; }
.doc-problem[b-i5lpbtljiz] { font-size: .88rem; color: var(--m-warn); }

.label-frame[b-i5lpbtljiz] { display: block; width: 100%; height: min(75dvh, 46rem); border: 1px solid var(--m-line); border-radius: var(--m-radius-sm); }
/* /Components/Pages/Documents/DocumentHistory.razor.rz.scp.css */
/* Long file names must not push a table row (or a phone card) wider than the screen. */
.cell-break[b-6kvymxd1ar] { overflow-wrap: anywhere; }
/* /Components/Pages/EndOfDay/EndOfDay.razor.rz.scp.css */
/* End of Day Manifest — only what the design system does not have. */

.eod-layout[b-u368a1w7v6] { display: grid; gap: var(--m-s4); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 64rem) {
    .eod-layout[b-u368a1w7v6] { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

.eod-collection[b-u368a1w7v6] { border-bottom: 1px solid var(--m-line); }
.eod-collection h3[b-u368a1w7v6] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--m-s2); }

.eod-totals[b-u368a1w7v6] { display: flex; flex-wrap: wrap; gap: var(--m-s2) var(--m-s5); justify-content: flex-end; margin: var(--m-s3) 0 0; }

.eod-profile[b-u368a1w7v6] { line-height: 1.6; }
.eod-break[b-u368a1w7v6] { overflow-wrap: anywhere; }

/* The embedded manifest. Tall on a desk, shorter on a phone — the buttons above it do the real work there. */
.eod-preview[b-u368a1w7v6] { display: block; width: 100%; height: 26rem; margin-top: var(--m-s4); border: 1px solid var(--m-line); border-radius: var(--m-radius-sm); }

@media (min-width: 64rem) {
    .eod-preview[b-u368a1w7v6] { height: 75rem; }
}

@media print {
    .eod-preview[b-u368a1w7v6], .eod-side[b-u368a1w7v6] { display: none; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home: the section headings sit closer to their card grid than to the one above. */
h3[b-5ctw7yzpgy] {
    margin: var(--m-s5) 0 var(--m-s2);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h3:first-of-type[b-5ctw7yzpgy] {
    margin-top: 0;
}
/* /Components/Pages/Links/EmailPreferences.razor.rz.scp.css */
/* One switch per row, ruled off like the Web Forms page's ".opt" blocks. */
.prefs-option[b-y62p7xw598] { border-top: 1px solid var(--m-line); padding: var(--m-s2) 0; }
.prefs-option:last-of-type[b-y62p7xw598] { border-bottom: 1px solid var(--m-line); }
.prefs-option .hint[b-y62p7xw598] { font-size: .85rem; color: var(--m-muted); }
/* /Components/Pages/Links/KycUpload.razor.rz.scp.css */
/* The consent statement stands apart from the upload list (Web Forms: the amber box). */
.kyc-consent[b-pb0qf8juq3] {
    padding: var(--m-s3) var(--m-s4); margin-bottom: var(--m-s4);
    background: var(--m-warn-bg); border: 1px solid #f0c674; border-radius: var(--m-radius-sm);
}

/* One requested document per row: name on the left, file picker on the right; stacked on a phone. */
.kyc-doc[b-pb0qf8juq3] {
    display: grid; grid-template-columns: 1fr; gap: var(--m-s2);
    padding: var(--m-s3) 0; border-bottom: 1px solid var(--m-line);
}
.kyc-doc:first-child[b-pb0qf8juq3] { border-top: 1px solid var(--m-line); }
.kyc-doc-name[b-pb0qf8juq3] { display: flex; flex-direction: column; min-width: 0; }
.kyc-doc-name span[b-pb0qf8juq3] { color: var(--m-muted); }
.kyc-doc-file[b-pb0qf8juq3] { display: flex; flex-direction: column; gap: var(--m-s1); min-width: 0; }
.kyc-doc-file .error[b-pb0qf8juq3] { font-size: .82rem; color: var(--m-bad); }
.kyc-doc-file .hint[b-pb0qf8juq3] { font-size: .8rem; color: var(--m-muted); }
.kyc-doc-file[b-pb0qf8juq3]  input[type=file] { max-width: 100%; min-height: var(--m-control-h); font: inherit; }

.kyc-hint[b-pb0qf8juq3] { margin: var(--m-s3) 0 0; color: var(--m-warn); font-size: .9rem; }

@media (min-width: 40rem) {
    .kyc-doc[b-pb0qf8juq3] { grid-template-columns: 5fr 7fr; align-items: center; }
}
/* /Components/Pages/Links/QuoteView.razor.rz.scp.css */
/* One card per service: carrier on the left of the head, the price on the right. */
.quote-tile[b-ne569psz4q] { margin-bottom: 0; }
.quote-price[b-ne569psz4q] { font-family: var(--uds-font-head); font-size: 1.15rem; color: var(--m-navy); white-space: nowrap; }
/* /Components/Pages/Manifests/ManifestHistory.razor.rz.scp.css */
.cell-break[b-tojjw4cnql] { overflow-wrap: anywhere; }

/* The files card takes focus when it opens (so it is announced and scrolled to); no ring for that. */
.card:focus[b-tojjw4cnql] { outline: none; box-shadow: var(--m-shadow); }
/* /Components/Pages/Manifests/UploadManifest.razor.rz.scp.css */
/* The four attachment pickers: one column on a phone, two, then four. */
.upload-grid[b-m9acbcqgsa] { display: grid; gap: var(--m-s3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .upload-grid[b-m9acbcqgsa] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .upload-grid[b-m9acbcqgsa] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.upload-tile[b-m9acbcqgsa] {
    display: flex; flex-direction: column; gap: var(--m-s2); min-width: 0;
    padding: var(--m-s3); background: var(--m-surface-2);
    border: 1px dashed var(--m-line-strong); border-radius: var(--m-radius-sm);
}
.upload-tile label[b-m9acbcqgsa] { font-family: var(--uds-font-head); font-weight: 600; color: var(--m-navy); }
.upload-tile .hint[b-m9acbcqgsa] { font-size: .8rem; color: var(--m-muted); }
.upload-tile.is-off[b-m9acbcqgsa] { opacity: .6; }

/* InputFile is a child component: its <input> is reached with ::deep. A file can be dropped on it. */
.upload-tile[b-m9acbcqgsa]  input[type=file] { width: 100%; min-height: var(--m-control-h); font-size: .9rem; }

.cell-break[b-m9acbcqgsa] { overflow-wrap: anywhere; }
/* /Components/Pages/Profile/MemberProfile.razor.rz.scp.css */
/* Post Code is stored upper-cased (the Web Forms rule); show it that way while it is typed. */
.upper[b-2cxi9s3icz] { text-transform: uppercase; }
/* /Components/Pages/Tracking/Track.razor.rz.scp.css */
/* ============================================================================
   The public tracker — the Web Forms track.aspx stylesheet, carried forward (CHG-115).

   Every rule is scoped under .tracking-page with ::deep, so it reaches the tracker's
   child components and never touches the shell or another page. Class names are the
   Web Forms ones. Rules are kept in their original order (later ones override earlier
   ones, as they did in the page).

   What is NOT here, and why:
   - the master-page chrome (navbar, title strip, footer) — the shell replaces it;
   - Telerik's own RadCard / RadButton skin — the card is plain HTML now, with the small
     base block below standing in for the skin;
   - rules for classes the page never rendered (tracking-title, tracking-search,
     timeline-date-header, detwrapper, stepper-*, RadGrid, #awbTB, bigbox …) and the
     row striping / ::before spine the page itself switched off with !important.
   ============================================================================ */

.tracking-page[b-s71ctsnb9h] {
    padding: 0;
    font-size: 14px;          /* the Web Forms page's base size */
    line-height: 1.43;
    color: #333;
}

/* ── Card base (stands in for the Telerik "Default" skin) ───────────────── */
.tracking-page[b-s71ctsnb9h]  .k-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #ffffff;
    color: #20437b;
}

.tracking-page[b-s71ctsnb9h]  .k-card-header { padding: 12px 16px; }
.tracking-page[b-s71ctsnb9h]  .k-card-title { font-size: 18px; line-height: 1.3; margin: 0 0 8px; }
.tracking-page[b-s71ctsnb9h]  .k-card-subtitle { font-size: 14px; margin: 0; color: #666; }
.tracking-page[b-s71ctsnb9h]  .k-card-title p,
.tracking-page[b-s71ctsnb9h]  .k-card-subtitle p { margin: 0; }
.tracking-page[b-s71ctsnb9h]  .k-card-footer { padding: 12px 16px; }
.tracking-page[b-s71ctsnb9h]  .k-state-success { background-color: #eaf6ea; color: #2b542c; }
.tracking-page[b-s71ctsnb9h]  .k-card-body table { border-collapse: collapse; }
.tracking-page[b-s71ctsnb9h]  .k-card-body td { padding: 2px 0; vertical-align: top; }
.tracking-page[b-s71ctsnb9h]  .trackimg-wrap { text-align: center; }

/* ── Search card ────────────────────────────────────────────────────────── */
.tracking-page[b-s71ctsnb9h]  .track-btn {
    padding: 10px 20px;
    background: #cc0000;
    border: none;
    color: #fff;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
}

.tracking-page[b-s71ctsnb9h]  .track-btn:hover { background: #b00000; }

.tracking-page[b-s71ctsnb9h]  .brandDark {
    background-color: #e51d3a !important;
    border: none !important;
    width: 100%;
    border-radius: 1px !important;
}

.tracking-page[b-s71ctsnb9h]  .brandDark:hover { opacity: 0.7; }

.tracking-page[b-s71ctsnb9h]  .cardInput {
    background-color: #d51833 !important;
    border: none !important;
    border-color: #d51833 !important;
    color: #fff;
}

.tracking-page[b-s71ctsnb9h]  .RadCard_Default .k-card-footer {
    border-color: #f0f0f0 !important;
    background-color: #f0f0f0 !important;
}

.tracking-page[b-s71ctsnb9h]  .k-card-body { padding: 1px !important; }
.tracking-page[b-s71ctsnb9h]  .k-card { border: none !important; }

/* === All card action buttons match === */
.tracking-page[b-s71ctsnb9h]  .k-card-actions {
    display: flex !important;
    padding: 0 !important;
}

.tracking-page[b-s71ctsnb9h]  .k-card-actions .k-button,
.tracking-page[b-s71ctsnb9h]  .k-card-actions .RadButton,
.tracking-page[b-s71ctsnb9h]  .k-card-actions button {
    flex: 1 1 33%;
    height: 48px;
    background-color: #d51833 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}

.tracking-page[b-s71ctsnb9h]  .k-card { overflow: hidden; }

.tracking-page[b-s71ctsnb9h]  .k-card .CardBody {
    background: #eeeeee !important;
    padding: 12px !important;
}

.tracking-page[b-s71ctsnb9h]  .k-card .awbBox {
    width: 100% !important;
    height: 120px;
    background: #ffffff;
    border: 1px solid #999;
    padding: 10px;
    box-sizing: border-box;
}

.tracking-page[b-s71ctsnb9h]  .k-card-actions {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Each action gets equal width */
.tracking-page[b-s71ctsnb9h]  .k-card-actions > div { flex: 1 1 25% !important; }

.tracking-page[b-s71ctsnb9h]  .k-card-actions .RadButton {
    width: 100% !important;
    height: 48px !important;
    padding: 0 !important;
    background: #d51833 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    font-family: inherit;
}

.tracking-page[b-s71ctsnb9h]  .k-card-actions .RadButton:hover { opacity: 0.85; }

.tracking-page[b-s71ctsnb9h]  .k-card .CardBody {
    padding: 0 !important;
    margin: 0 !important;
    background: #eeeeee !important;
}

.tracking-page[b-s71ctsnb9h]  .k-card .awbBox {
    margin: 0 !important;
    display: block;
    width: 100% !important;
    height: 120px;
    min-height: 0;
    border-radius: 0;
    font: 14px "segoe ui", arial, sans-serif;
    resize: vertical;
}

.tracking-page[b-s71ctsnb9h]  .k-card-actions { flex-wrap: wrap !important; }

/* 4th action (COPY LINK) spans full width */
.tracking-page[b-s71ctsnb9h]  .k-card-actions > *:nth-child(4) {
    flex: 0 0 100% !important;
    position: relative;
}

/* white line across the full width above COPY LINK */
.tracking-page[b-s71ctsnb9h]  .k-card-actions > *:nth-child(4)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: #ffffff;
    z-index: 5;
}

.tracking-page[b-s71ctsnb9h]  .track-btn { border-radius: 0px; }
.tracking-page[b-s71ctsnb9h]  .notifyBtn { margin-top: 4px; width: 100%; }
.tracking-page[b-s71ctsnb9h]  .k-card { border-radius: 0px; }

.tracking-page[b-s71ctsnb9h]  .notify-block { margin-top: 20px; }
.tracking-page[b-s71ctsnb9h]  .notify-block label { display: inline; font-weight: normal; }
.tracking-page[b-s71ctsnb9h]  .tracking-email-box { width: 100%; background-color: WhiteSmoke; }
.tracking-page[b-s71ctsnb9h]  .notify-status { display: block; margin-top: 6px; }

/* ── Shipment summary ───────────────────────────────────────────────────── */
.tracking-page[b-s71ctsnb9h]  .shipment-summary {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 12px 0 20px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.tracking-page[b-s71ctsnb9h]  .shipment-summary h4 {
    margin-top: 0;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
}

.tracking-page[b-s71ctsnb9h]  .awb-group > h3,
.tracking-page[b-s71ctsnb9h]  .awb-group > h4 {
    margin-top: 25px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.tracking-page[b-s71ctsnb9h]  .timeline-row { position: relative; margin-bottom: 10px; min-height: 22px; }

.tracking-page[b-s71ctsnb9h]  .timeline-dot {
    width: 12px;
    height: 12px;
    background: #d70000;
    border-radius: 50%;
    position: absolute;
    left: -36px;
    top: 6px;
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

.tracking-page[b-s71ctsnb9h]  .timeline-dot.ev-delivered { background: #0a7b00 !important; }
.tracking-page[b-s71ctsnb9h]  .timeline-dot.ev-exception { background: #cc0000 !important; }
.tracking-page[b-s71ctsnb9h]  .timeline-dot.ev-hold { background: #b36b00 !important; }
.tracking-page[b-s71ctsnb9h]  .timeline-dot.ev-arrival { background: #0047ab !important; }
.tracking-page[b-s71ctsnb9h]  .timeline-dot.ev-depart { background: #0066cc !important; }

.tracking-page[b-s71ctsnb9h]  .checkmark-dot {
    width: 18px;
    height: 18px;
    background: #0a7b00;
    border-radius: 50%;
    position: absolute;
    left: -40px;
    top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid #fff;
}

.tracking-page[b-s71ctsnb9h]  .timeline-flex { display: flex; align-items: flex-start; gap: 20px; }
.tracking-page[b-s71ctsnb9h]  .tl-time { width: 65px; font-weight: bold; font-size: 14px; color: #111; }
.tracking-page[b-s71ctsnb9h]  .tl-status { flex: 1; font-size: 15px; color: #444; }
.tracking-page[b-s71ctsnb9h]  .tl-loc { width: 220px; text-align: right; color: #777; font-size: 14px; }

.tracking-page[b-s71ctsnb9h]  .ev-delivered { color: #0a7b00 !important; font-weight: 600; }
.tracking-page[b-s71ctsnb9h]  .ev-exception { color: #cc0000 !important; font-weight: bold; }
.tracking-page[b-s71ctsnb9h]  .ev-hold { color: #b36b00 !important; }
.tracking-page[b-s71ctsnb9h]  .ev-arrival { color: #0047ab !important; }
.tracking-page[b-s71ctsnb9h]  .ev-depart { color: #0066cc !important; }
.tracking-page[b-s71ctsnb9h]  .ev-default { color: #444; }

/* ── Layout: results left, card right ───────────────────────────────────── */
.tracking-page[b-s71ctsnb9h]  .trackerLeft { order: 1; }
.tracking-page[b-s71ctsnb9h]  .trackerRight { order: 2; }

.tracking-page[b-s71ctsnb9h]  .trackerLayout {
    display: flex;
    gap: 0px;
    align-items: flex-start;
}

.tracking-page[b-s71ctsnb9h]  .trackerLeft {
    flex: 1 1 auto;
    min-width: 0;
    scroll-margin-top: 5rem;      /* a search lands on #results, clear of the sticky top bar */
}

.tracking-page[b-s71ctsnb9h]  .trackerRight {
    flex: 0 0 450px;
    margin-left: auto;
}

.tracking-page[b-s71ctsnb9h]  .tracking-results {
    padding-left: 40px;
    padding-right: 40px;
}

.tracking-page[b-s71ctsnb9h]  .tracking-message { margin: 12px 0; }

/* ── Final timeline layout ──────────────────────────────────────────────── */
.tracking-page[b-s71ctsnb9h]  .timeline { --date-col-width: 220px; }

/* Delivered shipments open with their events collapsed (22 Sep 2026). Web Forms toggled the
   class from a script; here a hidden checkbox does it, so it works with no script at all. */
.tracking-page[b-s71ctsnb9h]  .events-wrap.collapsed { display: none; }
.tracking-page[b-s71ctsnb9h]  .events-check:checked ~ .events-wrap.collapsed { display: block; }

.tracking-page[b-s71ctsnb9h]  .events-check {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.tracking-page[b-s71ctsnb9h]  .events-toggle {
    display: inline-block;
    margin: 6px 0 14px 0;
    font-size: 14px;
    color: #0047ab;
    text-decoration: none;
    border: 1px solid #cfd8e6;
    border-radius: 6px;
    padding: 6px 12px;
    background: #f6f8fb;
    cursor: pointer;
}

.tracking-page[b-s71ctsnb9h]  .events-toggle:hover { background: #e9eef7; text-decoration: none; }
.tracking-page[b-s71ctsnb9h]  .events-check:focus-visible + .events-toggle { box-shadow: var(--m-focus); }
.tracking-page[b-s71ctsnb9h]  .events-check:checked + .events-toggle .when-closed,
.tracking-page[b-s71ctsnb9h]  .events-check:not(:checked) + .events-toggle .when-open { display: none; }

.tracking-page[b-s71ctsnb9h]  .timeline-block {
    display: flex;
    align-items: stretch;
    margin-bottom: 14px;
}

/* LEFT DATE COLUMN */
.tracking-page[b-s71ctsnb9h]  .timeline-date-col {
    flex: 0 0 220px;
    max-width: 220px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: right;
    padding: 10px 20px 0 0;       /* top aligns with first row */
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;      /* anchor to first event */
}

/* RIGHT EVENTS COLUMN */
.tracking-page[b-s71ctsnb9h]  .timeline-events {
    flex: 1;
    position: relative;
    padding-left: 30px;           /* space for line + dots */
}

.tracking-page[b-s71ctsnb9h]  .timeline-events .timeline-dot {
    position: absolute;
    left: -36px;
    top: 8px;
}

.tracking-page[b-s71ctsnb9h]  .timeline-events .checkmark-dot {
    position: absolute;
    left: -40px;
    top: 6px;
}

.tracking-page[b-s71ctsnb9h]  .timeline-row { position: relative; padding-bottom: 6px; }

@media (max-width: 1024px) {
    .tracking-page[b-s71ctsnb9h]  .timeline-block { flex-direction: column; }

    .tracking-page[b-s71ctsnb9h]  .timeline-date-col {
        width: 100%;
        text-align: left;
        border-right: none;
        background: transparent;
        padding: 0 0 6px 0;
    }
}

@media (max-width: 1100px) {
    .tracking-page[b-s71ctsnb9h]  .timeline { --date-col-width: 0px; }

    .tracking-page[b-s71ctsnb9h]  .timeline-date-col {
        flex: 0 0 160px;
        max-width: 160px;
        font-size: 15px;
    }
}

@media (max-width: 900px) {
    .tracking-page[b-s71ctsnb9h]  .timeline { --date-col-width: 0px; }

    .tracking-page[b-s71ctsnb9h]  .timeline-date-col {
        flex: 0 0 120px;
        max-width: 120px;
        font-size: 14px;
        text-align: left;
        padding-right: 12px;
    }
}

.tracking-page[b-s71ctsnb9h]  .timeline-row {
    position: relative;
    padding: 10px 0;
    padding-right: 20px;
}

/* keep row content above the spine */
.tracking-page[b-s71ctsnb9h]  .timeline-row > * {
    position: relative;
    z-index: 1;
}

.tracking-page[b-s71ctsnb9h]  .timeline-dot,
.tracking-page[b-s71ctsnb9h]  .checkmark-dot { z-index: 2; }

.tracking-page[b-s71ctsnb9h]  .timeline-date-col {
    display: flex;
    align-items: flex-start;
}

.tracking-page[b-s71ctsnb9h]  .timeline { position: relative; }

/* ── Timeline spine: one real element per date group ────────────────────── */
.tracking-page[b-s71ctsnb9h]  .timeline-block { position: relative; overflow: visible; }

/* Runs the full height of the block and reaches up 60px to bridge the date label
   gap between adjacent blocks. */
.tracking-page[b-s71ctsnb9h]  .tl-spine {
    position: absolute;
    left: calc(var(--date-col-width, 220px) - 1px);
    top: -60px;
    bottom: 0;
    width: 2px;
    background: #cfcfcf;
    z-index: 1;
    pointer-events: none;
}

/* First block: start at the first dot */
.tracking-page[b-s71ctsnb9h]  .tl-spine-first { top: 25px; }

.tracking-page[b-s71ctsnb9h]  .timeline-dot,
.tracking-page[b-s71ctsnb9h]  .checkmark-dot { z-index: 3; }

.tracking-page[b-s71ctsnb9h]  .shipment-grid {
    display: block;
    grid-template-columns: 150px 1fr;
    gap: 6px 14px;
    font-size: 14px;
}

/* Each row is a flex container: label fixed, value takes the rest */
.tracking-page[b-s71ctsnb9h]  .sd-row {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding: 3px 0;
}

.tracking-page[b-s71ctsnb9h]  .sd-label {
    flex: 0 0 150px;
    min-width: 150px;
    color: #666;
    font-size: 14px;
}

.tracking-page[b-s71ctsnb9h]  .sd-value {
    flex: 1;
    font-size: 14px;
    color: #333;
    word-break: break-word;
}

.tracking-page[b-s71ctsnb9h]  .sd-value.delivered {
    color: #0a7b00;
    font-weight: 600;
}

.tracking-page[b-s71ctsnb9h]  .sd-value a {
    color: #0047ab;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .tracking-page[b-s71ctsnb9h]  .shipment-grid { grid-template-columns: 1fr; }

    .tracking-page[b-s71ctsnb9h]  .sd-label {
        text-align: left;
        font-size: 12px;
        color: #888;
    }
}

.tracking-page[b-s71ctsnb9h]  .piece-header {
    margin-bottom: 10px;
    font-weight: 300;
}

.tracking-page[b-s71ctsnb9h]  .piece-block {
    position: relative;
    margin-top: 55px;
}

/* ===== SORT CONTROL ===== */
.tracking-page[b-s71ctsnb9h]  .timeline-sort {
    display: flex;
    justify-content: flex-end;
    margin: 6px 0 10px 0;
}

.tracking-page[b-s71ctsnb9h]  .piece-sort-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: none;
}

.tracking-page[b-s71ctsnb9h]  .piece-sort-btn:hover { color: #cc0000; }

/* Prevent wrapping anywhere in timeline rows */
.tracking-page[b-s71ctsnb9h]  .timeline-row,
.tracking-page[b-s71ctsnb9h]  .timeline-flex,
.tracking-page[b-s71ctsnb9h]  .timeline-date-col,
.tracking-page[b-s71ctsnb9h]  .tl-time,
.tracking-page[b-s71ctsnb9h]  .tl-status,
.tracking-page[b-s71ctsnb9h]  .tl-loc {
    white-space: nowrap;
}

/* ── Overlay right panel (Track Package) ────────────────────────────────── */
/* The red bar. Web Forms lifted it 50px to sit over the master page's title strip; the shell
   has no such strip, so it sits in the flow. */
.tracking-page[b-s71ctsnb9h]  .udsTopBar {
    position: relative;
    background: #d51833;
    color: #fff;
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;    /* button right-aligned */
}

.tracking-page[b-s71ctsnb9h]  .udsTopBarBtn:hover { opacity: 0.9; }

.tracking-page[b-s71ctsnb9h]  .trackerLayout { position: relative; }

/* The right panel is a fixed overlay, slid closed by default. Web Forms opened it from a
   script; here the hidden checkbox #trackPanelToggle does (the red bar's button and the
   backdrop are its labels), so it needs no script.
   top = the shell's sticky top bar + stripe + content padding + this page's red bar, the
   same place Web Forms' 135px put it under the old navbar. */
.tracking-page[b-s71ctsnb9h]  .trackerRight {
    position: fixed !important;
    top: calc(var(--m-top-h) + 3px + var(--m-s5) + 52px);
    right: 0;
    width: 450px;
    height: calc(100vh - (var(--m-top-h) + 3px + var(--m-s5) + 52px));
    overflow: auto;
    background: #fff;
    z-index: 960;                 /* over the shell's top bar (900), under its menu drawer */

    transform: translateX(100%);
    visibility: hidden;           /* closed: out of the tab order too */
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    box-shadow: -6px 0 18px rgba(0,0,0,0.18);

    margin-left: 0 !important;
    flex: none !important;
}

.tracking-page[b-s71ctsnb9h]  .track-toggle:checked ~ .trackerLayout .trackerRight {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}

.tracking-page[b-s71ctsnb9h]  .track-toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Backdrop (click to close) */
.tracking-page[b-s71ctsnb9h]  .track-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 950;
}

.tracking-page[b-s71ctsnb9h]  .track-toggle:checked ~ .track-backdrop { display: block; }

.tracking-page[b-s71ctsnb9h]  .udsTopBarBtn {
    all: unset;
    cursor: pointer;
    background: #ffffff;
    color: #d51833;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tracking-page[b-s71ctsnb9h]  .track-toggle:focus-visible ~ .udsTopBar .udsTopBarBtn { box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.tracking-page[b-s71ctsnb9h]  .track-toggle:checked ~ .udsTopBar .when-closed,
.tracking-page[b-s71ctsnb9h]  .track-toggle:not(:checked) ~ .udsTopBar .when-open { display: none; }

/* Narrow screens: the card sits first, in the flow, with the results below it. Web Forms
   switched at 900px; the shell turns into its phone / tablet layout at 64rem, so the tracker
   switches with it (delta T11). The red bar's button has nothing to open here, so the bar
   goes too. */
@media (max-width: 63.99rem) {
    .tracking-page[b-s71ctsnb9h]  .udsTopBar { display: none; }

    .tracking-page[b-s71ctsnb9h]  .trackerLayout {
        flex-direction: column;
        gap: 0px;
    }

    .tracking-page[b-s71ctsnb9h]  .trackerRight {
        order: 1;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        transform: none !important;
        visibility: visible !important;
        box-shadow: none !important;
        z-index: auto !important;
    }

    .tracking-page[b-s71ctsnb9h]  .track-backdrop { display: none !important; }

    .tracking-page[b-s71ctsnb9h]  .trackerLeft {
        order: 2;
        width: 100% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        box-sizing: border-box;
    }
}

@media (max-width: 1100px) {
    .tracking-page[b-s71ctsnb9h]  .timeline-block { align-items: flex-start !important; }

    .tracking-page[b-s71ctsnb9h]  .timeline-date-col {
        height: auto !important;
        align-self: flex-start !important;
    }
}

/* ── Narrow timeline: the date becomes a heading over its events ────────── */
@media (max-width: 1100px) {
    .tracking-page[b-s71ctsnb9h]  .timeline-block {
        display: block !important;
        margin-bottom: 50px;
    }

    .tracking-page[b-s71ctsnb9h]  .timeline-date-col {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;

        padding: 0 !important;
        padding-left: 30px !important;
        margin: 0 0 4px 0 !important;

        text-align: left !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
    }

    .tracking-page[b-s71ctsnb9h]  .timeline-events { padding-left: 30px; }

    /* Allow wrapping */
    .tracking-page[b-s71ctsnb9h]  .timeline-row,
    .tracking-page[b-s71ctsnb9h]  .timeline-flex,
    .tracking-page[b-s71ctsnb9h]  .timeline-date-col,
    .tracking-page[b-s71ctsnb9h]  .tl-time,
    .tracking-page[b-s71ctsnb9h]  .tl-status,
    .tracking-page[b-s71ctsnb9h]  .tl-loc {
        white-space: normal !important;
    }

    /* Location is dropped for cleanliness */
    .tracking-page[b-s71ctsnb9h]  .tl-loc { display: none !important; }
}

/* ── Common events banner ───────────────────────────────────────────────── */
.tracking-page[b-s71ctsnb9h]  .common-events-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f0f4ff;
    border: 1px solid #c7d7fa;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 16px 0;
    font-size: 13px;
    color: #334;
    flex-wrap: wrap;
}

.tracking-page[b-s71ctsnb9h]  .ceb-left {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #2c3e80;
    line-height: 1.4;
}

.tracking-page[b-s71ctsnb9h]  .ceb-left svg {
    flex-shrink: 0;
    color: #0047ab;
}

/* The "View Piece Details" button */
.tracking-page[b-s71ctsnb9h]  .ceb-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #cc0000;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 8px 16px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.15s;
}

.tracking-page[b-s71ctsnb9h]  .ceb-detail-btn:hover {
    background: #a80000;
    color: #fff !important;
}

.tracking-page[b-s71ctsnb9h]  .ceb-detail-btn svg { margin-left: 6px; vertical-align: middle; }

@media (max-width: 600px) {
    .tracking-page[b-s71ctsnb9h]  .common-events-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .tracking-page[b-s71ctsnb9h]  .ceb-detail-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── MAWB piece status (mps-*) — per-piece warehouse in/out under the TRACK MASTER card ── */

/* Multi-master folding. Only rendered when more than one MAWB is tracked at once. */
.tracking-page[b-s71ctsnb9h]  .mps-masters { margin-bottom: 8px; }

.tracking-page[b-s71ctsnb9h]  .mps-masters-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    padding-left: 15px;
}

.tracking-page[b-s71ctsnb9h]  .mps-masters-count {
    font-weight: 700;
    margin-right: 4px;
}

.tracking-page[b-s71ctsnb9h]  .mps-master {
    border: 1px solid #b9bec7;
    margin-bottom: 8px;
    background: #fff;
}

.tracking-page[b-s71ctsnb9h]  .mps-master > summary {
    cursor: pointer;
    padding: 11px 14px;
    background: #f5f5f5;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    font-size: 14px;
}

.tracking-page[b-s71ctsnb9h]  .mps-master > summary:hover { background: #ececec; }
.tracking-page[b-s71ctsnb9h]  .mps-master[open] > summary { border-bottom: 1px solid #e0e0e0; }

.tracking-page[b-s71ctsnb9h]  .mps-master-body { padding: 12px 14px 14px; }

.tracking-page[b-s71ctsnb9h]  .mps-m-no { font-weight: 700; color: #000; }
.tracking-page[b-s71ctsnb9h]  .mps-m-route { color: #555; }
.tracking-page[b-s71ctsnb9h]  .mps-m-status { color: #1a7f45; font-weight: 600; font-size: 13px; }
.tracking-page[b-s71ctsnb9h]  .mps-m-counts { color: #666; font-size: 13px; }
.tracking-page[b-s71ctsnb9h]  .mps-m-missing { color: #cc0000; font-weight: 600; font-size: 13px; }

.tracking-page[b-s71ctsnb9h]  .mps-wrap {
    margin: 14px 0 4px;
    font-size: 14px;
    color: #333;
}

.tracking-page[b-s71ctsnb9h]  .mps-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    background: #f5f5f5;
    border: 1px solid #b9bec7;
    padding: 10px 14px;
}

.tracking-page[b-s71ctsnb9h]  .mps-summary .mps-total {
    font-weight: 700;
    color: #000;
    padding-right: 4px;
}

.tracking-page[b-s71ctsnb9h]  .mps-stat { white-space: nowrap; color: #555; }
.tracking-page[b-s71ctsnb9h]  .mps-stat b { color: #000; font-weight: 700; }
.tracking-page[b-s71ctsnb9h]  .mps-stat i { color: #777; font-style: normal; font-size: 12px; }
.tracking-page[b-s71ctsnb9h]  .mps-stat-exc b { color: #cc0000; }

.tracking-page[b-s71ctsnb9h]  .mps-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
    align-items: center;
}

.tracking-page[b-s71ctsnb9h]  .mps-chip {
    font: inherit;
    font-size: 12.5px;
    background: #fff;
    border: 1px solid #b9bec7;
    color: #444;
    padding: 5px 12px;
    cursor: pointer;
}

.tracking-page[b-s71ctsnb9h]  .mps-chip:hover { border-color: #777; }

.tracking-page[b-s71ctsnb9h]  .mps-chip.is-on {
    background: #cc0000;
    border-color: #cc0000;
    color: #fff;
}

.tracking-page[b-s71ctsnb9h]  .mps-find {
    font: inherit;
    font-size: 12.5px;
    padding: 5px 10px;
    border: 1px solid #b9bec7;
    border-radius: 0;
    min-width: 160px;
    min-height: 0;
    width: auto;
    flex: 0 1 220px;
}

.tracking-page[b-s71ctsnb9h]  .mps-awb {
    border: 1px solid #e0e0e0;
    border-top: 0;
    background: #fff;
}

.tracking-page[b-s71ctsnb9h]  .mps-wrap .mps-awb:first-of-type { border-top: 1px solid #e0e0e0; }

.tracking-page[b-s71ctsnb9h]  .mps-awb > summary {
    cursor: pointer;
    padding: 9px 12px;
    background: #fafafa;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}

.tracking-page[b-s71ctsnb9h]  .mps-awb > summary:hover { background: #f0f0f0; }

.tracking-page[b-s71ctsnb9h]  .mps-awbno { font-weight: 700; color: #000; }
.tracking-page[b-s71ctsnb9h]  .mps-awbmeta { color: #666; font-size: 13px; }

.tracking-page[b-s71ctsnb9h]  .mps-variance {
    color: #b06000;
    font-size: 12.5px;
    font-weight: 600;
}

.tracking-page[b-s71ctsnb9h]  .mps-awb-empty {
    padding: 9px 12px;
    background: #fafafa;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: baseline;
}

.tracking-page[b-s71ctsnb9h]  .mps-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tracking-page[b-s71ctsnb9h]  .mps-grid th {
    text-align: left;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #777;
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
}

.tracking-page[b-s71ctsnb9h]  .mps-grid td {
    padding: 7px 12px;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.tracking-page[b-s71ctsnb9h]  .mps-grid tr:last-child td { border-bottom: 0; }

.tracking-page[b-s71ctsnb9h]  .mps-seq { color: #666; }
.tracking-page[b-s71ctsnb9h]  .mps-done { color: #1a7f45; }
.tracking-page[b-s71ctsnb9h]  .mps-pending { color: #999; }
.tracking-page[b-s71ctsnb9h]  .mps-exc { color: #cc0000; white-space: normal; }

.tracking-page[b-s71ctsnb9h]  .mps-note {
    color: #888;
    font-size: 12px;
    margin: 8px 0 0;
}

/* Out-scanned with no in-scan on record. Informational, not an error — amber, not red,
   so it does not read as "your shipment has a problem". */
.tracking-page[b-s71ctsnb9h]  .mps-anomaly {
    color: #8a5a00;
    background: #fdf6e6;
    border-left: 3px solid #d9a300;
    font-size: 12.5px;
    margin: 8px 0 0;
    padding: 8px 12px;
}

.tracking-page[b-s71ctsnb9h]  .mps-anomaly-tag {
    color: #8a5a00;
    font-size: 12.5px;
    font-weight: 600;
}

/* Hidden by the filter script rather than removed, so clearing the filter restores the list. */
.tracking-page[b-s71ctsnb9h]  .mps-hidden { display: none !important; }

@media (max-width: 600px) {
    .tracking-page[b-s71ctsnb9h]  .mps-grid th,
    .tracking-page[b-s71ctsnb9h]  .mps-grid td { padding: 6px 8px; }

    .tracking-page[b-s71ctsnb9h]  .mps-find { flex: 1 1 100%; }
}

/* ── Phone width (delta T10) ────────────────────────────────────────────── */
/* Web Forms kept 40px + 40px of side padding around the results at every width, which on a
   phone left the timeline about half the screen. The shell already pads the page, so the
   tracker gives that space back; the 16px that stays is where the spine and its dots sit.
   A wide piece table scrolls inside its own block instead of pushing the page sideways. */
@media (max-width: 600px) {
    .tracking-page[b-s71ctsnb9h]  .trackerLeft {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tracking-page[b-s71ctsnb9h]  .tracking-results {
        padding-left: 16px;
        padding-right: 0;
    }

    .tracking-page[b-s71ctsnb9h]  .timeline-row { padding-right: 0; }
    .tracking-page[b-s71ctsnb9h]  .timeline-flex { gap: 12px; }
    .tracking-page[b-s71ctsnb9h]  .tl-time { width: 48px; flex: 0 0 48px; }
    .tracking-page[b-s71ctsnb9h]  .sd-label { flex-basis: 110px; min-width: 110px; }
    .tracking-page[b-s71ctsnb9h]  .mps-awb { overflow-x: auto; }
}
/* /Components/Pages/Tracking/TrackDetail.razor.rz.scp.css */
/* ============================================================================
   Piece detail — the udstracker_detail.aspx stylesheet, carried forward (CHG-115),
   scoped under .detail-page. Not carried: the page's own navy top bar (the shell
   has the top bar now) and the DM Sans / DM Mono web fonts (the shell's fonts apply).
   ============================================================================ */

.detail-page[b-9amy3jbsni] {
    --red:      #cc0000;
    --red-dk:   #a60000;
    --navy:     #0d1f44;
    --blue:     #0047ab;
    --green:    #0a7b00;
    --amber:    #b36b00;
    --gray-50:  #f9f9fb;
    --gray-100: #f2f2f5;
    --gray-200: #e4e4ec;
    --gray-400: #9999aa;
    --gray-600: #555566;
    --gray-800: #222233;
    --mono:     ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 14px rgba(0,0,0,.09);
    --radius:   6px;

    font-size: 14px;
    color: var(--gray-800);
    -webkit-font-smoothing: antialiased;
}

/* The old page reset every margin and padding; the same inside this page only. */
.detail-page[b-9amy3jbsni]  * { margin: 0; padding: 0; }

/* ── PAGE SHELL ──────────────────────────────────────────── */
.detail-page[b-9amy3jbsni]  .page-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4px 0 24px;          /* the shell already pads the page */
}

/* ── PAGE HEADER ─────────────────────────────────────────── */
.detail-page[b-9amy3jbsni]  .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.detail-page[b-9amy3jbsni]  .page-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    overflow-wrap: anywhere;
}

.detail-page[b-9amy3jbsni]  .page-header-meta {
    font-size: 13px;
    color: var(--gray-400);
}

/* ── PIECE COUNT BADGE ───────────────────────────────────── */
.detail-page[b-9amy3jbsni]  .piece-count-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 12px 18px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    color: var(--gray-600);
}

.detail-page[b-9amy3jbsni]  .piece-count-bar strong { color: var(--navy); }

.detail-page[b-9amy3jbsni]  .variance-badge {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.detail-page[b-9amy3jbsni]  .variance-badge.all-same {
    background: #e6f4e6;
    color: var(--green);
}

.detail-page[b-9amy3jbsni]  .variance-badge.has-diff {
    background: #fff3e0;
    color: var(--amber);
}

/* ── PIECE GRID ──────────────────────────────────────────── */
.detail-page[b-9amy3jbsni]  .piece-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #fff;
}

.detail-page[b-9amy3jbsni]  .piece-grid:has(> .piece-panel:only-child) { grid-template-columns: 1fr; }

/* LEFT SIDEBAR: piece list */
.detail-page[b-9amy3jbsni]  .piece-list {
    background: var(--gray-100);
    border-right: 1px solid var(--gray-200);
    overflow-y: auto;
    max-height: 70vh;
    /* Web Forms had position: sticky; top: 56px here. Inside the grid (overflow: hidden) that
       never stuck — it only pushed the list 56px down from the top of the grid. */
    align-self: start;
}

.detail-page[b-9amy3jbsni]  .piece-list-header {
    padding: 14px 16px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gray-400);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.detail-page[b-9amy3jbsni]  .piece-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
    color: inherit;
}

.detail-page[b-9amy3jbsni]  .piece-item:hover { background: #fff; }

.detail-page[b-9amy3jbsni]  .piece-item.active {
    background: #fff;
    border-left: 3px solid var(--red);
    padding-left: 13px;
}

.detail-page[b-9amy3jbsni]  .piece-item-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-800);
    min-width: 20px;
}

.detail-page[b-9amy3jbsni]  .piece-item-id {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--gray-400);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-page[b-9amy3jbsni]  .piece-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.detail-page[b-9amy3jbsni]  .dot-delivered { background: var(--green); }
.detail-page[b-9amy3jbsni]  .dot-exception { background: var(--red); }
.detail-page[b-9amy3jbsni]  .dot-transit   { background: var(--blue); }
.detail-page[b-9amy3jbsni]  .dot-default   { background: var(--gray-400); }

/* RIGHT: timeline panel */
.detail-page[b-9amy3jbsni]  .piece-panel { overflow: hidden; min-width: 0; }

.detail-page[b-9amy3jbsni]  .piece-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px 14px;
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
    z-index: 10;
}

.detail-page[b-9amy3jbsni]  .piece-panel-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

.detail-page[b-9amy3jbsni]  .piece-panel-id {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 2px;
}

.detail-page[b-9amy3jbsni]  .piece-status-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.detail-page[b-9amy3jbsni]  .chip-delivered { background: #e6f4e6; color: var(--green); }
.detail-page[b-9amy3jbsni]  .chip-exception { background: #fde8e8; color: var(--red); }
.detail-page[b-9amy3jbsni]  .chip-transit   { background: #e8f0fe; color: var(--blue); }

/* ── TIMELINE ────────────────────────────────────────────── */

/* Hosts the continuous spine */
.detail-page[b-9amy3jbsni]  .detail-timeline {
    padding: 20px 16px 28px 32px;
    position: relative;
}

/* Single continuous spine for the whole timeline */
.detail-page[b-9amy3jbsni]  .detail-timeline::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--gray-200);
    z-index: 0;
}

.detail-page[b-9amy3jbsni]  .tl-day-group { margin-bottom: 8px; }

.detail-page[b-9amy3jbsni]  .tl-day-group:first-child .tl-day-label { padding-top: 4px; }

.detail-page[b-9amy3jbsni]  .tl-day-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--gray-400);
    margin-bottom: 6px;
    padding-left: 0;
    position: relative;
    z-index: 1;
}

.detail-page[b-9amy3jbsni]  .tl-track {
    position: relative;
    padding-left: 0;
}

.detail-page[b-9amy3jbsni]  .tl-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 7px 0;
}

/* Dot — centred on the spine (left: 20px in .detail-timeline, whose content starts at 32px). */
.detail-page[b-9amy3jbsni]  .tl-row::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 11px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gray-400);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--gray-200);
    z-index: 1;
}

.detail-page[b-9amy3jbsni]  .tl-row.ev-delivered::before { background: var(--green); box-shadow: 0 0 0 1px #c3e8c3; }
.detail-page[b-9amy3jbsni]  .tl-row.ev-exception::before { background: var(--red);   box-shadow: 0 0 0 1px #f5c0c0; }
.detail-page[b-9amy3jbsni]  .tl-row.ev-arrival::before,
.detail-page[b-9amy3jbsni]  .tl-row.ev-depart::before    { background: var(--blue);  box-shadow: 0 0 0 1px #b8d0f5; }
.detail-page[b-9amy3jbsni]  .tl-row.ev-hold::before      { background: var(--amber); box-shadow: 0 0 0 1px #f5deb3; }

/* Checkmark for delivered */
.detail-page[b-9amy3jbsni]  .tl-row.ev-delivered::after {
    content: "✓";
    position: absolute;
    left: -17px;
    top: 10px;
    font-size: 9px;
    color: #fff;
    font-weight: 900;
    z-index: 2;
    line-height: 1;
}

.detail-page[b-9amy3jbsni]  .tl-time {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    min-width: 42px;
    padding-top: 2px;
}

.detail-page[b-9amy3jbsni]  .tl-body { flex: 1; min-width: 0; }

.detail-page[b-9amy3jbsni]  .tl-status {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    line-height: 1.3;
}

.detail-page[b-9amy3jbsni]  .tl-status.ev-delivered { color: var(--green); font-weight: 600; }
.detail-page[b-9amy3jbsni]  .tl-status.ev-exception { color: var(--red);   font-weight: 600; }
.detail-page[b-9amy3jbsni]  .tl-status.ev-arrival,
.detail-page[b-9amy3jbsni]  .tl-status.ev-depart    { color: var(--blue); }
.detail-page[b-9amy3jbsni]  .tl-status.ev-hold      { color: var(--amber); }

.detail-page[b-9amy3jbsni]  .tl-loc {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 2px;
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 750px) {
    .detail-page[b-9amy3jbsni]  .piece-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .detail-page[b-9amy3jbsni]  .piece-list {
        position: static;
        max-height: none;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }

    .detail-page[b-9amy3jbsni]  .piece-list-header { display: none; }

    .detail-page[b-9amy3jbsni]  .piece-item {
        flex-direction: column;
        align-items: center;
        min-width: 64px;
        padding: 10px 8px;
        border-bottom: none;
        border-right: 1px solid var(--gray-200);
        gap: 4px;
    }

    .detail-page[b-9amy3jbsni]  .piece-item.active {
        border-left: none;
        border-bottom: 3px solid var(--red);
        padding-left: 8px;
        padding-bottom: 7px;
    }

    .detail-page[b-9amy3jbsni]  .piece-item-id { display: none; }

    .detail-page[b-9amy3jbsni]  .piece-panel-header { padding: 14px 16px 12px; }
}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.detail-page[b-9amy3jbsni]  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-400);
}

.detail-page[b-9amy3jbsni]  .empty-state svg { margin-bottom: 16px; opacity: .4; }
.detail-page[b-9amy3jbsni]  .empty-state h3 { font-size: 18px; color: var(--gray-600); margin-bottom: 8px; }
.detail-page[b-9amy3jbsni]  .empty-state p { margin-bottom: 6px; }

/* ── PRINT ───────────────────────────────────────────────── */
@media print {
    .detail-page[b-9amy3jbsni]  .piece-list { display: none; }
    .detail-page[b-9amy3jbsni]  .piece-grid { display: block; border: none; box-shadow: none; }
    .detail-page[b-9amy3jbsni]  .piece-panel { border: none; }
}
/* /Components/Pages/Tracking/TrackPod.razor.rz.scp.css */
/* ============================================================================
   Proof-of-delivery viewer — the udstracker_pod.aspx stylesheet, carried forward
   (CHG-115), scoped under .pod-page. .content is .pod-content here (the shell owns
   .content); the DM Sans web font is not loaded (the shell's fonts apply).
   ============================================================================ */

.pod-page[b-opmgme3mdj] {
    --red:      #cc0000;
    --navy:     #0d1f44;
    --blue:     #0047ab;
    --gray-50:  #f9f9fb;
    --gray-100: #f2f2f5;
    --gray-200: #e4e4ec;
    --gray-400: #9999aa;
    --gray-600: #555566;

    background: var(--gray-100);
    border-radius: 6px;
    overflow: hidden;
}

/* ── Top bar ── */
.pod-page[b-opmgme3mdj]  .top-bar {
    background: var(--red);
    color: #fff;
    padding: 0 20px;
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

.pod-page[b-opmgme3mdj]  .top-bar .lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pod-page[b-opmgme3mdj]  .top-bar .awb { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

/* ── Layout ── */
.pod-page[b-opmgme3mdj]  .pod-content {
    display: flex;
    gap: 16px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

@media (max-width: 800px) {
    .pod-page[b-opmgme3mdj]  .pod-content { flex-direction: column; align-items: stretch; padding: 12px; }
}

/* ── Column ── */
.pod-page[b-opmgme3mdj]  .col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── Panel ── */
.pod-page[b-opmgme3mdj]  .panel {
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.pod-page[b-opmgme3mdj]  .panel-header {
    background: var(--navy);
    color: #fff;
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pod-page[b-opmgme3mdj]  .panel-header .count {
    font-size: 10px;
    opacity: .65;
    font-weight: 400;
}

.pod-page[b-opmgme3mdj]  .panel-body {
    padding: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.pod-page[b-opmgme3mdj]  .panel-body iframe {
    width: 100%;
    height: 580px;
    border: none;
}

.pod-page[b-opmgme3mdj]  .panel-body img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
}

/* ── Footer link ── */
.pod-page[b-opmgme3mdj]  .panel-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    font-size: 11px;
    color: var(--gray-400);
    word-break: break-all;
}

.pod-page[b-opmgme3mdj]  .panel-footer a {
    color: var(--gray-600);
    text-decoration: none;
}

.pod-page[b-opmgme3mdj]  .panel-footer a:hover { text-decoration: underline; }

/* ── Empty state ── */
.pod-page[b-opmgme3mdj]  .empty-panel {
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    padding: 40px;
    text-align: center;
    color: var(--gray-600);
    font-size: 14px;
    width: 100%;
}