:root {
    --driverapp-primary: #00a9a9;
    --driverapp-primary2: #00c1c1;
    --driverapp-bg: #F4F7FA;
    --driverapp-card: #FFFFFF;
    --driverapp-text-primary: #1A1A1A;
    --driverapp-text-secondary: #6B7280;
    --driverapp-border-light: #E5E7EB;
    --sidebar-width-expanded: 250px;
    --sidebar-width-collapsed: 60px;
    --header-height: 60px;
    --transition-speed: 0.3s ease;
}
body {
    font-family: 'Poppins', sans-serif;
}

.driverapp-body {
    background-color: #f0f2f5 !important;
}

.driverapp-text-primary {
    color: var(--driverapp-primary);
}

/* ===========
     loader
   =============*/
.loading-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 45%;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* ===========
     Status Color
   =============*/
.status-Cancelled {
    color: red;
}

.status-OnTime {
    color: limegreen;
}

.status-Delay {
    color: yellow;
}

.status-Arrived {
    color: dodgerblue;
}

.status-Boarding {
    color: lime;
    transition: opacity 5s ease-in infinite;
    animation: blinker 1.5s linear infinite;
    opacity: 1;
}

.status-Departed {
    color: deepskyblue;
}

.status-Available {
    color: limegreen;
}

.status-Limited {
    color: yellow;
    transition: opacity 5s ease-in infinite;
    animation: blinker 1.5s linear infinite;
    opacity: 1;
}

.status-SoldOut {
    color: red;
}

.status-Unknown {
    color: black;
}

/* ===========
     COMMON
   =============*/
.blink {
    transition: opacity 5s ease-in infinite;
    animation: blinker 1.5s linear infinite;
    opacity: 1;
}

.deviceid {
    margin-top: .2rem;
    margin-bottom: .1rem;
    font-size: 1rem;
    line-height: 1.2;
}

@keyframes blinker {
    80% {
        opacity: 1
    }

    100% {
        opacity: 0;
    }
}

.rotate .table-cell {
    animation-name: spinAround;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}

.rotate2 .table-cell {
    animation-name: spinAround2;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}

.rotate3 .table-cell {
    animation-name: spinAround3;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}


@keyframes spinAround {
    to {
        transform: rotateX(360deg);
    }
}

@keyframes spinAround2 {
    to {
        transform: rotateX(360deg);
    }
}

@keyframes spinAround3 {
    to {
        transform: rotateX(360deg);
    }
}

/* ===========
     MAIN
   =============*/

.vms-container {
    background-color: rgb(0, 0, 77);
    overflow: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    padding: 0;
}

    .vms-container.modal-open {
        position: relative;
    }

        .vms-container.modal-open .container-fluid.vms-container {
            position: relative;
        }

    /* ===========
     HEADER
   =============*/

    .vms-container .vms-header {
        overflow: hidden;
        background: rgb(0, 0, 77);
        position: absolute;
        top: 0;
        height: 13vh;
        width: 100%;
        text-transform: uppercase;
    }

        .vms-container .vms-header .vms-header-container {
            height: 100%;
            background-color: white;
        }

        .vms-container .vms-header .logo-container-main {
            width: 45vw;
        }

            .vms-container .vms-header .logo-container-main .logo {
                width: 100%;
                height: 100%;
                padding: .4rem;
            }

        .vms-container .vms-header .time-container-main {
            width: 55vw;
        }

        .vms-container .vms-header .boarding-text-container {
            width: 40%;
            height: 100%;
            color: #FFA500;
            font-size: 5rem;
            font-weight: bold;
        }

        .vms-container .vms-header .time-container-main {
            cursor: pointer;
        }

        .vms-container .vms-header .vms-time {
            margin-top: 1.8rem;
            color: black;
            font-size: 4.8rem;
            font-weight: bold;
            line-height: 3.9rem;
            padding-right: .5rem;
        }

        .vms-container .vms-header .vms-date {
            color: black;
            font-size: 1.7rem;
            font-weight: bold;
            line-height: 2rem;
            padding-right: .5rem;
        }


    /* ===========
    BODY
=============*/

    .vms-container .vms-body {
        overflow: hidden;
        background-color: rgb(0, 0, 77);
        position: absolute;
        top: 13vh;
        bottom: 5vh;
        width: 100%;
        font-weight: bold;
        word-wrap: break-word;
        text-transform: uppercase;
    }

    .vms-container .vms-setting {
        overflow: hidden;
        background-color: rgb(0, 0, 77);
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .vms-container .vms-body .vms-display-text {
        height: 82vh;
        font-size: 7rem;
        line-height: 7rem;
        color: darkorange;
    }

    /* ===========
    FOOTER
=============*/

    .vms-container .vms-footer {
        position: absolute;
        bottom: 0;
        padding: 0px;
        width: 100%;
        height: 5vh;
    }

        .vms-container .vms-footer .marquee {
            overflow: hidden;
            background: #000000 !important;
            color: #00e4ca !important;
            font-size: 1.7rem !important;
            font-weight: bold;
            font-style: italic;
            text-transform: uppercase;
            line-height: 5vh;
        }

@media screen and (max-width: 1919px) {
    .vms-container .vms-header .center-container-main {
        font-size: 3.5rem;
    }

    .vms-container .vms-header .boarding-container {
        font-size: 8rem;
        line-height: 6.5rem;
    }

    .vms-container .vms-header .tiket-counter-container .header-subtitle .subtitle-title {
        font-size: 2rem;
        font-weight: bold;
    }

    .vms-container .vms-header .tiket-counter-container .header-subtitle .subtitle-destination {
        font-size: 2rem;
    }

    .vms-container .vms-body .vms-boardinghall-container .vms-boarding-label {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .vms-container .vms-header .boarding-container .boarding-gate .gate-text {
        font-size: 10rem;
        margin-left: 1rem;
        margin-bottom: 1rem;
        text-transform: capitalize;
    }

    .vms-container .vms-header .boarding2-container .boarding2-gate .gate-text {
        font-size: 9rem;
        margin-left: 1rem;
        margin-bottom: 1rem;
    }

    .vms-container .vms-body table th {
        font-size: 1.7rem;
        line-height: 1rem;
    }

    .vms-container .vms-body table td {
        font-size: 1.7rem;
        line-height: 1rem;
    }

    .vms-container .vms-body .gate-box-container {
        font-size: 2.5rem;
        line-height: 1.5rem;
    }

    .vms-container .vms-body td.platform-box-container {
        font-size: 2.5rem;
        line-height: 1.5rem;
    }


    .vms-container .vms-body td.destination-box-container .destination-text {
        font-size: 2rem;
    }

    .vms-container .vms-header .vms-time {
        font-size: 8rem;
        line-height: 8rem;
    }

    .vms-container .vms-header .vms-date {
        font-size: 2.7rem;
        line-height: 2.7rem;
    }
}

/* ===========
    MODERN LOGIN PAGE STYLES
   =============*/

/* 1. The main page wrapper */
.login-page-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: #f0f2f5;
}

/* 2. The modern login card */
.login-card-modern {
    max-width: 450px;
    width: 100%;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: none;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
}

/* 3. Style for validation messages */
.login-page-wrapper .validation-message {
    font-size: 0.8em;
    color: var(--bs-danger);
    margin-top: 0.25rem;
    display: block; /* Ensure it's on its own line */
}

.login-logo{
    width:100px;
    height: 100px;
}

.login-footer{
    color:gray;
}

.login-btn {
    background-color: var(--driverapp-primary);
    border:none;
}

.login-btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--driverapp-primary2) !important;
    border-color: var(--bs-btn-hover-border-color);
}

.login-btn:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--driverapp-primary2);
}

.login-btn:focus-visible {
    background-color: var(--driverapp-primary2);
}

/* ===========
    TRIP PAGE STYLES
   =============*/

/* 1. Set a light gray background for the scroll area */
.trip-list-scroll {
    background-color: #f0f2f5;
    /* Add padding around the entire scroll area */
    padding: 1rem; 
}

/* 2. Style the new trip card */
.trip-card-modern {
    border: none; /* Remove default border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Softer, modern shadow */
    border-radius: 0.75rem; /* Slightly more rounded */
}

.main-footer{
    display:flex;
    justify-content: center;
}

.layout-main{
    padding:0 !important;
}

.layout .layout-header {
    background-color: var(--driverapp-primary);
    height: var(--bb-layout-header-height);
    color: var(--bb-layout-header-color);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: sticky;
    z-index: 1035;
    border-bottom: 1px solid var(--driverapp-primary2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.layout .layout-header h4 {
    color:white;
}

.dropdown-logout .dropdown-menu {
    padding: 0;
    overflow: hidden;
    border-color: var(--driverapp-primary2);
    border-radius:1rem;
}
.dropdown-logout .dropdown-user {
    background-color: var(--driverapp-primary2);
    color: white;
}


/* ===========
    PROFILE PAGE STYLES
   =============*/

/* 1. Sets the light gray page background */
.profile-page-wrapper {
    padding: 1.5rem;
    background-color: #f0f2f5;
    min-height: calc(100vh - var(--header-height));
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
}

/* 2. Styles the white header box */
.profile-header {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 3. Styles the large profile picture */
.profile-pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover; /* Prevents image from stretching */
    border: 3px solid var(--driverapp-primary);
}

.profile-info {
    margin-left: 1rem;
}

/* 4. Styles the new info cards */
.modern-card {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 0.75rem;
}

/* 5. Styles the clean key/value list items */
.profile-list-item {
    display: flex;
    /* REMOVED justify-content: space-between; */
    align-items: center;
    padding: 1rem;
}

    /* Icon and label text */
    .profile-list-item span {
        color: var(--bs-gray-600);
    }

    /* Icon color */
    .profile-list-item i {
        color: var(--bs-gray-500);
        margin-right: 1rem;
        width: 20px; /* Aligns all icons */
        text-align: center;
    }

    /* The actual value */
    .profile-list-item strong {
        color: var(--bs-gray-900);
        text-align: right;
        /* THIS IS THE FIX:
      'margin-left: auto' pushes the value all the way to the right,
      forcing the labels to align.
    */
        margin-left: auto;
        padding-left: 1rem; /* Adds space between label and value */
    }

.breadcrumb-item a, .btn-link {
    color: var(--driverapp-primary);
}

.driverapp-btm-primary {
    background-color: var(--driverapp-primary);
    border-color: var(--driverapp-primary);
}

.driverapp-btm-primary:hover {
    background-color: var(--driverapp-primary2);
    border-color: var(--driverapp-primary2);
}
.driverapp-btm-primary:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--driverapp-primary2);
}

/*Loading progress style*/
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgb(24 234 255) !important;
}

.driverapp-bg-primary{
    background-color: var(--driverapp-primary2);
}

/* Blazor's unhandled-exception banner.
   index.html links this stylesheet but not css/site.css, where these rules used to live only,
   so without them the banner rendered as a plain visible div on every page load. Blazor's own
   JS flips display to block when an unhandled exception actually occurs. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1080;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* the trip that needs the driver next: accent border so it stands out in the list */
.trip-card-modern.trip-card-next {
    border: 2px solid var(--bs-primary) !important;
    box-shadow: 0 .25rem .75rem rgba(13, 110, 253, .15);
}

/* bottom navigation (DriverMainLayoutView): fixed, thumb height, safe-area aware */
.driver-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .05);
    padding-bottom: env(safe-area-inset-bottom);
}

.driver-bottom-nav-item {
    flex: 1 1 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    color: #6c757d;
    font-size: .75rem;
    text-decoration: none;
}

.driver-bottom-nav-item i { font-size: 1.15rem; }

.driver-bottom-nav-item.active {
    color: var(--driverapp-primary, var(--bs-primary));
    font-weight: 600;
}

.driver-bottom-nav-spacer { height: calc(64px + env(safe-area-inset-bottom)); }

/* pre-depart checklist: Previous / Next stay at the bottom of the scrolling checklist */
.pdc-step-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fff;
    padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.pdc-step-bar .btn { min-height: 44px; min-width: 7.5rem; }

/* offline notice (OfflineBanner) under the header on every signed-in page */
.driver-offline-bar {
    position: sticky;
    top: 0;
    z-index: 1031;
    background: #fff3cd;
    color: #664d03;
    border-bottom: 1px solid #ffe69c;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
}

/* checklist items: the labelled Pass / Fail buttons drop under the item text on narrow phones */
.checklist-section .card-body > .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: .5rem;
}

.checklist-status .btn { white-space: nowrap; }

/* Change Bus: transfer ticks as full-width, thumb-sized rows */
.navitap-tick-row { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem .75rem .5rem 2.4rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem; margin-bottom: .4rem; }
.navitap-tick-row .form-check-input { width: 1.4rem; height: 1.4rem; margin-top: 0; }
.navitap-tick-row .form-check-label { flex: 1; }

/* BM | EN switch in the header and on the sign-in page */
.driver-language { background: rgba(0, 0, 0, .55); border-radius: .5rem; padding: 2px; margin-right: .5rem; }
.driver-language .btn { min-width: 44px; min-height: 36px; font-weight: 600; }
.driver-language .btn-outline-light { border-color: transparent; }

/* profile: tap-to-call / tap-to-email values sit on the right like the other values */
.profile-list-item > .profile-value-link { margin-left: auto; padding-left: 1rem; text-align: right; }

/* phones: the header keeps the title, BM | EN and the avatar; the name moves into the avatar menu */
@media (max-width: 575.98px) {
    .profile-driver .logout-text { display: none; }
}

/* Pinch-zoom is allowed again (the viewport no longer blocks it), so the page must not zoom by
   itself: iPhone Safari zooms in on any input under 16px when it is tapped. */
input, select, textarea, .form-control, .form-select {
    font-size: max(16px, 1em) !important;
}