:root {
    --edi-blue: #4b5563;
    --edi-blue-light: #f3f4f6;
    --edi-button: #1e3a8a; /* buttons keep the original blue; the menu bar and other chrome are gray */
    --edi-red: #dc2626;
    --edi-bg: #f8fafc;
    --edi-text: #0f172a;
    --edi-muted: #475569;
    --edi-border: #e2e8f0;
}

html, body {
    background: #f3f5f8;
    color: var(--edi-text);
    font-family: "Public Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

:root {
    --edi-heading-font: "Archivo Narrow", "Arial Narrow", "Segoe UI", sans-serif;
    --edi-mono-font: "JetBrains Mono", Consolas, monospace;
}

/* Reference numbers, weights and money read like freight paperwork. */
.ref { font-family: var(--edi-mono-font); font-size: .9em; }

/* ---- Shell: white top bar, gray menu on the left with the red freight stripe down its edge (canvas SideMenu1, A) ---- */
.portal-appbar { box-shadow: inset 0 -1px 0 #e2e8f0 !important; }
.portal-appbar .mud-toolbar { gap: 16px; }
.appbar-title { font-family: var(--edi-heading-font); font-size: 22px; font-weight: 700; letter-spacing: .02em; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-cta { background: var(--edi-button) !important; color: #fff !important; }
.appbar-cta:hover, .appbar-cta:focus-visible { background: #172e6e !important; }

.side-nav-drawer { background: #4b5563 !important; box-shadow: inset -4px 0 0 var(--edi-red) !important; }
.side-nav { display: flex; flex-direction: column; min-height: 100%; padding: 18px 12px; box-sizing: border-box; color: #e5e7eb; }
.side-nav-logo { display: flex; align-items: center; height: 46px; padding: 0 8px; margin-bottom: 14px; border-radius: 6px; }
.side-nav-logo img { display: block; height: 34px; width: auto; filter: brightness(0) invert(1); }
.side-nav-logo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.side-nav-head { margin: 0; padding: 14px 12px 6px; font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #aeb5bf; }
.side-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; margin: 1px 0; border-radius: 8px; color: #e5e7eb; font-size: 14px; font-weight: 500; text-decoration: none; }
.side-icon { flex-shrink: 0; }
.side-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.side-link.active { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--edi-red); }
.side-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
.side-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: #fff; color: #4b5563; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.side-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.side-user-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-logout { padding: 0; border: none; background: none; font: inherit; font-size: 13px; color: #aeb5bf; cursor: pointer; }
.side-logout:hover, .side-logout:focus-visible { color: #fff; text-decoration: underline; }

/* Card headers: narrow uppercase title over a heavy rule, like a manifest section. */
.mud-card { border: 1px solid #dde3ec; box-shadow: none !important; border-radius: 12px !important; overflow: hidden; }
.mud-card-header { border-bottom: 2px solid var(--edi-text); padding: 12px 20px !important; margin-bottom: 16px; }
.mud-card-header .mud-typography-h6 { font-size: 16px; text-transform: uppercase; letter-spacing: .1em; }
.mud-table-head .mud-table-cell, .mud-data-grid .mud-table-head .mud-table-cell {
    font-family: var(--edi-heading-font);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    color: var(--edi-muted);
}
.mud-data-grid { border: 1px solid #dde3ec; box-shadow: none !important; border-radius: 12px !important; }

/* Pages start right beside the left menu (no centring gap) and use the width available, up to 1680px on very wide screens. */
.page-container { max-width: 1680px !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 40px !important; padding-right: 40px !important; }
@media (max-width: 600px) { .page-container { padding-left: 16px !important; padding-right: 16px !important; } }

.back-link { margin: -8px 0 8px -8px; }
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}
.page-title { font-weight: 700 !important; color: var(--edi-text); font-size: 2rem !important; }
.page-subtitle { color: var(--edi-muted); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.text-muted { color: var(--edi-muted) !important; }
.field-label { color: var(--edi-muted); display: block; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.clickable-row { cursor: pointer; }

.form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.form-errors { margin: 4px 0 0 18px; padding: 0; }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 12px;
    text-align: center;
    color: var(--edi-muted);
}

.sticky-card { position: sticky; top: 88px; }
.grid-search { max-width: 360px; }

/* Required-field asterisks use the freight red accent. */
.mud-input-label .mud-input-label-required,
.mud-input-label-animated.mud-input-label-required::after { color: var(--edi-red); }

/* ---- Line items (quote and pickup) ---- */
.line-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--edi-border);
}
.line-item:last-of-type { border-bottom: none; }
.line-item-number {
    flex: 0 0 28px;
    height: 28px;
    margin-top: 10px;
    border-radius: 50%;
    background: var(--edi-blue-light);
    color: var(--edi-blue);
    font-weight: 600;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.density-note { color: var(--edi-muted); }

/* ---- Accessorials: summary card on the quote page ---- */
.acc-none { margin: 0; color: var(--edi-muted); font-size: 14px; }
.acc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 12px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: var(--edi-blue-light);
    color: var(--edi-blue);
    font-size: 13px;
    font-weight: 600;
}
.acc-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--edi-blue);
    cursor: pointer;
}
.acc-chip-remove:hover { background: #dbe4ff; color: var(--edi-red); }
.acc-chip-remove:focus-visible { outline: 2px solid var(--edi-blue); }


/* ---- Quote summary ---- */
.quote-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 16px;
    background: var(--edi-blue-light);
    border-radius: 6px;
    margin-bottom: 8px;
}
.quote-total-amount { color: var(--edi-blue); font-family: var(--edi-mono-font) !important; font-weight: 500 !important; font-size: 2.1rem !important; }
.quote-lines .num { font-family: var(--edi-mono-font); font-size: 13px; }
.quote-lines td { border-bottom: 1px solid var(--edi-border); }
.quote-lines-total td { font-weight: 700; font-size: 1rem; border-bottom: none; }
.quote-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---- Details ---- */
.detail-card { height: 100%; }
.detail-list { display: grid; grid-template-columns: 130px 1fr; row-gap: 6px; margin: 0; }
.detail-list dt { color: var(--edi-muted); }
.detail-list dd { margin: 0; }

/* ---- Status marks (pickup board, grids) ---- */
.status-mark {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--edi-heading-font);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    white-space: nowrap;
}
.status-dot { width: 8px; height: 8px; display: inline-block; box-sizing: border-box; }
.status-alert { color: #b91c1c; } .status-alert .status-dot { background: var(--edi-red); }
.status-done { color: #166534; } .status-done .status-dot { background: #16a34a; }
.status-active { color: var(--edi-blue); } .status-active .status-dot { background: var(--edi-blue); }
.status-pending { color: #334155; } .status-pending .status-dot { border: 1.5px solid #334155; }

/* ---- Dashboard: finder hero ---- */
/* Canvas "Find a shipment box: modern versions", 1 · one search bar, with "red border, count cards, greeting" A: a light
   gray card with a thin red border all round, the greeting, heading and three count cards on top, and the choices, number
   and Find joined in one white bar. Blue = the Get a rate quote tile. */
.finder {
    background: #eef0f3;
    color: var(--edi-text);
    border: 1.5px solid var(--edi-red);
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 22px;
}
.finder-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.finder-head-text { flex: 1 1 260px; }
.finder-greeting { display: flex; flex-direction: column; margin: 0; color: #64748b; font-size: 13px; line-height: 1.4; }
.finder-greeting strong { color: #334155; font-size: 14px; font-weight: 600; }
.finder-title { margin: 4px 0 0; font-family: var(--edi-heading-font); font-size: 28px; font-weight: 700; letter-spacing: .01em; }
.finder-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.finder-stat { display: flex; align-items: center; gap: 10px; min-width: 150px; box-sizing: border-box; padding: 12px 14px; background: #fff; border: 1px solid #dfe3e8; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.finder-stat-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: #eef2fb; color: var(--edi-button); display: flex; align-items: center; justify-content: center; }
.finder-stat-value { display: block; font-size: 26px; font-weight: 700; line-height: 1.05; color: var(--edi-button); }
.finder-stat-label { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
.finder-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 6px;
    background: #fff;
    border: 1px solid #d1d6dd;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.finder-bar:focus-within { border-color: var(--edi-button); box-shadow: 0 0 0 1px var(--edi-button); }
.finder-kinds { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #eef2fb; }
.finder-kind { border: none; border-radius: 8px; padding: 9px 14px; background: transparent; color: var(--edi-button); font: 600 14px "Public Sans", sans-serif; cursor: pointer; }
.finder-kind:hover { background: #dfe6f7; }
.finder-kind:focus-visible { outline: 2px solid var(--edi-button); outline-offset: 1px; }
.finder-kind.selected { background: var(--edi-button); color: #fff; }
.finder-input { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: #94a3b8; }
.finder-input input { border: none; outline: none; flex: 1; min-width: 0; font-family: var(--edi-mono-font); font-size: 15px; color: var(--edi-text); background: transparent; }
.finder-submit { padding: 11px 26px; border: none; border-radius: 10px; background: var(--edi-button); color: #fff; font: 700 15px "Public Sans", sans-serif; cursor: pointer; }
.finder-submit:hover:not(:disabled), .finder-submit:focus-visible { background: #172e6e; }
.finder-submit:disabled { opacity: .6; cursor: default; }
.finder-error { margin: 10px 0 0; color: #b91c1c; font-size: 14px; font-weight: 600; }

/* ---- Dashboard: quote ledger and pickup board ---- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 22px; margin-bottom: 22px; }
/* Dashboard panels, styled like the Find a shipment box: soft white cards, a normal-case heading with a small red marker,
   light table headings and blue links. Only the customer and sales dashboards use these. */
.manifest-card { background: #fff; border: 1px solid #dfe3e8; border-radius: 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); overflow: hidden; }
.manifest-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #eef1f4; }
.manifest-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--edi-heading-font); font-size: 21px; font-weight: 700; letter-spacing: .01em; }
.manifest-head h2::before { content: ""; width: 4px; height: 20px; flex-shrink: 0; border-radius: 2px; background: var(--edi-red); }
/* View all link in EDI red, like the heading marker. */
.manifest-head .mud-link { font-weight: 600; color: #c8102e !important; }
.manifest-empty { margin: 0; padding: 18px 22px; color: var(--edi-muted); }
.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th { text-align: left; padding: 10px 8px; background: #f8fafc; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #64748b; }
.ledger td { padding: 11px 8px; border-top: 1px solid #eef1f6; }
.ledger th:first-child, .ledger td:first-child { padding-left: 22px; }
.ledger th:last-child, .ledger td:last-child { padding-right: 22px; }
.ledger tbody tr:hover { background: #f5f7fb; }
.pickup-board { display: flex; flex-direction: column; }
.pickup-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 22px;
    border-top: 1px solid #eef1f6;
    color: inherit;
    text-decoration: none;
}
.pickup-row:first-child { border-top: none; }
.pickup-row:hover { background: #f5f7fb; }
.pickup-row-name { display: block; font-weight: 600; font-size: 14px; }
.pickup-row-meta { display: block; font-size: 13px; color: var(--edi-muted); }

/* ---- Sales dashboard: quotes by customer ---- */
.manifest-foot { padding: 6px 14px 10px; border-top: 1px solid #eef1f6; }
.customer-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--edi-muted);
    background: #fff;
}
.customer-filter input { border: none; outline: none; font: inherit; font-size: 14px; width: 170px; background: transparent; color: var(--edi-text); }
.customer-name { font-weight: 600; }
.customer-id { margin-left: 8px; color: var(--edi-muted); }
.use-rate { display: inline-flex; align-items: center; gap: 10px; }
.use-rate-bar { width: 110px; height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden; display: inline-block; }
.use-rate-bar > span { display: block; height: 100%; background: var(--edi-blue); }
.customer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.count-button {
    min-width: 40px;
    padding: 3px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: var(--edi-blue);
    font-family: var(--edi-mono-font);
    font-size: 13px;
    cursor: pointer;
}
.count-button:hover { border-color: var(--edi-blue); background: var(--edi-blue-light); }
.count-button.selected { background: var(--edi-button); border-color: var(--edi-button); color: #fff; }
.count-zero { color: #94a3b8; padding-right: 14px; }
.customer-row-open td { background: var(--edi-blue-light); }
.customer-quotes-row > td { padding: 0 22px 16px !important; background: var(--edi-blue-light); border-top: none !important; }
.customer-quotes { background: #fff; border: 1px solid #dde3ec; border-radius: 10px; overflow: hidden; }
.customer-quotes-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px 6px 16px;
    font-family: var(--edi-heading-font);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 13px;
    border-bottom: 1px solid #eef1f6;
}
.ledger-nested td, .ledger-nested th { padding-top: 8px; padding-bottom: 8px; }
.not-used { color: var(--edi-muted); font-style: italic; }

/* ---- Dashboard: action tiles ---- */
.action-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
/* Dashboards: the tiles sit under the finder, above the boards. */
.action-tiles-top { margin-bottom: 22px; }
.action-tile {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--edi-text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.action-tile:hover { border-color: var(--edi-button); box-shadow: 0 6px 18px rgba(30, 58, 138, .12); }
.action-tile-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--edi-button);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-tile-title { display: block; font-family: var(--edi-heading-font); font-size: 17px; font-weight: 700; }
.action-tile-text { display: block; font-size: 13px; color: var(--edi-muted); }

@media (max-width: 600px) {
    .finder { padding: 18px 16px; }
    .finder-stats { width: 100%; }
    .finder-stat { flex: 1 1 140px; min-width: 0; }
    .finder-kinds, .finder-submit { flex: 1 1 100%; }
    .finder-kinds .finder-kind { flex: 1; }
    .dash-grid { grid-template-columns: 1fr; }
}

/* ---- Documents ---- */
.lookup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.lookup-field { max-width: 280px; }
.document-image { max-width: 100%; height: auto; border: 1px solid var(--edi-border); }

/* ---- Create BOL: numbered sections with a summary panel ---- */
.bol-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.bol-sections { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1100px) {
    .bol-layout { grid-template-columns: minmax(0, 1fr); }
}

.bol-sec { background: #fff; border: 1px solid #dde3ec; border-radius: 12px; overflow: hidden; }
.bol-sec-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 2px solid var(--edi-text); }
.bol-sec-num {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--edi-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--edi-mono-font);
    font-size: 13px;
}
.bol-sec-titles { flex: 1; min-width: 0; }
.bol-sec-titles h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bol-sec-titles p { margin: 1px 0 0; font-size: 12px; color: var(--edi-muted); }
.bol-sec-body { padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.bol-sec-flush { padding: 0; gap: 0; }

.bol-grid { display: grid; gap: 10px; align-items: start; }
.bol-grid .mud-input-control { margin-top: 0; }
.bol-grid-refs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bol-grid-name { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* State is a dropdown (StateSelect): 92px fits the 2-letter code plus the arrow. */
.bol-grid-city { grid-template-columns: minmax(0, 3fr) 92px minmax(0, 2fr); }
.bol-grid-billto { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.bol-grid-statezip { grid-template-columns: 92px minmax(0, 1fr); }
.state-select .mud-select-input { font-family: var(--edi-mono-font); }
.bol-billto-suite { grid-column: 1 / 2; }
.bol-grid-instructions { grid-template-columns: minmax(0, 1fr) 210px; }
.bol-mono input { font-family: var(--edi-mono-font) !important; font-size: 13px !important; }
@media (max-width: 700px) {
    .bol-grid-refs, .bol-grid-billto, .bol-grid-instructions { grid-template-columns: minmax(0, 1fr); }
    .bol-billto-suite { grid-column: auto; }
}

.bol-shipment-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.bol-date { max-width: 190px; }
.bol-terms-field { display: flex; flex-direction: column; gap: 5px; }
.bol-field-label { font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #334155; }
.bol-terms-switch { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.bol-terms-switch button {
    min-height: 40px;
    padding: 0 18px;
    border: none;
    border-left: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-family: var(--edi-heading-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.bol-terms-switch button:first-child { border-left: none; }
.bol-terms-switch button:hover { background: var(--edi-blue-light); color: var(--edi-blue); }
.bol-terms-switch button.selected { background: var(--edi-button); color: #fff; }
.bol-terms-switch button:focus-visible { outline: 2px solid var(--edi-blue); outline-offset: -2px; }

.bol-parties-grid { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: start; }
.bol-parties-arrow { display: flex; justify-content: center; padding-top: 90px; color: #94a3b8; }
.bol-party-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bol-party-fields .mud-input-control { margin-top: 0; }
.bol-party-title { display: flex; align-items: center; gap: 8px; font-family: var(--edi-heading-font); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--edi-blue); }
.bol-party-dot { width: 8px; height: 8px; display: inline-block; }
.bol-party-dot-from { background: var(--edi-blue); }
.bol-party-dot-to { background: var(--edi-red); }
@media (max-width: 800px) {
    .bol-parties-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .bol-parties-arrow { display: none; }
}

.bol-freight { width: 100%; border-collapse: collapse; }
.bol-freight th {
    padding: 10px 6px;
    background: #f8fafc;
    text-align: left;
    font-family: var(--edi-heading-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--edi-muted);
}
.bol-freight td { padding: 6px; border-top: 1px solid #eef1f6; vertical-align: middle; }
.bol-freight th:first-child, .bol-freight td:first-child { padding-left: 22px; }
.bol-freight th:last-child, .bol-freight td:last-child { padding-right: 22px; }
.bol-freight .mud-input-control { margin-top: 0; }
.bol-freight-num { width: 34px; color: #64748b; font-size: 12px; }
.bol-freight-pieces { width: 84px; }
.bol-freight-pkg { width: 130px; }
.bol-freight-weight { width: 110px; }
.bol-freight-class { width: 100px; }
.bol-freight-nmfc { width: 110px; }
.bol-freight-remove { width: 44px; text-align: center; }
.bol-freight th.bol-freight-remove, .bol-freight td.bol-freight-remove { padding-left: 0; }
.bol-freight-totals { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 22px; background: var(--edi-blue-light); border-top: 1px solid #d1d5db; font-size: 14px; }
.bol-freight-totals strong { color: var(--edi-blue); }
@media (max-width: 900px) {
    .bol-sec-flush { overflow-x: auto; }
    .bol-freight { min-width: 760px; }
}

.bol-summary { position: sticky; top: 88px; background: #fff; border: 1px solid #dde3ec; border-radius: 12px; overflow: hidden; }
.bol-summary-head { background: var(--edi-blue); color: #fff; padding: 16px 20px; }
.bol-summary-kicker { font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d1d5db; }
.bol-summary-route { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.bol-summary-place { font-weight: 700; font-size: 15px; }
.bol-summary-zip { font-size: 12px; color: #d1d5db; }
.bol-summary-body { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.bol-summary-facts { margin: 0; font-size: 13px; }
.bol-summary-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.bol-summary-facts dt { color: var(--edi-muted); }
.bol-summary-facts dd { margin: 0; text-align: right; }
.bol-summary-total { border-top: 1px dashed #cbd5e1; margin-top: 4px; padding-top: 8px !important; }
.bol-summary-chip { padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: var(--edi-blue); font-weight: 600; }
.bol-summary-checks { border-top: 1px solid #eef1f6; padding-top: 12px; }
.bol-summary-kicker-dark { font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--edi-muted); }
.bol-summary-checks ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.bol-summary-checks li { display: flex; align-items: center; gap: 8px; }
.bol-summary-checks li.todo { color: #b91c1c; }
.bol-check-mark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.bol-summary-checks li.done .bol-check-mark { background: #16a34a; }
.bol-summary-checks li.todo .bol-check-mark { background: var(--edi-red); }
.bol-summary-note { margin: 0; font-size: 12px; color: #64748b; text-align: center; }
@media (max-width: 1100px) {
    .bol-summary { position: static; }
}

/* ---- Printable BOL ---- */
.bol-preview { padding: 32px; max-width: 900px; }
.bol-document { font-size: 12px; color: #000; }
.bol-head { display: grid; grid-template-columns: 180px 1fr auto; gap: 16px; align-items: start; border-bottom: 2px solid #000; padding-bottom: 12px; }
.bol-head img { width: 170px; height: auto; }
.bol-title h2 { margin: 0; font-size: 20px; text-transform: uppercase; }
.bol-title span { font-size: 11px; text-transform: uppercase; }
.bol-refs th { text-align: left; padding: 1px 8px 1px 0; font-weight: 600; }
.bol-refs td { min-width: 110px; border-bottom: 1px solid #999; }
.bol-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.bol-party { border: 1px solid #000; padding: 8px; min-height: 96px; }
.bol-party h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; background: #eee; padding: 2px 4px; }
.bol-party-name { font-weight: 700; }
.bol-terms { display: flex; flex-wrap: wrap; gap: 16px; padding: 6px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.bol-cod { margin-left: auto; }
.bol-lines { width: 100%; border-collapse: collapse; margin: 12px 0; }
.bol-lines th, .bol-lines td { border: 1px solid #000; padding: 6px; height: 26px; text-align: left; }
.bol-lines thead th { background: #eee; font-size: 11px; text-transform: uppercase; }
.bol-instructions { border: 1px solid #000; padding: 8px; min-height: 70px; }
.bol-instructions p { margin: 4px 0 0; white-space: pre-wrap; }
.bol-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.bol-signatures div { border-top: 1px solid #000; padding-top: 4px; font-size: 11px; }
.bol-foot { margin-top: 16px; font-size: 10px; color: #333; }

.print-only { display: none; }

@media print {
    @page { margin: 12mm; }
    body { background: #fff; }
    .no-print, .mud-appbar, .mud-drawer, .mud-snackbar-provider { display: none !important; }
    /* Pages with a dedicated printout (the BOL) print only that; other pages (billing, shipment details) print as shown. */
    .mud-main-content > .mud-container:has(> .print-only) > *:not(.print-only) { display: none !important; }
    .mud-main-content { padding: 0 !important; margin: 0 !important; }
    .print-only { display: block !important; }
}

/* ---- Login ---- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(160deg, #4b5563 0%, #4b5563 40%, #f8fafc 40%);
}
/* Sign-in form fields and button, used by the Big-hero sign-in page (Components/Account/Login.razor); the rest of
   that page is styled in wwwroot/login.css. */
.login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.login-field label { font-size: .875rem; font-weight: 600; color: var(--edi-text); }
.login-field input {
    font: inherit;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: var(--edi-text);
}
.login-field input:focus { outline: 2px solid var(--edi-blue); outline-offset: 0; border-color: var(--edi-blue); }
.login-field input.invalid { border-color: var(--edi-red); }
.login-password { position: relative; display: flex; }
.login-password input { flex: 1; min-width: 0; padding-right: 70px; }
.login-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; padding: 6px 8px; border-radius: 6px; color: #475569; font: 600 13px "Public Sans", sans-serif; cursor: pointer; }
.login-show:hover, .login-show:focus-visible { background: #f1f5f9; color: var(--edi-text); }
.login-error { color: var(--edi-red); font-size: .8rem; }
.login-submit {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    border: none;
    border-radius: 10px;
    background: var(--edi-red);
    color: #fff;
    font: 700 17px var(--edi-heading-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.login-submit:hover, .login-submit:focus-visible { background: #b91c1c; }
.login-submit:disabled { opacity: .8; cursor: progress; }

/* ---- Quote History and Pickup History (canvas "Quote History and Pickup History", A · clean modern) ---- */
.history-grid.mud-data-grid { background: #fff; border: 1px solid #dfe3e8; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .06) !important; overflow: hidden; }
.history-grid .mud-toolbar { gap: 12px; min-height: 0; padding: 14px 18px !important; border-bottom: 1px solid #eef1f4; }
.history-grid .grid-search .mud-input-outlined-border { border-radius: 10px; }
.history-count { padding: 4px 10px; border-radius: 999px; background: #eef2fb; color: var(--edi-button); font-size: 13px; font-weight: 600; white-space: nowrap; }
.history-period { margin-left: auto; font-size: 13px; color: #64748b; white-space: nowrap; }
/* Column headings: the portal's narrow heading font in spaced capitals, on a soft band with a firm rule under it. */
.history-grid .mud-table-head .mud-table-cell { height: 44px; padding-top: 0; padding-bottom: 0; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); border-bottom: 2px solid #d9e0ea; font-family: var(--edi-heading-font); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #334155; }
.history-grid .mud-table-head .mud-table-cell .mud-button-root { color: #94a3b8; }
/* Sorting: every sortable heading shows a faint arrow so it is clear the column sorts; the sorted column's arrow is blue. */
.history-grid.mud-data-grid .mud-table-cell .column-header .sort-direction-icon { opacity: .35; }
.history-grid.mud-data-grid .mud-table-cell .column-header .sort-direction-icon.mud-direction-asc,
.history-grid.mud-data-grid .mud-table-cell .column-header .sort-direction-icon.mud-direction-desc { opacity: 1; color: var(--edi-button); }
/* Keep each arrow right beside its heading (the grid otherwise pushes it to the far edge of the column). */
.history-grid .mud-table-head .column-header { justify-content: flex-start; gap: 2px; }
.history-grid .mud-table-head .column-header .column-options { margin: 0; }
.history-grid.mud-data-grid .mud-table-cell .column-header .sortable-column-header { width: auto; }
.history-grid .sortable-column-header { cursor: pointer; }
.history-grid .sortable-column-header:hover { color: var(--edi-button); }
.history-grid .mud-table-body .mud-table-cell { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid #f1f4f7; font-size: 14px; }
.history-grid .mud-table-body .mud-table-row:hover .mud-table-cell { background: #f5f7fb; }
.history-grid .mud-table-body .mud-table-row:hover .mud-table-cell:first-child { box-shadow: inset 3px 0 0 var(--edi-button); }
/* Reference column (canvas "Quote # / Online Ref # column styles", 1): a small blue icon, then the number in medium weight. */
.history-ref { display: inline-flex; align-items: center; gap: 8px; font-family: var(--edi-mono-font); font-weight: 500; color: var(--edi-button); }
.history-ref-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: #eef2fb; color: var(--edi-button); display: inline-flex; align-items: center; justify-content: center; }
/* Number columns: headings line up with their right-aligned numbers. */
.history-grid th.num, .history-grid th.num .column-header { text-align: right; justify-content: flex-end; }
/* Sort arrow before the heading so the text lines up on the right (in a reversed row, flex-start is the right edge). */
.history-grid th.num .column-header { flex-direction: row-reverse; justify-content: flex-start; }
.history-strong { font-weight: 600; }
.history-muted { color: #334155; }
.history-sub { display: block; font-size: 12px; color: #64748b; }
.history-lane { display: inline-flex; align-items: center; gap: 8px; font-family: var(--edi-mono-font); }
.history-lane-arrow { color: #94a3b8; font-family: "Public Sans", sans-serif; }
.history-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef2fb; color: var(--edi-button); font-size: 12px; font-weight: 600; white-space: nowrap; }
.history-actions { display: inline-flex; justify-content: flex-end; gap: 2px; }
/* Slightly tighter side padding than the grid default, so nine columns fit beside the left menu. */
.history-grid .mud-table-cell { padding-left: 12px !important; padding-right: 12px !important; }
.history-grid .mud-table-cell:first-child { padding-left: 18px !important; }
.history-grid .mud-table-cell:last-child { padding-right: 18px !important; }
/* Laptop-size screens: a little less padding so every column, Actions included, still fits without scrolling sideways. */
@media (max-width: 1400px) {
    .history-grid .mud-table-cell { padding-left: 8px !important; padding-right: 8px !important; }
    .history-grid .mud-table-cell:first-child { padding-left: 14px !important; }
    .history-grid .mud-table-cell:last-child { padding-right: 14px !important; }
    .history-grid .mud-table-head .mud-table-cell { letter-spacing: .03em; }
}
/* Headings, numbers, dates and references stay on one line; only names and places may wrap. */
.history-grid .mud-table-head .mud-table-cell, .history-grid .mud-table-body .num, .history-grid .history-nowrap, .history-grid .history-ref { white-space: nowrap; }
/* The Actions column only takes the room its icons need, so no gap opens before it. */
.history-grid .history-actions-col { width: 1%; white-space: nowrap; }
/* Row actions: small blue icon buttons with tooltips (truck = Schedule pickup, page = Create BOL), like the sales quote history. */
.history-actions .mud-icon-button { color: var(--edi-button); }
.history-actions .mud-icon-button:hover { background: #eef2fb; }
/* Pickup status as a coloured badge (blue scheduled/other, amber dispatched, green picked up, red needs attention). */
.history-grid .status-mark { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: "Public Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.history-grid .status-pending { background: #eef2fb; color: var(--edi-button); }
.history-grid .status-pending .status-dot { border: none; background: var(--edi-button); }
.history-grid .status-active { background: #fef3c7; color: #92400e; }
.history-grid .status-active .status-dot { background: #d97706; }
.history-grid .status-done { background: #dcfce7; color: #166534; }
.history-grid .status-alert { background: #fee2e2; color: #b91c1c; }
.history-grid .status-dot { border-radius: 50%; width: 7px; height: 7px; }
.history-grid .mud-table-pagination { font-size: 13px; color: #64748b; }

/* ---- Blazor error UI ---- */
#blazor-error-ui {
    background: #fef2f2;
    color: #7f1d1d;
    border-top: 2px solid var(--edi-red);
    bottom: 0;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.manifest-period { font-family: "Public Sans", sans-serif; font-size: 14px; font-weight: 500; color: var(--edi-muted); letter-spacing: 0; }

/* ---- Sales dashboard: leading customers (most quotes / most used) ---- */
.leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; padding: 16px 22px 6px; }
.leader {
    --leader-color: var(--edi-blue);
    --leader-tint: var(--edi-blue-light);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 18px;
    border: 1px solid #dde3ec;
    border-top: 4px solid var(--leader-color);
    border-radius: 10px;
    background: #fff;
    color: var(--edi-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.leader:hover { background: var(--leader-tint); box-shadow: 0 4px 14px rgba(75, 85, 99, .12); }
.leader:focus-visible { outline: 2px solid var(--leader-color); outline-offset: 2px; }
.leader-all { --leader-color: var(--edi-red); --leader-tint: #fef2f2; }
.leader-used { --leader-color: var(--edi-blue); --leader-tint: var(--edi-blue-light); }
.leader-empty { cursor: default; border-top-color: #cbd5e1; }
.leader-title { font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leader-color); }
.leader-name { font-size: 16px; font-weight: 700; }
.leader-headline { font-size: 26px; line-height: 1.2; color: var(--leader-color); }
.leader-detail { font-size: 13px; color: var(--edi-muted); }
.sort-mark { color: var(--edi-blue); font-family: var(--edi-mono-font); margin-left: 2px; }
.pickup-row-freight { display: block; font-size: 12px; color: var(--edi-muted); margin-top: 2px; }

/* ---- BOL: other / 3rd party billing ---- */
.billto-badge {
    padding: 2px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--edi-muted);
    font-family: var(--edi-heading-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.billto-required { background: #fef2f2; color: #b91c1c; }
.bol-party-account { margin-left: 8px; font-weight: 400; font-size: 11px; }

/* ---- Billing information (from the classic billing.asp) ---- */
.bill-card { background: #fff; border: 1px solid #dde3ec; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.bill-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 22px; border-bottom: 2px solid var(--edi-text); }
.bill-card-head h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bill-card-note { font-size: 13px; color: var(--edi-muted); }
.bill-card-actions { margin-left: auto; display: flex; gap: 8px; }

.bill-search { display: grid; grid-template-columns: minmax(0, 1fr) 1px 320px; gap: 24px; align-items: end; padding: 18px 22px; }
.bill-search-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.bill-search-range .mud-input-control, .bill-search-pro .mud-input-control { margin-top: 0; }
.bill-field { display: flex; flex-direction: column; gap: 5px; }
.bill-account { max-width: 190px; }
.bill-range { min-width: 200px; max-width: 220px; }
.bill-search-or { align-self: stretch; background: #e2e8f0; position: relative; }
.bill-search-or span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2px 0; background: #fff; font-size: 12px; color: #64748b; }
.bill-search-pro { display: flex; align-items: flex-end; gap: 10px; }
.bill-search-pro .mud-input-control { flex: 1; }
@media (max-width: 1000px) {
    .bill-search { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .bill-search-or { height: 1px; }
}

.bill-filters { border-top: 1px solid #eef1f6; padding: 10px 22px 16px; }
.bill-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 4px 0;
    color: var(--edi-blue);
    font-family: var(--edi-heading-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}
.bill-filters-hint { font-family: "Public Sans", sans-serif; font-weight: 400; letter-spacing: 0; text-transform: none; color: #64748b; font-size: 12px; }
.bill-filter-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--edi-blue); color: #fff; font-family: var(--edi-mono-font); font-size: 11px; letter-spacing: 0; }
.bill-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.bill-filter-grid .mud-input-control { margin-top: 0; }
@media (max-width: 900px) {
    .bill-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bill-table-wrap { overflow-x: auto; }
.bill-table { width: 100%; min-width: 1060px; border-collapse: collapse; font-size: 13px; }
.bill-table th {
    padding: 10px 8px;
    background: #f8fafc;
    text-align: left;
    font-family: var(--edi-heading-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--edi-muted);
    white-space: nowrap;
}
.bill-table td { padding: 9px 8px; border-top: 1px solid #eef1f6; vertical-align: top; }
.bill-table th:first-child, .bill-table td:first-child { padding-left: 22px; }
.bill-table th:last-child, .bill-table td:last-child { padding-right: 22px; }
.bill-table tbody tr:nth-child(even) { background: #fbfcfe; }
.bill-weight { white-space: nowrap; }
.bill-table tbody tr:hover { background: var(--edi-blue-light); }
/* PRO # opens the shipment details: styled as a plain hyperlink so it's clearly clickable. */
.bill-pro { color: #b91c1c; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bill-pro:visited { color: #6d28d9; }
.bill-pro:hover, .bill-pro:focus-visible { color: #4b5563; text-decoration-thickness: 2px; }
@media print { .bill-pro, .bill-pro:visited { color: inherit; text-decoration: none; } }
.bill-party { display: block; font-weight: 600; }
.bill-party-id { display: block; font-size: 11px; color: #64748b; }
.bill-hidden { color: #94a3b8; }
.bill-delivered { color: #166534; font-weight: 600; }
.bill-apt { padding: 2px 8px; border-radius: 999px; background: #fef2f2; color: #b91c1c; font-weight: 700; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.bill-table-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 22px; border-top: 1px solid #eef1f6; font-size: 13px; color: var(--edi-muted); }
.bill-pager { display: inline-flex; align-items: center; gap: 12px; }
.bill-legend { margin: 0 0 16px; font-size: 12px; color: #64748b; }

/* Summary strip: totals for the whole search. */
.bill-summary .bill-card-head { border-bottom: 1px solid #eef1f6; }
.bill-summary-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }
.bill-summary-tiles > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 22px; border-left: 1px solid #eef1f6; min-width: 0; }
.bill-summary-tiles > div:first-child { border-left: none; }
.bill-summary-tiles dt { display: flex; align-items: center; gap: 8px; font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--edi-muted); }
.bill-summary-tiles dd { margin: 0; font-family: var(--edi-mono-font); font-size: 26px; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.bill-summary-tiles .delivered dd { color: #166534; }
.bill-summary-tiles .ofd dd { color: var(--edi-blue); }
.bill-summary-tiles .apt dd { color: #b91c1c; }
.bill-summary-note { font-size: 12px; color: #64748b; }
.bill-summary-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bill-summary-dot.all { background: #475569; }
.bill-summary-dot.delivered, .bill-summary-bar .delivered { background: #16a34a; }
.bill-summary-dot.ofd, .bill-summary-bar .ofd { background: var(--edi-blue); }
.bill-summary-dot.apt, .bill-summary-bar .apt { background: var(--edi-red); }
.bill-summary-dot.weight { background: #94a3b8; }
.bill-summary-dot.amount { background: var(--edi-text); }
.bill-summary-bar { display: flex; height: 8px; margin: 0 22px 14px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
@media (max-width: 1100px) {
    .bill-summary-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bill-summary-tiles > div:nth-child(4) { border-left: none; }
    .bill-summary-tiles > div:nth-child(n+4) { border-top: 1px solid #eef1f6; }
}
@media (max-width: 600px) {
    .bill-summary-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bill-summary-tiles > div:nth-child(4) { border-left: 1px solid #eef1f6; }
    .bill-summary-tiles > div:nth-child(odd) { border-left: none; }
    .bill-summary-tiles > div:nth-child(n+3) { border-top: 1px solid #eef1f6; }
}

/* ---- Shipment details (classic detail.asp) ---- */
.sd-back { display: inline-block; margin-bottom: 10px; font-family: var(--edi-heading-font); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--edi-blue); }
.sd-title { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.sd-eyebrow, .sd-label, .sd-facts dt, .sd-cod dt, .sd-notes dt {
    font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b;
}
.sd-pro { margin: 0; font-size: 34px; font-weight: 500; letter-spacing: .02em; line-height: 1.1; }
.sd-badge { margin-bottom: 6px; padding: 4px 12px; border-radius: 999px; font-family: var(--edi-heading-font); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sd-badge.delivered { background: #dcfce7; color: #166534; }
.sd-badge.moving { background: var(--edi-blue-light); color: var(--edi-blue); }
.sd-badge.waiting { background: #f1f5f9; color: #475569; }
.sd-actions { margin-left: auto; display: flex; gap: 8px; margin-bottom: 4px; }

.sd-status { padding: 18px 22px; }
.sd-status-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 16px; }
.sd-status-text { font-size: 15px; font-weight: 600; white-space: pre-line; }
.sd-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.sd-track::before { content: ""; position: absolute; top: 11px; left: 8%; right: 8%; height: 3px; background: #e2e8f0; }
.sd-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 4px; }
.sd-dot { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #cbd5e1; box-sizing: border-box; }
.sd-track li.done .sd-dot { background: var(--edi-blue); border-color: var(--edi-blue); }
.sd-track li.final.done .sd-dot { background: #16a34a; border-color: #16a34a; }
.sd-step-label { font-family: var(--edi-heading-font); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #334155; }
.sd-step-value { font-size: 14px; font-weight: 600; color: #94a3b8; }
.sd-track li.done .sd-step-value { color: var(--edi-text); }
.sd-track li.final.done .sd-step-value { color: #166534; }
.sd-weather { margin-top: 16px; padding: 10px 14px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; font-size: 13px; color: #92400e; }

.sd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.sd-main, .sd-side { display: flex; flex-direction: column; }
.sd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin: 0; padding: 16px 22px; }
.sd-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
.sd-facts .sd-wide { grid-column: 1 / -1; }
.sd-facts .sd-wide dd { font-weight: 400; font-size: 14px; }
.sd-multiline { white-space: pre-line; }

.sd-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sd-party { padding: 14px 18px; border-top: 4px solid var(--edi-blue); }
.sd-party.payer { border-top-color: var(--edi-red); }
.sd-party-head { display: flex; justify-content: space-between; align-items: baseline; }
.sd-party-id { font-size: 12px; color: #64748b; }
.sd-party-name { margin-top: 6px; font-size: 15px; font-weight: 700; }
.sd-party-addr { font-size: 14px; color: #334155; line-height: 1.5; }
.sd-party-tel { margin-top: 4px; font-size: 13px; color: var(--edi-muted); }

.sd-items { min-width: 0; font-size: 14px; }
.sd-items .num, .sd-items th.num { text-align: right; }
.sd-items tfoot td { padding: 10px 8px; border-top: 2px solid var(--edi-text); font-weight: 700; }
.sd-items tfoot td:first-child { padding-left: 22px; }
/* Right-aligned in the Total cell, so it sits next to the pieces total. */
.sd-pallet-count { float: right; margin-left: 12px; font-weight: 700; color: var(--edi-text); white-space: nowrap; }
.sd-note { margin: 0; padding: 10px 22px 14px; font-size: 12px; color: #64748b; }

.sd-charges { margin: 0; padding: 12px 18px; font-size: 14px; }
.sd-charges div { display: flex; justify-content: space-between; padding: 4px 0; }
.sd-charges dd { margin: 0; font-family: var(--edi-mono-font); font-size: 13px; }
.sd-charges .minus { color: #b91c1c; }
.sd-charges .total { margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--edi-text); align-items: baseline; }
.sd-charges .total dt { font-family: var(--edi-heading-font); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sd-charges .total dd { font-size: 20px; }
.sd-cod { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; padding: 10px 18px 14px; border-top: 1px solid #eef1f6; font-size: 13px; }
.sd-cod dt, .sd-notes dt { font-size: 11px; }
.sd-cod dd, .sd-notes dd { margin: 0; font-weight: 600; }

.sd-doc { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid #eef1f6; text-decoration: none; color: var(--edi-text); }
a.sd-doc:hover { background: var(--edi-blue-light); }
.sd-doc-code { width: 34px; height: 32px; border-radius: 6px; background: #f3f4f6; color: var(--edi-blue); display: inline-flex; align-items: center; justify-content: center; font-family: var(--edi-heading-font); font-size: 11px; font-weight: 700; }
.sd-doc-name { font-weight: 600; }
.sd-doc-view { margin-left: auto; font-size: 13px; color: var(--edi-blue); }

.sd-staff { background: #fffdf5; border: 1px dashed #d6b85a; }
.sd-staff .bill-card-head { border-bottom: 1px solid #efe3b8; justify-content: space-between; }
.sd-staff .bill-card-note { color: #92400e; }
.sd-notes { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px 18px; font-size: 14px; }
.sd-notes dd { font-weight: 400; }

@media (max-width: 1100px) {
    .sd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .sd-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    .sd-track::before { display: none; }
    .sd-facts, .sd-parties { grid-template-columns: minmax(0, 1fr); }
    .sd-actions { margin-left: 0; }
}
@media print {
    .sd-grid { grid-template-columns: minmax(0, 1fr) 300px; }
    .bill-card { break-inside: avoid; }
}

/* ---- Help centre (/help) ---- */
.help-hero { background: #fff; border: 1px solid #dde3ec; border-radius: 12px; padding: 22px 26px 18px; margin-bottom: 18px; }
.help-hero h1 { margin: 0; font-family: var(--edi-heading-font); font-size: 32px; font-weight: 700; }
.help-hero p { margin: 4px 0 12px; font-size: 14px; color: var(--edi-muted); }
.help-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.help-search { flex: 0 1 560px; }
.help-search.mud-input-control { margin-top: 0; }
.help-scope { font-size: 13px; color: var(--edi-muted); }
.help-textbutton { border: none; background: none; padding: 0; color: #b91c1c; text-decoration: underline; cursor: pointer; font: inherit; }
.help-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.help-chip { border: none; padding: 6px 12px; border-radius: 999px; background: var(--edi-blue-light); color: var(--edi-blue); font: 600 13px "Public Sans", sans-serif; cursor: pointer; }
.help-chip:hover, .help-chip:focus-visible { background: #e5e7eb; }

.help-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.help-topics { position: sticky; top: 84px; background: #fff; border: 1px solid #dde3ec; border-radius: 12px; padding: 12px 0; }
.help-topics-title { padding: 0 18px 6px; font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.help-topic-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 18px; border: none; border-left: 3px solid transparent; background: none; text-align: left; font: 500 14px "Public Sans", sans-serif; color: var(--edi-text); cursor: pointer; }
.help-topic-link:hover { background: #f8fafc; }
.help-topic-link.active { border-left-color: var(--edi-blue); background: var(--edi-blue-light); color: var(--edi-blue); font-weight: 700; }
.help-audience { margin-left: auto; font-size: 11px; font-weight: 500; color: #64748b; white-space: nowrap; }
.help-none { margin: 0; padding: 4px 18px; font-size: 13px; color: #64748b; }

.help-main { min-width: 0; }
.help-topic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 22px; border-bottom: 2px solid var(--edi-text); }
.help-topic-head h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 21px; font-weight: 700; letter-spacing: .03em; }
.help-tag { padding: 2px 8px; border-radius: 999px; background: #f1f5f9; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #475569; }
.help-open { margin-left: auto; font-size: 14px; font-weight: 600; color: #b91c1c; }
.help-summary { margin: 12px 22px 0; font-size: 14px; color: var(--edi-muted); }
.help-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; padding: 16px 22px 20px; }
.help-body-wide { grid-template-columns: minmax(0, 1fr); }
.help-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.help-tab { border: none; padding: 6px 12px; border-radius: 8px 8px 0 0; background: #f3f4f6; color: var(--edi-blue); font: 700 13px var(--edi-heading-font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.help-tab.active { background: var(--edi-button); color: #fff; }
.help-media-note { margin: 8px 0 0; font-size: 12px; color: #64748b; }
.help-video { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background: #0f172a; }
.help-video-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; box-sizing: border-box; background: linear-gradient(135deg, var(--edi-blue), #0f172a); color: #fff; text-align: center; font-size: 13px; }
.help-video-soon strong { font-size: 16px; }
.help-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--edi-blue); display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px; box-sizing: border-box; }

.help-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.help-steps li { display: flex; gap: 12px; padding: 4px 6px; border-radius: 8px; font-size: 14px; line-height: 1.45; }
.help-steps li:hover { background: #f8fafc; }
.help-step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--edi-blue); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 14px var(--edi-heading-font); }
.help-tip { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; font-size: 13px; color: #92400e; }

.help-more { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.help-more:hover { border-color: #94a3b8; }
.help-more-thumb { flex-shrink: 0; width: 72px; height: 42px; border-radius: 6px; background: linear-gradient(135deg, var(--edi-blue), #0f172a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.help-more-text { display: flex; flex-direction: column; min-width: 0; }
.help-more-title { font-family: var(--edi-heading-font); font-size: 17px; font-weight: 700; }
.help-more-summary { font-size: 13px; color: var(--edi-muted); }

.help-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 22px; border-radius: 12px; background: var(--edi-blue); color: #d1d5db; font-size: 13px; }
.help-contact-title { font-family: var(--edi-heading-font); font-size: 18px; font-weight: 700; color: #fff; }
.help-contact-button { margin-left: auto; padding: 8px 16px; border-radius: 8px; background: #fff; color: var(--edi-button); font: 700 14px var(--edi-heading-font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }

@media (max-width: 1100px) {
    .help-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
    .help-layout { grid-template-columns: minmax(0, 1fr); }
    .help-topics { position: static; }
}

/* Screen guides (HelpGuide.razor): a small drawing of a page. Sizes are in em so the whole drawing scales with its box. */
.hg { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 10px; background: #f3f5f8; font-size: clamp(7px, 1.05vw, 10px); line-height: 1.35; display: flex; box-sizing: border-box; }
.hg-page { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .6em; padding-bottom: .6em; }
/* The portal's left menu, drawn small. Rows have fixed heights so markers can point at them (see HelpGuide.razor). */
.hg-rail { width: 13%; flex-shrink: 0; display: flex; flex-direction: column; padding: 0 .35em; box-sizing: border-box; background: #4b5563; box-shadow: inset -.25em 0 0 var(--edi-red); color: #e5e7eb; }
.hg-rail-logo { height: 12%; display: flex; align-items: center; padding: 0 .4em; color: #fff; font: 700 1.3em var(--edi-heading-font); }
.hg-rail-item { height: 8%; display: flex; align-items: center; padding: 0 .5em; border-radius: .4em; white-space: nowrap; overflow: hidden; }
.hg-rail-item.hg-on { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; box-shadow: inset .2em 0 0 var(--edi-red); }
.hg-rail-user { margin-top: auto; height: 10%; display: flex; align-items: center; padding: 0 .4em; border-top: 1px solid rgba(255, 255, 255, .15); color: #fff; white-space: nowrap; overflow: hidden; }
.hg-mini { display: flex; height: 100%; }
.hg-mini .hg-rail { width: 26%; }
.hg-mini .hg-card { margin: 0 .6em; }
.hg b { font-weight: 700; }
/* The white top bar: page name and Get a quote. */
.hg-bar { display: flex; align-items: center; gap: 1em; min-height: 2.6em; padding: 0 1em; background: #fff; box-shadow: inset 0 -1px 0 #e2e8f0; color: var(--edi-text); }
.hg-bar b { font: 700 1.25em var(--edi-heading-font); }
.hg-bar-cta { margin-left: auto; padding: .3em .7em; border-radius: .35em; background: var(--edi-button); color: #fff; font: 700 .9em var(--edi-heading-font); letter-spacing: .05em; }
.hg-card { margin: 0 1em; padding: .7em .8em; background: #fff; border: 1px solid #dde3ec; border-radius: .6em; display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.hg-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.hg-card.hg-row { flex-direction: row; }
.hg-col { display: flex; flex-direction: column; gap: .6em; min-width: 0; }
.hg-grow { flex: 1; }
.hg-spacer { flex: 1; }
.hg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin: 0 1em; }
.hg-grid2 > .hg-card { margin: 0; }
.hg-split { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; height: 100%; }
.hg-split .hg-card { margin: 0 .6em; }
.hg-input { padding: .35em .6em; border: 1px solid #cbd5e1; border-radius: .35em; background: #fff; color: #475569; white-space: nowrap; }
.hg-light { background: rgba(255, 255, 255, .95); }
.hg-btn { padding: .35em .7em; border: 1px solid var(--edi-button); border-radius: .35em; color: var(--edi-button); font: 700 .95em var(--edi-heading-font); letter-spacing: .06em; white-space: nowrap; text-align: center; }
.hg-primary { background: var(--edi-button); color: #fff; }
.hg-wide { display: block; }
.hg-chip { padding: .25em .6em; border-radius: 999px; background: #f3f4f6; color: var(--edi-button); white-space: nowrap; }
.hg-link { color: #b91c1c; text-decoration: underline; font-family: var(--edi-mono-font); }
.hg-red { color: #b91c1c; }
.hg-green { color: #166534; }
.hg-blue { color: var(--edi-button); }
.hg-muted { color: #64748b; }
.hg-big { font: 500 2.2em var(--edi-mono-font); }
.hg-line { height: .9em; border-radius: .3em; background: #eef1f6; }
.hg-table { display: flex; flex-direction: column; }
.hg-table > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; padding: .3em 0; border-top: 1px solid #eef1f6; }
.hg-table.hg-cols5 > div { grid-template-columns: 1.2fr 1.4fr 1.4fr 1fr 1fr; }
.hg-table.hg-cols6 > div { grid-template-columns: .8fr 1fr 1.5fr 1fr 1.3fr 1fr; }
.hg-table > .hg-th { border-top: none; color: #475569; font-weight: 700; text-transform: uppercase; }
.hg-filter span { height: 1.2em; border: 1px solid #cbd5e1; border-radius: .25em; }
.hg-hover { background: #f5f7fb; }
.hg-tab { padding: .2em .6em; border-radius: .4em .4em 0 0; background: #f3f4f6; color: var(--edi-button); }
.hg-tab.hg-on { background: var(--edi-button); color: #fff; }
.hg-finder { margin: 0 1em; padding: .9em 1em; border-radius: .8em; background: #eef0f3; border: .12em solid var(--edi-red); color: var(--edi-text); display: flex; align-items: center; gap: .6em; font: 700 1.3em var(--edi-heading-font); }
.hg-finder .hg-input, .hg-finder .hg-btn { font: .75em "Public Sans", sans-serif; }
.hg-finder .hg-btn { background: var(--edi-button); color: #fff; }
.hg-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; margin: 0 1em; }
.hg-tiles span { padding: .6em; background: #fff; border: 1px solid #dde3ec; border-radius: .5em; font-weight: 700; }
.hg-stats { flex-direction: row; justify-content: space-around; text-align: center; }
.hg-stats span { display: flex; flex-direction: column; font-size: .85em; }
.hg-stats b { font: 500 1.6em var(--edi-mono-font); }
.hg-slider { height: .5em; border-radius: 999px; background: #e2e8f0; }
.hg-slider span { display: block; width: 60%; height: 100%; border-radius: inherit; background: var(--edi-button); }
.hg-login { align-self: center; justify-self: center; width: 70%; padding: 1.2em; background: #fff; border: 1px solid #dde3ec; border-radius: .8em; display: flex; flex-direction: column; gap: .7em; }
.hg-logo { color: var(--edi-red); font: 700 1.4em var(--edi-heading-font); }
.hg-title { font: 700 1.5em var(--edi-heading-font); }
.hg-bol { display: grid; grid-template-columns: 1.6fr 1fr; gap: .6em; margin: 0 1em; }
.hg-bol .hg-card { margin: 0; }
.hg-sec { display: flex; align-items: center; gap: .6em; padding: .7em .8em; background: #fff; border: 1px solid #dde3ec; border-radius: .5em; }
.hg-sec i { font-style: normal; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--edi-text); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.hg-check { color: #166534; }
.hg-doc { display: flex; align-items: center; gap: .6em; padding: .4em 0; border-top: 1px solid #eef1f6; }
.hg-doc i { font-style: normal; padding: .3em .4em; border-radius: .3em; background: #f3f4f6; color: var(--edi-button); font-weight: 700; }
.hg-doc .hg-link { margin-left: auto; font-family: inherit; }
.hg-scan { height: 5em; border-radius: .3em; background: repeating-linear-gradient(0deg, #f1f5f9 0 .6em, #e2e8f0 .6em .7em); }
.hg-mark { position: absolute; z-index: 1; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--edi-red); color: #fff; font: 700 1.2em var(--edi-heading-font); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 .3em rgba(220, 38, 38, .25); transition: transform .15s, background-color .15s; }
/* Pointing at a step highlights its marker in the drawing. */
.help-topic:has(.help-steps li[data-step="1"]:hover) .hg-mark[data-step="1"],
.help-topic:has(.help-steps li[data-step="2"]:hover) .hg-mark[data-step="2"],
.help-topic:has(.help-steps li[data-step="3"]:hover) .hg-mark[data-step="3"],
.help-topic:has(.help-steps li[data-step="4"]:hover) .hg-mark[data-step="4"],
.help-topic:has(.help-steps li[data-step="5"]:hover) .hg-mark[data-step="5"],
.help-topic:has(.help-steps li[data-step="6"]:hover) .hg-mark[data-step="6"] {
    transform: scale(1.4);
    background: var(--edi-blue);
    box-shadow: 0 0 0 .4em rgba(75, 85, 99, .3);
}
@media (prefers-reduced-motion: reduce) {
    .hg-mark { transition: none; }
}

/* ---- "Ask EDI" chat (ChatAssistant.razor, customer logins) ---- */
.chat-launcher { position: fixed; right: 28px; bottom: 24px; z-index: 1300; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border: none; border-radius: 999px; background: var(--edi-red); color: #fff; font: 700 16px var(--edi-heading-font); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(220, 38, 38, .35); cursor: pointer; }
.chat-launcher:hover, .chat-launcher:focus-visible { background: #b91c1c; }
.chat-panel { position: fixed; right: 28px; bottom: 88px; z-index: 1300; width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100vh - 140px)); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 23, 42, .28); }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; background: var(--edi-blue); color: #fff; box-shadow: inset 0 -3px 0 var(--edi-red); }
.chat-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: #fff; color: var(--edi-blue); display: flex; align-items: center; justify-content: center; font: 700 13px var(--edi-heading-font); }
.chat-title { font: 700 18px var(--edi-heading-font); letter-spacing: .04em; }
.chat-subtitle { font-size: 12px; color: #d1d5db; }
.chat-close { margin-left: auto !important; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; font-size: 14px; line-height: 1.45; }
.chat-bubble { max-width: 88%; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
.chat-bot { align-self: flex-start; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px 14px 14px 4px; }
.chat-mine { align-self: flex-end; background: var(--edi-blue); color: #fff; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; }
.chat-card { display: flex; flex-direction: column; gap: 6px; }
.chat-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-size: 11px; text-align: center; color: #64748b; }
/* The shipment's stage, in words as well as colour. */
.chat-status { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font: 700 12px var(--edi-heading-font); letter-spacing: .08em; text-transform: uppercase; background: #f1f5f9; color: #475569; }
.chat-status-delivered { background: #dcfce7; color: #166534; }
.chat-status-outfordelivery { background: var(--edi-blue-light); color: var(--edi-blue); }
.chat-status-appointment { background: #fef2f2; color: #b91c1c; }
.chat-status-intransit { background: #f3f4f6; color: #3730a3; }
.chat-step { display: flex; flex-direction: column; gap: 2px; }
.chat-step-bar { height: 6px; border-radius: 3px; background: #e2e8f0; }
.chat-step.done { color: var(--edi-text); }
.chat-step.done .chat-step-bar { background: var(--edi-blue); }
.chat-step.final .chat-step-bar { background: #16a34a; }
.chat-step.final b { color: #166534; }
.chat-meta { font-size: 12px; color: #475569; }
.chat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.chat-item { padding: 6px 8px; border-radius: 8px; background: #f8fafc; color: var(--edi-text); text-decoration: none; font-size: 13px; }
.chat-item:hover, .chat-item:focus-visible { background: var(--edi-blue-light); }
.chat-shipment { display: flex; flex-direction: column; gap: 2px; }
.chat-shipment .chat-status { font-size: 11px; padding: 2px 8px; }
.chat-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.chat-links a { font-size: 13px; font-weight: 600; color: #b91c1c; }
.chat-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-choice { border: none; padding: 5px 10px; border-radius: 999px; background: var(--edi-blue-light); color: var(--edi-blue); font: 600 12px "Public Sans", sans-serif; cursor: pointer; }
.chat-choice:hover:not(:disabled), .chat-choice:focus-visible { background: #e5e7eb; }
.chat-choice:disabled { opacity: .5; cursor: default; }
.chat-typing { flex-direction: row; gap: 4px; padding: 14px 12px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: chat-dot 1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e2e8f0; }
.chat-input input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: 14px "Public Sans", sans-serif; color: var(--edi-text); }
.chat-input input:focus { outline: 2px solid var(--edi-blue); outline-offset: 0; border-color: var(--edi-blue); }
.chat-send { width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 10px; background: var(--edi-button); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-send:disabled { background: #94a3b8; cursor: default; }
@media (max-width: 600px) {
    .chat-launcher { right: 16px; bottom: 16px; }
    .chat-panel { right: 16px; bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-typing span { animation: none; opacity: .7; }
}

/* Density calculator (canvas "Density calculator", from the classic density.asp): entry card, result cards with the class
   in blue, and the NCC guidelines beside them. Used at density (signed in) and tools/density (public). */
.density-intro { margin: 0 0 18px; max-width: 760px; font-size: 15px; color: var(--edi-muted); }
.density { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; max-width: 1240px; }
.density-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.density-card { background: #fff; border: 1px solid var(--edi-border); border-radius: 14px; padding: 18px 22px; }
.density-grid { display: grid; grid-template-columns: 28px repeat(5, minmax(0, 1fr)); gap: 10px; align-items: center; }
.density-head { padding-bottom: 8px; border-bottom: 1px solid #eef0f3; font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.density-row { margin-top: 8px; }
.density-num { font-weight: 700; color: #94a3b8; }
.density-row input { width: 100%; min-width: 0; height: 38px; box-sizing: border-box; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; font-family: var(--edi-mono-font); font-size: 14px; color: var(--edi-text); }
.density-row input::placeholder { color: #cbd5e1; }
.density-row input:focus { outline: 2px solid var(--edi-button); outline-offset: -1px; border-color: var(--edi-button); }
.density-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.density-btn { padding: 10px 20px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; font-family: var(--edi-heading-font); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.density-btn:hover { background: #f8fafc; }
.density-btn-primary { border-color: var(--edi-button); background: var(--edi-button); color: #fff; }
.density-btn-primary:hover { background: #172e6e; }
.density-hint { margin-left: auto; font-size: 13px; color: #64748b; }
.density-message { margin: 12px 0 0; font-size: 14px; color: #b91c1c; }
.density-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 12px; }
.density-stat, .density-class { display: flex; flex-direction: column; gap: 4px; border-radius: 12px; padding: 14px 16px; }
.density-stat { background: #fff; border: 1px solid var(--edi-border); }
.density-stat-label { font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.density-stat-value { font-size: 24px; font-weight: 700; }
.density-stat-value small { font-size: 14px; font-weight: 500; color: #64748b; }
.density-class { background: var(--edi-button); border-left: 4px solid #c8102e; color: #fff; }
.density-class .density-stat-label, .density-class-note { color: #c7d2fe; }
.density-class-value { font-size: 30px; font-weight: 700; line-height: 1.1; }
.density-class-note { font-size: 12px; }
.density-guide { background: #fff; border: 1px solid var(--edi-border); border-radius: 14px; padding: 16px 18px; }
.density-guide h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 18px; font-weight: 700; }
.density-guide p { margin: 2px 0 10px; font-size: 12px; color: #64748b; }
.density-guide table { width: 100%; border-collapse: collapse; font-size: 13px; }
.density-guide th { padding: 6px 8px; border-bottom: 1px solid #eef0f3; text-align: left; font-family: var(--edi-heading-font); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.density-guide td { padding: 4px 8px; }
.density-guide .num { text-align: right; }
.density-guide tr.current td { background: #eef2ff; font-weight: 700; }
.density-guide tr.current td:first-child { border-radius: 6px 0 0 6px; }
.density-guide tr.current td:last-child { border-radius: 0 6px 6px 0; }
/* Public pages (PublicLayout): Sign in at the bottom of the left menu. */
.side-public { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; line-height: 1.4; color: #d1d5db; }
.side-public p { margin: 0 0 10px; }
.side-public-cta { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 999px; background: #c8102e; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.side-public-cta:hover, .side-public-cta:focus-visible { background: #a50d26; }
@media (max-width: 1100px) {
    .density { grid-template-columns: minmax(0, 1fr); }
    .density-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .density-card { padding: 14px; }
    .density-grid { grid-template-columns: 20px repeat(5, minmax(0, 1fr)); gap: 6px; }
    .density-head { font-size: 10px; letter-spacing: .04em; }
    .density-row input { padding: 0 6px; font-size: 13px; }
    .density-hint { margin-left: 0; }
}

/* Sales Summary (canvas "Sales Summary", option A; from the classic sales_Summary.asp): a card per period, the quota in
   blue with a progress bar, and the announcements. */
.ss { display: flex; flex-direction: column; gap: 12px; max-width: 1600px; }
.ss-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.ss-date { margin: 0; font-size: 14px; color: #64748b; }
.ss-head h1 { margin: 0; font-family: var(--edi-heading-font); font-size: 24px; font-weight: 700; }
.ss-period { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 14px; font-weight: 600; color: var(--edi-muted); }
.ss-period select { height: 40px; min-width: 190px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font: inherit; font-weight: 600; color: var(--edi-text); }
.ss-period select:focus { outline: 2px solid var(--edi-button); outline-offset: -1px; }
/* Compact layout (option B): the three period cards side by side. */
.ss-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1250px) { .ss-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ss-cards { grid-template-columns: 1fr; } }
.ss-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; background: #fff; border: 1px solid var(--edi-border); border-radius: 14px; }
.ss-card-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 6px; }
.ss-card-sub { margin: 2px 0 0; font-size: 13px; color: #475569; }
.ss-card-sub b { color: var(--edi-text); }
.ss-card-title h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 17px; font-weight: 700; }
.ss-card-title span { font-size: 12px; color: #64748b; }
.ss-card-note { margin: 0; font-size: 14px; color: #64748b; }
.ss-stat { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 1px solid #eef0f3; min-width: 0; }
.ss-label { font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.ss-value { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.ss-card .ss-label { font-size: 11px; }
.ss-card .ss-value { font-size: 22px; line-height: 1.2; white-space: nowrap; overflow-wrap: normal; }
.ss-range { font-size: 15px; }
.ss-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Quota card: the light blue of the chart's shaded area, navy edge, figures and bar. */
.ss-quota { padding: 12px 18px; border-radius: 14px; background: #e9eff9; border: 1px solid #d3ddf0; border-left: 4px solid var(--edi-button); color: var(--edi-text); }
.ss-quota .ss-label { color: #475569; }
.ss-quota-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 2px; font-size: 13px; color: #475569; }
.ss-quota-value { font-size: 22px; font-weight: 700; color: var(--edi-button); }
.ss-bar { height: 8px; margin-top: 8px; border-radius: 999px; background: rgba(30, 58, 138, .15); overflow: hidden; }
.ss-bar span { display: block; height: 100%; background: var(--edi-button); }
.ss-quota p { margin: 6px 0 0; font-size: 13px; }
/* Pace: when made or on track, the left edge and bar turn green with an "On track" / "Quota made" chip; otherwise the
   card stays navy with no status. */
.ss-quota-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-pace { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ss-quota.pace-good { border-left-color: #16a34a; }
.ss-quota.pace-good .ss-bar span { background: #16a34a; }
.ss-quota.pace-good .ss-pace { background: #dcfce7; color: #166534; }
.ss-quota-none { background: #fff; border: 1px solid var(--edi-border); border-left: 4px solid #94a3b8; color: var(--edi-text); }
.ss-quota-none .ss-label { color: #64748b; }
.ss-quota-none p { color: #64748b; }
/* Announcements: a banner on one full-width line in the portal's navy (light navy background, navy stripe, megaphone and
   title; the latest news in red); wraps on small screens. */
.ss-news { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 18px; background: #eef2ff;
    border: 1px solid #c7d2fe; border-left: 5px solid var(--edi-button); border-radius: 14px; box-shadow: 0 1px 3px rgba(30, 58, 138, .12); }
.ss-news .ss-news-icon { color: var(--edi-button); font-size: 24px; }
.ss-news h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--edi-button); }
.ss-news p { margin: 0; font-size: 14px; line-height: 1.45; color: #1e293b; }
.ss-news .ss-news-alert { display: inline-flex; align-items: center; gap: 8px; color: #b91c1c; font-weight: 700; }
@media (max-width: 1000px) {
    .ss-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ss-card-title, .ss-card-note { grid-column: 1 / -1; }
    .ss-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ss-period { margin-left: 0; width: 100%; }
    .ss-period select { flex: 1; min-width: 0; }
    .ss-value { font-size: 19px; }
}

/* New Rate Quote: a quote is priced first and saved with Save, like the sales quote screen. */
.quote-save-badge { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.quote-save-badge.unsaved { background: #fef3c7; color: #92400e; }
.quote-save-badge.saved { background: #dcfce7; color: #166534; }
.quote-save-btn { margin-top: 16px; }
.quote-save-btn.saved.mud-button-disabled { background: #dcfce7 !important; color: #166534 !important; }

/* Quote card: one Accessorials line with the total; its charges open under it (canvas "accessorials grouped", A). */
.quote-acc-toggle { margin-left: 6px; padding: 0; border: none; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--edi-button); cursor: pointer; }
.quote-acc-toggle:hover, .quote-acc-toggle:focus-visible { text-decoration: underline; }
.quote-acc-list > td { padding-top: 0 !important; }
.quote-acc-list > td > div:first-child { margin-top: 6px; }
.quote-acc-line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 10px; background: #f8fafc; font-size: 13px; color: #334155; }
.quote-acc-line:first-child { padding-top: 8px; border-radius: 8px 8px 0 0; }
.quote-acc-line:last-child { padding-bottom: 8px; border-radius: 0 0 8px 8px; margin-bottom: 6px; }

/* New Rate Quote message pop-ups, style B "Accent bar" (canvas "Quote pop-ups"): white card, colored bar on the left
   edge, outline icon. Error uses EDI red; check amber; note blue; saved green. */
.quote-msg { --msg-accent: #c8102e; border-left: 6px solid var(--msg-accent); border-radius: 10px !important; }
.quote-msg-error { --msg-accent: #c8102e; }
.quote-msg-check { --msg-accent: #b45309; }
.quote-msg-note { --msg-accent: #1e3a8a; }
.quote-msg-saved { --msg-accent: #15803d; }
.quote-msg .mud-dialog-content { padding: 20px 22px 4px !important; }
.quote-msg-body { display: flex; align-items: flex-start; gap: 14px; }
.quote-msg-icon { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--msg-accent); color: var(--msg-accent); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; }
.quote-msg-title { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--edi-text); }
.quote-msg-text { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #1f2937; }
.quote-msg-list { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: #1f2937; }
.quote-msg-help { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #6b7280; }
.quote-msg .mud-dialog-actions { padding: 12px 22px 16px; }
.quote-msg-ok { min-width: 88px; }

/* Sales Summary chart (canvas "Sales Summary chart", B "Line"): net freight (blue, left scale) and shipments (EDI red,
   right scale) per manifest month; the month in progress is dashed. */
.ss-trend { padding: 14px 18px; background: #fff; border: 1px solid var(--edi-border); border-radius: 14px; }
.ss-trend-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; }
.ss-trend-head h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 18px; font-weight: 700; }
.ss-trend-head p { margin: 2px 0 0; font-size: 13px; color: #64748b; }
.ss-trend-totals { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 0 auto; text-align: right; }
.ss-trend-totals dt { font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.ss-trend-totals dd { margin: 0; font-size: 18px; font-weight: 700; }
.ss-trend-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0 2px; padding: 0; list-style: none; font-size: 13px; color: #475569; }
.ss-trend-legend li { display: flex; align-items: center; gap: 8px; }
.ss-key { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 6px; }
.ss-key-net { border-color: #1e3a8a; }
.ss-key-ship { border-color: #dc2626; }
.ss-key-dash { border-top: 3px dashed #64748b; }
.ss-trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ss-grid { stroke: #e2e8f0; stroke-width: 1; }
.ss-axis { font-size: 13px; fill: #64748b; font-family: "Public Sans", sans-serif; }
.ss-axis-ship { fill: #b91c1c; }
.ss-area { fill: #dbe4f5; opacity: .6; }
.ss-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ss-line-net { stroke: #1e3a8a; }
/* Shipments in the portal red (Sales Performance chart). */
.ss-line-ship { stroke: #dc2626; stroke-width: 2.5; }
.ss-dashed { stroke-dasharray: 7 7; }
.ss-dot { fill: #fff; stroke-width: 3; cursor: default; }
.ss-dot-net { stroke: #1e3a8a; }
.ss-dot-ship { stroke: #dc2626; stroke-width: 2.5; }
.ss-dot.open { stroke-dasharray: 3 2; }
.ss-month { font-size: 13px; fill: #475569; font-family: "Public Sans", sans-serif; }
.ss-month.current { font-weight: 700; fill: var(--edi-text); }
.ss-trend-error { margin: 16px 0 0; color: #b91c1c; font-size: 14px; }
.ss-trend-table-wrap { overflow-x: auto; margin-top: 6px; }
.ss-trend-toggle { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; padding: 2px 4px; border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--edi-button); cursor: pointer; }
.ss-trend-toggle:hover { text-decoration: underline; }
.ss-trend-toggle:focus-visible { outline: 2px solid var(--edi-button); outline-offset: 1px; border-radius: 4px; }
.ss-trend-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.ss-trend-table th, .ss-trend-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid #eef0f3; }
.ss-trend-table th[scope="row"] { text-align: left; color: #475569; font-weight: 600; }
.ss-trend-table thead th { font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #64748b; }
.ss-trend-table .current { color: var(--edi-text); }
@media (max-width: 700px) { .ss-trend-totals { margin-left: 0; text-align: left; } }

/* Schedule Pickup for Sales and Admin: the Customer step (canvas "Sales pickups"). */
.pu-customer-find { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.pu-customer-id { flex: 0 0 180px; }
.pu-customer-error { margin: 8px 0 0; color: #b91c1c; font-size: 14px; }
.pu-customer-results { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--edi-border); border-radius: 8px; max-height: 260px; overflow-y: auto; }
.pu-customer-results li + li { border-top: 1px solid #eef0f3; }
.pu-customer-results button { display: flex; flex-wrap: wrap; gap: 4px 10px; width: 100%; padding: 9px 12px; border: none; background: none; text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
.pu-customer-results button:hover, .pu-customer-results button:focus-visible { background: #f1f5f9; }
.pu-customer-chosen { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; font-size: 14px; }
.pu-days { flex: 0 0 160px; max-width: 160px; }
@media (max-width: 600px) { .pu-customer-id { flex-basis: 100%; } }

/* Sales Summary: searchable Sales # picker (superusers and salespeople with several numbers). */
.ss-salesnum { align-items: center; }
.ss-rep-picker { width: 300px; margin: 0 !important; }
.ss-rep-picker .mud-input-outlined { background: #fff; border-radius: 8px; }
.ss-rep-picker .mud-input-slot { font-weight: 600; color: var(--edi-text); }
.ss-rep-option { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-rep-num { flex: none; min-width: 48px; padding: 2px 8px; border-radius: 999px; background: #e0e7ff; color: var(--edi-button); font-family: var(--edi-mono-font); font-size: 12px; font-weight: 600; text-align: center; }
.ss-rep-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ss-rep-popover .mud-list-item { padding-top: 6px; padding-bottom: 6px; }
.ss-rep-empty { display: block; padding: 10px 16px; color: #64748b; font-size: 14px; }
@media (max-width: 560px) { .ss-rep-picker { width: 100%; } }

/* Sales Summary: Top 10 customers (canvas "Sales Summary: top 10 customers", A). */
.ss-top { padding: 14px 18px; background: #fff; border: 1px solid var(--edi-border); border-radius: 14px; }
.ss-top-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ss-top-head > div:first-child { flex: 1 1 380px; min-width: 0; }
.ss-top-head h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 18px; font-weight: 700; }
.ss-top-head p { margin: 2px 0 0; font-size: 13px; color: #64748b; }
/* "Count bills by" Created month / Manifest month: a labelled two-part switch, the chosen one filled navy like the
   portal's buttons. */
.ss-top-basis { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ss-top-basis-label { font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.ss-top-switch { display: flex; padding: 3px; gap: 3px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.ss-top-switch button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 7px; background: none;
    font: inherit; font-size: 14px; font-weight: 600; color: #334155; cursor: pointer; transition: background-color .15s, color .15s; }
.ss-top-switch button .mud-icon-root { font-size: 18px; color: #64748b; }
.ss-top-switch button:hover:not(.on) { background: #f1f5f9; }
.ss-top-switch button.on { background: var(--edi-button); color: #fff; box-shadow: 0 1px 3px rgba(30, 58, 138, .35); }
.ss-top-switch button.on .mud-icon-root { color: #fff; }
.ss-top-switch button:focus-visible { outline: 2px solid var(--edi-button); outline-offset: 2px; }
@media (max-width: 700px) { .ss-top-basis { margin-left: 0; flex-wrap: wrap; } }
.ss-top-note { margin: 16px 0 4px; font-size: 14px; color: #64748b; }
.ss-top-note.error { color: #b91c1c; }
.ss-top-table-wrap { overflow-x: auto; margin-top: 8px; }
.ss-top-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ss-top-table th { padding: 8px 8px; border-bottom: 1px solid var(--edi-border); text-align: left; font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.ss-top-table td { padding: 4px 8px; border-bottom: 1px solid #f1f5f9; }
.ss-top-table .num { text-align: right; white-space: nowrap; }
.ss-top-table .rank { width: 40px; }
.ss-top-table .share { width: 30%; min-width: 180px; }
.ss-rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #eef1f6; color: #475569; font-size: 12px; font-weight: 700; }
.ss-rank.top { background: var(--edi-button); color: #fff; }
.ss-top-id { margin-left: 4px; font-family: var(--edi-mono-font); font-size: 12px; color: #64748b; }
.ss-top-net { font-weight: 600; }
.ss-share { display: flex; align-items: center; gap: 8px; }
.ss-share-bar { flex: 1; height: 8px; border-radius: 999px; background: #eef2ff; overflow: hidden; }
.ss-share-bar span { display: block; height: 100%; background: var(--edi-button); }
.ss-share-pct { width: 46px; text-align: right; font-size: 12px; color: #475569; }
.ss-top-table tfoot td { border-bottom: none; padding-top: 10px; color: #475569; }
.ss-top-more { margin-left: 10px; padding: 0; border: none; background: none; font: inherit; font-weight: 600; color: var(--edi-button); cursor: pointer; }
.ss-top-more:hover, .ss-top-more:focus-visible { text-decoration: underline; }

/* Rep scorecard (canvas "Sales Performance: rep scorecard", option A). Grade bands: A green, B navy, C amber, D red. */
.rs-band-A { --band-bg: #dcfce7; --band-ink: #166534; --band-bar: #16a34a; }
.rs-band-B { --band-bg: #e0e7ff; --band-ink: #1e3a8a; --band-bar: #1e3a8a; }
.rs-band-C { --band-bg: #fef3c7; --band-ink: #92400e; --band-bar: #d97706; }
.rs-band-D { --band-bg: #fee2e2; --band-ink: #991b1b; --band-bar: #dc2626; }
.rs-band-none { --band-bg: #f1f5f9; --band-ink: #64748b; --band-bar: #94a3b8; }
.rs-divider td { padding: 12px 8px 6px !important; font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; background: #fff !important; }
.rs-ungraded td { color: #64748b; }
.rs-ungraded .rs-rep { color: #475569; }
.rs-grade-mix { display: flex; flex-wrap: wrap; gap: 6px; font-size: 16px !important; }
.rs-mix { padding: 2px 8px; border-radius: 7px; background: var(--band-bg); color: var(--band-ink); }
.rs-table-card, .rs-how, .rs-note { padding: 14px 18px; background: #fff; border: 1px solid var(--edi-border); border-radius: 14px; }
.rs-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.rs-table-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.rs-table-head h2, .rs-how h2, .rs-note h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 18px; font-weight: 700; }
.rs-table-head p { margin: 2px 0 0; font-size: 13px; color: #64748b; }
.rs-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-chip { padding: 3px 9px; border-radius: 999px; background: var(--band-bg); color: var(--band-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.rs-table-wrap { overflow-x: auto; margin-top: 8px; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.rs-table th { padding: 8px; border-bottom: 1px solid var(--edi-border); text-align: left; font-family: var(--edi-heading-font); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.rs-table td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.rs-table tbody tr:hover td { background: #f8fafc; }
.rs-table .num { text-align: right; white-space: nowrap; }
.rs-rank { width: 28px; color: #64748b; font-weight: 700; }
.rs-rep { padding: 0; border: none; background: none; font: inherit; font-weight: 700; color: var(--edi-button); cursor: pointer; text-align: left; }
.rs-rep:hover, .rs-rep:focus-visible { text-decoration: underline; }
.rs-rep:disabled { cursor: wait; }
.rs-making { margin-left: 6px; font-size: 12px; color: #64748b; font-style: italic; }
.rs-all { white-space: nowrap; }
.rs-progress { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 2px; padding: 10px 14px; border: 1px solid #c7d2fe; border-radius: 10px; background: #eef2ff; }
.rs-progress-text { display: flex; justify-content: space-between; font-size: 14px; color: #1e3a8a; }
.rs-progress-text span { font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-progress-sub { font-size: 12px; color: #475569; }
.rs-open { margin-left: 4px; padding: 2px; border: none; border-radius: 6px; background: none; color: #64748b; cursor: pointer; vertical-align: middle; }
.rs-open:hover, .rs-open:focus-visible { background: #eef2ff; color: var(--edi-button); }
.rs-grade { display: inline-block; min-width: 30px; padding: 3px 7px; border-radius: 7px; background: var(--band-bg); color: var(--band-ink); font-weight: 700; text-align: center; }
.rs-score { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.rs-score b { width: 22px; }
.rs-score-bar { flex: 1; height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.rs-score-bar span { display: block; height: 100%; border-radius: 999px; background: var(--band-bar); }
.rs-strong { font-weight: 600; }
.rs-up { color: #15803d; }
.rs-down { color: #b91c1c; }
.rs-risk { color: #b91c1c; font-weight: 700; }
.rs-verdict { min-width: 260px; font-size: 13px; line-height: 1.35; color: #334155; }
.rs-how-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 8px; font-size: 13px; line-height: 1.45; color: #334155; }
.rs-how-grid b { display: block; color: var(--edi-text); }
.rs-how-grid b span { color: var(--edi-button); }
.rs-how p, .rs-note p { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #475569; }
@media (max-width: 1000px) { .rs-how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ss-top-table tfoot .ss-top-net { color: var(--edi-text); font-weight: 700; }
.ss-top-table tfoot .share { font-size: 12px; }

/* Sales Summary: clickable Top 10 rows and the customer details pop-up. */
.ss-top-row { cursor: pointer; }
.ss-top-row:hover td { background: #f8fafc; }
.ss-top-name { padding: 0; border: none; background: none; font: inherit; font-weight: 700; color: var(--edi-button); cursor: pointer; text-align: left; }
.ss-top-name:hover, .ss-top-name:focus-visible { text-decoration: underline; }
/* The customer pop-up fills the page area only: below the top bar and, on wide screens, right of the left menu, which
   stay in view under a light shade. */
.ss-cust-backdrop { background-color: rgba(15, 23, 42, .18) !important; }
.mud-dialog.ss-cust { position: fixed; top: calc(var(--mud-appbar-height, 64px) + 12px); bottom: 12px; left: 12px; right: 12px;
    width: auto; max-width: none; max-height: none; margin: 0; }
@media (min-width: 960px) {
    .mud-dialog.ss-cust { left: calc(var(--mud-drawer-width-left, 240px) + 16px); right: 16px; }
}
.ss-cust .mud-dialog-title { padding: 16px 24px; border-bottom: 1px solid var(--edi-border); }
.ss-cust-content { padding: 16px 24px !important; }
.ss-cust-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-right: 32px; }
.ss-cust-title .ss-rank { width: 34px; height: 34px; font-size: 14px; }
.ss-cust-who h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 22px; font-weight: 700; }
.ss-cust-who p { margin: 2px 0 0; font-size: 13px; color: #64748b; }
.ss-cust-period { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: var(--edi-button); font-size: 12px; font-weight: 700; }
.ss-cust-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ss-stat-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--edi-border); border-radius: 12px; }
.ss-cust-sub { font-size: 12px; color: #64748b; }
.ss-cust-trend { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--edi-border); border-radius: 12px; }
.ss-cust-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ss-cust-section-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.ss-cust-section-head span { font-size: 12px; color: #64748b; }
.ss-cust-svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.ss-cust-bills { margin-top: 14px; border: 1px solid var(--edi-border); border-radius: 12px; overflow: hidden; }
.ss-cust-table .mud-toolbar { flex-wrap: wrap; gap: 8px; height: auto; min-height: 56px; padding: 8px 14px; background: #f8fafc; }
.ss-cust-search { max-width: 280px; margin: 0 !important; }
.ss-cust-table th { font-family: var(--edi-heading-font); font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: #64748b !important; white-space: nowrap; }
.ss-cust-table .num { text-align: right; white-space: nowrap; }
.ss-cust-table .ctr { text-align: center; white-space: nowrap; }
/* 14 columns: tighter cells, and long names cut with "…" (full name on hover). */
.ss-cust-table th, .ss-cust-table td { padding: 6px 8px !important; }
.ss-cust-table td { font-size: 13px; }
.ss-cust-table .ss-cust-name { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1600px) {
    .ss-cust-table .ss-cust-name { max-width: 120px; }
    .ss-cust-table th, .ss-cust-table td { padding: 6px 6px !important; }
    .ss-cust-table th { letter-spacing: .02em; font-size: 11px !important; }
    .ss-cust-content { padding: 12px 12px !important; }
    .ss-cust-table .ss-cust-name { max-width: 110px; }
}
@media (max-width: 800px) { .ss-cust-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-cust-period { margin-left: 0; } }

/* Bill Search (/sales/bills, the classic sales_bills.asp): three search boxes, five figures, the bills table. */
.bs-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; }
@media (max-width: 1100px) { .bs-search { grid-template-columns: 1fr; } }
.bs-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 16px; background: #fff; border: 1px solid var(--edi-border); border-radius: 14px; }
.bs-row { display: flex; gap: 8px; align-items: center; }
.bs-input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font: inherit; color: var(--edi-text); }
.bs-input:focus { outline: 2px solid var(--edi-button); outline-offset: -1px; }
.bs-hint { font-size: 12px; color: #64748b; }
.bs-basis { margin-left: 0; flex-wrap: wrap; }
.bs-basis .ss-top-switch button { padding: 6px 12px; }
.ss-top-switch button:disabled { opacity: .45; cursor: not-allowed; }
.bs-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bs-kpis .ss-label { letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1250px) { .bs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .bs-kpis { grid-template-columns: 1fr; } }
.bs-results { background: #fff; border: 1px solid var(--edi-border); border-radius: 14px; padding: 4px 4px 0; min-width: 0; }
.bs-results-head { display: flex; flex-direction: column; }
.bs-results-head h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 17px; font-weight: 700; }
.bs-results-head span { font-size: 12px; color: #64748b; }
.bs-filter { max-width: 420px; }
.bs-table .mud-table-container { overflow-x: auto; }
.bs-table th { background: #4b5563 !important; color: #f9fafb !important; font-size: 12px; font-weight: 700; white-space: nowrap; }
.bs-table td { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bs-table .num { text-align: right; }
.bs-table .ctr { text-align: center; }
.bs-name { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.bs-state { display: block; font-size: 11px; font-weight: 700; color: #64748b; }
.bs-po { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.bs-mono { font-family: var(--edi-mono-font); font-size: 12px; }
.bs-small { font-size: 12px !important; }
.bs-navy { color: var(--edi-button); }
.bs-good { color: #15803d !important; font-weight: 700; }
.bs-bad { color: var(--edi-red) !important; font-weight: 700; }
.bs-muted { color: #94a3b8; }

/* Manifest detail (/sales/manifest/{n}, the classic manifest_detail.asp): trip line, dispatch note, totals, bills. */
.md-back { font-size: 13px; font-weight: 600; color: var(--edi-red); text-decoration: none; }
.md-back:hover { text-decoration: underline; }
.md-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.md-title h1 { margin: 0; font-family: var(--edi-heading-font); font-size: 24px; font-weight: 700; }
.md-route { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: var(--edi-button); color: #fff; font-weight: 700; font-size: 14px; }
.md-route span[aria-hidden] { opacity: .7; }
.md-status { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.md-ok { background: #dcfce7; color: #15803d; }
.md-late { background: #fee2e2; color: #b91c1c; }
.md-moving { background: #e0e7ff; color: var(--edi-button); }
.md-waiting { background: #f1f5f9; color: #475569; }
.md-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 0 auto; font-size: 13px; color: #475569; }
.md-meta b { color: var(--edi-text); }
.md-top { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1000px) { .md-top { grid-template-columns: 1fr; } }
.md-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 10px 0 0; padding: 0; list-style: none; }
.md-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 8px; height: 3px; border-radius: 2px; background: var(--edi-button); }
.md-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.md-steps li b { font-size: 15px; }
.md-time { font-size: 12px; color: #64748b; min-height: 16px; }
.md-dot { width: 18px; height: 18px; margin-bottom: 4px; border-radius: 50%; background: #fff; border: 3px solid var(--edi-button); box-sizing: border-box; }
.md-step-done .md-dot { background: var(--edi-button); }
.md-step-none .md-dot { border-color: #cbd5e1; }
.md-step-none b { color: #94a3b8; }
.md-step-ok .md-dot { background: #15803d; border-color: #15803d; }
.md-step-ok b { color: #15803d; }
.md-step-late .md-dot { background: var(--edi-red); border-color: var(--edi-red); }
.md-step-late b { color: var(--edi-red); }
@media (max-width: 700px) { .md-steps { grid-template-columns: 1fr; gap: 10px; } .md-steps::before { display: none; } }
.md-note { border-left: 4px solid var(--edi-button); }
.md-note p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.md-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .md-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .md-kpis { grid-template-columns: 1fr; } }
.md-name { max-width: 300px; }
.bs-muted-id { color: #64748b; }
.md-total { margin: 0; padding: 10px 16px 12px; font-size: 13px; font-weight: 600; color: #475569; }

/* Bill Search in the Billing page's layout: a wider search row (period, or a PO #, or a PRO #), six summary tiles. */
.bs-search2 { grid-template-columns: minmax(0, 1fr) 1px auto; gap: 24px; align-items: start; }
.bs-search2 > .bill-search-range:first-child { padding-top: 0; }
.bs-search2 .bill-search-or { align-self: stretch; }
.bs-search2 .bill-search-range { flex-wrap: nowrap; }
.bs-search2 .bill-range { min-width: 170px; max-width: 180px; }
@media (max-width: 1250px) { .bs-search2 { grid-template-columns: 1fr; } .bs-search2 .bill-search-or { display: none; } .bs-search2 .bill-search-range { flex-wrap: wrap; } }
.bs-find { align-items: flex-start; }
.bs-find .bill-field, .bs-find .mud-button-root { margin-top: 0; }
.bs-find .bs-find-field { width: 230px; flex: 0 0 auto; }
.bs-find .bs-find-field .mud-input-helper-text { margin-top: 2px; }
.bs-find > .mud-button-root { align-self: flex-start; margin-top: 23px; }
.bs-find > .bill-field + .mud-input-control { margin-top: 22px; }
.bs-search2 .bol-terms-switch button:disabled { opacity: .45; cursor: not-allowed; }
.bs-bill-table { min-width: 0; table-layout: fixed; font-size: 11.5px; }
.bs-bill-table th, .bs-bill-table td { padding-left: 5px; padding-right: 5px; }
.bs-bill-table th:first-child, .bs-bill-table td:first-child { padding-left: 10px; }
.bs-bill-table th:last-child, .bs-bill-table td:last-child { padding-right: 10px; }
.bs-bill-table th { white-space: normal; vertical-align: bottom; font-size: 10px; letter-spacing: .03em; }
.bs-bill-table th.bs-nowrap, .bs-bill-table th.bs-nowrap .bs-sort { white-space: nowrap; }
.bs-bill-table .bs-po { max-width: 100%; }
.bs-bill-table td.bs-small { white-space: normal; font-size: 11.5px; }
.bs-id { display: block; font-family: var(--edi-mono-font); font-size: 11px; color: #64748b; }
.bs-th-sub { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #64748b; }
.bs-multi { display: table; margin-top: 2px; padding: 0 4px; border-radius: 4px; background: #e0e7ff; color: var(--edi-button); font-size: 10px; font-weight: 700; vertical-align: 1px; }
.bs-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: none; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.bs-sort:hover { color: var(--edi-button); }
.bs-sort:focus-visible { outline: 2px solid var(--edi-button); outline-offset: 2px; border-radius: 2px; }
.bs-sort-arrow { font-size: 10px; color: #cbd5e1; }
.bs-sort-arrow.on { color: var(--edi-button); }
.bs-sortable.ctr .bs-sort { justify-content: center; }
@media print { .bs-sort-arrow { display: none; } }
.bs-bill-table th.ctr, .bs-bill-table td.ctr { text-align: center; }
.bs-bill-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-card-actions .bs-filter { width: 300px; max-width: 100%; }
.bill-card-actions .bs-filter .mud-input-control { margin-top: 0; }
.bill-card-actions { align-items: center; flex-wrap: wrap; }


/* Bill Search: the Summary as one strip (shipments and size, money, status chips) with the delivery bar under it. */
.bs-strip { padding: 12px 22px 10px; }
.bs-strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bs-strip-row h2 { margin: 0; font-family: var(--edi-heading-font); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bs-strip-ship { font-size: 13px; color: var(--edi-muted); }
.bs-strip-big { font-family: var(--edi-mono-font); font-weight: 500; font-size: 20px; color: var(--edi-text); }
.bs-strip-sep { width: 1px; height: 26px; background: #e2e8f0; }
.bs-strip-money { display: inline-flex; align-items: baseline; gap: 6px; }
.bs-strip-money b { font-family: var(--edi-mono-font); font-weight: 500; font-size: 17px; }
.bs-strip-money b.commission { color: var(--edi-button); }
.bs-strip-slash { color: #94a3b8; font-size: 16px; }
.bs-strip-label { font-family: var(--edi-heading-font); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--edi-muted); }
.bs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; font-size: 13px; color: #334155; }
.bs-chip b { font-family: var(--edi-mono-font); font-weight: 500; }
.bs-chip.ontime { background: #dcfce7; color: #166534; }
.bs-strip-bar { margin: 10px 0 0; height: 5px; }
.bs-bill-table td.bs-wrap { white-space: normal; overflow: visible; }
.bs-bill-table .bs-st { text-align: left; padding-left: 4px; }
.bs-bill-table th.bs-st .bs-sort { justify-content: flex-start; }
.bs-bill-table .c-pu { width: 74px; } .bs-bill-table .c-pro { width: 74px; } .bs-bill-table .c-mnf { width: 62px; } .bs-bill-table .c-name { width: auto; }
.bs-bill-table .c-st { width: 44px; } .bs-bill-table .c-po { width: 64px; } .bs-bill-table .c-quote { width: 62px; } .bs-bill-table .c-money { width: 64px; }
.bs-bill-table .c-fsc { width: 50px; } .bs-bill-table .c-pcs { width: 32px; } .bs-bill-table .c-lbs { width: 50px; } .bs-bill-table .c-etd { width: 44px; }
.bs-bill-table .c-rev { width: 50px; } .bs-bill-table .c-appt { width: 54px; } .bs-bill-table .c-del { width: 60px; } .bs-bill-table .c-ontime { width: 46px; }
.bs-bill-table .c-wi { width: 46px; }
/* Bill Search: every header on one line; names wrap under them with the #ID below. */
.bs-bill-table thead th, .bs-bill-table thead th .bs-sort { white-space: nowrap; }
.bs-bill-table td.bs-wrap .bs-name { display: block; max-width: none; white-space: normal; overflow-wrap: break-word; line-height: 1.25; }.bs-bill-table td.bs-wrap .bs-po { display: block; max-width: none; white-space: normal; overflow-wrap: anywhere; overflow: visible; }

/* Apps in the left menu: a small arrow when the app opens in a new tab. */
.side-link-ext { margin-left: auto; font-size: 12px; opacity: .7; }


/* Top bar: a page's one-line description beside its title (Billing, Bill Search). */
.appbar-subtitle { margin-left: 14px; min-width: 0; font-size: 14px; color: var(--edi-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .appbar-subtitle { display: none; } }
/* Bill Search: Admin's Sales # picker at the right end of the Search card's header. */
.bill-card-head .ss-salesnum { margin-left: auto; }




/* Top bar: a page's own buttons at the right end (SectionOutlet "topbar-actions"). */
.appbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-left: 12px; }
.appbar-actions:empty { display: none; }

/* Dashboard � Quotes by customer: every header sorts (an arrow marks the column; a second click reverses). */
.sd-sort { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: none; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.sd-sort:hover { color: var(--edi-button); }
.sd-sort:focus-visible { outline: 2px solid var(--edi-button); outline-offset: 2px; border-radius: 2px; }
th.num .sd-sort { justify-content: flex-end; }
.sd-sort .sort-mark { color: #cbd5e1; }
.sd-sort .sort-mark.on { color: var(--edi-blue); }