/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Ported from the Loadpad SC Portal's auth screen. Tokens live in wwwroot/app.css. */

.auth-page[b-d840fmk669] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
}

.auth-brand[b-d840fmk669] {
    position: relative;
    overflow: hidden;
    padding: 8vh 6vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--surface-strong);
    color: var(--surface-strong-foreground);
}

/* Concentric rings bleeding off the bottom-right corner — the panel's only ornament. */
.auth-brand[b-d840fmk669]::after {
    content: '';
    position: absolute;
    right: -240px;
    bottom: -280px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 90px rgba(255, 255, 255, 0.04), 0 0 0 190px rgba(255, 255, 255, 0.025);
}

.auth-brand > *[b-d840fmk669] {
    position: relative;
    z-index: 1;
}

.brand-mark[b-d840fmk669] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: 12px;
}

.auth-brand h1[b-d840fmk669] {
    margin: 36px 0 20px;
    font-size: clamp(38px, 4.4vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: inherit;
}

.auth-brand h1 em[b-d840fmk669] {
    font-style: normal;
    color: color-mix(in oklab, var(--primary), white 35%);
}

.auth-brand > p[b-d840fmk669] {
    margin: 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
}

.brand-points[b-d840fmk669] {
    margin: 52px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.brand-points li[b-d840fmk669] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

.brand-points svg[b-d840fmk669] {
    color: color-mix(in oklab, var(--primary), white 35%);
    flex: none;
}

.auth-card[b-d840fmk669] {
    width: min(430px, 82%);
    margin: auto;
    padding: 40px 0;
}

.mobile-brand[b-d840fmk669] {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mobile-brand .brand-mark[b-d840fmk669] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

@media (max-width: 1000px) {
    .auth-page[b-d840fmk669] {
        grid-template-columns: 1fr;
    }

    .auth-brand[b-d840fmk669] {
        display: none;
    }

    .mobile-brand[b-d840fmk669] {
        display: flex;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-7lkgw32qy4] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-7lkgw32qy4] {
    flex: 1;
    min-width: 0;
}

/* The portal's "surface strong" — a flat dark slate for app chrome, replacing the default
   template's blue-to-purple gradient. See wwwroot/app.css for the token definitions. */
.sidebar[b-7lkgw32qy4] {
    background: var(--surface-strong);
    color: var(--surface-strong-foreground);
}

/* No .top-row rules here — MainLayout renders no such element (NavMenu owns the only .top-row,
   styled in its own scoped stylesheet), so the template's original block never matched anything. */

.content[b-7lkgw32qy4] {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

@media (min-width: 641px) {
    .page[b-7lkgw32qy4] {
        flex-direction: row;
    }

    .sidebar[b-7lkgw32qy4] {
        /* No fixed width here — NavMenu's own root element (.sidebar-inner) owns the width and
           toggles it between expanded/collapsed, so this container just hugs whatever that is. */
        height: 100vh;
        position: sticky;
        top: 0;
    }

    article[b-7lkgw32qy4] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-7lkgw32qy4] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-7lkgw32qy4] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-u0ss00bszi] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-u0ss00bszi] {
    background-color: rgba(255, 255, 255, 0.5);
}

/* The sidebar header sits flush on the surface-strong panel rather than in its own darker
   band — the portal reserves contrast for the active nav item, not the chrome. */
.top-row[b-u0ss00bszi] {
    min-height: 4.25rem;
    background-color: transparent;
}

.navbar-brand[b-u0ss00bszi] {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-right: 0;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--surface-strong-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Same accent tile as the auth screen's brand mark (AuthLayout.razor.css), one size down. */
.brand-mark[b-u0ss00bszi] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--primary);
    color: var(--primary-foreground);
}

/* Desktop sidebar collapse toggle — distinct from .navbar-toggler, which is the mobile hamburger. */
.collapse-toggle[b-u0ss00bszi] {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: white;
    border-radius: var(--radius);
    width: 2rem;
    height: 2rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: none;
    transition: background-color 0.15s;
}

.collapse-toggle:hover[b-u0ss00bszi] {
    background-color: rgba(255, 255, 255, 0.16);
}

/* The same drawn chevron as the group arrows: points left while the menu is open (press to fold it to icons) and
   right once it is folded (press to open it again). */
.collapse-chevron[b-u0ss00bszi] {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
    transform: rotate(-45deg);
    margin-left: -0.15rem;
}

.collapse-chevron.back[b-u0ss00bszi] {
    transform: rotate(135deg);
    margin-left: 0.15rem;
}

.bi[b-u0ss00bszi] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
}

.bi-database-fill-nav-menu[b-u0ss00bszi] {
    /* A hand-built database (three stacked discs) for Master Data -- the lists everything else is built on. Drawn
       like the other icons here rather than copied from an icon font. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.4v9.2c0 1.3 2.7 2.4 6 2.4s6-1.1 6-2.4V3.4C14 4.7 11.3 5.8 8 5.8S2 4.7 2 3.4z'/%3E%3Cellipse cx='8' cy='3.2' rx='6' ry='2.2'/%3E%3Cpath d='M2.25 6.95c.5 1.2 2.9 2.35 5.75 2.35s5.25-1.15 5.75-2.35' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='0.9'/%3E%3Cpath d='M2.25 10.25c.5 1.2 2.9 2.35 5.75 2.35s5.25-1.15 5.75-2.35' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='0.9'/%3E%3C/svg%3E");
}

.bi-toolbox-fill-nav-menu[b-u0ss00bszi] {
    /* A hand-built toolbox (carry handle, body, lid seam and latch) for the Workshop group -- drawn like the
       wrench and fuel pump icons rather than copied from an icon font, so it renders the same at this size. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.4 4.2V3a1 1 0 0 1 1-1h3.2a1 1 0 0 1 1 1v1.2' fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round'/%3E%3Crect x='0.8' y='4.2' width='14.4' height='10' rx='1.6'/%3E%3Crect x='0.8' y='8.1' width='14.4' height='1.1' fill='rgba(0,0,0,0.45)'/%3E%3Crect x='6.4' y='6.9' width='3.2' height='3.6' rx='0.7' fill='white'/%3E%3Crect x='6.4' y='6.9' width='3.2' height='3.6' rx='0.7' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='0.7'/%3E%3C/svg%3E");
}

.bi-grid-1x2-fill-nav-menu[b-u0ss00bszi] {
    /* Bootstrap Icons' grid-1x2-fill: a tall tile beside two stacked ones -- reads as a dashboard. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 1a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm9 0a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1zm0 9a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-exclamation-circle-fill-nav-menu[b-u0ss00bszi] {
    /* Filled circle with an exclamation-mark cutout — same cutout technique as the wrench/file
       icons below, deliberately a circle (not Faults' triangle) so Breakdowns reads as visually
       distinct from Faults even though both are "something's wrong" concepts. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Crect x='7' y='3.5' width='2' height='6' rx='1' fill='rgba(0,0,0,0.45)'/%3E%3Crect x='7' y='10.5' width='2' height='2' rx='1' fill='rgba(0,0,0,0.45)'/%3E%3C/svg%3E");
}

.bi-wrench-adjustable-fill-nav-menu[b-u0ss00bszi] {
    /* Simple hand-built wrench pictogram (diagonal bar with a ring/open-jaw at each end) rather
       than a hand-copied icon-font path — same reliability reasoning as the fuel-pump icon below:
       guaranteed to render correctly at this size instead of risking a malformed recalled path. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='6.5' y='2' width='3' height='12' rx='1.5' transform='rotate(45 8 8)'/%3E%3Ccircle cx='3.3' cy='3.3' r='2.4'/%3E%3Ccircle cx='3.3' cy='3.3' r='1.1' fill='rgba(0,0,0,0.45)'/%3E%3Ccircle cx='12.7' cy='12.7' r='2.4'/%3E%3Ccircle cx='12.7' cy='12.7' r='1.1' fill='rgba(0,0,0,0.45)'/%3E%3C/svg%3E");
}

.bi-list-check-nav-menu[b-u0ss00bszi] {
    /* Clipboard-style checklist for Jobcards -- a card listing the items being worked. Hand-built
       for the same reason as the wrench above: guaranteed to render at 16px rather than risking a
       misremembered icon-font path. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5V2h1.5A1.5 1.5 0 0 1 14 3.5v11A1.5 1.5 0 0 1 12.5 16h-9A1.5 1.5 0 0 1 2 14.5v-11A1.5 1.5 0 0 1 3.5 2H5v-.5zm1 .5v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5z'/%3E%3Cpath d='M4.4 8.3l1.1 1.1 2.2-2.2' stroke='rgba(0,0,0,0.45)' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='9' y='7.6' width='2.8' height='1.1' rx='.55' fill='rgba(0,0,0,0.45)'/%3E%3Cpath d='M4.4 11.9l1.1 1.1 2.2-2.2' stroke='rgba(0,0,0,0.45)' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='9' y='11.2' width='2.8' height='1.1' rx='.55' fill='rgba(0,0,0,0.45)'/%3E%3C/svg%3E");
}

.bi-inbox-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-inbox-fill' viewBox='0 0 16 16'%3E%3Cpath d='M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4H4.98zm-1.17-.437A1.5 1.5 0 0 1 4.98 3h6.04a1.5 1.5 0 0 1 1.17.563l3.7 4.625a.5.5 0 0 1 .106.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374l3.7-4.625z'/%3E%3C/svg%3E");
}

.bi-whatsapp-nav-menu[b-u0ss00bszi] {
    /* The WhatsApp mark (Bootstrap Icons "whatsapp"), in white like the others. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232'/%3E%3C/svg%3E");
}

.bi-search-nav-menu[b-u0ss00bszi] {
    /* Magnifying glass for Inspections -- "look closely at" fits the concept, and stands apart
       from Maintenance's wrench right above it in the nav. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

.bi-file-text-fill-nav-menu[b-u0ss00bszi] {
    /* Document silhouette (folded corner + two text-line cutouts) for Master Data now that it no
       longer shares Assets' truck icon — Assets is its own top-level tab. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5a1 1 0 0 1 1-1h5l4 4v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-13z'/%3E%3Cpath d='M9 0.5v3.5a1 1 0 0 0 1 1h3.5' fill='none' stroke='rgba(0,0,0,0.25)' stroke-width='0.8'/%3E%3Crect x='5' y='8.2' width='6' height='1.1' rx='0.55' fill='rgba(0,0,0,0.35)'/%3E%3Crect x='5' y='10.4' width='6' height='1.1' rx='0.55' fill='rgba(0,0,0,0.35)'/%3E%3Crect x='5' y='12.6' width='4' height='1.1' rx='0.55' fill='rgba(0,0,0,0.35)'/%3E%3C/svg%3E");
}

.bi-person-badge-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z'/%3E%3Cpath d='M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h.6c.517-1.712 2.078-3 3.9-3s3.383 1.288 3.9 3h.6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2Z'/%3E%3C/svg%3E");
}

.bi-mortarboard-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-mortarboard-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5Z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Z'/%3E%3C/svg%3E");
}

.bi-building-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 0a1 1 0 0 0-1 1v14H1a.5.5 0 0 0 0 1h14a.5.5 0 0 0 0-1h-1V1a1 1 0 0 0-1-1H3Zm1 2h2v2H4V2Zm3 0h2v2H7V2Zm3 0h2v2h-2V2ZM4 5h2v2H4V5Zm3 0h2v2H7V5Zm3 0h2v2h-2V5ZM4 8h2v2H4V8Zm3 0h2v2H7V8Zm3 0h2v2h-2V8ZM4 11h2v2H4v-2Zm3 0h2v2H7v-2Zm3 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

.bi-truck-front-fill-nav-menu[b-u0ss00bszi] {
    /* Same box-truck silhouette as the mobile PWA icon. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='118 180 250 190'%3E%3Crect x='123' y='186' width='159' height='127'/%3E%3Crect x='282' y='231' width='81' height='82'/%3E%3Ccircle cx='181' cy='335' r='29'/%3E%3Ccircle cx='313' cy='335' r='29'/%3E%3C/svg%3E");
}

.bi-geo-alt-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-geo-alt-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
}

.bi-fuel-pump-fill-nav-menu[b-u0ss00bszi] {
    /* Simple filled fuel-pump silhouette (tank body + display + meter head + hose) built from
       plain rects rather than a hand-copied icon-font path, so it's guaranteed to render
       correctly. Chunkier proportions than a first pass, since thin shapes disappear at the
       ~20px size these nav icons render at. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='2' y='3' width='7' height='12' rx='1'/%3E%3Crect x='3.3' y='4.6' width='4.4' height='3.2' rx='0.4' fill='rgba(0,0,0,0.35)'/%3E%3Crect x='9.6' y='2' width='3' height='2.4' rx='0.5'/%3E%3Crect x='10.7' y='4.2' width='1.3' height='6.8' rx='0.65'/%3E%3Crect x='7.6' y='10' width='3.6' height='1.3' rx='0.65'/%3E%3C/svg%3E");
}

.bi-graph-up-nav-menu[b-u0ss00bszi] {
    /* Three ascending bars -- solid rects rather than a stroked polyline, for the same reason as
       the fuel pump above: thin shapes vanish at the ~20px these render at. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='9' width='3.4' height='5.5' rx='0.6'/%3E%3Crect x='6.3' y='6' width='3.4' height='8.5' rx='0.6'/%3E%3Crect x='11.1' y='2.5' width='3.4' height='12' rx='0.6'/%3E%3C/svg%3E");
}

.bi-exclamation-triangle-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-exclamation-triangle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.964 0L.165 13.233c-.457.778.091 1.767.982 1.767h13.706c.89 0 1.438-.99.982-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

.bi-box-arrow-right-nav-menu[b-u0ss00bszi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'/%3E%3Cpath fill-rule='evenodd' d='M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z'/%3E%3C/svg%3E");
}

.nav-item[b-u0ss00bszi] {
    font-size: 0.875rem;
    padding-bottom: 0.125rem;
}

    .nav-item:first-of-type[b-u0ss00bszi] {
        padding-top: 0.5rem;
    }

    .nav-item:last-of-type[b-u0ss00bszi] {
        padding-bottom: 1rem;
    }

    .nav-item[b-u0ss00bszi]  .nav-link {
        color: rgba(255, 255, 255, 0.72);
        background: none;
        border: none;
        border-radius: var(--radius);
        height: 2.5rem;
        display: flex;
        align-items: center;
        line-height: 1;
        width: 100%;
        font-weight: 500;
        transition: background-color 0.15s, color 0.15s;
    }

/* Active is the accent colour rather than a white wash — the portal's one high-contrast
   element in the sidebar, so the current section is unmistakable. */
.nav-item[b-u0ss00bszi]  a.active {
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
}

.nav-item[b-u0ss00bszi]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: white;
}

.nav-item[b-u0ss00bszi]  a.active:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.nav-text[b-u0ss00bszi] {
    white-space: nowrap;
    overflow: hidden;
}

/* The Master Data group header is a <button>, not a <NavLink> -- .nav-item ::deep .nav-link
   already zeroes out button chrome (background/border), this just adds what a native <button>
   doesn't inherit for free. */
.master-data-toggle[b-u0ss00bszi] {
    cursor: pointer;
    text-align: left;
}

/* The open/closed arrow: a drawn chevron (not a tiny text glyph) so it is easy to see. It points right when the
   group is folded and turns to point down when it is open. */
.master-data-chevron[b-u0ss00bszi] {
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: auto;
    margin-right: 0.35rem;
    padding: 0;
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.master-data-chevron.open[b-u0ss00bszi] {
    transform: rotate(45deg);
}



/* A rail connecting each collapsible group's children back to its header -- indent alone (the
   old behaviour) read as "these items sit slightly to the right", not "these items belong to
   the header above them". The line makes that parent/child relationship legible at a glance
   (e.g. Transactions/Review under Diesel), which plain padding didn't. Margin roughly centers
   the rail under the parent toggle's icon (px-3's 1rem + half the icon's ~1.25rem width). */
/* The sub-items sit in a blue tray (the menu's own navy hue, 264, at a lighter lightness) so they read as a distinct panel that belongs to the header above it rather than as
   more of the same list. Mid-toned on purpose: white text and icons stay white and readable on it. */
.master-data-group[b-u0ss00bszi] {
    margin: 0.125rem 0.5rem 0.5rem 1rem;
    padding: 0.25rem;
    border-radius: var(--radius);
    background: oklch(40% 0.075 264);
}

/* Sub-items read as secondary to their header: slightly smaller and dimmer at rest, same active/
   hover treatment as any other link so the current page is still unmistakable. */
.master-data-group .nav-item[b-u0ss00bszi]  .nav-link {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.92);
}

.master-data-group .nav-item[b-u0ss00bszi]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: white;
}

.master-data-group .nav-item[b-u0ss00bszi]  a.active {
    color: var(--primary-foreground);
}

.current-user[b-u0ss00bszi] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

.current-user .user-name[b-u0ss00bszi] {
    color: white;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-user .logged-in-label[b-u0ss00bszi] {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* Icon + "Log out" text side by side; when collapsed, .nav-text hides and .bi's margin
   zeroes out (both existing rules below), leaving a centered icon-only button that fits
   the narrow collapsed sidebar instead of the full label overflowing past its edge. */
.current-user .app-version[b-u0ss00bszi] {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.logout-btn[b-u0ss00bszi] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-btn .bi[b-u0ss00bszi] {
    top: 0;
}

.nav-scrollable[b-u0ss00bszi] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-u0ss00bszi] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-u0ss00bszi] {
        display: none;
    }

    .collapse-toggle[b-u0ss00bszi] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-scrollable[b-u0ss00bszi] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Shares the sidebar's height with .current-user (flex sibling below) instead of
           claiming 100% of it — otherwise .current-user gets pushed below the viewport fold
           and is only reachable by scrolling the whole page. Only scrolls internally if the
           nav links themselves are taller than the space left after .current-user. */
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* This component's own root controls the sidebar's width — MainLayout's .sidebar has no
       fixed width of its own, so it just hugs whatever width this element currently has.
       Flex column + full height so .current-user (logged-in user + log out button) always
       renders pinned at the bottom of the sidebar, matching .sidebar's sticky 100vh in
       MainLayout.razor.css, rather than being pushed off past the fold. */
    .sidebar-inner[b-u0ss00bszi] {
        width: 250px;
        height: 100vh;
        display: flex;
        flex-direction: column;
        transition: width 0.15s ease-in-out;
        overflow-x: hidden;
    }

        /* Keep the top row and the logged-in-user footer at their natural size — only
           .nav-scrollable (flex: 1 1 auto above) should ever give up space. */
        .sidebar-inner .top-row[b-u0ss00bszi],
        .sidebar-inner .current-user[b-u0ss00bszi] {
            flex-shrink: 0;
        }

        /* Logo and fold button on one row while the menu is open; the name is what gives way if space is tight. */
        .sidebar-inner:not(.collapsed) .top-row .container-fluid[b-u0ss00bszi] {
            flex-wrap: nowrap;
            gap: 0.5rem;
        }

        .sidebar-inner.collapsed[b-u0ss00bszi] {
            width: 4.5rem;
        }

            .sidebar-inner.collapsed .nav-text[b-u0ss00bszi] {
                display: none;
            }

            .sidebar-inner.collapsed .nav-item[b-u0ss00bszi] {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            /* .current-user is also a .nav-item, so the rule above would otherwise leave its
               logout button flush against the sidebar's edges with no breathing room. Same
               specificity + !important, declared after, so this wins for this element only. */
            .sidebar-inner.collapsed .current-user[b-u0ss00bszi] {
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }

            .sidebar-inner.collapsed .nav-item[b-u0ss00bszi]  .nav-link {
                justify-content: center;
            }

            .sidebar-inner.collapsed .bi[b-u0ss00bszi] {
                margin-right: 0;
            }

            .sidebar-inner.collapsed .top-row .container-fluid[b-u0ss00bszi] {
                justify-content: center;
            }

        /* ---- Icon-only mode ---------------------------------------------------------------------------------
           A narrow rail that still reads as the app: the logo tile stays, every item is a centred tile with the
           same active/hover look as the full menu, a group header says it opens (small arrow) and its children sit
           in a tinted tray, a count is a small red dot on the icon instead of a number that cannot fit, and the
           signed-in person is their initials. */

        .sidebar-inner.collapsed .top-row[b-u0ss00bszi] {
            padding-left: 0 !important;
        }

        .sidebar-inner.collapsed .top-row .container-fluid[b-u0ss00bszi] {
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 0.5rem;
            padding: 0.75rem 0;
        }

        .sidebar-inner.collapsed .navbar-brand[b-u0ss00bszi] {
            margin: 0;
        }

        .sidebar-inner.collapsed .brand-text[b-u0ss00bszi] {
            display: none;
        }

        /* A centred 56px tile, not a full-width bar jammed against the left edge. */
        .sidebar-inner.collapsed .nav-item[b-u0ss00bszi]  .nav-link {
            position: relative;
            width: calc(100% - 1rem);
            margin: 0 0.5rem;
        }

        /* The Diesel header wraps its count and arrow in a right-aligned box; in icon-only mode that box must not push the
           icon off-centre (the count and arrow are positioned over the icon anyway). */
        .sidebar-inner.collapsed .master-data-toggle > .d-flex[b-u0ss00bszi] {
            margin-left: 0 !important;
        }

        .sidebar-inner.collapsed .master-data-chevron[b-u0ss00bszi] {
            position: absolute;
            right: 0.5rem;
            bottom: 0.6rem;
            width: 0.4rem;
            height: 0.4rem;
            margin: 0;
            border-width: 1.5px;
        }

        /* A group's children: no rail (no room), a soft tray so they clearly belong together. */
        .sidebar-inner.collapsed .master-data-group[b-u0ss00bszi] {
            margin: 0.125rem 0.5rem 0.375rem;
            padding: 0.125rem 0;
            border-left: none;
            border-radius: var(--radius);
            background: oklch(40% 0.075 264);
        }

        .sidebar-inner.collapsed .master-data-group .nav-item[b-u0ss00bszi]  .nav-link {
            width: 100%;
            margin: 0;
        }

        /* The number cannot fit beside an icon 20px wide, so it becomes a dot on the icon's top-right corner. The
           count is still in the item's tooltip and on the page itself. */
        .sidebar-inner.collapsed .badge[b-u0ss00bszi] {
            position: absolute;
            top: 0.4rem;
            left: calc(50% + 0.2rem);
            width: 0.7rem;
            height: 0.7rem;
            padding: 0;
            margin: 0 !important;
            border: 2px solid var(--surface-strong);
            border-radius: 50%;
            background: #ef4444 !important;
            box-sizing: content-box;
            font-size: 0;
            color: transparent;
        }

        .sidebar-inner.collapsed .user-avatar[b-u0ss00bszi] {
            width: 2.25rem;
            height: 2.25rem;
            margin: 0 auto 0.5rem;
        }
}

.user-avatar[b-u0ss00bszi] {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-fixsiei6ok],
.components-reconnect-repeated-attempt-visible[b-fixsiei6ok],
.components-reconnect-failed-visible[b-fixsiei6ok],
.components-pause-visible[b-fixsiei6ok],
.components-resume-failed-visible[b-fixsiei6ok],
.components-rejoining-animation[b-fixsiei6ok] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-fixsiei6ok],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-fixsiei6ok],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-fixsiei6ok],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-fixsiei6ok],
#components-reconnect-modal.components-reconnect-retrying[b-fixsiei6ok],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-fixsiei6ok],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-fixsiei6ok],
#components-reconnect-modal.components-reconnect-failed[b-fixsiei6ok],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-fixsiei6ok] {
    display: block;
}


#components-reconnect-modal[b-fixsiei6ok] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-fixsiei6ok 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-fixsiei6ok 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-fixsiei6ok 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-fixsiei6ok]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-fixsiei6ok 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-fixsiei6ok {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-fixsiei6ok {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-fixsiei6ok {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-fixsiei6ok] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-fixsiei6ok] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-fixsiei6ok] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-fixsiei6ok] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-fixsiei6ok] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-fixsiei6ok] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-fixsiei6ok] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-fixsiei6ok 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-fixsiei6ok] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-fixsiei6ok {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Shared/NavTruck.razor.rz.scp.css */
.loading-truck[b-wdwiql4mh8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Centred in the middle of the screen, not tucked under the page heading. */
    min-height: 70vh;
    padding: 1.5rem 0;
    overflow: hidden;
    /* Invisible for the first 250 ms, then fades in: a load that finishes quickly never shows the truck at all
       (backwards fill holds the invisible first frame through the delay). */
    animation: lt-appear 0.15s ease 0.25s backwards;
}

.loading-truck svg[b-wdwiql4mh8] {
    width: min(100%, 300px);
    height: auto;
    overflow: hidden;
}

.lt-road line[b-wdwiql4mh8] {
    stroke: var(--primary, #2563eb);
    stroke-opacity: 0.35;
    stroke-width: 2;
}

.lt-road .lt-dashes[b-wdwiql4mh8] {
    stroke-dasharray: 10 14;
    animation: lt-road-b-wdwiql4mh8 0.6s linear infinite;
}

/* Drives in from off the left, slows to a stop mid-screen, waits a beat, then pulls away off the right. */
.lt-truck[b-wdwiql4mh8] {
    animation: lt-drive-b-wdwiql4mh8 3.2s infinite;
}

.lt-trailer[b-wdwiql4mh8], .lt-cab[b-wdwiql4mh8], .lt-chassis[b-wdwiql4mh8] { fill: var(--primary, #2563eb); }

.lt-wheel circle[b-wdwiql4mh8] {
    fill: var(--primary, #2563eb);
    stroke: var(--background, #fff);
    stroke-width: 2;
}

.lt-wheel line[b-wdwiql4mh8] {
    stroke: var(--background, #fff);
    stroke-width: 2;
    stroke-linecap: round;
}

.lt-wheel[b-wdwiql4mh8] {
    animation: lt-spin-b-wdwiql4mh8 0.5s linear infinite;
}


@keyframes lt-drive-b-wdwiql4mh8 {
    0%   { transform: translateX(-125px); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
    40%  { transform: translateX(62px); }
    60%  { transform: translateX(62px); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
    100% { transform: translateX(250px); }
}

@keyframes lt-spin-b-wdwiql4mh8 {
    to { transform: rotate(360deg); }
}

@keyframes lt-road-b-wdwiql4mh8 {
    to { stroke-dashoffset: -24; }
}

@media (prefers-reduced-motion: reduce) {
    .lt-truck[b-wdwiql4mh8] { animation: none; transform: translateX(62px); }
    .lt-wheel[b-wdwiql4mh8], .lt-road .lt-dashes[b-wdwiql4mh8] { animation: none; }
}


/* /Components/Shared/VehicleStatusCard.razor.rz.scp.css */
.vehicle-status-badge[b-mpmn32wk4j] {
    font-size: 0.85rem;
    padding: 0.35em 0.7em;
}

.vehicle-status-map[b-mpmn32wk4j] {
    display: block;
    width: 100%;
    height: 220px;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
}

.vehicle-status-map-empty[b-mpmn32wk4j] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg);
}