@import '_content/Volo.Abp.Account.Pro.Public.Blazor.MudBlazor.Shared/Volo.Abp.Account.Pro.Public.Blazor.MudBlazor.Shared.qpqynephgb.bundle.scp.css';

/* /Pages/OrderTracking/Track.razor.rz.scp.css */
/* Order Tracking Page Styles */

.order-tracking-page[b-g7nutm0c3l] {
    min-height: 100vh;
    background-color: #f8f9fa;
}

/* Completed View */
.order-complete-view[b-g7nutm0c3l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 3rem 1.5rem;
}

.order-complete-icon[b-g7nutm0c3l] {
    font-size: 5rem;
    color: #4a9eba;
    margin-bottom: 1.5rem;
}

.order-complete-title[b-g7nutm0c3l] {
    font-size: 2rem;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 1rem;
}

.order-complete-message[b-g7nutm0c3l] {
    font-size: 1.15rem;
    color: #6c757d;
    max-width: 480px;
    margin-bottom: 0.5rem;
}

.order-complete-plant[b-g7nutm0c3l] {
    font-size: 0.9rem;
}

.order-complete-ref[b-g7nutm0c3l] {
    font-size: 0.75rem;
    opacity: 0.5;
    margin-top: 1.5rem;
}

/* Status Banner */
.order-status-banner[b-g7nutm0c3l] {
    padding: 2rem 0;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.order-status-banner.status-completed[b-g7nutm0c3l] {
    background: linear-gradient(135deg, #4a9eba 0%, #2c7a99 100%);
}

.order-status-banner.status-in-progress[b-g7nutm0c3l] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.order-status-banner.status-pending[b-g7nutm0c3l] {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}

.order-status-banner.status-cancelled[b-g7nutm0c3l] {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}

.order-status-banner.status-on-hold[b-g7nutm0c3l] {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
}

.order-status-banner h2[b-g7nutm0c3l] {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.order-status-banner .status-text[b-g7nutm0c3l] {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* The "updated at" line. Small and faint on purpose - it answers a question the reader only asks
   once, and it used to be an alert box in the body taking a card's worth of space to do it. */
.order-status-banner .banner-updated[b-g7nutm0c3l] {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
}

.quantity-badge[b-g7nutm0c3l] {
    background: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.quantity-badge strong[b-g7nutm0c3l] {
    font-size: 1.5rem;
    display: block;
}

/* Cards */
.card[b-g7nutm0c3l] {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.card-header[b-g7nutm0c3l] {
    background-color: #fff;
    border-bottom: 2px solid #f1f3f5;
    padding: 1.25rem 1.5rem;
}

.card-header h5[b-g7nutm0c3l] {
    color: #495057;
    font-weight: 600;
}

.card-body[b-g7nutm0c3l] {
    padding: 1.5rem;
}

/* Truck List */
.truck-list[b-g7nutm0c3l] {
    display: grid;
    gap: 1rem;
}

.truck-card[b-g7nutm0c3l] {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    background-color: #fff;
    transition: all 0.3s ease;
}

.truck-card:hover[b-g7nutm0c3l] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.truck-card.truck-loading[b-g7nutm0c3l] {
    border-left: 4px solid #ffc107;
    background-color: #fffef8;
}

.truck-card.truck-enroute[b-g7nutm0c3l] {
    border-left: 4px solid #007bff;
    background-color: #f8fbff;
}

.truck-card.truck-arrived[b-g7nutm0c3l] {
    border-left: 4px solid #17a2b8;
    background-color: #f8fdff;
}

.truck-card.truck-complete[b-g7nutm0c3l] {
    border-left: 4px solid #28a745;
    background-color: #f8fff9;
}

.truck-card.truck-pending[b-g7nutm0c3l] {
    border-left: 4px solid #6c757d;
    background-color: #fafafa;
}

.truck-header[b-g7nutm0c3l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.truck-number[b-g7nutm0c3l] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truck-number i[b-g7nutm0c3l] {
    color: #6c757d;
    margin-right: 0.5rem;
}

.truck-status-badge[b-g7nutm0c3l] {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.truck-details[b-g7nutm0c3l] {
    font-size: 0.95rem;
}

.truck-details small[b-g7nutm0c3l] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.truck-details p[b-g7nutm0c3l] {
    font-size: 0.95rem;
    /* A clock time must not break across lines. Three cells at col-4 on a 390px screen leaves
       about 120px each, which is enough for "10:52 AM" but not with a space to break at - so
       "10:52" was landing on one line and "AM" on the next. Labels above may still wrap; those
       are words, and a wrapped word still reads as itself. */
    white-space: nowrap;
}

/* Map Container */
#orderTrackingMap[b-g7nutm0c3l] {
    border-radius: 0 0 12px 12px;
}

/* Loading Spinner */
.spinner-border[b-g7nutm0c3l] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .order-status-banner[b-g7nutm0c3l] {
        padding: 1.5rem 0;
    }

    .order-status-banner h2[b-g7nutm0c3l] {
        font-size: 1.5rem;
    }

    .quantity-badge[b-g7nutm0c3l] {
        margin-top: 1rem;
        text-align: center;
    }

    .card-body[b-g7nutm0c3l] {
        padding: 1rem;
    }

    .truck-header[b-g7nutm0c3l] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* The ellipsis above is a desktop guard: it stops a long ticket-and-truck line shoving the
       status badge off the row. Here the header has already stacked, so the badge is on its own
       line and there is nothing to protect - clipping "Ticket No. 901994 Truck 600" to
       "Ticket No. 901994 Truck..." on the one screen the customer actually uses buys nothing.
       Let it wrap instead. */
    .truck-number[b-g7nutm0c3l] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .truck-status-badge[b-g7nutm0c3l] {
        margin-top: 0.5rem;
    }

    #orderTrackingMap[b-g7nutm0c3l] {
        height: 400px !important;
    }
}

@media (max-width: 576px) {
    .order-status-banner h2[b-g7nutm0c3l] {
        font-size: 1.25rem;
    }

    .quantity-badge strong[b-g7nutm0c3l] {
        font-size: 1.25rem;
    }

    /* Two cells to a row, not three. At 390px a col-4 cell is about 110px wide and the label
       "EST. DEPARTURE" needs about 112px once uppercased and letterspaced, so it broke over two
       lines while "LOAD" and "ARRIVED" beside it sat on one - the ragged edge Joe picked up.
       Halving the row gives every label about 165px, which fits the longest one we have with room
       for the next long one, so this holds for a label we have not written yet rather than just
       for this string. The On Site card grows a second row; a card that is one line taller reads
       better than a label snapped in half. */
    .truck-details .row > div[b-g7nutm0c3l] {
        margin-bottom: 0.75rem;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Animation for live updates */
@keyframes pulse-b-g7nutm0c3l {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

.badge.bg-success i[b-g7nutm0c3l] {
    animation: pulse-b-g7nutm0c3l 2s infinite;
}

/* Dead link. Built to match the completed-order view rather than an alert box: a link that has run
   out is an ordinary end to a delivery, not a fault the reader caused, and a red danger panel reads
   as though something has gone wrong and wants acting on. */
.tracking-unavailable[b-g7nutm0c3l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 3rem 1.5rem;
}

.tracking-unavailable-icon[b-g7nutm0c3l] {
    font-size: 4rem;
    color: #adb5bd;
    margin-bottom: 1.25rem;
}

.tracking-unavailable-title[b-g7nutm0c3l] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #343a40;
    margin: 0 0 0.75rem;
}

.tracking-unavailable-note[b-g7nutm0c3l] {
    max-width: 34rem;
    margin: 0;
    color: #6c757d;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- live map
   Height is fixed rather than aspect-ratio driven: the map answers one
   question and a tall box on a phone pushes the load cards - the thing the
   customer came for - below the fold. */
.track-map[b-g7nutm0c3l] {
    width: 100%;
    height: 260px;
}

@media (min-width: 768px) {
    .track-map[b-g7nutm0c3l] {
        height: 340px;
    }
}

/* Marker styling deliberately lives in wwwroot/js/track-map.js, inline on the marker elements.
   Scoped CSS cannot reach them: the Azure Maps SDK creates those nodes, so they never carry the
   b-xxxxx attribute this file is rewritten to match. Styled here, the pins rendered in the DOM
   at the right positions and were invisible. */