:root {
    --track-green: #138a4b;
    --track-blue: #1d63d8;
    --track-amber: #b86a09;
    --track-red: #b42332;
    --track-purple: #6842c2;
}

#resultsSection { scroll-margin-top: 78px; }
#resTrackingNum { overflow-wrap: anywhere; }

.shipment-summary-card {
    position: relative;
    overflow: hidden;
    border-top-width: 4px !important;
}
.shipment-summary-card[data-tone="success"] { border-top-color: var(--track-green) !important; }
.shipment-summary-card[data-tone="info"] { border-top-color: var(--track-blue) !important; }
.shipment-summary-card[data-tone="warning"] { border-top-color: var(--track-amber) !important; }
.shipment-summary-card[data-tone="danger"] { border-top-color: var(--track-red) !important; }
.shipment-summary-card[data-tone="neutral"] { border-top-color: #64748b !important; }

.status-badge {
    white-space: nowrap;
    box-shadow: 0 8px 24px -18px currentColor;
}
.status-badge::before {
    content: "";
    width: .55rem;
    height: .55rem;
    flex: none;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.shipment-route {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #f8fafc, #fff);
    border: 1px solid #e5e7eb;
}
.shipment-route__track {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .8rem;
}
.shipment-route__line {
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--track-blue), #c9a24b);
    position: relative;
}
.shipment-route__line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 3px solid #c9a24b;
    border-right: 3px solid #c9a24b;
    transform: translateY(-50%) rotate(45deg);
}
.shipment-route__point {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--track-blue);
    box-shadow: 0 0 0 5px #dbeafe;
}
.shipment-route__point:last-child {
    background: #c9a24b;
    box-shadow: 0 0 0 5px #fef3c7;
}
.shipment-route__labels {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .8rem;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}
.shipment-route__labels span:last-child { text-align: right; }

.timeline-entry {
    border-radius: .9rem;
    padding: .7rem .85rem;
    transition: transform .2s ease, background .2s ease;
}
.timeline-entry:hover { transform: translateX(3px); background:#f8fafc; }
.timeline-entry--latest {
    background: linear-gradient(135deg, #fff8e8, #fff);
    border: 1px solid #f4dfaa;
    box-shadow: 0 12px 30px -24px #7c4a03;
}
.timeline-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px #dbe2ea, 0 4px 12px rgba(15,23,42,.12);
    display: grid;
    place-items: center;
}
.timeline-dot--success { background: var(--track-green); }
.timeline-dot--info { background: var(--track-blue); }
.timeline-dot--warning { background: var(--track-amber); }
.timeline-dot--danger { background: var(--track-red); }
.timeline-dot--neutral { background: #64748b; }
.timeline-dot--latest {
    box-shadow: 0 0 0 5px #fef3c7, 0 7px 16px rgba(184,106,9,.24);
}
.timeline-current {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .5rem;
    padding: .18rem .45rem;
    border-radius: 999px;
    color: #92400e;
    background: #fef3c7;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.live-update {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
    color: var(--track-green);
    font-size: .62rem;
    font-weight: 800;
}
.live-update::before {
    content: "";
    width: .48rem;
    height: .48rem;
    border-radius: 999px;
    background: var(--track-green);
    box-shadow: 0 0 0 4px #dcfce7;
}

.freight-specific {
    padding: .7rem .8rem;
    border-radius: .8rem;
    background: #f8fafc;
    border-left: 3px solid #c9a24b;
}

@media (max-width: 640px) {
    #resultsSection { padding-left: .75rem !important; padding-right: .75rem !important; }
    #resultsSection .rounded-2xl { border-radius: 1rem; }
    #resTrackingNum { font-size: 1.35rem !important; line-height: 1.25; }
    .status-badge { width: 100%; justify-content: center; }
    .shipment-route__labels { font-size: .62rem; }
    .timeline-entry { padding-right: .25rem; }
    #invoiceSection { padding: 1rem !important; }
    #invoiceSection table { min-width: 0; table-layout: fixed; }
    #invoiceSection th:first-child,
    #invoiceSection td:first-child { width: 52%; overflow-wrap: anywhere; }
    #invoiceSection th:nth-child(2),
    #invoiceSection td:nth-child(2) { width: 14%; }
    #invoiceSection th:last-child,
    #invoiceSection td:last-child { width: 34%; }
    #downloadInvoiceBtn { font-size: .78rem; }
}

/* Full customer-dashboard redesign */
.tracking-page {
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--brand-blue, #1d63d8) 12%, transparent), transparent 28rem),
        radial-gradient(circle at 92% 28%, color-mix(in srgb, var(--brand-gold, #c9a24b) 16%, transparent), transparent 24rem),
        var(--track-page-bg, #e9eef6) !important;
    color: #111827;
}
.tracking-page .portal-hero {
    padding-top: 4.5rem;
    padding-bottom: 5.5rem;
}
.tracking-dashboard {
    margin-top: -2.4rem;
    position: relative;
    z-index: 4;
}
.dashboard-shell { align-items: start; }
.dashboard-primary { min-width: 0; }
.dashboard-sidebar {
    min-width: 0;
    position: sticky;
    top: 5.5rem;
}
.dashboard-card {
    border-color: rgba(203, 213, 225, .78) !important;
    box-shadow: 0 18px 50px -38px rgba(15, 23, 42, .55), 0 2px 8px rgba(15, 23, 42, .04) !important;
}

.dashboard-hero-card {
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(circle at 85% -20%, rgba(212, 42, 66, .55), transparent 23rem),
        radial-gradient(circle at 10% 130%, rgba(29, 99, 216, .45), transparent 22rem),
        linear-gradient(135deg, #081225 0%, #101d3f 55%, #151d36 100%) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-top: 0 !important;
    box-shadow: 0 26px 60px -30px rgba(4, 13, 33, .85) !important;
}
.dashboard-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .22;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.3) .7px, transparent .7px);
    background-size: 20px 20px;
    mask-image: linear-gradient(90deg, #000, transparent 75%);
}
.dashboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.1rem;
    color: #e7c972;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.dashboard-hero-card #resTrackingNum {
    color: #fff !important;
    font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
    letter-spacing: -.03em;
}
.dashboard-hero-card .text-gray-400 { color: rgba(255,255,255,.48) !important; }
.dashboard-hero-card > .grid {
    border-color: rgba(255,255,255,.1) !important;
    gap: .65rem !important;
}
.dashboard-stat {
    position: relative;
    min-height: 5.3rem;
    padding: .95rem .9rem .9rem 3.1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.08);
}
.dashboard-stat__icon {
    position: absolute;
    left: .9rem;
    top: 1rem;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: .55rem;
    display: grid;
    place-items: center;
    color: #e7c972;
    background: rgba(201,162,75,.13);
    font-size: .7rem;
}
.dashboard-stat p:last-child {
    color: #fff !important;
    line-height: 1.35;
}
.dashboard-stat #resOrigin,
.dashboard-stat #resDest,
.dashboard-stat #resETA,
.dashboard-stat #resLastUpdate { color: #fff !important; }
.dashboard-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1rem;
}
.dashboard-actions button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .78rem;
    border-radius: .7rem;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    font-size: .65rem;
    font-weight: 800;
    transition: .2s ease;
}
.dashboard-actions button:hover {
    color: #fff;
    background: rgba(255,255,255,.13);
    transform: translateY(-1px);
}
.dashboard-hero-card .status-badge {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.18) !important;
    backdrop-filter: blur(12px);
    box-shadow: none;
}
.dashboard-hero-card[data-tone="success"] .status-badge::before { color: #4ade80; background:#4ade80; }
.dashboard-hero-card[data-tone="info"] .status-badge::before { color: #60a5fa; background:#60a5fa; }
.dashboard-hero-card[data-tone="warning"] .status-badge::before { color: #fbbf24; background:#fbbf24; }
.dashboard-hero-card[data-tone="danger"] .status-badge::before { color: #fb7185; background:#fb7185; }

.dashboard-hero-card .shipment-route {
    padding: 1.1rem 1.2rem 1rem;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.1);
}
.dashboard-hero-card .shipment-route__labels { color: rgba(255,255,255,.78); }
.dashboard-hero-card .shipment-route__point {
    background: #3182f6;
    box-shadow: 0 0 0 5px rgba(49,130,246,.18);
}
.dashboard-hero-card .shipment-route__point:last-child {
    background: #d5ad4d;
    box-shadow: 0 0 0 5px rgba(213,173,77,.17);
}
.shipment-stages {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
    margin-top: 1.25rem;
}
.shipment-stage {
    position: relative;
    padding-top: 1rem;
    color: rgba(255,255,255,.36);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-align: center;
    text-transform: uppercase;
}
.shipment-stage::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    border-radius: 99px;
    background: rgba(255,255,255,.12);
}
.shipment-stage.is-complete { color: #8dd9ff; }
.shipment-stage.is-complete::before { background: #3182f6; }
.shipment-stage.is-current { color: #f6d77d; }
.shipment-stage.is-current::before {
    background: #d5ad4d;
    box-shadow: 0 0 14px rgba(213,173,77,.6);
}

.section-heading {
    display: flex;
    align-items: center;
    gap: .9rem;
}
.section-heading__icon {
    width: 2.7rem;
    height: 2.7rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: .9rem;
    color: #fff;
    background: linear-gradient(135deg, #1d63d8, #6842c2);
    box-shadow: 0 10px 24px -14px #1d63d8;
}
.section-heading p {
    margin-bottom: .15rem;
    color: #94a3b8;
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.section-heading h3 {
    color: #111827;
    font-size: .92rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.section-heading.compact {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.section-heading.compact .section-heading__icon {
    width: 2.35rem;
    height: 2.35rem;
    color: #b86a09;
    background: #fff7e6;
    box-shadow: none;
}
.section-heading.compact h3 { font-size: .78rem; }

.timeline-card,
.documents-card { overflow: hidden; }
.timeline-card > .section-heading,
.documents-card > .section-heading {
    margin: -2rem -2rem 1.75rem;
    padding: 1.35rem 2rem;
    color: #fff;
    background: linear-gradient(110deg, #173f94, #5c3cc1);
}
.documents-card > .section-heading {
    background: linear-gradient(110deg, #0b5e78, #187e9d);
}
.timeline-card > .section-heading p,
.documents-card > .section-heading p { color: rgba(255,255,255,.62); }
.timeline-card > .section-heading h3,
.documents-card > .section-heading h3 { color: #fff; }
.timeline-card > .section-heading .section-heading__icon,
.documents-card > .section-heading .section-heading__icon {
    color: #fff;
    background: rgba(255,255,255,.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.timeline-card #timelineContainer::before {
    left: 13px !important;
    width: 2px !important;
    background: linear-gradient(#1d63d8, #c9a24b) !important;
    opacity: .35;
}
.timeline-entry {
    min-height: 4.6rem;
    padding: .9rem 1rem;
    border: 1px solid transparent;
}
.timeline-entry:not(.timeline-entry--latest):hover {
    border-color: #e2e8f0;
    background: #f8fafc;
}
.timeline-entry--latest {
    background: linear-gradient(135deg, #fff8e8, #fff);
    border-color: #f2d88f;
    box-shadow: 0 18px 36px -28px rgba(146,64,14,.75);
}

.cargo-card #sideIdentifierFields > div:not(.freight-specific) {
    padding: .75rem .8rem;
    border-radius: .75rem;
    background: #f8fafc;
    box-shadow: inset 3px 0 #d5ad4d;
}
.cargo-card { border-top: 4px solid #d5ad4d !important; }
.party-card:nth-of-type(2) { border-top: 4px solid #2f80ed !important; }
.party-card:nth-of-type(3) { border-top: 4px solid #7651d8 !important; }
.freight-specific {
    border-left: 0;
    border-radius: .75rem;
    background: #f8fafc;
    box-shadow: inset 3px 0 #d5ad4d;
}
.party-card .space-y-4 > div:not(.grid) {
    padding: .75rem .8rem;
    border-radius: .75rem;
    background: #f8fafc;
}
.party-card [id^="sideConsignee"] { overflow-wrap: anywhere; }
.party-card #sideConsigneeEmail,
.party-card #sideConsigneePhone {
    min-width: 0;
    padding: .65rem .75rem;
    border-radius: .7rem;
    background: #f8fafc;
}
.party-card #sideConsigneeEmail i,
.party-card #sideConsigneePhone i {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: .5rem;
    color: #1d63d8 !important;
    background: #eaf2ff;
}

.invoice-card { overflow: hidden; }
.invoice-card > div:first-child {
    margin: -2rem -2rem 1.5rem;
    padding: 1.35rem 2rem;
    color: #fff;
    background: linear-gradient(105deg, #9f1730, #d42a42);
    border-bottom: 0;
}
.invoice-card > div:first-child h3,
.invoice-card > div:first-child h3 i {
    color: #fff !important;
}
.invoice-card #invoiceStatusBadge {
    color: #7f1d1d !important;
    background: #fff !important;
    border: 1px solid rgba(255,255,255,.55) !important;
}
.invoice-card table tbody tr { transition: background .2s ease; }
.invoice-card table tbody tr:hover { background:#f8fafc; }
.invoice-card #resPayInstructions {
    min-height: 7rem;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    font-style: normal;
    white-space: pre-line;
}
.invoice-card #invBalance {
    color: #a8182c;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}
.invoice-card .currency-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    color: #fff;
    background: #a8182c;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.invoice-card #downloadInvoiceBtn {
    position: relative;
    overflow: hidden;
    padding: .9rem 1rem;
}
.invoice-card #downloadInvoiceBtn::before {
    content: "\f019";
    margin-right: .55rem;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.documents-card #docsContainer > a {
    min-height: 5.5rem;
    border-color: #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}
.documents-card #docsContainer > a:hover {
    border-color: #93b4ed;
    box-shadow: 0 15px 30px -25px #1d63d8;
    transform: translateY(-2px);
}
.support-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(212,42,66,.55), transparent 13rem),
        linear-gradient(145deg, #081225, #142448);
    box-shadow: 0 24px 48px -34px rgba(4,13,33,.9);
}
.support-card__icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    margin-bottom: 1.2rem;
    border-radius: 1rem;
    color: #e7c972;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    font-size: 1.1rem;
}

@media (max-width: 1023px) {
    .dashboard-sidebar { position: static; }
    .dashboard-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .cargo-card, .support-card { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .tracking-page .portal-hero {
        padding-top: 3.5rem;
        padding-bottom: 4.5rem;
    }
    .tracking-dashboard { margin-top: -1.8rem; }
    .dashboard-hero-card { padding: 1.15rem !important; }
    .dashboard-kicker { font-size: .57rem; }
    .dashboard-hero-card > .flex { margin-bottom: 1.15rem !important; }
    .dashboard-hero-card > .grid { grid-template-columns: 1fr 1fr; }
    .dashboard-stat {
        min-height: 5.7rem;
        padding: .8rem .7rem .8rem 2.65rem;
    }
    .dashboard-stat__icon { left:.7rem; top:.8rem; }
    .dashboard-actions { justify-content: stretch; }
    .dashboard-actions button { flex:1; justify-content:center; }
    .shipment-stages { gap: .25rem; }
    .shipment-stage { font-size: .48rem; }
    .dashboard-sidebar { display: block; }
    .dashboard-sidebar > * { margin-bottom: 1rem; }
    .timeline-card, .documents-card { padding: 1.15rem !important; }
    .timeline-card > .section-heading,
    .documents-card > .section-heading {
        margin: -1.15rem -1.15rem 1.35rem;
        padding: 1rem 1.15rem;
    }
    .section-heading__icon { width:2.35rem; height:2.35rem; }
    .section-heading h3 { font-size:.8rem; }
    .invoice-card > div:first-child {
        margin: -1rem -1rem 1.25rem;
        padding: 1.1rem 1rem;
    }
}

@media print {
    .premium-nav, .portal-hero, footer, .dashboard-actions, .support-card, .documents-card { display:none !important; }
    .tracking-page { background:#fff !important; }
    .tracking-dashboard { margin:0; padding:0 !important; max-width:none; }
    .dashboard-shell { display:block !important; }
    .dashboard-card { break-inside:avoid; box-shadow:none !important; }
    .dashboard-sidebar { position:static; display:grid; grid-template-columns:repeat(3, 1fr); }
}